/**
 * Mobile hamburger + slide-in nav drawer (docs/architecture.md §4).
 * Net-new relative to the source design, which only flex-wrapped the nav — built to
 * match the same tokens (cream header, teal accents, gold focus rings).
 *
 * Breakpoint: 1024px. No longer tied to the header's own max-width (--safi-max-width-wide,
 * 1360px) — the two are independent values now. Off-canvas is active at
 * max-width:1024px; desktop nav takes over at min-width:1025px, so the two queries
 * are exact complements with no gap or overlap. (Earlier values of 880px, 1200px,
 * 1280px, and 1360px were each superseded before settling here.)
 *
 * .nav-toggle's display is toggled with !important on both states — safe here
 * specifically because this class is never targeted by any other stylesheet (parent
 * theme included), so there's no legitimate rule for !important to collide with; it
 * just guarantees this exact binary show/hide can never be silently overridden.
 */

.nav-toggle {
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 44px; /* 44x44 minimum touch target */
	height: 44px;
	border-radius: var(--safi-radius-sm);
	border: 1px solid var(--safi-border) !important;
	background: var(--safi-surface);
	cursor: pointer;
	flex-shrink: 0;
	margin-left: auto;
}

.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:focus-visible {
	/* !important: neutralizes reset.css's button:hover/:focus{background-color:#c36} —
	   see base.css's note on why this is safe here specifically (re-asserting this
	   exact selector's own value, not a broader element-level rule). */
	background: var(--safi-bg-alt) !important;
	border-color: var(--safi-border) !important;
}

.nav-toggle svg {
	width: 22px;
	height: 22px;
	stroke: var(--safi-petrol);
}

.nav-drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 40, 46, 0.4);
	z-index: 150;
}

.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 86vw);
	background: #fff; /* pure white surface for the whole panel — header and scrollable
		links area both inherit it since neither sets its own background */
	z-index: 160;
	transform: translateX(100%);
	/* visibility (not just transform) when closed: a fixed + transformed element can
	   still be included in some browsers' scrollable-overflow calculation even while
	   visually off-screen, which was reported as a peeking panel + horizontal
	   scrollbar on live. visibility:hidden removes it from hit-testing/painting
	   entirely without affecting the slide transition (unlike display:none, which
	   can't be animated). */
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 30px rgba(28, 52, 60, 0.18);
}

body.nav-open .nav-drawer {
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.nav-drawer {
		transition: none;
	}
}

/* Above the breakpoint, the drawer is structurally unreachable (its only trigger,
   .nav-toggle, is hidden there too) — remove it from the render tree entirely
   rather than just leaving it transformed off-screen, so there's no possibility of
   it contributing to layout/overflow on desktop regardless of the visibility fix
   above. */
@media (min-width: 1025px) {
	.nav-drawer,
	.nav-drawer-backdrop {
		display: none !important;
	}
}

.nav-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--safi-border);
}

.nav-drawer__close {
	width: 44px; /* 44x44 minimum touch target */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--safi-radius-sm);
	border: 1px solid var(--safi-border) !important;
	background: var(--safi-surface);
	cursor: pointer;
}

.nav-drawer__close:hover,
.nav-drawer__close:focus,
.nav-drawer__close:focus-visible {
	background: var(--safi-bg-alt) !important;
}

.nav-drawer__close svg {
	width: 20px;
	height: 20px;
	stroke: var(--safi-petrol);
}

/* Everything below the header — language switch, CTA, then primary links — scrolls as
   one unit. Scoping overflow to this wrapper (rather than to .nav-drawer__links alone)
   is what keeps the controls and the menu together on short viewports: nothing is
   pinned outside the scroll area, so scrolling never separates them and every item
   stays reachable, it just takes more scrolling to reach the bottom on a short screen. */
.nav-drawer__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.nav-drawer__links {
	list-style: none;
	margin: 8px 0 0;
	padding: 16px 12px 12px;
	border-top: 1px solid var(--safi-border); /* separates primary links from the controls above, echoing the header's own border-bottom */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav-drawer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: var(--safi-radius-sm);
	text-decoration: none;
	color: #3b4f5e; /* matches .nav a's desktop label color */
	font-weight: 500;
	font-size: 1.05rem;
}

/* Hover/current-page tints match .nav's own states (components.css) — same tokens,
   same ink, so the drawer reads as the same nav rather than a re-skinned one. */
.nav-drawer__links a:hover {
	background: var(--safi-teal-tint);
	color: var(--safi-teal-hover);
}

.nav-drawer__links li.current-menu-item > a,
.nav-drawer__links li.current_page_item > a {
	background: var(--safi-teal-tint-strong);
	color: var(--safi-teal-hover);
	font-weight: 600;
}

/* Cross-audience CTA inside the drawer. Sits between the language switch and the primary
   links (ahead of .nav-drawer__links in the markup), reading as a separate destination
   rather than a seventh menu item. Being an <a href> inside .nav-drawer is also what
   puts it inside main.js's focus trap — the trap queries the drawer for 'a[href]', so
   placement alone is sufficient and no JS change was needed. */
.nav-cta--drawer {
	margin: 8px 12px 16px;
	justify-content: center;
	min-height: 44px; /* 44px minimum touch target, matching the drawer links */
	padding: 12px 18px;
	font-size: 1rem;
}

/* Language switcher inside the drawer: full width, first in the panel body (above the
   cross-audience CTA and the primary links), so the two controls that leave the current
   context are reachable before scrolling to the menu. Being a real element inside
   .nav-drawer puts it in main.js's focus trap automatically. */
.lang-switch--drawer {
	display: flex;
	margin: 12px 12px 0;
	justify-content: center;
}

/* 44px now that the inactive option is a real link rather than an inert stub — same
   stricter target the drawer's other controls were brought to (docs/accessibility-audit.md §9). */
.lang-switch--drawer .lang-switch__option {
	min-height: 44px;
	min-width: 60px;
	font-size: 0.9rem;
}

/* Open state, toggled by main.js */
body.nav-open {
	overflow: hidden;
}

body.nav-open .nav-drawer-backdrop {
	display: block;
}

body.nav-open .nav-drawer {
	transform: translateX(0);
}

@media (max-width: 1024px) {
	.nav {
		display: none !important;
	}

	/* The header CTA hides with the desktop nav — below the breakpoint it's reachable
	   inside the drawer instead. :not() targets the header instance only; the drawer
	   variant lives inside .nav-drawer, which has its own visibility handling above. */
	.nav-cta:not(.nav-cta--drawer) {
		display: none !important;
	}

	/* Same for the language switcher — the drawer copy takes over. */
	.lang-switch--header {
		display: none !important;
	}

	.nav-toggle {
		display: inline-flex !important;
	}
}