/* ==========================================================================
   CMS.gov Menu
   --------------------------------------------------------------------------
   Disclosure-pattern dynamic navigation with mega-menu panels and a
   full-screen mobile drawer. Uses theme CSS custom properties from the
   block-theme palette (--wp--preset--color--*), with sensible fallbacks.

   Structure (desktop):
     .cmsgov-menu
       .cmsgov-menu__mobile-trigger      (hidden on desktop)
       .cmsgov-menu__nav
         .cmsgov-menu__mobile-close      (hidden on desktop)
         ul.cmsgov-menu__list
           li.cmsgov-menu__item
             a.cmsgov-menu__link       (plain item)            — OR —
             button.cmsgov-menu__link  (item with a dropdown; chevron inside)
             .cmsgov-menu__panel[hidden]
               ul.cmsgov-menu__sublist
       .cmsgov-menu__backdrop            (mobile only)
   ========================================================================== */

.cmsgov-menu {
	/* Dark foreground for light surfaces (e.g. the white drawer's close
	   button). Uses `text-base`, not `base` — in this theme `base` is white,
	   which would render invisible on the light drawer. */
	--cmsgov-menu-fg: var(--wp--preset--color--text-base, #1b1b1b);
	--cmsgov-menu-bg: var(--wp--preset--color--white, #fff);
	--cmsgov-menu-accent: var(--wp--preset--color--primary, #0d2499);
	--cmsgov-menu-accent-hover: var(--wp--preset--color--primary-darker, #091873);
	/* Hover/active treatment for top-level links on the dark blue bar.
	   Swapped back to the blue accent inside the mobile drawer (white bg). */
	--cmsgov-menu-active: var(--wp--preset--color--accent, #ffe400);
	--cmsgov-menu-border: rgba(0, 0, 0, 0.12);
	--cmsgov-menu-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	--cmsgov-menu-radius: 6px;
	--cmsgov-menu-focus: var(--wp--preset--color--focus, #2491ff);
	--cmsgov-menu-motion: 180ms;

	position: relative;
	font-family: var(--wp--preset--font-family--public-sans, system-ui, sans-serif);
}

/* Reset list defaults */
.cmsgov-menu__list,
.cmsgov-menu__sublist,
.cmsgov-menu__column-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Top-level bar (desktop) ---------- */

.cmsgov-menu__nav {
	display: block;
}

.cmsgov-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	align-items: stretch;
	/* Force full width so margin-inline-start: auto on the last item /
	   --cta item has a stable amount of leftover space to consume —
	   otherwise the ul shrinks to its content width inside some
	   block-wrapper combinations and the CTA stays inline. */
	width: 100%;
}

.cmsgov-menu__item {
	position: relative;
	display: flex;
	align-items: stretch;
}

.cmsgov-menu__link,
.cmsgov-menu__link:visited {
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
	font-weight: 400;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	padding: 0.7rem 0.65rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border-radius: var(--cmsgov-menu-radius) var(--cmsgov-menu-radius) 0 0;
	transition: background-color var(--cmsgov-menu-motion) ease, color var(--cmsgov-menu-motion) ease;
}

/* Items with a dropdown render the link as a <button> — reset native styles
   so it is visually identical to a plain <a> link. */
button.cmsgov-menu__link {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	cursor: pointer;
}

/* Top-level links sit on the dark blue bar — hover, focus, current page
   and open-dropdown all use the yellow accent for text + a yellow underline. */
.cmsgov-menu__link:hover,
.cmsgov-menu__link:focus-visible,
.cmsgov-menu__link[aria-current="page"],
.cmsgov-menu__item.is-current > .cmsgov-menu__link,
.cmsgov-menu__item.is-open > .cmsgov-menu__link {
	color: var(--cmsgov-menu-active);
	background-color: rgba(0, 0, 0, 0.16);
	box-shadow: inset 0 -3px 0 0 var(--cmsgov-menu-active);
}

.cmsgov-menu__chevron {
	flex-shrink: 0;
	transition: transform var(--cmsgov-menu-motion) ease;
}

/* Top-level chevron only — descendant scoping previously matched every
   chevron inside an open dropdown (including unopened sub-disclosure
   chevrons), so the rotation visually canceled out. The `> .cmsgov-menu__link`
   path now locks this rule to the direct top-level button's chevron.
   Sub-disclosure chevrons have their own rule keyed off
   .cmsgov-menu__sublink--has-panel[aria-expanded="true"]. */
.cmsgov-menu__item.is-open > .cmsgov-menu__link .cmsgov-menu__chevron,
.cmsgov-menu__link--has-panel[aria-expanded="true"] .cmsgov-menu__chevron {
	transform: rotate(180deg);
}

/* ---------- CTA item (last horizontal item OR explicit opt-in) ----------
   The last top-level item in the horizontal header menu auto-renders as
   the yellow pill button (replaces what was a hardcoded "Get started"
   element). Editors can also explicitly flag any item with the class
   `cmsgov-menu__item--cta` via Appearance → Menus → CSS Classes — useful
   if the CTA isn't the last item or if a different item should be the
   CTA. Both triggers share one rule via :is() to avoid duplication.

   Scoped to .cmsgov-menu (not .cmsgov-menu--vertical) so the sidebar
   accordion's last item doesn't get repainted yellow. */

/* The CTA item is split off from its siblings by:
   - margin-(left|inline-start): auto consumes all leftover space in the
     flex row, pushing the item to the trailing edge
   - !important guards against any plugin or block-layout rule that
     might inject margin-left on the li
   - a minimum padding-left guarantees visible breathing room even when
     the other items expand to fill most of the row (so the CTA never
     ends up flush against the previous item)
   Scoped to .cmsgov-menu (not --vertical) so the sidebar accordion's
   last item is untouched. */
.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child,
.cmsgov-menu__item.cmsgov-menu__item--cta {
	margin-left: auto !important;
	margin-inline-start: auto !important;
	/* Floor: at least 1.5rem of clear space between the CTA and the
	   preceding item, even if the flex row is fully packed. */
	padding-left: 1.5rem;
}

/* The CTA link itself: yellow pill, primary-darker text, flexed so the
   chevron we inject via ::after sits next to the label with consistent
   spacing. */
.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child > .cmsgov-menu__link,
.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child > .cmsgov-menu__link:visited,
.cmsgov-menu__item.cmsgov-menu__item--cta > .cmsgov-menu__link,
.cmsgov-menu__item.cmsgov-menu__item--cta > .cmsgov-menu__link:visited {
	background-color: var(--wp--preset--color--accent, #ffe400);
	color: var(--wp--preset--color--primary-darker, #07124d);
	font-weight: 400;
	/* Asymmetric padding: tighter top/bottom (0.25rem) and right (0.5rem)
	   to keep the pill compact, with a wider left (1rem) so the label has
	   breathing room before the chevron sits on the right. */
	padding: 0.25rem 0.5rem 0.25rem 1rem;
	border-radius: 999px;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1.5em;
}

/* Big right-pointing chevron after the CTA label. Implemented as a CSS
   mask-image so the arrow color follows the link's currentColor — when
   the hover rule changes the link color, the chevron color follows
   automatically without needing a second SVG. The SVG is a 24x24
   polyline ("9 18 15 12 9 6") rendered with a fat 3px stroke so the
   shape reads clearly at small sizes. */
.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child > .cmsgov-menu__link::after,
.cmsgov-menu__item.cmsgov-menu__item--cta > .cmsgov-menu__link::after {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 1.1em;   /* scales with the link's font-size */
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}

.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child > .cmsgov-menu__link:hover,
.cmsgov-menu:not(.cmsgov-menu--vertical) .cmsgov-menu__list > .cmsgov-menu__item:last-child > .cmsgov-menu__link:focus-visible,
.cmsgov-menu__item.cmsgov-menu__item--cta > .cmsgov-menu__link:hover,
.cmsgov-menu__item.cmsgov-menu__item--cta > .cmsgov-menu__link:focus-visible {
	background-color: #ffeb47; /* slightly lighter yellow */
	color: var(--wp--preset--color--primary-darker, #07124d);
	box-shadow: none;
}

/* Focus rings — visible, high-contrast, never suppressed. */
.cmsgov-menu :focus-visible {
	outline: 3px solid var(--cmsgov-menu-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Forced-colors (Windows High Contrast) */
@media (forced-colors: active) {
	.cmsgov-menu :focus-visible {
		outline: 3px solid CanvasText;
	}
	.cmsgov-menu__panel {
		border: 1px solid CanvasText;
	}
}

/* ---------- Dropdown / mega panel (desktop) ---------- */

.cmsgov-menu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	background: var(--wp--preset--color--primary-lightest, #e7e9f5);
	border: 1px solid var(--cmsgov-menu-border);
	box-shadow: var(--cmsgov-menu-shadow);
	/* Match the mega panel's card treatment: square top, rounded bottom. */
	border-radius: 0 0 var(--cmsgov-menu-radius) var(--cmsgov-menu-radius);
	padding: 1rem;
	/* A plain dropdown is, visually, a standalone mega rail column — same
	   light fill and blue text — so it shares the 280px rail width to read as
	   the same component rather than a tiny disconnected box. */
	min-width: 280px;

	/* Class-driven visibility (no more [hidden] attribute). visibility:hidden
	   keeps the panel out of the accessibility tree AND the tab order while
	   collapsed; opacity + transform handle the animated reveal. The
	   visibility transition uses a 0s duration with a delay so the panel
	   only becomes AT-visible after the close animation finishes (when
	   closing) and immediately when opening (delay 0 with `.is-expanded`). */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity var(--cmsgov-menu-motion) ease,
		transform var(--cmsgov-menu-motion) ease,
		visibility 0s linear var(--cmsgov-menu-motion);
}

.cmsgov-menu__panel.is-expanded,
.cmsgov-menu__item.is-open > .cmsgov-menu__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity var(--cmsgov-menu-motion) ease,
		transform var(--cmsgov-menu-motion) ease,
		visibility 0s linear 0s;
}

/* Plain dropdown */
.cmsgov-menu__sublist {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.cmsgov-menu__subitem {
	margin: 0;
}

.cmsgov-menu__sublink,
.cmsgov-menu__sublink:visited {
	display: block;
	padding: 0.55rem 0.75rem;
	color: var(--wp--preset--color--primary, #0d2499);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color var(--cmsgov-menu-motion) ease, color var(--cmsgov-menu-motion) ease;
}

.cmsgov-menu__sublink:hover,
.cmsgov-menu__sublink:focus-visible {
	color: var(--cmsgov-menu-accent-hover);
	background-color: rgba(13, 36, 153, 0.08);
}

.cmsgov-menu__sublink[aria-current="page"] {
	color: var(--cmsgov-menu-accent);
	font-weight: 600;
}

/* ---------- Nested disclosure (sub-item with its own children) ----------
   When a sublist item has children, start_el() renders it as a <button>
   that toggles a nested .cmsgov-menu__subpanel. Visually identical to a
   normal sublink, plus a chevron and a left-indent treatment for the
   children so the hierarchy reads clearly. */

button.cmsgov-menu__sublink {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
}

.cmsgov-menu__sublink--has-panel {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	text-align: left;
}

.cmsgov-menu__sublink--has-panel .cmsgov-menu__chevron {
	flex-shrink: 0;
	transition: transform var(--cmsgov-menu-motion) ease;
}

.cmsgov-menu__sublink--has-panel[aria-expanded="true"] .cmsgov-menu__chevron {
	transform: rotate(180deg);
}

/* Nested sub-panel — class-driven accordion using grid-template-rows
   (modern auto-height animation). 0fr collapses the row to 0 size; 1fr
   expands it to the natural height of the single grid child. Padding-left
   and border-left stay applied at all times — they're horizontal and don't
   contribute to the animated vertical collapse.

   For this trick to work the direct child (the <ul>) needs overflow:hidden
   + min-height:0 so it clips to the row size instead of forcing the row
   open. That's handled by the `> *` rule below.

   visibility animates with a 0s duration and a delay matching the height
   transition, so collapsed content stays out of the accessibility tree
   AND the tab order during and after the close animation. */

.cmsgov-menu__subpanel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	padding-left: 0.75rem;
	border-left: 2px solid var(--cmsgov-menu-border);
	margin-top: 0;
	transition:
		grid-template-rows 220ms ease,
		opacity 180ms ease,
		margin-top 220ms ease,
		visibility 0s linear 220ms;
}

/* The grid child must clip itself for the 0fr collapse to work — without
   `overflow:hidden + min-height:0` the child enforces its natural height
   and the row never collapses below content size. */
.cmsgov-menu__subpanel > * {
	overflow: hidden;
	min-height: 0;
}

.cmsgov-menu__subpanel.is-expanded {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	margin-top: 0.15rem;
	transition:
		grid-template-rows 280ms ease,
		opacity 220ms ease,
		margin-top 280ms ease,
		visibility 0s linear 0s;
}

/* Honor reduced-motion preferences — instant show/hide instead of animated. */
@media (prefers-reduced-motion: reduce) {
	.cmsgov-menu__panel,
	.cmsgov-menu__panel.is-expanded,
	.cmsgov-menu__subpanel,
	.cmsgov-menu__subpanel.is-expanded,
	.cmsgov-menu__chevron {
		transition: none;
	}
}

.cmsgov-menu__sublist--nested {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* ---------- Mega panel — master/detail layout ----------
   The panel is a two-column CSS grid:
     col 1 (rail)   = light blue, holds the title and the rail entries
                      (one per depth-1 menu item)
     col 2 (detail) = dark blue, holds the active column's link list
                      (only the .cmsgov-menu__column.is-active list shows)

   Walker output is preserved (panel > h3 + ul > li.column > heading + ul.list)
   but the wrapper <ul> and <li> are set to `display: contents` so the
   heading and list become direct grid items. Lists are absolutely
   positioned inside the detail pane and toggled via .is-active so they
   overlap in the same area — blank by default, one visible when active.
   ----------------------------------------------------------------- */

.cmsgov-menu__panel--mega {
	/* Constrained mega panel: position:fixed escapes the constrained ancestors
	   (.cmsgov-main-nav is type:constrained, .cmsgov-menu inherits the
	   max-width), and the JS sets --cmsgov-mega-top to the menu item's
	   bottom-Y so the panel sits flush against the menu bar. We center it at
	   the theme content width (with a small gutter on narrow viewports) so it
	   lines up with the page content instead of bleeding edge-to-edge. */
	position: fixed;
	top: var(--cmsgov-mega-top, 100%);
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(-4px);
	width: min(100vw - 2rem, var(--wp--style--global--content-size, 1440px));
	min-width: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	background: var(--wp--preset--color--primary, #0d2499);
	color: var(--wp--preset--color--base, #fff);
	border: 0;
	border-radius: 0 0 var(--cmsgov-menu-radius) var(--cmsgov-menu-radius);
	box-shadow: var(--cmsgov-menu-shadow);
	min-height: 320px;
	overflow: hidden;
}

/* Keep the mega panel horizontally centered in EVERY state. The generic
   open/expanded rules above (`.cmsgov-menu__item.is-open > .cmsgov-menu__panel`
   and `.cmsgov-menu__panel.is-expanded`) only set `transform: translateY(0)`,
   which — being more specific than `.cmsgov-menu__panel--mega` — would drop the
   `translateX(-50%)` the instant the panel opens and shove it into the right
   half of the viewport (the "50% left" misalignment). Re-assert both axes here
   with matching/greater specificity so the centering survives the open state. */
.cmsgov-menu__panel--mega.is-expanded,
.cmsgov-menu__item.is-open > .cmsgov-menu__panel--mega {
	transform: translateX(-50%) translateY(0);
}

/* Flatten the sublist + column wrappers so their children become direct
   children of the panel grid. */
.cmsgov-menu__panel--mega > .cmsgov-menu__sublist--mega,
.cmsgov-menu__panel--mega .cmsgov-menu__column {
	display: contents;
}

/* Title sits in row 1 of the rail. */
.cmsgov-menu__mega-title {
	grid-column: 1;
	background: var(--wp--preset--color--primary-lightest, #e7e9f5);
	color: var(--wp--preset--color--primary-darker, #07124d);
	font-family: var(--wp--preset--font-family--bitter, Georgia, serif);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	padding: 2rem 1.75rem 1.25rem;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
}

/* Every depth-1 rail entry — both the <button> trigger and the leaf
   link/label variants. Pinned to column 1 so display:contents on the
   <ul>/<li> wrappers flows them into the rail stack. */
.cmsgov-menu__panel--mega .cmsgov-menu__column-heading,
.cmsgov-menu__panel--mega .cmsgov-menu__column-heading:visited {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 0.6rem 1.5rem;
	background: var(--wp--preset--color--primary-lightest, #e7e9f5);
	color: var(--wp--preset--color--primary, #0d2499);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--cmsgov-menu-motion) ease, color var(--cmsgov-menu-motion) ease;
}

/* The trigger button also resets native button chrome. */
button.cmsgov-menu__column-heading {
	-webkit-appearance: none;
	appearance: none;
}

/* Hover/focus: deeper tint while still on the light rail. */
.cmsgov-menu__panel--mega .cmsgov-menu__column-heading:hover,
.cmsgov-menu__panel--mega .cmsgov-menu__column-heading:focus-visible {
	background: rgba(13, 36, 153, 0.1);
	color: var(--cmsgov-menu-accent-hover, #091873);
}

/* Active column (the one whose detail is currently shown): dark-blue
   fill, white text — bridges visually into the right pane. */
.cmsgov-menu__panel--mega .cmsgov-menu__column.is-active .cmsgov-menu__column-heading {
	background: var(--wp--preset--color--primary, #0d2499);
	color: var(--wp--preset--color--base, #fff);
}

/* Right chevron sits inside the rail trigger. */
.cmsgov-menu__chevron--right {
	flex-shrink: 0;
	transition: transform var(--cmsgov-menu-motion) ease;
}

/* Detail lists — all stacked in the right pane, only the active one
   renders. Absolute positioning means each list paints over the same
   area; blank when nothing is active. */
.cmsgov-menu__panel--mega .cmsgov-menu__column-list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 280px;
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 2rem;
	overflow-y: auto;
	background: var(--wp--preset--color--primary, #0d2499);
}

.cmsgov-menu__panel--mega .cmsgov-menu__column.is-active .cmsgov-menu__column-list {
	display: flex;
}

/* Right-pane links (the grandchild pages). Inherit from the existing
   .cmsgov-menu__sublink rule, but on dark blue we need white text. */
.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink,
.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink:visited {
	color: var(--wp--preset--color--base, #fff);
	padding: 0.5rem 0;
	background: transparent;
	border-radius: 0;
}

.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink:hover,
.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink:focus-visible {
	color: var(--wp--preset--color--accent, #ffe400);
	background: transparent;
	text-decoration: underline;
}

/* The first item in each detail list is the column's own page link —
   styled like the active page in the screenshot (yellow + underline). */
.cmsgov-menu__column-link--overview,
.cmsgov-menu__column-link--overview:visited {
	display: block;
	padding: 0.25rem 0 0.75rem;
	color: var(--wp--preset--color--accent, #ffe400);
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cmsgov-menu__column-link--overview:hover,
.cmsgov-menu__column-link--overview:focus-visible {
	color: var(--wp--preset--color--accent, #ffe400);
	text-decoration: underline;
}

/* ---------- Mega detail — "columns" categories ----------
   When a rail category's children have their own children, the detail pane
   renders as a responsive grid of column groups (heading + link list) instead
   of a single flat link list. Structure:

     ul.cmsgov-menu__column-list--columns   (the grid)
       li.cmsgov-menu__column-item--overview (panel title — spans all columns)
       li.cmsgov-menu__column-group
         h4.cmsgov-menu__column-group-title
         ul.cmsgov-menu__column-group-list
           li.cmsgov-menu__subitem > a.cmsgov-menu__sublink

   Columns are auto-fit so editors can add/remove groups in Appearance → Menus
   without touching CSS — no fixed column count to keep in sync. Base layout
   only; the FUSION theme skin recolors these. */

.cmsgov-menu__panel--mega .cmsgov-menu__column.is-active .cmsgov-menu__column-list--columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	align-content: start;
	gap: 1.25rem 2rem;
}

/* The panel title (injected overview link) runs across the full grid width. */
.cmsgov-menu__column-list--columns .cmsgov-menu__column-item--overview {
	grid-column: 1 / -1;
}

.cmsgov-menu__column-group {
	min-width: 0;
}

.cmsgov-menu__column-group-title {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
}

.cmsgov-menu__column-group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* ---------- Mobile trigger / drawer ---------- */

.cmsgov-menu__mobile-trigger {
	display: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	/* The trigger sits on the dark blue (.cmsgov-main-nav) bar, so it must be
	   white — the accent/primary blue would be invisible blue-on-blue. */
	border: 2px solid var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--base, #fff);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	cursor: pointer;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
}

.cmsgov-menu__mobile-trigger-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	width: 18px;
}

.cmsgov-menu__mobile-trigger-icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.cmsgov-menu__mobile-close {
	display: none; /* shown as inline-flex in the drawer media query */
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	justify-content: center;
	/* 44x44 hit target (508 / WCAG 2.5.5), clearly visible top-right: light
	   circle + blue X so it reads as a close affordance on the white drawer.
	   Was a transparent icon in the theme's white `base` color (invisible). */
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--wp--preset--color--primary-lightest, #e7e9f5);
	border: 1px solid var(--cmsgov-menu-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--primary, #0d2499);
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
}

.cmsgov-menu__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
}

/* ---------- Mobile + tablet (<= 1024px) ---------- */

@media (max-width: 1024px) {
	.cmsgov-menu__mobile-trigger {
		display: inline-flex;
	}

	.cmsgov-menu__mobile-close {
		display: inline-flex;
	}

	.cmsgov-menu__backdrop {
		display: block;
	}

	.cmsgov-menu__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		max-width: 100%;
		height: 100vh;
		/* Include the padding in the 100vw width — without this the
		   horizontal padding adds onto 100vw and the drawer overflows the
		   viewport. Pair with overflow-x:hidden as a reflow safety net. */
		box-sizing: border-box;
		background: var(--cmsgov-menu-bg);
		z-index: 999;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 4rem 1.25rem 2rem;
		transform: translateX(100%);
		transition: transform 260ms ease;
		visibility: hidden;
	}

	.cmsgov-menu.is-drawer-open .cmsgov-menu__nav {
		transform: translateX(0);
		visibility: visible;
	}

	.cmsgov-menu:not(.is-drawer-open) .cmsgov-menu__backdrop {
		display: none;
	}

	.cmsgov-menu__list {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	/* Long labels wrap instead of running off the edge (reflow). Flex
	   children need min-width:0 or they refuse to shrink below content size. */
	.cmsgov-menu__link,
	.cmsgov-menu__link-label,
	.cmsgov-menu__sublink,
	.cmsgov-menu__sublink-label,
	.cmsgov-menu__column-heading,
	.cmsgov-menu__column-heading-label,
	.cmsgov-menu__column-link--overview {
		min-width: 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.cmsgov-menu__item {
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--cmsgov-menu-border);
		align-items: center;
	}

	.cmsgov-menu__link,
	.cmsgov-menu__link:visited {
		flex: 1 1 auto;
		padding: 1rem 0.5rem;
		font-size: 1.125rem;
		font-weight: 600;
		border-radius: 0;
		/* The drawer background is white; the desktop link color is `base`
		   (white in this theme), so without this override the top-level
		   items render white-on-white. Use the blue accent to match the
		   sub-links and rail headings already styled for the light drawer. */
		color: var(--wp--preset--color--primary, #0d2499);
	}

	/* The disclosure button fills the row; chevron pushed to the right edge. */
	button.cmsgov-menu__link--has-panel {
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}

	/* The drawer background is white on mobile — yellow text is unreadable,
	   so swap the active color back to the blue accent and drop the
	   underline (items already carry bottom borders). */
	.cmsgov-menu {
		--cmsgov-menu-active: var(--cmsgov-menu-accent);
	}

	.cmsgov-menu__link:hover,
	.cmsgov-menu__link:focus-visible,
	.cmsgov-menu__link[aria-current="page"],
	.cmsgov-menu__item.is-current > .cmsgov-menu__link,
	.cmsgov-menu__item.is-open > .cmsgov-menu__link {
		background-color: rgba(13, 36, 153, 0.08);
		box-shadow: none;
	}

	/* Accordion panels inside the drawer — no absolute positioning, no shadow.
	   Animate open/closed with grid-template-rows: 0fr collapsed = zero height
	   AND zero space (no blank gap); 1fr open = the child's natural height. The
	   grid child is clipped (min-height:0 + overflow:hidden) so 0fr truly
	   collapses it. Vertical padding lives on the child, not the panel — padding
	   on the grid container would persist at 0fr and leave a residual gap. */
	.cmsgov-menu__panel {
		position: static;
		flex: 0 0 100%;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 0 1rem;
		transform: none;
		min-width: 0;
		background: transparent;
		/* Height-only reveal: opacity stays 1 so content slides rather than
		   fades; visibility flips to hidden only after the collapse finishes,
		   keeping collapsed items out of the tab order (a11y) without a jump. */
		opacity: 1;
		visibility: hidden;
		display: grid;
		grid-template-rows: 0fr;
		transition:
			grid-template-rows var(--cmsgov-menu-motion) ease,
			visibility 0s linear var(--cmsgov-menu-motion);
	}

	.cmsgov-menu__panel > * {
		min-height: 0;
		overflow: hidden;
		padding-bottom: 0.75rem;
	}

	.cmsgov-menu__item.is-open > .cmsgov-menu__panel,
	.cmsgov-menu__panel.is-expanded {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows var(--cmsgov-menu-motion) ease,
			visibility 0s linear 0s;
	}

	/* Mobile drawer: drop the desktop master/detail grid. The mega menu
	   collapses into a vertical list — every rail entry is shown, and
	   every detail list renders inline below its trigger. */
	.cmsgov-menu__panel--mega {
		min-width: 0;
		min-height: 0;
		background: transparent;
		color: inherit;
		/* Inherits display:grid + grid-template-rows animation + left padding
		   from .cmsgov-menu__panel above, so the mega accordion collapses to
		   zero space and animates exactly like a plain dropdown. */
	}

	/* The desktop centering override (`translateX(-50%)` on the open mega
	   panel) has specificity 0,3,0 and lives outside any media query, so it
	   would otherwise win here and shove the now-static drawer panel half its
	   width off the left edge. Reset it — the drawer panel is a flow accordion,
	   not a fixed centered overlay. */
	.cmsgov-menu__item.is-open > .cmsgov-menu__panel--mega,
	.cmsgov-menu__panel--mega.is-expanded {
		transform: none;
	}

	.cmsgov-menu__panel--mega > .cmsgov-menu__sublist--mega,
	.cmsgov-menu__panel--mega .cmsgov-menu__column {
		display: block;
	}

	/* The disclosure button already shows this section's name in the drawer,
	   so the in-panel title is redundant. Hiding it also leaves the mega panel
	   with a single grid child, so the grid-rows collapse animates identically
	   to a plain dropdown. */
	.cmsgov-menu__mega-title {
		display: none;
	}

	.cmsgov-menu__panel--mega .cmsgov-menu__column-heading,
	.cmsgov-menu__panel--mega .cmsgov-menu__column-heading:visited {
		background: transparent;
		color: var(--wp--preset--color--primary, #0d2499);
		padding: 0.6rem 0.25rem;
	}

	.cmsgov-menu__panel--mega .cmsgov-menu__column.is-active .cmsgov-menu__column-heading {
		background: transparent;
		color: var(--wp--preset--color--primary, #0d2499);
	}

	/* Detail lists go inline (no absolute positioning) and are always
	   visible inside the drawer so users can scan everything at once. */
	.cmsgov-menu__panel--mega .cmsgov-menu__column-list {
		position: static;
		display: flex;
		/* Stack the detail links vertically. Without an explicit direction
		   flex defaults to row, which pushes the links off the right edge of
		   the drawer (horizontal overflow / WCAG 1.4.10 reflow failure). */
		flex-direction: column;
		align-items: flex-start;
		padding: 0 0 0.5rem 0.75rem;
		background: transparent;
		gap: 0.125rem;
	}

	.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink,
	.cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink:visited {
		color: var(--wp--preset--color--primary, #0d2499);
		padding: 0.5rem 0.5rem;
	}

	.cmsgov-menu__column-link--overview,
	.cmsgov-menu__column-link--overview:visited {
		color: var(--wp--preset--color--primary, #0d2499);
		font-size: 1rem;
		padding: 0.5rem 0.5rem;
	}

	.cmsgov-menu__sublink,
	.cmsgov-menu__column-list a {
		padding: 0.6rem 0.5rem;
		font-size: 1rem;
	}

	.cmsgov-menu__column-heading {
		padding: 0.5rem 0.25rem;
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   Vertical orientation (sidebar accordion)
   --------------------------------------------------------------------------
   The menu is permanently expanded (no mobile drawer); sub-panels render
   inline below their parent button as an accordion. Top-level items behave
   like the existing nested disclosure sub-items: click to expand, chevron
   rotates, sibling panels may stay open independently (no "single open at
   a time").

   Fires on three equivalent triggers — combined into a single :is() so the
   descendant rules below stay readable:
     1. `.cmsgov-menu--vertical`           — render.php adds this when the
                                              block's `orientation` attribute
                                              is "vertical".
     2. `.is-style-vertical .cmsgov-menu`  — the block-style class (separate
                                              persistence path so a stale
                                              stored block can't lose vertical
                                              mode).
     3. `.cmsgov-menu.is-style-vertical`   — same, when the style class lands
                                              on the .cmsgov-menu element
                                              directly instead of the wrapper.
   ========================================================================== */

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) {
	font-family: var(--wp--preset--font-family--public-sans, system-ui, sans-serif);
}

/* Stack the top-level list vertically with breathing room between rows. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__list,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublist,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublist--nested,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__column-list {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__item {
	display: block;
	align-items: stretch;
	border-bottom: 1px solid var(--cmsgov-menu-border);
}

/* Top-level link / disclosure button fills the row, chevron on the right.
   Color note: the base .cmsgov-menu__link rule paints text in
   --wp--preset--color--base (white in this theme — meant for the dark blue
   header bar). On the light sidebar we use --text-base (#262626) so the
   text reads against the white background. :visited is also pinned so the
   theme's global a:visited rule doesn't bleed through. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__link,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__link:visited {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	/* Wider right padding leaves a fixed 40px gutter for the chevron on
	   disclosure rows; non-disclosure rows pick up the same horizontal
	   rhythm so the column reads as one consistent stack. */
	padding: 0.5rem 40px 0.5rem 0.5rem;
	/* Reserve the 4px gutter on every item so toggling the current-page
	   indicator doesn't shift the text horizontally. */
	border-left: 4px solid transparent;
	border-radius: 0;
	color: var(--wp--preset--color--text-base, #262626);
}

/* Hover / focus / open (accordion expanded): subtle bg tint, no border. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__link:hover,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__link:focus-visible,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__item.is-open > .cmsgov-menu__link {
	color: var(--wp--preset--color--primary, #0d2499);
	background-color: rgba(13, 36, 153, 0.06);
	box-shadow: none;
}

/* Current page: 4px solid dark-blue left border, no bg tint. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__link[aria-current="page"],
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__item.is-current > .cmsgov-menu__link {
	color: var(--wp--preset--color--primary, #0d2499);
	font-weight: 600;
	background-color: transparent;
	border-left-color: var(--wp--preset--color--primary, #0d2499);
	box-shadow: none;
}

/* Top-level panel in vertical mode — inline accordion (no float, no
   shadow). Uses the same grid-template-rows: 0fr → 1fr collapse as the
   nested subpanel, so closed state takes zero layout space and the open
   state animates to whatever the actual content height is — no max-height
   cap, no clipping concerns. The base rule's absolute-positioning,
   background, border, shadow, and translateY are all reset here. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel {
	position: static;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	min-width: 0;
	transform: none;

	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	/* Padding collapses to 0 when closed so even the breathing room
	   disappears; restored when expanded. */
	padding: 0;
	transition:
		grid-template-rows 220ms ease,
		opacity 180ms ease,
		padding 220ms ease,
		visibility 0s linear 220ms;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel > * {
	overflow: hidden;
	min-height: 0;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel.is-expanded {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	padding: 0 0 0.5rem 1rem;
	transition:
		grid-template-rows 280ms ease,
		opacity 220ms ease,
		padding 280ms ease,
		visibility 0s linear 0s;
}

/* Vertical (sidebar) mode: drop the desktop master/detail grid. The mega
   panel becomes a flat accordion-style list — same shape as the mobile
   drawer's mega rendering. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega {
	display: block;
	background: transparent;
	color: inherit;
	min-height: 0;
	padding: 0;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega > .cmsgov-menu__sublist--mega,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column {
	display: block;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__mega-title {
	background: transparent;
	color: var(--wp--preset--color--text-base, #262626);
	font-size: 1.1rem;
	padding: 0.5rem 0.5rem 0.25rem;
	text-decoration: none;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column-heading,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column-heading:visited {
	background: transparent;
	color: var(--wp--preset--color--text-base, #262626);
	padding: 0.5rem 0.5rem;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column-list {
	position: static;
	display: flex;
	padding: 0 0 0.5rem 0.75rem;
	background: transparent;
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column-list .cmsgov-menu__sublink,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__panel--mega .cmsgov-menu__column-link--overview {
	color: var(--wp--preset--color--text-base, #262626);
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublink,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublink:visited {
	/* Match the top-level padding so sub-rows align with their parent
	   and disclosure sub-rows leave the same 40px gutter for the chevron. */
	padding: 0.5rem 40px 0.5rem 0.5rem;
	/* Same reserved gutter as top-level so the indicator can light up without
	   shifting the text. */
	border-left: 4px solid transparent;
	border-radius: 0;
	color: var(--wp--preset--color--text-base, #262626);
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublink:hover,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublink:focus-visible {
	color: var(--wp--preset--color--primary, #0d2499);
	background-color: rgba(13, 36, 153, 0.06);
}

/* Current page (sub-item): 4px solid dark-blue left border, no bg tint. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__sublink[aria-current="page"] {
	color: var(--wp--preset--color--primary, #0d2499);
	font-weight: 600;
	background-color: transparent;
	border-left-color: var(--wp--preset--color--primary, #0d2499);
}

/* Sidebar chevron uses the tree-nav convention (▶ closed → ▼ open) instead
   of the header's down-→up flip. The SVG itself is a downward triangle, so
   we start it at -90deg (pointing right) and return to 0deg (down) when
   the disclosure is expanded. */
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__chevron {
	transform: rotate(-90deg);
}

:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__item.is-open > .cmsgov-menu__link .cmsgov-menu__chevron,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) .cmsgov-menu__subitem.is-open > .cmsgov-menu__sublink .cmsgov-menu__chevron,
:is(.cmsgov-menu--vertical, .is-style-vertical .cmsgov-menu, .cmsgov-menu.is-style-vertical) [aria-expanded="true"] .cmsgov-menu__chevron {
	transform: rotate(0deg);
}

/* Chevron rotation already handled by the shared aria-expanded rule;
   nothing extra needed here. */

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.cmsgov-menu *,
	.cmsgov-menu *::before,
	.cmsgov-menu *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------- Admin notice when no menu assigned ---------- */

.cmsgov-menu__empty-notice {
	padding: 0.75rem 1rem;
	background: #fff8e1;
	border-left: 4px solid #f59e0b;
	margin: 0;
}