/**
 * Header — Gg (F5)
 *
 * Figma node 2:549 (desktop) + mobile mock 2011:96 / header 2011:97 (D1).
 * Alain's binding requirements (decision-log "Header composition (F5)"):
 *   (a) nav bar bg #fffefa (base token) — NOT the inherited NHC red band;
 *   (b) CTA "Get in Touch" as a menu-item button style (class `menu-cta`),
 *       client-managed via Appearance → Menus — never a hard-coded "Donate";
 *   (c) search slot kept but dormant (hidden), matching the Figma header
 *       component's hidden search icon;
 *   (d) the secondary top strip renders NOTHING unless a real secondary menu is
 *       assigned — no empty band, no "Assign a menu" placeholder.
 *
 * NEW dedicated partial (file-isolation rule). It overrides the NHC-era
 * header/nav rules in assets/css/global.css, which assume a red/dark bar with
 * white chrome. Pattern partials glob-enqueue AFTER kd-global (inc/enqueue.php),
 * so equal-or-higher-specificity rules here win on normal cascade order — no
 * !important needed. Colours/sizes reference --kd-* / --wp--preset tokens, never
 * raw hex (the one exception is the Figma drop-shadow alpha, which is not a
 * palette colour — global.css's own --kd-shadow-* use literal rgba the same way).
 *
 * HOW A MENU ITEM BECOMES THE CTA BUTTON: add the CSS class `menu-cta` to the
 * item (Appearance → Menus → item → CSS Classes). It then renders as the red
 * primary button on desktop and in the mobile panel. Label + link stay the
 * client's to manage — the seeded item is "Get in Touch" → /contact/.
 */

/* ══ (a) Nav bar — single cream tier ═══════════════════════════════════════════
   bg #fffefa comes from the has-base-background-color block class in header.html.
   Height + the Figma drop-shadow (2:549: 0 4px 10px 2px rgba(0,0,0,.1)).
   The 98px min-height is INTENTIONAL at every breakpoint — it out-specifies
   global.css's NHC-era 72px mobile bar (global.css:1161) on purpose: the D1 mock
   2011:97 draws a ~100px mobile header, so the taller bar is correct on mobile too
   (40px wordmark centred with ~29px above/below, matching the mock). */
.kd-site-header .kd-mainbar {
	min-height: 98px;
	box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1);
}

/* ══ (d) Secondary top strip — dormant unless a real secondary menu exists ══════
   Gracie is single-tier (decision-log). The inherited NHC top strip renders
   NOTHING when no secondary menu is assigned — no empty maroon band, no admin
   "Assign a menu" placeholder (that placeholder is .kd-nav-empty, never
   .kd-menu-wrap--secondary). The strip reveals only if a real secondary menu is
   ever assigned (wp_nav_menu then outputs .kd-menu-wrap--secondary). */
.kd-site-header .kd-topbar {
	display: none;
}
.kd-site-header .kd-topbar:has(.kd-menu-wrap--secondary) {
	display: block;
}

/* ══ Brand wordmark — horizontal "Gracie / governance" (2:549: 121×53 at gutter) ═
   Own class (not the NHC circular .kd-brand-badge), so none of the badge
   overflow / scroll-shrink rules apply. margin-right:auto pushes the nav + CTA
   to the right on desktop and the hamburger to the right on mobile. */
.kd-site-header .kd-brand-wordmark {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	line-height: 0;
	flex-shrink: 0; /* never let the flex row squish the wordmark out of aspect */
}

.kd-site-header .kd-brand-wordmark img {
	display: block;
	height: 53px;
	width: auto;
	max-width: 100%;
}

/* ══ (a) Primary nav links — black on cream, maroon on hover ════════════════════
   global.css paints menu links white (--kd-nav-link, for the red bar). On the
   cream bar they are black (contrast); hover maroon (D2 Nav/Link 2010:124).
   Family/weight/size stay the --kd-nav-* defaults (Public Sans Medium 16px). */
.kd-mainbar .kd-menu--primary {
	flex-wrap: nowrap;
}

.kd-mainbar .kd-menu--primary a {
	color: var(--kd-color-contrast);
	line-height: 1.5; /* 24/16 */
	white-space: nowrap;
}

.kd-mainbar .kd-menu--primary > li > a:hover,
.kd-mainbar .kd-menu--primary > li > a:focus-visible {
	color: var(--kd-color-secondary); /* maroon #900000 */
	opacity: 1;
}

/* Active page — 4px red underline under the current item, spanning the item's
   own label width (Sara, 2026-09: was a fixed 45px from the Figma comp — reads
   wrong on labels shorter/longer than that; the link itself carries no
   horizontal padding — see the plain `.kd-menu--primary a` rule above, gap
   between items is flex `gap`, not padding — so left:0/right:0 on the
   `::after` already tracks the visible text box exactly, not a padded
   hit-area). Excludes the CTA item (that one keeps its own button padding). */
.kd-mainbar .kd-menu--primary > li.current-menu-item:not(.menu-cta) > a {
	position: relative;
}
.kd-mainbar .kd-menu--primary > li.current-menu-item:not(.menu-cta) > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 4px;
	background-color: var(--kd-color-primary); /* red-orange #d62609 */
}

/* ══ (b) "Get in Touch" CTA — a menu item carrying the primary button style ═════
   Any primary/mobile menu item with the `menu-cta` class. Reuses the F3 button
   tokens (--kd-btn-*, DM Sans, 49px, square) so it is byte-for-byte the site's
   only button style — no new colours, no hard-coded hex. */
.kd-mainbar .kd-menu--primary li.menu-cta > a,
.kd-menu--mobile li.menu-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	padding: 0 30px;
	background-color: var(--kd-btn-bg); /* #d62609 */
	color: var(--kd-btn-fg); /* white */
	font-family: var(--kd-font-buttons); /* DM Sans */
	font-size: var(--kd-size-btn); /* 17px */
	font-weight: 600; /* SemiBold */
	line-height: 1.18; /* 20/17 */
	border-radius: var(--kd-radius-0); /* square — not a pill */
	opacity: 1;
	transition: background-color var(--kd-transition-fast);
}

.kd-mainbar .kd-menu--primary li.menu-cta > a:hover,
.kd-menu--mobile li.menu-cta > a:hover {
	background-color: var(--kd-btn-bg-hover); /* maroon #900000 */
	color: var(--kd-btn-fg);
	opacity: 1;
}

.kd-mainbar .kd-menu--primary li.menu-cta > a:active,
.kd-menu--mobile li.menu-cta > a:active {
	background-color: var(--kd-btn-bg-active); /* #6b0000 */
}

.kd-mainbar .kd-menu--primary li.menu-cta > a:focus-visible,
.kd-menu--mobile li.menu-cta > a:focus-visible {
	outline: 2px solid var(--kd-btn-focus-ring); /* maroon, offset 2px (D2) */
	outline-offset: 2px;
}

/* ══ (a11y) Keyboard focus ring on the cream bar ═══════════════════════════════
   global.css:894-897 recolours the focus outline to --kd-color-base for
   .kd-mainbar / .kd-topbar :focus-visible — that was the light ring for the OLD
   red bar. On the new cream bar (--kd-color-base = #fffefa = the bar background)
   it is INVISIBLE → WCAG 2.4.7 / 1.4.11 fail on the site's main keyboard path
   (the non-CTA nav links AND the hamburger, both inside .kd-mainbar). Restore a
   visible ring in maroon (--kd-color-secondary #900000, ~9:1 vs the cream bar).
   Full outline (not just colour) so it is guaranteed solid + visible regardless
   of the UA base style; matches the CTA's own 2px/offset-2px focus ring. */
.kd-site-header .kd-mainbar :focus-visible,
.kd-site-header .kd-topbar :focus-visible {
	outline: 2px solid var(--kd-color-secondary);
	outline-offset: 2px;
}

/* ══ (c) Search slot — present in markup, visually dormant ══════════════════════
   Matches the Figma header component's hidden search icon (no search exists yet).
   The wp:search block stays in header.html; enable later by removing this rule
   and wiring search. */
.kd-header-search {
	display: none;
}

/* ══ Header actions cluster — dormant on desktop ═══════════════════════════════
   On desktop the only actionable item (hamburger) is hidden and search is
   dormant, so the cluster collapses — this lets the CTA hug the content edge
   (2:549) with no trailing flex gap. It returns to hold the hamburger on mobile,
   keyed to the SAME max-width:768 switch global.css uses to show the hamburger
   (so the two never disagree at the 768 boundary). */
.kd-site-header .kd-header-actions {
	display: none;
}
@media (max-width: 768px) {
	.kd-site-header .kd-header-actions {
		display: flex;
	}
}

/* ══ Desktop nav fit — tighten inter-item gap as the bar narrows ════════════════
   The 6-item nav (5 links + CTA) is wide; the design gap (--kd-nav-gap 1.75rem)
   only fits near 1440. Step it down so the full horizontal nav still fits at the
   1024 desktop breakpoint — the lowest width it shows before collapsing to the
   hamburger below 1024 (see the collapse block below). */
@media (max-width: 1200px) {
	.kd-mainbar .kd-menu--primary {
		gap: 1.25rem;
	}
}
@media (max-width: 1024px) {
	.kd-mainbar .kd-menu--primary {
		gap: 0.85rem;
	}
	.kd-mainbar .kd-menu--primary li.menu-cta > a {
		padding: 0 22px;
	}
}

/* ══ Nav collapse breakpoint ───────────────────────────────────────────────────
   ⚠ DEVIATION FROM D1 (<768), flagged for designer review. The full horizontal
   nav physically cannot fit below ~900px: the 5 link labels alone measure ~503px
   + wordmark 121 + CTA 163 = ~787px, which already exceeds the ~720px content
   width at 768 even at zero gap (and forcing it squishes the wordmark out of
   aspect). So the desktop nav shows only where it fits cleanly (≥1024, verified)
   and collapses to the hamburger below 1024. global.css already shows the
   hamburger ≤768; this extends that up to <1024. FLAG: confirm the collapse
   breakpoint, or shorten the nav labels if a wider desktop-nav range is wanted. */
@media (max-width: 1023.98px) {
	.kd-mainbar .kd-menu-wrap--primary {
		display: none;
	}
	.kd-site-header .kd-hamburger {
		display: flex;
	}
	.kd-site-header .kd-header-actions {
		display: flex;
	}
}

/* ══ Mobile ────────────────────────────────────────────────────────────────────
   ≤768 the top strip is hidden (global switch). Wordmark shrinks to the mock size
   (2011:97: 91×40 @ 20px gutter); hamburger bars go dark on the cream bar. */
@media (max-width: 768px) {
	.kd-site-header .kd-brand-wordmark img {
		height: 40px;
	}
}

/* Hamburger — dark bars on the cream bar (global paints them white for the red
   bar). Setting the token on .kd-hamburger cascades to the .kd-hamburger__bar
   children that read it. */
.kd-site-header .kd-hamburger {
	--kd-burger-bar: var(--kd-color-contrast);
}

/* ══ Off-canvas panel — full-width, cream (D1: "full-width panel") ═════════════
   ⚠ The OPEN-panel visual is DERIVED, not designed: no mobile panel frame exists
   in Figma (analysis §4.1). Derived from the cream header + palette — flagged for
   designer review. Overrides the NHC red 60%-width slide-in. Redeclaring the
   panel tokens here re-resolves global.css's own var() rules (bg, width, and the
   fg colour inherited by the links + close button). */
.kd-mobile-panel {
	--kd-mobile-panel-bg: var(--kd-color-base); /* cream #fffefa */
	--kd-mobile-panel-fg: var(--kd-color-contrast); /* black — links + close btn */
	--kd-mobile-panel-width: 100%;
	--kd-mobile-panel-max: 100%;
	background: var(--kd-color-base);
	color: var(--kd-color-contrast);
	width: 100%;
	max-width: 100%;
}

/* Row dividers + close button recoloured for the cream surface (global uses
   white-alpha, invisible on cream). */
.kd-mobile-panel .kd-menu--mobile li {
	border-bottom-color: rgba(0, 0, 0, 0.1);
}

.kd-mobile-panel .kd-menu--mobile > li > a:hover,
.kd-mobile-panel .kd-menu--mobile > li > a:focus-visible {
	color: var(--kd-color-secondary); /* maroon */
}

.kd-mobile-panel .kd-mobile-close {
	background: rgba(0, 0, 0, 0.06);
}
.kd-mobile-panel .kd-mobile-close:hover,
.kd-mobile-panel .kd-mobile-close:focus-visible {
	background: rgba(0, 0, 0, 0.12);
}

/* CTA in the panel: separate it from the last link, drop the row divider, and
   render it EXPLICITLY full-width (approved) — override the shared inline-flex
   button rule above rather than leaning on global's .kd-menu--mobile a{width:100%}
   so the code states the intent. Full-width red primary button at the panel foot. */
.kd-mobile-panel .kd-menu--mobile li.menu-cta {
	border-bottom: none;
	margin-top: 1.25rem;
}
.kd-mobile-panel .kd-menu--mobile li.menu-cta > a {
	display: flex;
	width: 100%;
}