/*
Theme Name: Exis Child
Theme URI: https://exisnutrition.gr
Description: Child theme of Twenty Twenty-Four for exisnutrition.gr SEO work.
Author: Exis Nutrition
Template: twentytwentyfour
Version: 1.0.1
Text Domain: exis-child
*/

/* Force the page background to #FFFFF1 everywhere — overrides the global
   styles' html{background:#F8ECD9} peek color and any section left without
   an explicit background, per explicit request. */
html,
body,
body.page-template-full-width,
body.custom-background {
	background-color: #FFFFF1 !important;
	background-image: none !important;
}

/* Task 4: SEO kicker line added above the visual "Χτίζοντας τη συνήθεια" hero
   heading, kept part of the same <h1> for SEO but styled smaller so the
   original hero design isn't disturbed. */
.exis-hero__heading .exis-hero__kicker {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.72;
	margin-bottom: 0.35em;
}

/* Task 2: Rank Math breadcrumbs — small, muted trail instead of a plain
   full-size text line, styled to match the site's palette. */
.rank-math-breadcrumb {
	padding: 14px 32px;
	font-size: 0.8rem;
}
.rank-math-breadcrumb p {
	margin: 0;
	color: #757B67;
}
.rank-math-breadcrumb a {
	color: #757B67;
	text-decoration: none;
}
.rank-math-breadcrumb a:hover {
	color: #37501F;
	text-decoration: underline;
}
.rank-math-breadcrumb .separator {
	margin: 0 0.4em;
	opacity: 0.6;
}
.rank-math-breadcrumb .last {
	color: #37501F;
	font-weight: 600;
}

/* Ραντεβού page: white card behind the Google Calendar embed, page background
   stays as-is everywhere else. */
#ed-appt-iframe {
	background: #FFFFFF;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 12px;
}


/* Header: Facebook/Instagram pill, top-right corner. .eks-header already has
 *    position:relative so this sits absolutely without disturbing its centered
 *    flex layout. Idle icons stay muted olive to match the palette; on hover
 *    each crossfades to its real brand color (Facebook blue / Instagram
 *    gradient) instead of the site's terracotta accent. */
.eks-header-social {
	position: absolute;
	top: 14px;
	right: 20px;
	z-index: 21;
}
.eks-header-social__pill {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid rgba(58, 56, 38, 0.14);
	border-radius: 999px;
	padding: 9px 16px;
}
.eks-header-social__pill a {
	display: flex;
	text-decoration: none;
}
.eks-icon-stack {
	position: relative;
	width: 22px;
	height: 22px;
	display: block;
}
.eks-icon-stack svg {
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	transition: opacity 0.22s ease;
}
.eks-icon-base {
	color: #757B67;
	opacity: 1;
}
.eks-icon-brand {
	opacity: 0;
}
.eks-header-social__pill a:hover .eks-icon-base {
	opacity: 0;
}
.eks-header-social__pill a:hover .eks-icon-brand {
	opacity: 1;
}

@media (max-width: 781px) {
	.eks-header-social {
		top: 12px;
		right: 14px;
	}
	.eks-header-social__pill {
		gap: 10px;
		padding: 6px 10px;
	}
	.eks-icon-stack,
	.eks-icon-stack svg {
		width: 18px;
		height: 18px;
	}
}