/* ============================================================
   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 yellow/gold, promo+utility+social left, CTA badge right ---- */
.lim-announcement {
	background: var(--lim-announcement-bg);
}
.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-ink-dark);
	text-decoration: none;
	font-weight: 500;
}
.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-ink-dark);
	font-size: var(--lim-nav-secondary-size);
	font-weight: var(--lim-nav-secondary-weight);
	text-decoration: none;
}
.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-ink);
	transition: color .2s ease;
}
.lim-announcement__social a:hover { color: var(--lim-accent); }
.lim-announcement__social svg { width: 18px; height: 18px; }

.lim-announcement__cta {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--lim-accent);
	color: #fff;
	text-decoration: none;
	padding: var(--lim-space-2) var(--lim-space-6);
	text-align: center;
	white-space: nowrap;
}
.lim-announcement__cta:hover { background: var(--lim-accent-hover); }
.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;
}

/* 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;
}
.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' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3 T30 3 T40 3' fill='none' stroke='%23113954' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 20px 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; }
.lim-header-search__input {
	flex: 1;
	border: 1px solid var(--lim-steel-blue);
	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-steel-blue);
	background: var(--lim-surface);
	color: var(--lim-steel-blue);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.lim-header-search__submit:hover { background: var(--lim-steel-blue); 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 */
}