/* ============================================================
   League of Cooking (Limoncella-style) — header, announcement bar, nav.
   Values measured from live Limoncella computed styles 2026-07-19, REVISED
   same day after owner side-by-side screenshot review found real gaps:
   announcement bar bg was wrongly transparent (should be solid yellow),
   social icons/CTA badge were missing from the announcement bar, no visible
   search input existed, duplicate logo+site-title text was showing.
   ============================================================ */

/* ---- Announcement bar: solid SAGE, promo+utility+social left, CTA badge right.
   Fix 2026-07-22 (owner-flagged: "header remove jaune"): the bar was the default
   scheme's bright yellow #FDE367, which clashed with the sage/cream palette the
   rest of the site uses. Now palette5 sage with white text — see the reasoning
   note on --lim-announcement-bg in tokens.css. Every child element below had a
   dark-ink colour hard-coded for the old light-yellow bar; they now inherit the
   bar's own ink token so the whole bar stays readable. ---- */
.lim-announcement {
	background: var(--lim-announcement-bg);
	color: var(--lim-announcement-ink);
	border-bottom: 1px solid var(--lim-border);
}
.lim-announcement__inner {
	max-width: var(--lim-container-wide);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: var(--lim-nav-secondary-size);
	min-height: 60px;
}
.lim-announcement__left {
	display: flex;
	align-items: center;
	gap: var(--lim-space-6);
	flex-wrap: wrap;
	padding: var(--lim-space-2) 0;
}
.lim-announcement__promo a {
	color: var(--lim-announcement-ink);
	text-decoration: none;
	font-weight: 500;
	transition: color .2s ease;
}
/* Hover cue. On the OLD solid-sage bar this was the blush highlight (palette2),
   because clay sat too close to sage in value to read as a state change. After
   the 2026-08-31 bright pass the bar is a pale wash, so blush now vanishes into
   it and clay is the one that reads — the two swapped roles. */
.lim-announcement__promo a:hover { color: var(--lim-accent); }
.lim-announcement__nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--lim-space-4);
}
.lim-announcement__nav a {
	color: var(--lim-announcement-ink);
	font-size: var(--lim-nav-secondary-size);
	font-weight: var(--lim-nav-secondary-weight);
	text-decoration: none;
	transition: color .2s ease;
}
.lim-announcement__nav a:hover { color: var(--lim-accent); }
.lim-announcement__social {
	display: flex; gap: var(--lim-space-2);
}
.lim-announcement__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	color: var(--lim-announcement-ink);
	transition: color .2s ease;
}
.lim-announcement__social a:hover { color: var(--lim-accent); }
.lim-announcement__social svg { width: 18px; height: 18px; }

/* CTA badge: was clay-on-sage (near-identical luminance, badge disappeared),
   then a white plate + clay type. After the 2026-08-31 bright pass the bar
   itself is near-white, so the plate needs a hairline to stay a distinct
   object — the type colour keeps doing the accent work. */
.lim-announcement__cta {
	border-left: 1px solid var(--lim-border);
	border-right: 1px solid var(--lim-border);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--lim-surface);
	color: var(--lim-accent);
	text-decoration: none;
	padding: var(--lim-space-2) var(--lim-space-6);
	text-align: center;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.lim-announcement__cta:hover { background: var(--lim-accent); color: var(--lim-surface); }
.lim-announcement__cta-eyebrow {
	font-size: 11px; text-transform: lowercase; letter-spacing: .5px; opacity: .9;
}
.lim-announcement__cta-title {
	font-family: var(--lim-font-heading); font-weight: 700; font-size: 15px; text-transform: none;
}

/* ---- Main header row ----
   MEASURED: Limoncella's main header row is sticky on scroll while the
   announcement bar above it scrolls away normally (confirmed via scroll test
   against the live reference 2026-07-19). */
#masthead.site-header {
	/* #masthead ID selector in Kadence's own header.min.css sets position:relative
	   at higher specificity than a plain class selector - match it exactly here. */
	background: var(--lim-surface); position: sticky !important; top: 0; z-index: 999;
}
.site-main-header-wrap { background: var(--lim-surface) !important; border-bottom: none !important; box-shadow: 0 2px 8px rgba(17,57,84,0.08) !important; }

/* Site title text duplicated the graphic logo - hide it, matching Limoncella's
   single-wordmark treatment (their "logo" IS styled text, but only one instance). */
.site-header .site-title { display: none; }

/* ---- Primary nav (measured: Figtree 18px/600) ---- */
.main-navigation .menu-item > a,
.main-navigation .menu-item > a:visited {
	font-family: var(--lim-font-body);
	font-size: var(--lim-nav-primary-size) !important;
	font-weight: var(--lim-nav-primary-weight) !important;
	color: var(--lim-ink-dark) !important;
	position: relative;
	transition: color .2s ease;
}
.main-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:focus-visible {
	color: var(--lim-accent) !important;
}
.main-navigation .menu-item.current-menu-item > a {
	color: var(--lim-accent) !important;
}

/* ---- Nav hover animation (owner-flagged 2026-07-22: "utiliser meme animation
   on hover du menu"). Ours only cross-faded the link colour; the real theme
   draws a 2px BAR ABOVE the label that wipes open from the centre.
   Copied verbatim from Limoncella's own style.css (the
   `.header-menu-container>.menu:first-of-type>.menu-item>a:before` rule):
     top:10px; left:9px; width:calc(100% - 18px); height:2px;
     background:#343434; transform:scaleX(0) -> scaleX(1); transition:all .25s ease
   …and it is desktop-only there (min-width:769px), so the mobile drawer keeps
   a plain colour change. Applied to our `.main-navigation` markup. ---- */
@media (min-width: 769px) {
	.main-navigation .menu-item > a::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 9px;
		width: calc(100% - 18px);
		height: 2px;
		background-color: #343434;
		transform: scaleX(0);
		transition: all .25s ease;
	}
	.main-navigation .menu-item > a:hover::before,
	.main-navigation .menu-item > a:focus-visible::before {
		transform: scaleX(1);
	}
}

/* MEASURED: "Recipe Index" (always the first primary-nav item, both here and on
   Limoncella) carries a permanent decorative hand-drawn squiggle underneath it -
   this is a static design flourish on that one item, not a hover/current-page
   state (confirmed present across every scroll position on the live reference). */
.main-navigation .menu-item:first-child > a {
	position: relative;
}
/* Fix 2026-07-22: two things were wrong here. (a) Shape — ours was a smooth
   sine wave (Q/T curve); the reference's `lemoncella_small-border.svg` is a
   sharp ZIGZAG (triangle wave, ~19 peaks across its 110.76×5.35 viewBox, i.e.
   a 5.78-unit period at 3.1 amplitude). (b) Colour — ours was still the OLD
   blue #113954 from the abandoned blue base; the reference strokes it #333.
   Redrawn below as our own equivalent zigzag (a stroked polyline authored from
   the measured geometry — we do NOT ship Restored316's actual SVG file, per the
   no-pirated-assets constraint), and stretched to 100% of the link width with
   `no-repeat`, exactly as the reference does it. */
.main-navigation .menu-item:first-child > a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -8px; height: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110.8 5.4' preserveAspectRatio='none'%3E%3Cpath d='M0 4.85 L2.89 1.75 L5.78 4.85 L8.67 1.75 L11.56 4.85 L14.45 1.75 L17.34 4.85 L20.23 1.75 L23.12 4.85 L26.01 1.75 L28.9 4.85 L31.79 1.75 L34.68 4.85 L37.57 1.75 L40.46 4.85 L43.35 1.75 L46.24 4.85 L49.13 1.75 L52.02 4.85 L54.91 1.75 L57.8 4.85 L60.69 1.75 L63.58 4.85 L66.47 1.75 L69.36 4.85 L72.25 1.75 L75.14 4.85 L78.03 1.75 L80.92 4.85 L83.81 1.75 L86.7 4.85 L89.59 1.75 L92.48 4.85 L95.37 1.75 L98.26 4.85 L101.15 1.75 L104.04 4.85 L106.93 1.75 L109.82 4.85' fill='none' stroke='%23333333' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 6px;
}

/* ---- Visible search box in the main nav row (measured: 265x49, border #6C8BB0) ---- */
.lim-header-search { display: flex; align-items: center; margin-left: var(--lim-space-6); }
.lim-header-search__form { display: flex; align-items: stretch; width: 220px; }
/* `input.` prefix is load-bearing, not decoration: Kadence styles the field via
   `input[type="search"]` (specificity 0,1,1) and a bare `.lim-header-search__input`
   (0,1,0) silently loses — the border stayed Kadence's blue-grey #CBD5E0 through
   every pass until it was caught by computed style on 2026-08-31. Adding the
   element ties the specificity, and our file loads later, so ours wins. */
input.lim-header-search__input {
	flex: 1;
	border: 1px solid var(--lim-border);
	border-right: none;
	padding: 0 var(--lim-space-3);
	height: 46px;
	font-family: var(--lim-font-body);
	font-size: 15px;
	color: var(--lim-ink-dark);
	background: var(--lim-surface);
}
.lim-header-search__submit {
	width: 46px; height: 46px;
	border: 1px solid var(--lim-border);
	background: var(--lim-surface);
	color: var(--lim-ink-muted);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.lim-header-search__submit:hover { background: var(--lim-accent); color: #fff; }

/* Hide Kadence's native icon-only search toggle on desktop (the visible box
   above replaces it) but keep it on mobile - the box is hidden there instead. */
@media (min-width: 1024px) {
	.site-header .search-toggle-open { display: none; }
}

/* ---- Mobile drawer ---- */
#mobile-menu .menu-item > a {
	color: var(--lim-ink-dark) !important;
	font-family: var(--lim-font-body);
}
#mobile-menu .menu-item.current-menu-item > a {
	color: var(--lim-accent) !important;
	font-weight: 700;
}

@media (max-width: 1023px) {
	.lim-announcement__inner { flex-direction: column; }
	.lim-announcement__left { flex-direction: column; align-items: flex-start; gap: var(--lim-space-2); padding: var(--lim-space-3) 0; }
	.lim-announcement__cta { padding: var(--lim-space-2); width: 100%; }
	.lim-header-search { display: none; } /* mobile uses the drawer's own search */
}