/**
 * Zone 2 — Header / Primary Navigation
 *
 * Phase 2.1: desktop nav bar, single-column disclosure panels, mega grid.
 * Drawer + mobile trigger land in Phase 2.3. Mega visual polish lands in 2.2.
 *
 * Local scoped variables live on .epsd-nav (per plan §5) so they can't leak to
 * :root or the design system.
 */

/* -------------------------------------------------------------------------- */
/* Local variables                                                            */
/* -------------------------------------------------------------------------- */
.epsd-nav,
.epsd-drawer {
	--nav-height: 72px;
	--nav-inner-max: var(--epsd-wide-width);

	--nav-panel-bg: var(--epsd-surface-primary);
	--nav-panel-fg: var(--epsd-text-primary);
	--nav-panel-shadow: var(--epsd-shadow-lg);
	--nav-panel-radius: var(--epsd-radius-sm);
	--nav-panel-accent: var(--epsd-border-accent);

	--nav-link-color: var(--epsd-text-primary);
	--nav-link-hover-color: var(--epsd-text-link);
	--nav-link-active-bar: var(--epsd-accent-primary);

	--nav-duration: var(--epsd-transition-normal);
	--nav-duration-fast: var(--epsd-transition-fast);

	--drawer-width: min(420px, 92vw);
	--drawer-bg: var(--epsd-color-green-900, #0b2d21);
	--drawer-fg: var(--epsd-color-white, #fff);
	--drawer-fg-muted: rgba(255, 255, 255, 0.72);
	--drawer-divider: rgba(255, 255, 255, 0.10);
	--drawer-row-hover: rgba(255, 255, 255, 0.06);
	--drawer-gold-muted: rgba(243, 189, 72, 0.72);
	--drawer-breakpoint: 1199px;
}

/* Skip links moved to the standalone skip-links feature
   (assets/css/skip-links.css + template-parts/skip-links.php). */

/* -------------------------------------------------------------------------- */
/* Wrapper + bar                                                              */
/* -------------------------------------------------------------------------- */
.epsd-nav-wrap {
	background: var(--epsd-surface-primary);
	border-bottom: 1px solid var(--epsd-border-default);
}

.epsd-nav {
	font-family: var(--epsd-font-display);
	font-size: var(--epsd-fluid-md);
	color: var(--nav-link-color);
}

.epsd-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xl, 2rem);
	max-width: var(--nav-inner-max);
	margin: 0 auto;
	padding: 0 var(--epsd-space-lg, 1.5rem);
	min-height: var(--nav-height);
}

/* -------------------------------------------------------------------------- */
/* Brand                                                                      */
/* -------------------------------------------------------------------------- */
.epsd-nav__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--epsd-text-heading);
}

.epsd-nav__brand-img {
	display: block;
	max-height: 48px;
	width: auto;
	height: auto;
}

.epsd-nav__brand-text {
	font-weight: var(--epsd-font-weight-semibold, 600);
	font-size: var(--epsd-fluid-md);
	letter-spacing: var(--epsd-letter-spacing-tight, -0.01em);
}

/* -------------------------------------------------------------------------- */
/* Primary list                                                               */
/* -------------------------------------------------------------------------- */
.epsd-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--epsd-space-md, 1rem);
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.epsd-nav__item {
	position: relative;
}

/* Top-level link / disclosure button share base style.
   Walker renders disclosures as <a>, JS upgrades to <button>. Both element
   UA defaults must produce identical sizing — lock every typography prop. */
.epsd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--epsd-space-2xs, 0.25rem);
	padding: var(--epsd-space-sm, 0.5rem) var(--epsd-space-md, 0.75rem);
	background: transparent;
	border: 0;
	margin: 0;
	color: var(--nav-link-color);
	font-family: var(--epsd-font-display);
	font-size: var(--epsd-fluid-sm);
	font-weight: var(--epsd-font-weight-bold, 700);
	line-height: var(--epsd-line-height-snug, 1.35);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 0;
	transition: color var(--nav-duration-fast), background-color var(--nav-duration-fast);
}

/* Astra's dynamic inline CSS targets bare `button:hover` / `button:focus`
   with bg #1567a6 + white text at specificity (0,1,1). Scoping under
   `.epsd-nav-wrap` raises specificity to (0,2,1) so we win.

   `:focus` (NOT `:focus-visible`) is the click-focus state: after a user
   clicks the disclosure button to open its panel, the button retains focus
   even after the cursor moves away. Astra's `button:focus` paints it blue.
   We override the bg/border on plain `:focus` without adding an outline —
   the visible focus ring is reserved for `:focus-visible` (keyboard). */
.epsd-nav-wrap .epsd-nav__link:hover,
.epsd-nav-wrap .epsd-nav__link:focus,
.epsd-nav-wrap .epsd-nav__link:focus-visible {
	background-color: transparent;
	border-color: transparent;
}

/* Plain `:focus` (click-focus) — restore the default nav text color so Astra's
   `button:focus { color:#fff }` doesn't make the label disappear on white. */
.epsd-nav-wrap .epsd-nav__link:focus {
	color: var(--nav-link-color);
}

/* `:hover` and keyboard `:focus-visible` override the above with the hover
   color (rules ordered after so they win on equal specificity). */
.epsd-nav-wrap .epsd-nav__link:hover,
.epsd-nav-wrap .epsd-nav__link:focus-visible {
	color: var(--nav-link-hover-color);
}

.epsd-nav-wrap .epsd-nav__link:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* Active nav item — Green text via aria-current */
.epsd-nav__link[aria-current="page"],
.epsd-nav__disclosure[aria-current="true"] {
	color: var(--epsd-color-green-800, #1f5440);
}

/* Chevron rotates when the associated panel is open */
.epsd-nav__chevron {
	flex-shrink: 0;
	width: 12px;
	height: 8px;
	transition: transform var(--nav-duration-fast);
}

.epsd-nav__disclosure[aria-expanded="true"] .epsd-nav__chevron {
	transform: rotate(180deg);
}

/* Active (open) disclosure — gold pill with dark green label.
   Higher specificity than the .epsd-nav-wrap .epsd-nav__link state rules
   above so the pill background isn't reset to transparent on hover/focus
   while the panel is open. */
.epsd-nav-wrap .epsd-nav__disclosure[aria-expanded="true"],
.epsd-nav-wrap .epsd-nav__disclosure[aria-expanded="true"]:hover,
.epsd-nav-wrap .epsd-nav__disclosure[aria-expanded="true"]:focus,
.epsd-nav-wrap .epsd-nav__disclosure[aria-expanded="true"]:focus-visible {
	background-color: var(--epsd-color-gold-500);
	color: var(--epsd-color-green-800);
}

/* -------------------------------------------------------------------------- */
/* Single-column disclosure panel                                             */
/* -------------------------------------------------------------------------- */
.epsd-nav__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	min-width: 240px;
	padding: var(--epsd-space-sm, 0.5rem);
	background: var(--nav-panel-bg);
	color: var(--nav-panel-fg);
	border-top: 3px solid var(--nav-panel-accent);
	border-radius: 0 0 var(--nav-panel-radius) var(--nav-panel-radius);
	box-shadow: var(--nav-panel-shadow);
	z-index: 50;
}

.epsd-nav__panel[hidden] {
	display: none;
}

.epsd-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epsd-nav__sublist li + li {
	margin-top: var(--epsd-space-xs, 0.5rem);
}

.epsd-nav__sublist a,
.epsd-nav__mega-col a {
	display: block;
	padding: var(--epsd-space-xs, 0.5rem) var(--epsd-space-sm, 0.75rem);
	color: var(--nav-panel-fg);
	text-decoration: none;
	border-radius: var(--epsd-radius-sm);
	font-size: var(--epsd-fluid-sm);
	line-height: var(--epsd-line-height-snug, 1.35);
	transition: background-color var(--nav-duration-fast), color var(--nav-duration-fast);
}

.epsd-nav__sublist a:hover,
.epsd-nav__sublist a:focus-visible,
.epsd-nav__mega-col a:hover,
.epsd-nav__mega-col a:focus-visible {
	color: var(--nav-link-hover-color);
	background: var(--epsd-color-neutral-50, #f7f7f7);
}

.epsd-nav__sublist a:focus-visible,
.epsd-nav__mega-col a:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* -------------------------------------------------------------------------- */
/* Mega panel                                                                 */
/* -------------------------------------------------------------------------- */
/* Width follows column count: walker emits `style="--mega-cols:N"` on the
   panel based on how many `mega-col` headings (+ optional "More") rendered.
   Fallback of 3 keeps the panel sane if the inline style is ever stripped. */
.epsd-nav__mega {
	--mega-cols: 3;
	--mega-col-min: 200px;
	--mega-col-gap: var(--epsd-space-xl, 2rem);
	--mega-pad: var(--epsd-space-2xl, 2.5rem);

	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	width: max-content;
	max-width: min(
		calc(
			var(--mega-cols) * var(--mega-col-min)
			+ (var(--mega-cols) - 1) * var(--mega-col-gap)
			+ 2 * var(--mega-pad)
		),
		calc(100vw - 2rem)
	);
	background: var(--nav-panel-bg);
	color: var(--nav-panel-fg);
	border-top: 3px solid var(--nav-panel-accent);
	border-radius: 0 0 var(--nav-panel-radius) var(--nav-panel-radius);
	box-shadow: var(--nav-panel-shadow);
	z-index: 50;
}

.epsd-nav__mega[hidden] {
	display: none;
}

.epsd-nav__mega-inner {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols), minmax(var(--mega-col-min), 1fr));
	gap: var(--mega-col-gap);
	padding: var(--mega-pad);
}

.epsd-nav__mega-col > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.epsd-nav__mega-col > ul li + li {
	margin-top: var(--epsd-space-xs, 0.5rem);
}

.epsd-nav__mega-heading {
	margin: 0 0 var(--epsd-space-sm, 0.75rem);
	color: var(--epsd-text-secondary);
	font-family: var(--epsd-font-display);
	font-size: var(--epsd-fluid-xs);
	font-weight: var(--epsd-font-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: var(--epsd-letter-spacing-wide, 0.06em);
}

/* -------------------------------------------------------------------------- */
/* Social cluster (top bar)                                                   */
/* -------------------------------------------------------------------------- */
.epsd-nav__social {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xs, 0.375rem);
	flex-shrink: 0;
}

.epsd-nav__social a {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	background: var(--epsd-color-neutral-900, #111);
	color: var(--epsd-color-white, #fff);
	border-radius: var(--epsd-radius-xs, 4px);
	transition: background-color var(--nav-duration-fast);
}

.epsd-nav__social a:hover,
.epsd-nav__social a:focus-visible {
	background: var(--epsd-color-green-800, #1f5440);
	outline: 0;
}

.epsd-nav__social a:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-nav__social svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Hamburger trigger — hidden on desktop, shown on ≤1024                       */
/* -------------------------------------------------------------------------- */
.epsd-nav__trigger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--nav-link-color);
	cursor: pointer;
	border-radius: var(--epsd-radius-sm);
	margin-left: auto;
	flex-shrink: 0;
	place-items: center;
}

.epsd-nav__trigger:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-nav__trigger-icon,
.epsd-nav__trigger-icon::before,
.epsd-nav__trigger-icon::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--nav-duration-fast), opacity var(--nav-duration-fast);
}

.epsd-nav__trigger-icon {
	position: relative;
}

.epsd-nav__trigger-icon::before { position: absolute; left: 0; top: -7px; }
.epsd-nav__trigger-icon::after  { position: absolute; left: 0; top:  7px; }

.epsd-nav__trigger[aria-expanded="true"] .epsd-nav__trigger-icon         { background: transparent; }
.epsd-nav__trigger[aria-expanded="true"] .epsd-nav__trigger-icon::before { transform: rotate(45deg); top: 0; }
.epsd-nav__trigger[aria-expanded="true"] .epsd-nav__trigger-icon::after  { transform: rotate(-45deg); top: 0; }

/* -------------------------------------------------------------------------- */
/* Drawer (off-canvas)                                                        */
/* -------------------------------------------------------------------------- */
.epsd-drawer[hidden] { display: none; }

.epsd-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.epsd-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 45, 33, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--nav-duration);
}

.epsd-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: var(--drawer-width);
	background: var(--drawer-bg);
	color: var(--drawer-fg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
}

.epsd-drawer.is-open .epsd-drawer__backdrop { opacity: 1; }
.epsd-drawer.is-open .epsd-drawer__panel    { transform: translateX(0); }

/* Sticky header */
.epsd-drawer__header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epsd-space-xs, 0.5rem);
	padding: 14px 16px;
	background: var(--drawer-bg);
	border-bottom: 1px solid var(--drawer-divider);
	flex-shrink: 0;
}

.epsd-drawer__header::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: -1px;
	height: 2px;
	background: var(--epsd-accent-primary);
	opacity: 0.9;
}

.epsd-drawer__logo {
	height: 34px;
	width: auto;
	display: block;
	color: var(--epsd-color-white);
	fill: currentColor;
}

.epsd-drawer__logo-text {
	color: var(--drawer-fg);
	font-family: var(--epsd-font-display);
	font-weight: var(--epsd-font-weight-semibold, 600);
	font-size: var(--epsd-fluid-md);
}

.epsd-drawer__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.epsd-drawer__close {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	color: var(--drawer-fg);
	cursor: pointer;
	border-radius: var(--epsd-radius-sm);
}

/* Scoped + plain `:focus` included so Astra's `button:focus { bg:#1567a6 }`
   can't paint the X chip blue after click. SVG icon inherits via currentColor,
   so re-assert `color` as well. */
.epsd-drawer .epsd-drawer__close:hover,
.epsd-drawer .epsd-drawer__close:focus,
.epsd-drawer .epsd-drawer__close:focus-visible {
	background-color: var(--drawer-row-hover);
	border-color: transparent;
	color: var(--drawer-fg);
	outline: 0;
}

.epsd-drawer .epsd-drawer__close:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-drawer__close svg { width: 18px; height: 18px; }

/* Scrollable body */
.epsd-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 20px 32px;
	-webkit-overflow-scrolling: touch;
}

.epsd-drawer__section + .epsd-drawer__section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--drawer-divider);
}

.epsd-drawer__section-title {
	margin: 0 0 10px;
	font-size: var(--epsd-fluid-xs);
	font-weight: var(--epsd-font-weight-bold, 700);
	letter-spacing: var(--epsd-letter-spacing-wide, 0.12em);
	text-transform: uppercase;
	color: var(--drawer-gold-muted);
}

/* Primary nav accordion */
.epsd-drawer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.epsd-drawer__nav-item {
	position: relative;
}

.epsd-drawer__nav-link,
.epsd-drawer__nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	background: transparent;
	border: 0;
	color: var(--drawer-fg);
	font-family: inherit;
	font-size: var(--epsd-fluid-md);
	font-weight: var(--epsd-font-weight-medium, 500);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	border-left: 2px solid transparent;
	transition: background-color var(--nav-duration-fast), border-color var(--nav-duration-fast);
}

/* Astra's inline CSS hits `button:hover` / `button:focus` with bg #1567a6 +
   white text at (0,1,1). Scoping under `.epsd-drawer` raises to (0,2,1).
   Plain `:focus` (NOT `:focus-visible`) is the click-focus state Astra paints
   blue after the drawer toggle is clicked open — reset color/bg/border there
   too, and keep the click-only nav pattern (no outline ring on click). */
.epsd-drawer .epsd-drawer__nav-link:hover,
.epsd-drawer .epsd-drawer__nav-toggle:hover,
.epsd-drawer .epsd-drawer__nav-link:focus,
.epsd-drawer .epsd-drawer__nav-toggle:focus,
.epsd-drawer .epsd-drawer__nav-link:focus-visible,
.epsd-drawer .epsd-drawer__nav-toggle:focus-visible {
	background-color: var(--drawer-row-hover);
	border-color: transparent;
	border-left-color: var(--epsd-accent-primary);
	color: var(--drawer-fg);
	outline: 0;
}

.epsd-drawer .epsd-drawer__nav-link:focus-visible,
.epsd-drawer .epsd-drawer__nav-toggle:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}

.epsd-drawer .epsd-drawer__nav-link[aria-current="page"] {
	border-left-color: var(--epsd-accent-primary);
	font-weight: var(--epsd-font-weight-semibold, 600);
}

.epsd-drawer .epsd-drawer__nav-toggle[aria-expanded="true"] {
	background-color: var(--drawer-row-hover);
	border-color: transparent;
	border-left-color: var(--epsd-accent-primary);
	color: var(--drawer-fg);
}

.epsd-drawer__nav-chevron {
	width: 12px;
	height: 7px;
	flex-shrink: 0;
	transition: transform var(--nav-duration-fast);
}

.epsd-drawer__nav-toggle[aria-expanded="true"] .epsd-drawer__nav-chevron {
	transform: rotate(180deg);
}

.epsd-drawer__subnav {
	list-style: none;
	margin: 0 0 4px 14px;
	padding: 4px 0 8px 18px;
	border-left: 2px solid var(--epsd-color-green-300);
}

.epsd-drawer__subnav[hidden] { display: none; }

.epsd-drawer .epsd-drawer__subnav a {
	display: block;
	padding: 10px 12px;
	color: var(--drawer-fg-muted);
	text-decoration: none;
	font-size: var(--epsd-fluid-sm);
	border-radius: var(--epsd-radius-sm);
	transition: background-color var(--nav-duration-fast), color var(--nav-duration-fast);
}

/* Scoped under `.epsd-drawer` to beat Astra's bare `a:hover/:focus` (blue)
   on specificity. Include plain `:focus` so click-focus stays muted/white,
   not Astra blue. */
.epsd-drawer .epsd-drawer__subnav a:hover,
.epsd-drawer .epsd-drawer__subnav a:focus,
.epsd-drawer .epsd-drawer__subnav a:focus-visible {
	background-color: var(--drawer-row-hover);
	color: var(--drawer-fg);
	outline: 0;
}

.epsd-drawer .epsd-drawer__subnav a:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}

/* Quick Links grid */
.epsd-drawer__quicklinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 8px;
}

.epsd-drawer__quicklinks > li {
	position: relative;
}

/* Scoped under `.epsd-drawer` (0,2,0) so the anchor `color` beats the bleed
   reset `.epsd-drawer a:not(.epsd-drawer__nav-link)` at (0,2,1) — zone-2.css
   loads after components.css, so equal-specificity selectors win on source order. */
.epsd-drawer .epsd-drawer__quicklinks a,
.epsd-drawer .epsd-drawer__quicklinks button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epsd-space-2xs, 0.375rem);
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	color: var(--drawer-fg);
	font-family: inherit;
	font-size: var(--epsd-fluid-sm);
	font-weight: var(--epsd-font-weight-medium, 500);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	border-left: 2px solid transparent;
	transition: background-color var(--nav-duration-fast), border-color var(--nav-duration-fast);
}

/* Scoped + plain `:focus` included so Astra's bare `a/button :hover/:focus`
   (blue bg, white text) can't paint Quick Links rows on click-focus. */
.epsd-drawer .epsd-drawer__quicklinks a:hover,
.epsd-drawer .epsd-drawer__quicklinks button:hover,
.epsd-drawer .epsd-drawer__quicklinks a:focus,
.epsd-drawer .epsd-drawer__quicklinks button:focus,
.epsd-drawer .epsd-drawer__quicklinks a:focus-visible,
.epsd-drawer .epsd-drawer__quicklinks button:focus-visible {
	background-color: var(--drawer-row-hover);
	border-color: transparent;
	border-left-color: var(--epsd-accent-primary);
	color: var(--drawer-fg);
	outline: 0;
}

.epsd-drawer .epsd-drawer__quicklinks a:focus-visible,
.epsd-drawer .epsd-drawer__quicklinks button:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}

.epsd-drawer .epsd-drawer__quicklinks button[aria-expanded="true"] {
	background-color: var(--drawer-row-hover);
	border-color: transparent;
	border-left-color: var(--epsd-accent-primary);
	color: var(--drawer-fg);
}

.epsd-drawer__quicklinks-ext {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--drawer-gold-muted);
}

.epsd-drawer__quicklinks-chev {
	width: 12px;
	height: 7px;
	flex-shrink: 0;
	transition: transform var(--nav-duration-fast);
}

.epsd-drawer__quicklinks button[aria-expanded="true"] .epsd-drawer__quicklinks-chev {
	transform: rotate(180deg);
}

.epsd-drawer__quicklinks-staff {
	grid-column: 1 / -1;
}

.epsd-drawer__quicklinks-staff > ul {
	list-style: none;
	margin: 0 0 4px 14px;
	padding: 4px 0 8px 18px;
	border-left: 2px solid var(--epsd-color-green-300);
}

.epsd-drawer__quicklinks-staff > ul[hidden] { display: none; }

.epsd-drawer .epsd-drawer__quicklinks-staff > ul a {
	min-height: 44px;
	padding: 8px 12px;
	color: var(--drawer-fg-muted);
	font-size: var(--epsd-fluid-sm);
}

.epsd-drawer .epsd-drawer__quicklinks-staff > ul a:hover,
.epsd-drawer .epsd-drawer__quicklinks-staff > ul a:focus,
.epsd-drawer .epsd-drawer__quicklinks-staff > ul a:focus-visible {
	color: var(--drawer-fg);
	background-color: transparent;
}

/* ── Schools accordion ──────────────────────────────────────────────────────
   Mobile/tablet replacement for the zone-1b utility-bar picker. Visible
   whenever the drawer is reachable (≤1199px); the picker hides at the same
   threshold when Zone 2 is active so the two surfaces don't both serve
   tablet/phone widths. */
.epsd-drawer__schools {
	position: relative;
}

.epsd-drawer .epsd-drawer__schools > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--epsd-space-2xs, 0.375rem);
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	color: var(--drawer-fg);
	font-family: inherit;
	font-size: var(--epsd-fluid-sm);
	font-weight: var(--epsd-font-weight-medium, 500);
	text-align: left;
	cursor: pointer;
	border-left: 2px solid transparent;
	transition: background-color var(--nav-duration-fast), border-color var(--nav-duration-fast);
}

.epsd-drawer .epsd-drawer__schools > button:hover,
.epsd-drawer .epsd-drawer__schools > button:focus,
.epsd-drawer .epsd-drawer__schools > button:focus-visible,
.epsd-drawer .epsd-drawer__schools > button[aria-expanded="true"] {
	background-color: var(--drawer-row-hover);
	border-left-color: var(--epsd-accent-primary);
	color: var(--drawer-fg);
	outline: 0;
}

.epsd-drawer .epsd-drawer__schools > button:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}

.epsd-drawer__schools-chev {
	width: 12px;
	height: 7px;
	flex-shrink: 0;
	transition: transform var(--nav-duration-fast);
}

.epsd-drawer__schools > button[aria-expanded="true"] .epsd-drawer__schools-chev {
	transform: rotate(180deg);
}

.epsd-drawer__schools > ul {
	list-style: none;
	margin: 0 0 4px 14px;
	padding: 4px 0 8px 18px;
	border-left: 2px solid var(--epsd-color-green-300);
}

.epsd-drawer__schools > ul[hidden] {
	display: none;
}

.epsd-drawer .epsd-drawer__schools > ul a {
	display: block;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--drawer-fg-muted);
	font-size: var(--epsd-fluid-sm);
	text-decoration: none;
}

.epsd-drawer .epsd-drawer__schools > ul a:hover,
.epsd-drawer .epsd-drawer__schools > ul a:focus,
.epsd-drawer .epsd-drawer__schools > ul a:focus-visible {
	color: var(--drawer-fg);
	background-color: transparent;
	outline: 0;
}

.epsd-drawer .epsd-drawer__schools > ul a:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}


/* CTA — scoped under `.epsd-drawer` so the anchor `color` beats the bleed
   reset `.epsd-drawer a:not(.epsd-drawer__nav-link)` at (0,2,1). */
.epsd-drawer .epsd-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--epsd-space-xs, 0.5rem);
	width: 100%;
	height: 52px;
	background: var(--epsd-accent-primary);
	color: var(--epsd-color-green-900, #0b2d21);
	border: 0;
	border-radius: var(--epsd-radius-sm);
	font-family: inherit;
	font-size: var(--epsd-fluid-sm);
	font-weight: var(--epsd-font-weight-bold, 700);
	letter-spacing: var(--epsd-letter-spacing-wide, 0.06em);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--nav-duration-fast);
}

/* Scoped to beat Astra's `a:hover { color:#1567a6 }` — the gold CTA's dark
   text would otherwise turn blue on hover. */
.epsd-drawer .epsd-drawer__cta:hover,
.epsd-drawer .epsd-drawer__cta:focus,
.epsd-drawer .epsd-drawer__cta:focus-visible {
	background-color: var(--epsd-accent-primary);
	color: var(--epsd-color-green-900, #0b2d21);
	filter: brightness(0.95);
}

.epsd-drawer .epsd-drawer__cta:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: 3px;
}

/* Drawer social cluster */
.epsd-drawer__social {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-md, 1rem);
	padding: 4px;
}

/* Scoped to keep SVG icons white via currentColor — the bleed reset above
   paints `.epsd-drawer a` with `--epsd-text-link`, which the SVG would
   inherit via `fill: currentColor`. */
.epsd-drawer .epsd-drawer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--drawer-fg);
	border-radius: var(--epsd-radius-sm);
	transition: background-color var(--nav-duration-fast), color var(--nav-duration-fast);
}

.epsd-drawer .epsd-drawer__social a:hover,
.epsd-drawer .epsd-drawer__social a:focus,
.epsd-drawer .epsd-drawer__social a:focus-visible {
	background-color: var(--drawer-row-hover);
	color: var(--epsd-accent-primary);
	outline: 0;
}

.epsd-drawer .epsd-drawer__social a:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-drawer__social svg { width: 22px; height: 22px; fill: currentColor; }

/* Footer */
.epsd-drawer__footer {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--drawer-divider);
	color: var(--drawer-fg-muted);
	font-size: var(--epsd-fluid-xs);
	line-height: 1.5;
	text-align: center;
}

.epsd-drawer .epsd-drawer__footer a {
	color: inherit;
	text-decoration: none;
}

.epsd-drawer .epsd-drawer__footer a:hover,
.epsd-drawer .epsd-drawer__footer a:focus,
.epsd-drawer .epsd-drawer__footer a:focus-visible {
	color: var(--drawer-fg);
}

/* Phone link in drawer footer — the drawer is the canonical tap-to-call
   surface on mobile, so give it a persistent affordance (underline + brighter
   color) rather than relying on hover/focus alone. Restores tappability cue
   for users who can't perceive color shifts (WCAG 1.4.1 Use of Color). */
.epsd-drawer .epsd-drawer__footer a[href^="tel:"] {
	color: var(--drawer-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.epsd-drawer__footer-name {
	margin: 0 0 8px;
	color: var(--drawer-fg);
	font-weight: 600;
}

.epsd-drawer__footer-address {
	margin: 0 0 8px;
}

.epsd-drawer__footer-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* -------------------------------------------------------------------------- */
/* Scroll lock applied to <html> when drawer is open                          */
/* -------------------------------------------------------------------------- */
html.epsd-scroll-lock {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* -------------------------------------------------------------------------- */
/* Mobile breakpoint — hide desktop nav + social, show hamburger              */
/* -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.epsd-nav__list,
	.epsd-nav__social {
		display: none;
	}
	.epsd-nav__trigger {
		display: grid;
	}
	.epsd-nav__inner {
		justify-content: space-between;
	}
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.epsd-nav__chevron,
	.epsd-drawer__nav-chevron,
	.epsd-drawer__quicklinks-chev,
	.epsd-drawer__schools-chev,
	.epsd-nav__trigger-icon,
	.epsd-nav__trigger-icon::before,
	.epsd-nav__trigger-icon::after,
	.epsd-drawer__backdrop,
	.epsd-drawer__panel {
		transition: none;
	}
}