/* Header: utility bar + primary nav (desktop dropdowns, mobile overlay,
   search icon, CTA buttons). Renders in every template via parts/header.html,
   so splitting this out doesn't reduce per-page bytes — it exists purely to
   keep theme.css under the spec §8 cap. Always enqueued alongside theme.css
   (see ghn_enqueue_assets() in functions.php). Slice 4. */

/* Layer 1 — utility (secondary) bar: ~36px, hidden on mobile.
   Content constrained to 1440px. Transparent bg when inside hero-viewport. */
.wp-block-group.utility-bar {
	display: none;
	height: 36px;
	line-height: 1;
	overflow: visible;
	padding-left: max(20px, calc((100% - 1440px) / 2));
	padding-right: max(20px, calc((100% - 1440px) / 2));
}

@media (min-width: 768px) {

	.wp-block-group.utility-bar { display: flex; }
}

/* Utility social icons: 20px glyph + 6px padding = 32px visible box, fitting
   cleanly inside the 36px bar. CSS-3: the 44px WCAG 2.5.5 touch-target
   minimum is met via an invisible ::before hit-area overlay (below) rather
   than growing the visible/hover box — growing the visible padding to 44px
   made the hover background bleed above/below the 36px bar (review-gate
   finding on e1ed01a). */
.utility-bar .social-icon {
	position: relative;
	min-width: 20px;
	min-height: 20px;
	padding: 6px;
	border-radius: 2px;
}

.utility-bar .social-icon::before {
	content: "";
	position: absolute;
	inset: -6px;
}

/* QA-40: top-level nav items get a background hover (rgba(255,255,255,0.08)
   above); .social-icon links only inherited the generic text-color hover,
   which is invisible on an <img>-only link. Give it the same background. */
.utility-bar .social-icon:hover {
	background: rgba(255, 255, 255, 0.08);
}

.utility-bar .social-icon img {
	filter: brightness(0) invert(1);
}

/* 12px gap: each icon's ::before expands 6px per side (see above), so
   adjacent icons' invisible hit areas meet exactly at the gap midpoint
   with zero overlap. */
.utility-bar .utility-social-icons {
	gap: 12px;
}

.utility-bar a,
.utility-nav-wrap a {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	line-height: 1.2;
}

/* Top-level utility nav items: full-height hover area matching the 36px bar.
   Hover applied to the <li> so it includes both the link and the chevron button. */
.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
}

.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.utility-bar .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent-1);
}

/* Chevron icon: inherit color, visually integrated with parent item.
   QA-1: the button is a flex sibling of the link inside a flex/align-center
   parent, but without its own display:flex the SVG sits on its default
   inline baseline rather than centered within the button's box, reading as
   a couple px low against the adjacent menu-item text. */
.utility-bar .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
	background: none;
	border: none;
	padding: 0 0 0 4px;
	cursor: pointer;
}

.utility-bar .wp-block-navigation__submenu-icon svg {
	stroke: currentcolor;
}

/* Reduce gap between utility nav items — the 12px item padding provides spacing */
.utility-bar .wp-block-navigation__container {
	gap: 0;
}

/* Keep generic link hover for social icons etc */
.utility-bar a:hover,
.utility-nav-wrap a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

/* ===================================================================
   Primary Nav — sticky when outside .hero-viewport (scroll past hero).
   Also used on single pages where nav is NOT inside hero-viewport.
   =================================================================== */
.wp-block-template-part:has(.primary-nav-bar) {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--surface);
	margin-block: 0;
	overflow-x: clip;
}

/* Ensure the inner nav bar has no competing background — the wrapper handles it */
.primary-nav-bar.has-background {
	background-color: transparent;
}

/* Remove WP root blockGap on main when it follows the nav */
.wp-block-template-part:has(.primary-nav-bar) + .site-main {
	margin-top: 0;
}

/* Primary nav bar inner content — same max() padding as utility bar:
   20px minimum on narrow screens, auto-centers at 1440px on wider.
   Nav items left-aligned next to logo; CTAs pushed right via margin-left:auto. */
.primary-nav-bar {
	position: relative;
	height: 80px;
	width: 100%;
	align-items: center;
	gap: 20px;
	padding-left: max(20px, calc((100% - 1440px) / 2));
	padding-right: max(20px, calc((100% - 1440px) / 2));
	box-sizing: border-box;
}

/* Nav grows to fill space; CTAs pushed to far right */
.primary-nav-bar .site-nav-bar {
	flex: 1 1 auto;
}

.primary-nav-bar .header-cta-buttons {
	margin-left: auto;
	flex-shrink: 0;
}

/* On mobile: nav bar above hero. Pull the primary-nav template-part up
   with order:-1 so it renders before the hero-viewport visually.
   DOM order (and thus tab order) is unchanged — only visual reflow. */
@media (max-width: 767px) {

	.wp-site-blocks { display: flex; flex-direction: column; }

	/* Dark nav bar on mobile — matches footer, white hamburger icon */
	.wp-block-template-part:has(.primary-nav-bar) {
		order: -1;
		background: var(--wp--preset--color--primary-dark);
		border-bottom: none;
	}

	/* Reduce nav bar height on mobile — 56px is sufficient for logo + hamburger */
	.primary-nav-bar { height: 56px; }

	/* Scale down the logo on mobile to fit 56px bar */
	.primary-nav-logo img { max-height: 40px; width: auto; }

	/* Nav wrapper transparent on mobile so dark nav bar bg shows through */
	.primary-nav-bar .site-nav-bar {
		background-color: transparent;
	}

	/* Hamburger icon: white on dark background */
	.primary-nav-bar .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--surface);
	}
}

/* Nav logo: hidden by default, fades in when hero logo scrolls out of view.
   The .nav-logo-visible class is toggled by IntersectionObserver in functions.php. */
.primary-nav-logo {
	flex-shrink: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.primary-nav-logo.nav-logo-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.primary-nav-logo .custom-logo-link,
.primary-nav-logo img {
	display: block;
}

/* Nav bar inner wrapper — white bg on desktop (was inline style, moved to CSS
   so mobile can override to transparent for the dark nav bar). */
@media (min-width: 768px) {

	.primary-nav-bar .site-nav-bar {
		background-color: var(--wp--preset--color--surface);
	}
}

.primary-nav-bar .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	padding: 8px 12px;
}

/* Prevent nav overflow: shrink link padding on mid-width screens */
@media (max-width: 1100px) {

	.primary-nav-bar .wp-block-navigation a { padding: 8px 6px; }

	/* Caret absorbs the reduced right padding too */
	.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-icon { padding-right: 6px; }
}

/* Below 900px the nav items won't fit — ensure the overflow button shows */
@media (max-width: 900px) {

	.primary-nav-bar .site-nav-bar { overflow: hidden; }
}

.primary-nav-bar .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Dropdown caret — tight against the link text, inherits hover color.
   WP core renders a <button class="wp-block-navigation__submenu-icon"> with
   an SVG chevron as a sibling of the link inside .has-child items.

   Design approach (per W3C WAI fly-out menu pattern, WCAG 2.4.4 / 4.1.2):
   - Button is a separate focusable element (not merged into the link)
   - Button has aria-expanded + aria-label (set by WP core)
   - SVG uses stroke:currentColor so it inherits color on hover/focus
   - Caret is visually part of the menu item: link's right padding removed,
     caret absorbs it so inter-item spacing is consistent with/without carets.

   WP core sizes the button at 0.6em with SVG inheriting. We keep that
   approach but add right padding so the caret functions as the item's
   trailing edge for consistent inter-item gaps. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: currentcolor;
	background: none;
	border: none;
	width: 0.6em;
	height: 0.6em;
	padding: 0 12px 0 4px;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
}

/* SVG sizing — must beat WP core's `.wp-block-navigation
   .wp-block-navigation__submenu-icon svg { width: inherit }` (0,2,1).
   Core's inherit resolves to 0 when the button uses em sizing in a flex
   context. We override with explicit 10px and higher specificity (0,4,1). */
.primary-nav-bar .wp-block-navigation .has-child > .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	stroke: currentcolor;
	fill: none;
	flex-shrink: 0;
}

/* Parent item hover: caret follows the link color change */
.primary-nav-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-icon,
.primary-nav-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--primary);
}

/* Link inside .has-child: remove right padding (caret absorbs it) */
.primary-nav-bar .wp-block-navigation .has-child > .wp-block-navigation-item__content {
	padding-right: 0;
}

.primary-nav-bar .wp-block-navigation .has-child {
	display: flex;
	align-items: center;
}

/* Mobile overlay — dark background + white text. Specificity must beat WP's
   .wp-block-navigation:not(.has-background) ... (0,4,0). Doubled class bumps
   our selector to (0,5,0) so our colors win. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}

.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--surface);
}

/* Reset submenu containers inside the mobile overlay — must not render as white
   boxes. WP's default uses background:inherit which chains from our dark bg. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: none;
	box-shadow: none;
	border-top: none;
}

/* Close button: white on dark overlay */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--surface);
}

/* Tighten overlay layout: reduce top padding, add consistent item spacing,
   reduce submenu padding so parent-to-child gap isn't jarring. */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 40px;
}

/* All links in overlay: 44px minimum touch target (WCAG 2.5.5 AAA / Apple HIG).
   Uses min-height + flex so the tappable area covers the full row. */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open a,
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Top-level items: no extra padding — the 44px link height provides rhythm */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 0;
}

/* Submenu containers inside overlay: tighter padding, indented */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0 24px;
}

/* Submenu links: slightly smaller font + reduced opacity for hierarchy */
.primary-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 15px;
	opacity: 0.85;
	min-height: 40px;
}

/* Injected utility links — only visible inside the mobile overlay.
   Hidden on desktop. Shows as a separated section at the bottom of the hamburger menu. */
.mobile-utility-links {
	display: none;
}

.is-menu-open .mobile-utility-links {
	display: block;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-utility-links__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 8px;
}

.mobile-utility-links__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-utility-links__list a {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.mobile-utility-links__list a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Nested children (e.g. About → Staff, Board, etc.) */
.mobile-utility-links__sublist {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 2px 0 0;
}

.mobile-utility-links__sublist a {
	font-size: 15px;
	opacity: 0.85;
	min-height: 40px;
	display: flex;
	align-items: center;
}

/* Dropdown submenus — matches prod: white bg, teal links, clean borders.
   Prod uses > chevron indicator on parent items with children. */
.primary-nav-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.primary-nav-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	height: auto;
}

/* Desktop dropdown submenus — white bg, teal links, teal accent border on
   the edge adjacent to the nav item. Specificity (0,3,1) beats WP core's
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container (0,3,0)
   which sets border: 1px solid rgba(0,0,0,0.15) and would override our accent. */
.primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: 3px solid var(--wp--preset--color--primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	min-width: 220px;
	border-radius: 0 0 4px 4px;
}

/* Upward dropdowns — when the nav overlaps the hero bottom (before scrolling),
   open submenus above the nav bar so they don't overflow off-screen.
   .nav-dropdowns-up is toggled by scroll listener in functions.php. */
.nav-dropdowns-up .primary-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	top: auto;
	bottom: 100%;
	border: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.primary-nav-bar .wp-block-navigation__submenu-container a,
.primary-nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	display: block;
	padding: 10px 20px;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
	font-weight: 400;
	line-height: 1.4;
}

.primary-nav-bar .wp-block-navigation__submenu-container a:hover,
.primary-nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface-warm);
	color: var(--wp--preset--color--primary-dark);
}

/* Utility bar dropdown — dark teal bg, white links, matching prod */
.utility-bar .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.utility-bar .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	height: auto;
}

.utility-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--primary-dark);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	padding: 8px 0;
	min-width: 200px;
	border-radius: 0 0 4px 4px;
	/* FU-6: without this, the sticky primary nav bar paints over this dropdown
	   wherever the two sit in the same stacking context. Originally set to
	   150 against a documented (but incomplete) assumption that the primary
	   nav wrapper is always z-index:100 (navigation.css) and that hero pages
	   were exempt — re-verified live and found wrong: on any page with a
	   preceding .hero-viewport (front page, single posts with a hero),
	   context/hero.css elevates BOTH the utility bar's own wrapper and the
	   primary-nav wrapper to z-index:200, so 150 loses there. 210 clears both
	   the 100 (non-hero) and 200 (hero) cases with headroom to spare. */
	z-index: 210;
}

.utility-bar .wp-block-navigation__submenu-container a,
.utility-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--surface);
	padding: 8px 16px;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.utility-bar .wp-block-navigation__submenu-container a:hover,
.utility-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}

/* Hide CTA buttons under 1024px — not enough room alongside nav links.
   CTAs remain accessible via the bottom-of-page CTA band. */
@media (max-width: 1023px) {

	.primary-nav-bar .header-cta-buttons { display: none; }
}

/* When mobile overlay is open, show CTAs as a fixed bar at the bottom.
   html.has-modal-open is set by WP's Interactivity API on overlay open. */
@media (max-width: 1023px) {

	html.has-modal-open .primary-nav-bar .header-cta-buttons {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100001;
		background: var(--wp--preset--color--primary-dark);
		padding: 12px 20px;
		justify-content: center;
		gap: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* Hide search icon inside overlay CTA bar */
	html.has-modal-open .primary-nav-bar .header-search-icon { display: none; }
}

.header-cta-buttons { flex-shrink: 0; }

/* Search icon in primary nav — compact icon that expands to show input on focus.
   Input is absolutely positioned so it doesn't push other nav items off-screen. */
.header-search-icon {
	position: relative;
}

.header-search-icon .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 0;
}

.header-search-icon .wp-block-search__button {
	min-width: 40px;
	min-height: 40px;
	padding: 8px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
}

.header-search-icon .wp-block-search__input {
	position: absolute;
	right: 44px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	padding: 0;
	border: none;
	opacity: 0;
	/* QA-3: collapsed at width:0, but without this the absolutely-positioned
	   input still hit-tests (false I-beam cursor over the Donate button next
	   to it) — disable pointer events until it's actually expanded/focused. */
	pointer-events: none;
	transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
	background: var(--wp--preset--color--surface);
	z-index: 10;
}

.header-search-icon:focus-within .wp-block-search__input {
	width: 220px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	opacity: 1;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* stylelint-disable selector-class-pattern */
@media (max-width: 480px) {

	.header-btn-newsletters .wp-block-button__link,
	.header-btn-donate .wp-block-button__link {
		padding: 12px 16px;
		font-size: var(--wp--preset--font-size--small);
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* FU-7: !important required here — a genuine, narrow exception to the
   "no !important outside print/reduced-motion" rule. These buttons carry
   .has-accent-1-background-color / .has-accent-2-background-color, and WP
   core's own generated global-styles CSS sets those with !important
   (confirmed: `.has-accent-1-background-color{background-color: ... !important;}`
   in the page's inline <style>). A non-!important hover rule can never win
   against that regardless of selector specificity, so without this the
   hover rules below were dead code. */
.header-btn-newsletters .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-1-hover) !important;
	color: var(--wp--preset--color--primary-dark);
	filter: none;
}

.header-btn-donate .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-2-hover) !important;
	color: var(--wp--preset--color--surface);
	filter: none;
}

/* ===================================================================
   Mobile nav extra — search toggle + configurable CTA. The header's
   Newsletters/Donate/search-icon (.header-cta-buttons above) are hidden
   below 1024px to save space, leaving readers with no header-level CTA or
   search access at all on any narrower viewport. This restores both,
   shown at exactly the same breakpoint .header-cta-buttons hides at
   (max-width:1023px) so there's no gap between them — deliberately NOT
   tied to WP core's own hamburger-toggle breakpoint (confirmed live:
   599px, not 767/782px as first assumed), since the actual gap being
   fixed spans the wider 0-1023px range, including the 600-1023px tablet
   width where the full inline nav is shown (no hamburger) but the CTAs
   are still hidden. At <=599px this group visually sits left of the
   hamburger, as originally asked for; at 600-1023px it sits left of the
   full nav-links list instead, since there's no hamburger there to be
   left of — the search/CTA access itself is what matters and is
   preserved either way.
   =================================================================== */
/* .primary-nav-bar ancestor qualifier bumps specificity (0,2,0) above WP
   core's own `.wp-block-group.is-layout-flex { display:flex }` layout
   rule (also 0,2,0 but loads after this file in the cascade) — a bare
   `.mobile-nav-extra { display:none }` lost to it. */
.primary-nav-bar .mobile-nav-extra {
	display: none;
}

@media (max-width: 1023px) {

	.primary-nav-bar .mobile-nav-extra {
		display: flex;
		/* Consume all free space to the left so the group sits flush
		   against header-nav/the hamburger instead of landing wherever
		   .primary-nav-bar's justify-content:space-between happens to
		   place it among the other visible flex children. */
		margin-left: auto;
	}
}

/* Search toggle — native <details>/<summary> disclosure widget: no JS
   needed, built-in keyboard support, and accessibly exposes expanded/
   collapsed state automatically (unlike a checkbox-hack toggle).
   No position here — the search panel below is positioned against
   .primary-nav-bar (which is already position:relative), not this
   element, so it can span the full bar width. */

.mobile-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	list-style: none;
}

/* WCAG 2.5.8 44px touch-target minimum, met via an invisible hit-area
   overlay rather than growing the visible icon — same pattern already used
   for the utility bar social icons (see .utility-bar .social-icon above). */
.mobile-search-icon::after {
	content: "";
	position: absolute;
	inset: -6px;
}

/* Hide the default disclosure triangle marker cross-browser. */
.mobile-search-icon::marker,
.mobile-search-icon::-webkit-details-marker {
	display: none;
}

.mobile-search-panel {
	display: none;
}

.mobile-search-details[open] .mobile-search-panel {
	display: block;
	/* Absolute against .primary-nav-bar (position:relative, above) rather
	   than fixed with a hardcoded top offset — the bar's height varies
	   (80px default, 56px under max-width:767px) but this range renders
	   the panel up to 1023px, so a fixed pixel value left a gap between
	   767px and 1023px. top:100% always lands exactly at the bar's actual
	   bottom edge regardless of its computed height. */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Override the theme's global block-gap top margin (WP applies it to
	   every wp-block-group by default) — it stacked on top of the correct
	   top:100% offset and reopened the gap this rule exists to close. */
	margin-top: 0;
	z-index: 100002; /* above the hamburger overlay's 100001 */
	padding: 16px 20px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-search-form.wp-block-search {
	width: 100%;
}

.mobile-search-form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border-input);
	border-radius: 4px;
}

.mobile-search-form .wp-block-search__input {
	border: none;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	flex: 1;
	min-width: 0;
}

.mobile-search-form .wp-block-search__button {
	border: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	cursor: pointer;
}

/* .mobile-nav-cta-donate / .mobile-nav-cta-newsletter need no dedicated
   visual rule here — both are normal wp:button blocks (parts/primary-nav.html),
   so all of their visible styling (padding, font, colors, border) is authored
   directly on each block via the Site Editor, same as
   header-btn-newsletters/header-btn-donate above, and travels with the
   block rather than living in this file. Their current default styles
   are intentionally identical (see docs/qa/issues-register.md, "mobile
   CTA style duplication") — each remains independently editable via the
   block inspector, which is the point: an editor can diverge one from
   the other later without touching this file.

   Their authored padding (6px 14px) + 14px font renders a ~32-34px visible
   box, under the WCAG 2.5.5 44px touch-target target — same shape as the
   utility-bar social icons and mobile-search-icon above, fixed the same way:
   an invisible ::before hit-area overlay rather than growing the visible
   button (which would fight the block's own authorable padding). The overlay
   goes on .wp-block-button__link (the actual <a>, which is what receives
   the click) rather than the .mobile-nav-cta-* wrapper div — a pseudo-
   element only extends the hit area of the element it belongs to, and the
   wrapper div isn't itself interactive.

   12px gap: same ratio as .utility-bar .utility-social-icons above — each
   ::before expands 6px per side, so adjacent hit areas (Donate/Newsletter,
   Newsletter/search-icon) meet exactly at the gap midpoint with zero
   overlap. .mobile-nav-extra's blockGap was raised from 8px to 12px
   (parts/primary-nav.html) specifically for this; an 8px gap would let two
   -6px overlays overlap by 4px, misrouting taps near the boundary. */
.mobile-nav-cta-donate .wp-block-button__link,
.mobile-nav-cta-newsletter .wp-block-button__link {
	position: relative;
}

.mobile-nav-cta-donate .wp-block-button__link::before,
.mobile-nav-cta-newsletter .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -6px;
}
/* stylelint-enable selector-class-pattern */