/*
 * Site chrome — header and footer template parts.
 *
 * These are template parts rather than ACF Blocks, so they are built from
 * core blocks and styled by targeting the classes set on them in
 * parts/header.html and parts/footer.html. Kept out of style.css because
 * style.css is also loaded as the editor stylesheet for block previews,
 * where chrome never appears.
 */

/* ─────────────────────────────  Header  ───────────────────────────── */

/*
 * Both lengths are literal rem, not spacing presets. Live is `gap-6 pt-8
 * md:pt-12`; written as presets 40 and 50 they resolved to 1rem and 1.5rem from
 * core's generated scale rather than the 1.5/2.5rem theme.json's spacingSizes
 * array reads as, so the header stood 24px short at the top and every part of it
 * — nav, pill, logo — sat 14px high of live's. See the spacing-scale note in
 * CLAUDE.md.
 */
/*
 * The header is the one element live does not pad on the page gutter: it is
 * `px-8 pt-8 md:px-14 md:pt-12` — 32 then 56 — where a section is `px-6
 * md:px-14`. So the mobile value is 32, not the gutter's 24, and the logo and
 * the menu toggle were sitting 8px nearer the edge than live's on every page.
 * Stated rather than taken from the token for that reason.
 */
.cobell-header {
	position: relative;
	z-index: 30;
	gap: 1.5rem;
	padding: 2rem 2rem 0;
	background-color: var( --wp--preset--color--cream );
}

/*
 * Sized by height, as live does, rather than by width: the logo is the only
 * thing setting the header's height, and the hero below has to know that height
 * to size itself to the rest of the viewport. 5.5rem here, less the 20px the
 * logo is pulled up by, plus the header's 3rem top padding is
 * --wp--custom--header-height, which is what the hero subtracts. The four move
 * together — change one and change the token.
 *
 * Width-driven, this rendered 220x96 against live's 202x88, which is also what
 * put the logo within a few pixels of the top-left portrait instead of clear of
 * it.
 */
.cobell-header__logo img {
	width: auto;
	height: 5rem;
	filter: drop-shadow( 0 2px 6px rgba( 20, 32, 26, 0.18 ) ) drop-shadow( 0 8px 24px rgba( 20, 32, 26, 0.12 ) );
}

/*
 * Live's `-mt-[20px]` on the logo link. It is not cosmetic on the logo alone —
 * the logo is the tallest flex child, so its margin box is what the header's
 * content height resolves to, and the nav and the pill centre against that.
 * Without it the row sits 10px lower inside a 20px taller header.
 *
 * On the flex child rather than the anchor inside it: live's anchor *is* the
 * flex child, and a negative margin on an inline-block would be resolved by
 * inline layout instead.
 *
 * Two classes deep because core's flex layout support emits
 * `.is-layout-flex > :is(*, div) { margin: 0 }` — (0,1,1), so a single class
 * loses and the header simply stands 20px taller. Same family as the
 * `body .is-layout-flex` note in CLAUDE.md.
 */
.cobell-header .cobell-header__logo {
	margin-top: -20px;
}

@media ( min-width: 48rem ) {
	.cobell-header {
		padding-top: 3rem;
		padding-inline: 3.5rem;
	}

	.cobell-header__logo img {
		height: 5.5rem;
	}
}

/*
 * The nav takes whatever room is left between the logo and the Contact Us pill
 * and centres its links in it, which is how live reads. It is a flex child of
 * the header, so the element selector is what distinguishes it from the <ul>
 * inside — core copies the block's className onto both.
 */
nav.cobell-nav {
	flex: 1 1 auto;
}

/*
 * A note on specificity through this section.
 *
 * Core's Navigation block ships opinionated defaults for the submenu — a white
 * panel, black text, its own padding and offsets — at three to five classes
 * deep. Anything here that has to replace one of those is written long enough
 * to outrank it outright rather than relying on this file loading later, since
 * stylesheet order is not ours to guarantee. That is the only reason these
 * selectors are the length they are.
 */
/*
 * 1.5 leading, not the root's 1.6 — live sets it on both the menu row and the
 * dropdown items, and inherited 1.6 stood each row 1.6px tall of live's.
 */
.cobell-nav {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	line-height: 1.5;
	text-transform: uppercase;

	/*
	 * The caret's share of a menu item's width, and what holds every item at
	 * live's x. Two parts, kept apart on purpose: the gap after the label is the
	 * caret's own `padding-left` and scales with the root, the second term is the
	 * advance of ▾ at 8px in Inter and does not, because that 8px is literal. A
	 * single rounded value for the pair — 0.7959rem, or 12.7344px — lands one
	 * LayoutUnit (1/64px) off the width the box computes for itself, which the
	 * centred list splits across the items and which shows up as ~58 differing
	 * antialiasing pixels in a header diff at 1x. This form is exact.
	 *
	 * `--size` is SC 2.5.8's 24px minimum. The two are read by one rule each and
	 * have to agree, which is the only reason they are properties.
	 */
	--cobell-caret-slot: calc( 0.375rem + 6.734375px );
	--cobell-caret-size: 1.5rem;
}

/*
 * 2rem, not --wp--preset--spacing--40. Live's nav is `gap-8` — 32px — and that
 * token resolves to 1rem from theme.json's default spacing scale rather than the
 * 1.5rem its spacingSizes array reads as, so the menu was running at half live's
 * spacing on all 24 pages. See the note on the spacing scale in CLAUDE.md.
 */
.cobell-nav .wp-block-navigation__container {
	gap: 2rem;
}

/*
 * Core doubles a class on itself — `.wp-block-navigation-item__content.wp-block-
 * navigation-item__content { color: inherit }` — purely to win the cascade, so
 * anything setting a link colour here has to clear three classes. Written short,
 * these links inherit their colour instead: solid forest on desktop and, inside
 * the overlay, black.
 *
 * 75% forest is live's, and measures 5.20:1 on cream against the 4.5:1 an 11px
 * label needs.
 */
.cobell-nav li.wp-block-navigation-item > a.wp-block-navigation-item__content {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	padding-block: 0.5rem;
	text-decoration: none;
}

.cobell-nav li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
.cobell-nav li.wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible,
.cobell-nav li.current-menu-item > a.wp-block-navigation-item__content {
	color: var( --wp--preset--color--forest );
}

/*
 * Caret beside a parent item. Core draws a 12px chevron; live sets a solid
 * triangle at 8px, which at that size reads as little more than a dot. Core's
 * SVG is swapped out rather than resized — a stroked chevron scaled down keeps
 * its weight and stays a chevron.
 *
 * The glyph goes on the toggle button core already renders, so the keyboard
 * behaviour attached to that button is untouched. That is also why the font and
 * the colour have to be restated: live's caret is a <span> inside the link and
 * inherits both, where a <button> takes the UA's 13.3px Arial and its own
 * colour. Rendered at 8px, ▾ in Arial is a visibly different mark from ▾ in
 * Inter — narrower, flatter, and a pixel shorter — and at full-strength forest
 * against the link's 75% it read as a heavier icon rather than a wrong one.
 *
 * Spacing: live's is a 6px flex gap after a label that already carries 2.75px of
 * trailing letter-spacing. Core adds a 0.25em margin of its own on top of this
 * rule's padding, which put the caret 2.75px further out than live's.
 *
 * The box was `width: auto` and shrank to 12.73 x 8, which is under SC 2.5.8's
 * 24 x 24 and close enough to the label that the spacing exception is lost too —
 * axe reported 12.8px of safe clickable space against the 24 it wants, on all
 * three parent items. It is 24 square now, and the extra width is handed back as
 * a negative right margin so the button still *occupies* `--cobell-caret-slot`.
 * The `<li>` therefore stays at live's width, the glyph does not move, and the
 * hit area grows rightward into the 2rem menu gap, which is dead space anyway.
 * Height is free: the item is 32.5 tall and centres the button, so 24 does not
 * reach it.
 *
 * Do not go back to `width: auto`. It was load-bearing for the fit and this
 * keeps its effect: core sizes the icon `.6em` square to fit its own 12px
 * chevron, so the glyph rendered *outside* the button's box — the item measured
 * 95 against live's 101, every item to its right sat 3px in, and nothing looked
 * clipped because the button does not scroll. Measure the parent `<li>`, not the
 * caret — the caret alone reads as correct either way.
 */
.cobell-nav .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	width: var( --cobell-caret-size );
	height: var( --cobell-caret-size );
	margin: 0 calc( var( --cobell-caret-slot ) - var( --cobell-caret-size ) ) 0 0;
	padding: 0 0 0 0.375rem;
	font-family: inherit;
	letter-spacing: inherit;
}

.cobell-nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.cobell-nav .wp-block-navigation__submenu-icon::after {
	content: "\25BE";
	display: block;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: 8px;
	line-height: 1;
	transform: translateY( 1px );
	transition: transform 200ms ease, color 200ms ease;
}

/*
 * The hit area is 24 square but the ring stays on the mark. The glyph sits at
 * the start of that box rather than centred — centring it would move it 2.6px
 * off live's x — so the default ring drew an empty square with the caret in one
 * corner, which reads as a misalignment. This is the ring the caret had before
 * the box grew, so no state of the header changed visually.
 */
.cobell-nav .wp-block-navigation__submenu-icon:focus-visible {
	outline: none;
}

.cobell-nav .wp-block-navigation__submenu-icon:focus-visible::after {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 2px;
}

/* Live's caret sits inside the link, so the label's hover colour takes it with
   it. Here it is a sibling and has to be told. */
.cobell-nav li.wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle::after,
.cobell-nav li.wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-submenu__toggle::after {
	color: var( --wp--preset--color--forest );
}

.cobell-nav .has-child:hover > .wp-block-navigation-submenu__toggle::after {
	transform: translateY( 2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav .wp-block-navigation__submenu-icon::after {
		transition: none;
	}
}

/* ── Contact Us ──
 *
 * Two elements, one visible at a time. The pill is the desktop affordance; the
 * nav item is the same link inside the mobile overlay. 600px is core's own
 * overlay breakpoint for overlayMenu:"mobile", so the swap happens exactly
 * where the hamburger does.
 *
 * Teal, matching live. An earlier note here read the reference's pill as clay
 * and moved it to ember for contrast — but live fills it with #005f61, which is
 * cream at 6.02:1 and needs no substitution.
 */
/* Two classes deep because theme.json emits `body .is-layout-flex { display:
   flex }` for every flex container, and a single class loses to it. */
.cobell-header .cobell-header__cta {
	display: none;
}

/*
 * The wrapper, not just the pill inside it. `__end` is a core Group and keeps
 * `display: flex` from theme.json's `body .is-layout-flex` even with a hidden
 * child, so it stayed a zero-width flex item — and the header's 24px `gap`
 * reserves space beside a zero-width item exactly as it would beside a real one.
 * That is why the menu toggle sat 24px in from the edge where live's is flush.
 *
 * Two classes, because `body .is-layout-flex` is (0,1,1) and a single class
 * loses to it.
 */
@media ( max-width: 47.9375rem ) {
	.cobell-header .cobell-header__end {
		display: none;
	}
}

/*
 * Type here is live's, measured: 10.5px / 600 / 0.3em on a 1.5 leading, with
 * 10px of vertical padding. `nowrap` is the one deliberate departure — live's
 * own pill wraps onto two lines at exactly 1024px and stands 52px tall there,
 * which is a defect at one width rather than an intent worth reproducing.
 */
.cobell-header__cta .wp-block-button__link {
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--cream );
	font-size: 0.65625rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.cobell-header__cta .wp-block-button__link:hover,
.cobell-header__cta .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--teal-deep );
	color: var( --wp--preset--color--cream );
}

.cobell-nav li.wp-block-navigation-item.cobell-nav__utility > a.wp-block-navigation-item__content {
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--cream );
}

.cobell-nav li.wp-block-navigation-item.cobell-nav__utility > a.wp-block-navigation-item__content:hover,
.cobell-nav li.wp-block-navigation-item.cobell-nav__utility > a.wp-block-navigation-item__content:focus-visible {
	background-color: var( --wp--preset--color--teal-deep );
	color: var( --wp--preset--color--cream );
}

/*
 * ── The overlay breakpoint is 768, not core's 600 ──
 *
 * Live's nav row is `hidden md:block`: below 768 the header is a 92px band with
 * a Menu button and nothing else. Core's Navigation block hardcodes 600px in
 * its own stylesheet, so from 600 to 767 we were drawing the full desktop row —
 * which wraps to two and three lines at those widths and stood the header 194px
 * tall at 640 against live's 92. Measured on both sides; it was the largest
 * header difference on the site and the reason CLAUDE.md used to describe live
 * as "crushing" its own nav in that band. Live has no nav there to crush.
 *
 * Core's breakpoint is not a block attribute and there is no filter for it, so
 * the two rules it sets at 600 are put back to their base values across the
 * band. They are reproduced literally rather than by `revert`, which would go to
 * the user-agent value and not to core's own.
 *
 * Every selector here carries `.cobell-nav` on top of core's, so it outranks
 * them on specificity and does not depend on stylesheet order — the same
 * discipline the submenu panel below uses, and for the same reason.
 */
@media ( min-width: 37.5rem ) and ( max-width: 47.9375rem ) {
	.cobell-nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: none;
		width: auto;
	}

	.cobell-nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
}

/* Below core's own breakpoint the button is already shown by its base rule; this
   only aligns it, since the dressing rule above cannot set `display`. */
@media ( max-width: 37.4375rem ) {
	.cobell-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/*
 * The header pill and the overlay's Contact Us are one item in two places: the
 * pill is the desktop treatment and the utility row is what stands in for it
 * inside the overlay. They swap at the same 768 the nav does — live hides its
 * pill below md too, verified on the deployed header at 640, which reports one
 * control and it is the Menu button.
 */
@media ( min-width: 48rem ) {
	.cobell-header .cobell-header__cta {
		display: flex;
	}

	.cobell-nav li.wp-block-navigation-item.cobell-nav__utility {
		display: none;
	}
}

/* Below the breakpoint the pill is gone and the nav is just the hamburger, so
   send it to the far edge instead of leaving it centred in open space. */
@media ( max-width: 47.9375rem ) {
	nav.cobell-nav {
		justify-content: flex-end;
	}
}

/* ── Submenu panel ──
 *
 * Cream surface, clay rule down the leading edge, numbered serif items with an
 * arrow that arrives on hover — live's dropdown. The numerals are a CSS counter
 * rather than markup, so they renumber themselves when an editor reorders the
 * menu; the counter only advances on real menu items, which is what keeps the
 * eyebrow and the "All of" row out of the sequence.
 */
.cobell-nav li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container {
	left: 50%;
	padding: 0;
	overflow: hidden;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
	border-radius: 0.375rem;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
	box-shadow: 0 25px 50px -12px color-mix( in srgb, var( --wp--preset--color--forest ) 25%, transparent );
	counter-reset: cobell-nav-item;
	transform: translate( -50%, 0.25rem );
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/*
 * Matching core's own three open triggers — pointer, keyboard, and the toggle
 * button — so the panel settles into place rather than appearing already there.
 * Core transitions opacity alone; this adds the travel.
 *
 * The panel's width lives here rather than in the rule above because core sets
 * it on open, and a :hover in its selector puts that rule a step up the cascade
 * that no amount of length on a static selector can reach.
 */
.cobell-nav li.wp-block-navigation-item.has-child:hover > ul.wp-block-navigation__submenu-container,
.cobell-nav li.wp-block-navigation-item.has-child:focus-within > ul.wp-block-navigation__submenu-container,
.cobell-nav li.wp-block-navigation-item.has-child[data-cobell-open] > ul.wp-block-navigation__submenu-container,
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container {
	width: 20rem;
	min-width: 20rem;
	overflow: hidden;
	transform: translate( -50%, 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container {
		transform: translate( -50%, 0 );
		transition: none;
	}
}

.cobell-nav li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	z-index: 1;
	width: 4px;
	background-color: var( --wp--preset--color--clay );
}

.cobell-nav ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
	counter-increment: cobell-nav-item;
}

.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6875rem 1.5rem;
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1rem;
	letter-spacing: normal;
	text-transform: none;
}

/* Leading numeral. Decorative — it is ordering, not information, and a screen
   reader already gets the position from the list. */
.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content::before {
	content: counter( cobell-nav-item, decimal-leading-zero );
	color: color-mix( in srgb, var( --wp--preset--color--clay ) 70%, transparent );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 0.75rem;
	font-style: italic;
	font-variant-numeric: tabular-nums;
}

/*
 * The arrow that arrives on hover.
 *
 * `font-family` is the reason it was the wrong mark. The anchor above is set in
 * the serif, and a pseudo-element inherits from its originating element — but
 * the reference puts `font-serif` on the numeral and the label spans only, and
 * leaves its arrow span on the header's sans. So live's → is Arial, by way of
 * the `Inter Fallback` face declared in style.css, and ours fell through the
 * serif stack to Times New Roman. Measured with CSS.getPlatformFontsForNode;
 * both sides report a `font-family` that names a face carrying no U+2192, so a
 * computed style shows nothing. This is the one arrow on the site that
 * declaration cannot reach, because it is the one drawn inside a serif box.
 */
.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content::after {
	content: "\2192";
	margin-left: auto;
	color: var( --wp--preset--color--clay );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.875rem;
	opacity: 0;
	transform: translateX( -0.25rem );
	transition: opacity 200ms ease, transform 200ms ease;
}

/*
 * Every state below repeats the base selector and adds to it, rather than
 * naming a shorter path to the same element. Dropping `li.has-child` reads as
 * harmless and costs a class: the base rules above are (0,5,4) and (0,5,5), and
 * a state rule without it lands at (0,5,3) and (0,5,4) — a step *below* what it
 * is meant to override, not above. All three of these were written that way and
 * none of the three did anything. The arrow could never appear, the hover ink
 * never went to forest-deep, and reduced motion never stopped the travel.
 *
 * Nothing about it looks wrong in the stylesheet, and the tell is that the
 * declaration is present in the matched-styles list with its value struck
 * through. Read the computed value, not the rule — the trap the section shell
 * and `.cobell-buttons` have both sprung already.
 */
.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible {
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 5%, transparent );
	color: var( --wp--preset--color--forest-deep );
}

.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover::after,
.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content::after,
	.cobell-nav .wp-block-navigation__submenu-icon svg {
		transition: none;
	}
}

/*
 * Panel eyebrow and the "All of …" row beneath it. Both are injected server-side
 * by inc/navigation.php — core's submenu markup is items and nothing else.
 */
.cobell-nav li.cobell-nav__group-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem 0;
	color: var( --wp--preset--color--clay );
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.4em;
	line-height: 1;
}

.cobell-nav li.cobell-nav__group-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: color-mix( in srgb, var( --wp--preset--color--clay ) 40%, transparent );
}

.cobell-nav li.cobell-nav__group-all {
	margin-top: 0.5rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
}

.cobell-nav__group-all a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.5rem;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-decoration: none;
}

.cobell-nav__group-all a:hover,
.cobell-nav__group-all a:focus-visible {
	color: var( --wp--preset--color--forest );
}

.cobell-nav__group-all a span {
	transition: transform 200ms ease;
}

.cobell-nav__group-all a:hover span {
	transform: translateX( 0.25rem );
}

/* ─────────────────────────  Mobile overlay  ─────────────────────────
 *
 * MobileMenu.tsx, not a stacked copy of the desktop row. An earlier pass here
 * unwound the dropdown's floating chrome and let core stack the submenus open,
 * which produced a flat list of every page on the site — and inverted both type
 * registers on the way: parents took the desktop nav link's 11px uppercase Inter
 * and children took the dropdown's 16px serif, where the reference does the
 * exact opposite. Measured at 390 against the deployed site; scratchpad/mobile-nav.mjs
 * prints both sides.
 *
 * The accordion is core's own. Core already renders a
 * `.wp-block-navigation-submenu__toggle` button per submenu, wired to its
 * Interactivity store — the previous rules set it to `display: none` and forced
 * the submenu open, so the control existed and could not be reached. Nothing
 * here adds state; it makes core's visible and lets it decide.
 *
 * Every selector carries `.cobell-nav` above core's own, which is the discipline
 * the rest of this file uses: core doubles class names on itself to win, and a
 * rule that merely reads as more specific ties and loses on source order.
 */
/*
 * Core paints the open overlay white from
 * `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)`
 * — five classes, because both :not() arguments count. A three-class rule here
 * lost to it silently and the panel stayed white while every other rule in this
 * block applied, which reads as "the colour is wrong" rather than "the rule is
 * not winning". Core's own shape is mirrored with `.cobell-nav` added, so this
 * is six and the margin is visible rather than accidental.
 */
.wp-block-navigation.cobell-nav:not( .has-background ) .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) {
	padding: 0;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
}

/*
 * The noise is the hero's, at the reference's own 6%. Decorative and inert: it
 * is a background on the dialog rather than an element, so nothing lands in the
 * accessibility tree and nothing intercepts a press.
 */
/*
 * The reference is a flex column of full height with the menu on `flex-1`, which
 * is what holds the foot row against the bottom of the screen rather than under
 * the last link. Reproduced as a two-row grid whose second row is `1fr`: the
 * head is a row of two siblings and the menu a third, so a grid places all three
 * without a wrapper that core does not render.
 *
 * The height has to be claimed the whole way down — container, close, dialog —
 * or the dialog is only as tall as its content and `1fr` has nothing to
 * distribute. That was the whole of the foot sitting at 540 against 755.
 *
 * It also has to be *bounded* the whole way down, which is the other half and
 * is what put the foot under the fold on a short viewport. `min-height` alone
 * lets the panel grow past the screen the moment the menu is taller than it
 * is — at 844×390 the dialog stood 490 against a 390 viewport and the foot sat
 * 52px below it, reachable only by scrolling. The panel is the height of the
 * screen and the menu is the part that scrolls.
 *
 * `dvh` rather than `100%`, because a fixed box is laid out against the large
 * viewport: with a mobile browser's toolbar showing, the last 60–100px of the
 * panel — which is exactly the foot row and its padding — sits behind it. The
 * `100%` above it is the fallback and has to stay first.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open {
	height: 100%;
	height: 100dvh;
}

/*
 * A flex column holding one child, so the dialog can be sized by what is *left*
 * rather than by `100%`. Core pushes the dialog clear of the admin bar with
 *
 *   .has-modal-open .admin-bar .is-menu-open:where( … )
 *     .wp-block-navigation__responsive-dialog { margin-top: 46px }   (32 ≥ 782)
 *
 * and a `100%` box inside a `100dvh` panel then overflows by exactly that
 * margin: the dialog ran 46 → 890 of an 844 viewport and the foot row, which is
 * the last thing in it, sat wholly below the fold. `flex: 1` consumes the margin
 * whatever core sets it to, so neither the two heights nor core's 782 breakpoint
 * are restated here — the one number is core's and stays core's.
 *
 * **Only a logged-in visitor has an admin bar**, so every probe that opens the
 * menu logged out reports this fixed. It is an editor-facing bug and invisible
 * to the site.
 */
.cobell-nav .is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-height: 100%;
}

.cobell-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	display: grid;
	grid-template-columns: 1fr auto;
	/* `minmax(0, 1fr)` — an `fr` track floors at min-content, so a plain `1fr`
	   is only a minimum and the menu pushes the row past the screen instead of
	   scrolling inside it. */
	grid-template-rows: auto minmax( 0, 1fr );
	align-items: center;
	/* `min-height: 100%` is what this replaces, and dropping it is the whole
	   point: it is the declaration that ignored the margin above. A flex item's
	   automatic minimum is its content, so `min-height: 0` is still owed or the
	   dialog refuses to shrink and takes the overflow back. */
	flex: 1;
	min-height: 0;
	max-height: 100%;
	/* The run-out below the foot is the foot's own padding, not the dialog's:
	   the foot is sticky, and an opaque row has to reach the bottom edge of the
	   box it scrolls in or the menu shows underneath it. */
	padding: 2rem 2rem 0;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence baseFrequency='0.75'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/></svg>" );
}

/*
 * The content wrapper is a flex box that core centres, so the list inside it was
 * shrink-to-fit — 223px of a 326px column, sitting at x=83. Every rule on the
 * list and its rows was winning and none of it showed, because the box they were
 * arranged inside was the wrong width. Measure the ul's own box before chasing
 * an alignment rule that already applies.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	align-self: stretch;
	/* Core centres this column's children — the same justification setting that
	   centred the menu rows. Without it the foot shrank to its content and sat
	   22px in from the rule above it. */
	align-items: stretch;
	/* Core pads this box as well, which stacked on the margin below and put the
	   first link 67px lower than the reference's. The gap under the head row is
	   one length, not two.

	   The run-out under the foot is the reference's `pb-12`, and it belongs to
	   this box rather than to the foot: this is the scroller, so the 3rem is
	   inside the scrollable area and travels with the content the way live's
	   does, instead of being a fixed band the menu scrolls behind. The safe-area
	   inset is ours — live does nothing about a home indicator, which on a
	   notched phone lands on the last row. */
	padding: 0 0 calc( 3rem + env( safe-area-inset-bottom, 0px ) );
	/* The menu scrolls inside its own row rather than the dialog growing past
	   the screen — which is what let an expanded submenu run underneath the foot
	   instead of moving it.

	   **This is the box that scrolls, so this is where `overscroll-behavior`
	   belongs.** It sat on the list below, which is `flex-shrink: 0` and therefore
	   never has a range of its own — a dead scroll container directly under the
	   finger, and `contain` on it stopped the gesture chaining up to here. With
	   every submenu expanded this box had 426px to give, script could scroll it,
	   and a real gesture over the menu moved nothing at all. */
	overflow-y: auto;
	overscroll-behavior: contain;
	overflow-x: hidden;
	margin-top: 4rem;
	/* A flex item's automatic minimum is its content, so without this the
	   column refuses to shrink and takes the panel with it — the menu would
	   overflow the screen rather than scroll inside it. */
	min-height: 0;
}

/*
 * The menu is the scroll region, not the panel. It keeps its natural height
 * wherever the screen is tall enough — the foot's `margin-top: auto` takes the
 * slack — and shrinks and scrolls only once there is none, which is what holds
 * the foot on the bottom edge instead of below it. `min-height: 0` is what
 * lets it shrink at all; `overscroll-behavior` stops a flick at the end of the
 * list scrolling the page underneath.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container {
	/* The extra half-rem is the scroll box's own padding below — the rows keep
	   the 326px measure they were fitted to. */
	width: calc( 100% + 0.5rem );
	min-height: 0;
	/* Core leaves this list `flex-wrap: wrap`, which costs nothing while the
	   column is free to grow and is a trap the moment it is not: at 390×360 the
	   four rows wrapped into two columns of two, sitting on top of each other's
	   positions rather than scrolling. */
	flex-wrap: nowrap;
	/*
	 * A box cannot scroll one axis and leave the other visible — `overflow-x`
	 * computes to `auto` alongside it — and the accordion toggle hangs 8px past
	 * the row on purpose, for its 44px target. That overhang became a
	 * horizontal scrollbar. The padding takes it back inside the scroll box and
	 * the negative margin keeps the rows on the measure they were fitted to;
	 * clipping it instead would cut 8px off the target.
	 */
	/*
	 * The block half is what stops a scrollbar appearing on a list that fits.
	 * These labels are set at 0.92 leading, so each one's line box is taller
	 * than its own box and the ink overflows it by about 4px at each end —
	 * anchored at the top, that reaches 1.3px past the row, and a scroll box
	 * reports a pixel of overflow and draws a track with nothing to scroll.
	 * Padding the scroll box takes the spill inside it. It is a length rather
	 * than a fix to the leading because the spill scales with the label's
	 * clamp, and 8px clears it at every size in that ramp.
	 *
	 * 1rem, not the 8px the spill needs, because the entrance rises each item
	 * from 8px below its place and a transform on a child counts toward this
	 * box's scrollable overflow. At 0.5rem the two shared one reserve and the
	 * last item was left with 4px it could not scroll, which painted a scrollbar
	 * for the length of the open. The negative margin matches, so nothing moves.
	 */
	padding-block: 1rem;
	padding-right: 0.5rem;
	margin-block: -1rem;
	margin-right: -0.5rem;
	/*
	 * A clipping box, not a scrolling one. `flex-shrink: 0` below means this list
	 * is always its own natural height, so it never has a range — what the
	 * `overflow` buys is the clip that keeps the caret's 8px overhang, the ink
	 * spill and the entrance travel off the wrapper's scroll region.
	 *
	 * **No `overscroll-behavior` here.** It belongs to the box that scrolls, and
	 * on a scroller with nothing to scroll `contain` does not contain a flick —
	 * it swallows the gesture, because a zero range is always at its boundary.
	 * That is the whole surface of the menu refusing to scroll while the wrapper
	 * behind it had 426px to give.
	 */
	overflow-y: auto;
}

/* ── The entrance ──
 *
 * The reference mounts the panel and runs two GSAP tweens (MobileMenu.tsx, the
 * useGSAP block): the panel fades in over 350ms with 8px of downward travel,
 * and every `[data-menu-item]` row — the head, each menu item, the foot — rises
 * 8px and fades in over 400ms, staggered 40ms from a 100ms delay. Six rows on
 * the menu as it stands, so the last lands at 700ms.
 *
 * CSS animations rather than the vendored library, for motion.css's own reason:
 * a fixed timeline with no input needs no script, and runs if one never loads.
 *
 * `cubic-bezier( 0.333, 1, 0.667, 1 )` is not an approximation of GSAP's
 * `power2.out` — it is that curve exactly. power2.out is 1-(1-t)³, and a bezier
 * whose x control points sit at 1/3 and 2/3 has x = t identically, so its y with
 * both control points at 1 expands to 3t - 3t² + t³, which is the same cubic.
 * The value usually quoted for easeOutCubic, `cubic-bezier( 0.215, 0.61, 0.355,
 * 1 )`, is Penner's approximation and runs about 2% adrift through the middle.
 *
 * Nothing here has a hidden resting state. The from-state exists only inside the
 * keyframes and is held through the delay by `backwards`, so a browser that
 * never runs the animation opens the menu on the finished composition rather
 * than on an empty cream panel. That is the hero load-in's construction, and it
 * is why this needs no `html.cobell-motion` gate — there is nothing to strand.
 *
 * Core's entrance is replaced rather than layered: `overlay-menu__fade-in-animation`
 * is 100ms linear and travels *up* from below, where the reference comes down.
 * Its rule is (0,2,0) and these are (0,3,0).
 *
 * The reference's `autoAlpha` also writes `visibility: hidden` at zero opacity.
 * Not reproduced: `visibility` steps rather than interpolates, so carrying it
 * would take a reader's rows in and out of the accessibility tree part-way
 * through an entrance nobody is reading yet, and it looks identical either way.
 */
@keyframes cobell-overlay-in {
	from {
		opacity: 0;
		transform: translateY( -0.5rem );
	}
}

@keyframes cobell-overlay-row-in {
	from {
		opacity: 0;
		transform: translateY( 0.5rem );
	}
}

/*
 * A transform on a child counts toward an ancestor scroll box's scrollable
 * overflow, so every row rising from 8px below its place hands the scrollers
 * above it 8px they cannot scroll, and a scrollbar paints for the length of the
 * entrance. The list's reserve is what answers that for the menu items — it is
 * `1rem` rather than the 8px the ink spill needs, so the spill and the travel
 * each have their own room.
 *
 * The foot needed a second answer while it was pinned: `sticky; bottom: 0` put
 * its box flush with the bottom edge by definition, and room below it and flush
 * against the edge were the same 8px. The travel had to move onto its children.
 * Unpinning settled it — the run-out under the foot is the wrapper's 3rem now
 * and sits inside the same scroller, so the row has 48px to move within and the
 * hairline rises with it again, as the reference's does.
 */

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open {
	animation: cobell-overlay-in 350ms cubic-bezier( 0.333, 1, 0.667, 1 ) backwards;
}

/*
 * The reference wraps its wordmark and close in one `[data-menu-item]`. Ours are
 * two grid items of the dialog — core renders no wrapper to hang one class on —
 * so they share step 0 and arrive together.
 *
 * `--cobell-overlay-row` is a row's place in the stagger. The menu items take
 * theirs from `:nth-child()`; the foot takes its from PHP, because it sits after
 * the list rather than inside it and no selector can count its way there.
 */
.cobell-nav .is-menu-open .cobell-nav__overlay-wordmark,
.cobell-nav .is-menu-open .wp-block-navigation__responsive-container-close,
.cobell-nav .is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item,
.cobell-nav .is-menu-open .cobell-nav__overlay-foot {
	animation: cobell-overlay-row-in 400ms cubic-bezier( 0.333, 1, 0.667, 1 ) backwards;
	animation-delay: calc( 100ms + var( --cobell-overlay-row, 0 ) * 40ms );
}

/* Anything past the eighth item shares the eighth's step. The header measure
   gives out well before a menu is that long, and an unbounded stagger is not
   worth enumerating. */
.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 1 ) {
	--cobell-overlay-row: 1;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 2 ) {
	--cobell-overlay-row: 2;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 3 ) {
	--cobell-overlay-row: 3;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 4 ) {
	--cobell-overlay-row: 4;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 5 ) {
	--cobell-overlay-row: 5;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 6 ) {
	--cobell-overlay-row: 6;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( 7 ) {
	--cobell-overlay-row: 7;
}

.cobell-nav .is-menu-open ul.wp-block-navigation__container > li:nth-child( n + 8 ) {
	--cobell-overlay-row: 8;
}

/* The reference lands reduced-motion readers on the finished panel with a
   `gsap.set()` rather than a shortened tween. Nothing is hidden at rest, so
   dropping the animation is the same thing. */
@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav .wp-block-navigation__responsive-container.is-menu-open,
	.cobell-nav .is-menu-open .cobell-nav__overlay-wordmark,
	.cobell-nav .is-menu-open .wp-block-navigation__responsive-container-close,
	.cobell-nav .is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item,
	.cobell-nav .is-menu-open .cobell-nav__overlay-foot {
		animation: none;
	}
}

/* ── The head row ── */

/*
 * ── Everything below belongs to the overlay and nothing else ──
 *
 * The wordmark, the close label and the foot row are injected into the
 * navigation block, which above the overlay breakpoint is the desktop header
 * row — so they rendered straight into it and stood the header 181px tall at
 * 1440 against 116. They are hidden here and revealed only inside `.is-menu-open`.
 *
 * Keyed on the overlay's own state rather than on a `min-width`: this file
 * already moves core's breakpoint from 600 to 768, so a media query would be a
 * third place that has to agree, and the failure mode is silent in the band
 * where they disagree.
 */
.cobell-nav__overlay-wordmark,
.cobell-nav__overlay-close-label,
.cobell-nav__overlay-foot {
	display: none;
}

.cobell-nav .is-menu-open .cobell-nav__overlay-wordmark {
	display: block;
}

.cobell-nav .is-menu-open .cobell-nav__overlay-close-label {
	display: inline;
}

.cobell-nav .is-menu-open .cobell-nav__overlay-foot {
	display: flex;
}

/* `.cobell-nav` sets uppercase and 0.25em for the desktop row, and both inherit
   down into everything printed inside the overlay. The wordmark is set as the
   footer's is — sentence case, serif — so it has to say so. */
.cobell-nav__overlay-wordmark {
	align-self: center;
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
}

.cobell-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	position: static;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
}

/*
 * The reference's × : two hairlines crossed in a 20x12 box, which is `h-3 w-5`.
 * The box is 12 tall and the mark overflows it, which is deliberate — that box
 * is what keeps the label rather than the icon setting the button's height, and
 * a square icon there made the head row 36 tall against 33 and carried the
 * wordmark down with it.
 */
.cobell-nav__overlay-close-mark {
	position: relative;
	display: block;
	flex: none;
	width: 1.25rem;
	height: 0.75rem;
}

.cobell-nav__overlay-close-mark span {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background-color: currentColor;
}

.cobell-nav__overlay-close-mark span:first-child {
	transform: translateY( -50% ) rotate( 45deg );
}

.cobell-nav__overlay-close-mark span:last-child {
	transform: translateY( -50% ) rotate( -45deg );
}

/* The leading is restated because a <button> does not inherit it — the UA hands
   it `normal`, which is what set the head row 3px short and carried the wordmark
   and the whole menu up with it. Same family as the `.btn` font-family note in
   CLAUDE.md: a button inherits less than it looks like it does. */
.cobell-nav__overlay-close-label {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

/* ── The list ── */

/* Core's overlay stacks the list itself; what it does not do is let the rows
   fill it. The block's own `justifyContent: center` layout attribute is the
   desktop row's, and in a column it becomes the cross-axis rule that held every
   item in the middle of the panel. Qualified through the container for the same
   reason the toggle is. */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
	flex-direction: column;
	gap: 2rem;
	align-items: stretch;
	justify-content: flex-start;
	/*
	 * A flex item shrinks by default, so with the menu taller than its row the
	 * list was squashed to fit and its own rows overflowed it instead. The
	 * scroll container then had nothing to scroll — `scrollHeight` matched the
	 * box exactly — and the items past the fold could not be reached at all.
	 *
	 * Growing is the other half, and it is the reference's `flex-1` on its nav:
	 * the list takes the slack when the menu is short, which is what carries the
	 * foot to the bottom edge. The foot used to do this from its own end with
	 * `margin-top: auto`, which cannot work now that it scrolls — an auto margin
	 * is free space, and an overflowing column has none, so the row arrived
	 * butted against the last menu item instead of 4rem below it.
	 */
	flex-grow: 1;
	flex-shrink: 0;
}

/*
 * A parent is a row that wraps: core renders the item as
 * `<li><a/><button/><ul/></li>`, so the link and the toggle take the first line
 * and the submenu is given `flex-basis: 100%` below to claim the second. The
 * list's own `justify-content: center` comes from the block's layout attribute
 * and is what held every item in the middle of the panel.
 */
/*
 * `flex-direction: row` is the whole of this rule that matters, and its absence
 * cost hours. Core's overlay sets each item to a *column* — so the label and the
 * caret stacked, `justify-content: space-between` governed the vertical axis and
 * did nothing visible, and `align-items` centred both children. Every reading
 * agreed with the CSS and the layout still looked like a centred list with the
 * caret orphaned underneath.
 *
 * The lesson is narrow and worth keeping: when a flex child lands somewhere the
 * main-axis properties cannot explain, read `flex-direction` before reading
 * anything else. Nothing else in a computed style hints that the axes are
 * swapped.
 */
/*
 * A grid rather than a wrapped flex row, so the submenu has a track whose size
 * can be animated. The reference gets this from a wrapper div sized `0fr` to
 * `1fr`; core renders no such wrapper, and the item itself can be the grid — row
 * one is the link and the caret, row two is the list.
 *
 * **`min-content`, never `auto`, on the row the label sits in.** `auto` as a
 * track *maximum* is `max-content` that free space may stretch, and interpolating
 * the `fr` beside it leaves free space to take: track one swelled 44 → 93.75 → 44
 * across the open, peaking at 28%, and `align-items: center` turned half of that
 * into 24.9px of vertical travel on the label with the child rows riding along.
 * That is the bounce. `min-content`, `max-content` and `fit-content()` all
 * decline the space and hold at 0 drift; in a *row* track the three are the same
 * length anyway, because column widths resolve first and a block box then has one
 * height. The reference cannot reach this because its animated grid holds one
 * track and the parent row is outside it.
 *
 * The endpoints, the timing and the mid-open geometry all matched production
 * while this was wrong — the track's own curve is measured on track two, and the
 * wobble is entirely in track one. Read both tracks, and read what the label is
 * doing, before believing a disclosure matches.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: min-content 0fr;
	align-items: center;
	column-gap: 1rem;
	width: 100%;
	/* The reference's `duration-300 ease-out`; Tailwind's ease-out is this curve,
	   not the CSS keyword `ease`, which starts slower and ends faster.
	   The track only: the reference transitions `grid-template-rows` and lets its
	   margin snap, so easing the gap as well moved 16px more than it should over
	   the same 300ms. */
	transition: grid-template-rows 300ms cubic-bezier( 0, 0, 0.2, 1 );
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item[data-cobell-open] {
	grid-template-rows: min-content 1fr;
	row-gap: 1rem;
}

/* The reference disables its own open/close transition here and lands on the
   finished state; the disclosure is still the browser's, so nothing about it
   depends on the animation running. */
@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item,
	.cobell-nav .is-menu-open li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container {
		transition: none;
	}
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content,
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li.wp-block-navigation-item > .wp-block-navigation-submenu > a.wp-block-navigation-item__content {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0;
	color: var( --wp--preset--color--forest );
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.75rem, 6vw, 2.25rem );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

/* ── The disclosure ──
 *
 * Core's toggle, unhidden. Its hiding rule is
 * `.wp-block-navigation__responsive-container.is-menu-open:where(…) .wp-block-navigation-submenu__toggle`
 * — `:where()` contributes nothing, so it is three classes and a rule written as
 * `.cobell-nav .is-menu-open .…__toggle` ties it and loses on source order.
 * Naming the container puts these at four.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--forest );
	cursor: pointer;
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover {
	color: var( --wp--preset--color--clay );
}

/*
 * The desktop caret is not this caret. That rule hides core's `svg` outright and
 * draws live's 8px ▾ from an `::after`, sized against `--cobell-caret-slot` — so
 * unhiding the button here got the ▾ at 8px rather than the reference's 16px
 * chevron, and the glyph's own box was still claiming the desktop's slot, which
 * pushed the row past its width and wrapped the caret onto a line of its own
 * under a centred label. Both halves are put back before this one is drawn.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle::after {
	content: none;
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	display: block;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	/*
	 * The panel's curve, not the CSS keyword `ease`. They are different shapes —
	 * `ease` is slow at both ends, `ease-out` leaves immediately — so the caret
	 * and the list it belongs to were travelling on separate timings and the
	 * caret read as lagging the panel and then catching it up.
	 */
	transition: transform 300ms cubic-bezier( 0, 0, 0.2, 1 );
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		transition: none;
	}
}

/* ── The submenu ──
 *
 * Core paints a floating panel here and holds it open. Both are unwound, and the
 * closed state is a real `display: none` rather than a height animation: core
 * owns the button's `aria-expanded`, and a submenu that is merely clipped leaves
 * its links in the tab order behind a control that says they are hidden.
 */
.cobell-nav .is-menu-open li.wp-block-navigation-item.has-child > .wp-block-navigation-submenu > ul.wp-block-navigation__submenu-container,
.cobell-nav .is-menu-open li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container {
	position: static;
	grid-column: 1 / -1;
	min-width: 0;
	/*
	 * The row is what has height, so the list must be free to be shorter than
	 * its own content and must clip what does not fit while it opens.
	 *
	 * `align-self: stretch` is what ties it to the track. The row above needs
	 * `align-items: center` to centre the link against the caret, and a centred
	 * grid item is sized to its own content — so without this the list stayed
	 * its full height and simply overflowed a zero-height track, which looks
	 * exactly like the animation never being applied.
	 */
	align-self: stretch;
	min-height: 0;
	/*
	 * `clip` rather than `hidden`, and the margin is the focus ring's room. The
	 * reference's child links take an underline, which sits inside the row; ours
	 * take the site's 2px ring at a 2px offset, which reaches 4px past it — so a
	 * clip on the list's own edge cuts the top of the first row's ring and the
	 * bottom of the last row's. 0.25rem is that 4px exactly. It also shows 4px
	 * more than the reference does while the track grows, which no one can see
	 * against a 200px wipe.
	 *
	 * `hidden` stays first as the fallback: without it an unsupported `clip`
	 * falls back to the desktop panel's own `overflow: hidden` anyway, but that
	 * is a rule three screens up deciding this one's behaviour by accident.
	 *
	 * Both lines are repeated on the open state below, which outranks this rule
	 * while a submenu is open. Neither copy is redundant — this one covers the
	 * closed and closing states, that one covers the open and opening ones.
	 */
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 0.25rem;
	margin: 0;
	padding: 0 0 0 1.25rem;
	gap: 0.5rem;
	border: 0;
	border-left: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	opacity: 1;
	transform: none;
	/*
	 * Hidden rather than `display: none`, which cannot animate. `visibility`
	 * still takes the links out of the accessibility tree and out of the tab
	 * order, so a control reading `aria-expanded="false"` still means the rows
	 * are gone — the reference leaves them in the tree behind `tabindex="-1"`.
	 * The delay holds them visible for the length of the close, then drops them
	 * in one step; opening removes the delay so they are there immediately.
	 */
	visibility: hidden;
	transition: visibility 0s linear 300ms;
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child[data-cobell-open] > ul.wp-block-navigation__submenu-container {
	visibility: visible;
	transition: visibility 0s;
}

/*
 * The desktop panel's open state is keyed on the same `aria-expanded="true"` the
 * overlay's accordion sets, so opening a submenu here re-applied the floating
 * dropdown's geometry: a 20rem box translated back by half its own width, which
 * put the list at x=-131 and half of it off the screen. That rule is (0,5,2) and
 * carries the attribute selector precisely so it can beat a static one — the
 * only way past it is to be longer still, which is what naming the container
 * does. Its own comment explains why it is shaped that way; this is the cost.
 *
 * The overflow used to be unwound to `visible` here, from before the open was
 * animated: the panel clips its corners, and stacked in the overlay that read as
 * clipping the last row. The clip *is* the animation now — it is the only thing
 * holding the child rows inside a track that is still growing — and `visible`
 * painted all four rows at their finished positions the instant the press
 * landed, over the two menu items below them, with the 300ms then merely opening
 * the gap underneath. Measured against production at 30% of the open, where live
 * is showing one row and a fifth of the next. Both endpoints and the timing
 * agree, which is why it read as the block's own bug rather than this rule's.
 *
 * The clip is restated rather than left to the rule above, which is where it
 * belongs and where it is inert: the desktop panel's *own* open state is
 * `.cobell-nav … [aria-expanded="true"] ~ ul…` at (0,8,2) and it sets
 * `overflow: hidden`, so it outranks the overlay's (0,5,2) base rule for exactly
 * the length of time a submenu is open. That is the same reach this rule exists
 * to answer for the geometry; the overflow is one more of it.
 */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child[data-cobell-open] > ul.wp-block-navigation__submenu-container,
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.wp-block-navigation__submenu-container {
	width: auto;
	min-width: 0;
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 0.25rem;
	transform: none;
}

/* Core stacks the submenu as a column too, and centres it for the same reason
   the parent rows were centred. The rows are left-aligned against the hairline,
   which is the whole point of the rule being there. */
.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child > ul.wp-block-navigation__submenu-container {
	flex-direction: column;
	align-items: stretch;
}

.cobell-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
	display: block;
	width: 100%;
}

.cobell-nav .is-menu-open li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
	gap: 0.75rem;
	/*
	 * border-box, because the theme sets no global one and `min-height` would
	 * otherwise exclude the padding: 44 became 56, and four rows plus their gaps
	 * made the submenu 248 tall against the reference's 200. That is also what
	 * made the open read wrong — the same 300ms curve over 30% more travel is a
	 * faster move, which is what a "bounce" turns out to be here.
	 */
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.375rem 0;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 1rem;
	/* `.cobell-nav` sets 500 for the desktop row and it inherits the whole way
	   down; the reference sets these rows regular. */
	font-weight: 400;
	line-height: 1.4;
}

/* The trailing arrow belongs to the floating panel's hover, which a touch
   surface has no equivalent for. The numeral stays: it is the reference's own
   mark here, and the register is already written for the dropdown. */
.cobell-nav .is-menu-open li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content::after {
	content: none;
}

.cobell-nav .is-menu-open li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
.cobell-nav .is-menu-open li.has-child > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > a.wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
	color: var( --wp--preset--color--forest-deep );
}

/* The eyebrow and the "All of …" row are the floating panel's framing. In the
   overlay the parent's own link is directly above its children and carries the
   same name, so both would repeat it twice more. */
.cobell-nav .is-menu-open .cobell-nav__group-label,
.cobell-nav .is-menu-open .cobell-nav__group-all,
.cobell-nav .is-menu-open li.wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu-container::before {
	display: none;
}

/* ── The foot ── */

.cobell-nav__overlay-foot {
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/*
	 * In flow, and it scrolls away with the menu — the reference's own behaviour,
	 * read off production: `static`, `margin-top: 64px`, `padding: 24px 0 0`, no
	 * background, `z-index: auto`, and 48px of run-out below it belonging to the
	 * scrolling column rather than to this row.
	 *
	 * This row was `sticky; bottom: 0` with an opaque cream ground and `z-index: 2`
	 * to sit above core's `.wp-block-navigation-item__content { z-index: 1 }`,
	 * and the run-out was cut to 1.5rem because 48px of empty ground under a
	 * pinned row reads as floating. All four of those existed only to serve the
	 * pin, so all four go with it. **Reversed on request** — it was a documented
	 * departure from live in the other direction, and the note in CLAUDE.md moved
	 * with it.
	 *
	 * The 4rem above is the reference's `mt-16` and is constant. What puts the row
	 * on the bottom edge when the menu is short is `flex-grow: 1` on the list —
	 * the reference's `flex-1` on its nav — not an auto margin here, which
	 * collapses to nothing the moment the menu overflows and left the row butted
	 * against the last item.
	 */
	margin-top: 4rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

.cobell-nav__overlay-cta {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
}

.cobell-nav__overlay-cta:hover,
.cobell-nav__overlay-cta:focus-visible {
	color: var( --wp--preset--color--forest );
}

.cobell-nav__overlay-mark {
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 40%, transparent );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* ─────────────────────────────  Footer  ─────────────────────────────
 *
 * Text opacities are live's, and that costs five AA failures. They were raised
 * here first — links to full strength, supporting lines to 88–92% — and the
 * raise was reversed on 2026-08-05 on request: live is the target, and the
 * brighter cream read as a heavier weight beside it.
 *
 * Cream on this teal tops out at 6.02:1, so 80.9% is the lowest opacity that
 * clears 1.4.3's 4.5:1 for normal-size text. Every value below is under it.
 * Measured against #efe6d1 over #005f61, with the substitute that clears AA:
 *
 *   tagline          16px italic   65%   3.46:1   → 81%
 *   meta lines       12px caps     70%   3.77:1   → 81%
 *   column links     14px          75%   4.10:1   → 81%
 *   social / legal   11px semibold 55%   2.91:1   → 81%
 *   copyright        12px          65%   3.46:1   → 81%
 *
 * Nothing here is large-scale text — the 11px semibold labels are the smallest
 * and still take 4.5:1, not 3:1 — so there is no exemption to lean on.
 *
 * Do not "fix" these silently. Same standing as the exceptions listed at the
 * top of need-help.css: the substitution has now been made and reversed once,
 * and each one is a single declaration to put back.
 */

.cobell-footer {
	background-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--cream );
}

.cobell-footer a {
	color: inherit;
	text-decoration: none;
}

.cobell-footer a:hover,
.cobell-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.cobell-footer :focus-visible {
	outline-color: var( --wp--preset--color--sunflower );
}

/*
 * The shared eyebrow carries 2rem beneath it; the reference's footer sets none
 * and spaces the heading off the eyebrow instead (`mt-4`). The two margins are
 * adjacent siblings and collapse, so leaving both would take the larger and put
 * 2rem where live has 1rem.
 *
 * `display: block` is not cosmetic. The shared eyebrow is inline-flex so the
 * ruled registers can space their hairlines, and an inline-level box sits on a
 * line box whose strut is the parent's 25.6px — 10.6px taller than the 15px
 * eyebrow itself, which is the last of the difference in this band. Nothing in
 * the footer is ruled, so there is nothing to lose by dropping the flex.
 */
.cobell-footer .cobell-eyebrow {
	display: block;
	margin-bottom: 0;
	color: var( --wp--preset--color--sunflower );
}

/*
 * Every length below is a literal rem taken from SiteFooterDark.tsx, not a
 * spacing preset. This block was authored against `--wp--preset--spacing--*`,
 * and those presets carry WordPress's generated default scale rather than
 * theme.json's `spacingSizes` — 70 is 3.38rem, not 6rem — so all fourteen of
 * them landed short and the footer measured 759px against live's 955px. See the
 * spacing-scale note in CLAUDE.md; where the reference gives a number, write
 * the number.
 *
 * The inline padding is the gutter token deliberately: its clamp bottoms out at
 * 1.5rem and tops out at 3.5rem, which is exactly the reference's px-6 / md:px-14.
 */

/* Closing CTA banner — px-6 py-20, md:px-14 md:py-28 */
.cobell-footer__cta {
	padding: 5rem var( --wp--custom--gutter );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--cream ) 10%, transparent );
}

@media ( min-width: 48rem ) {
	.cobell-footer__cta {
		padding-block: 7rem;
	}
}

/*
 * Declares its own flex rather than leaning on core's generated layout classes.
 * These two rows used to be core group blocks carrying
 * {"layout":{"type":"flex",…}}, and theme.json's `body .is-layout-flex` was
 * supplying the display; rendering the footer from PHP took those classes with
 * it and the row collapsed, dropping the button on top of the heading. Setting
 * it here is what the rule always should have done — the layout is this
 * component's, not something inherited from how the markup happened to be
 * authored.
 */
/*
 * Live's `flex-col items-start gap-10 md:flex-row md:items-center
 * md:justify-between` — it stacks the sentence above the button until md and
 * only then sets them either side of the band.
 *
 * The direction was never made responsive here, only the wrapping: a row that
 * wraps looks stacked on a phone and looks like live at desktop, so both ends
 * of the range agreed and the middle did not. At 640 there is just enough width
 * for the heading and the pill to sit side by side, so the band measured 92
 * against live's 184 — and because the footer is on all 24 pages, that made
 * every page on the site 92px short at that width.
 */
.cobell-footer__cta-inner {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-inline: auto;
	max-width: 72rem;
	gap: 2.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-footer__cta-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.cobell-footer__cta-heading {
	margin: 1rem 0 0;
	font-size: clamp( 2rem, 4.5vw, 3.75rem );
	line-height: 0.95;
}

.cobell-footer__cta-buttons .wp-block-button__link {
	padding: 1rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background-color: var( --wp--preset--color--cream );
	color: var( --wp--preset--color--forest );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.4286;
	text-decoration: none;
}

.cobell-footer__cta-buttons .wp-block-button__link:hover,
.cobell-footer__cta-buttons .wp-block-button__link:focus-visible {
	background-color: var( --wp--preset--color--sunflower );
	color: var( --wp--preset--color--forest );
	text-decoration: none;
}

/* Link columns — pt-20 pb-12, md:pt-24 md:pb-14 */
.cobell-footer__main {
	padding: 5rem var( --wp--custom--gutter ) 3rem;
}

@media ( min-width: 48rem ) {
	.cobell-footer__main {
		padding-block: 6rem 3.5rem;
	}
}

.cobell-footer__grid,
.cobell-footer__bottom,
.cobell-footer__copyright {
	margin-inline: auto;
	max-width: 80rem;
}

.cobell-footer__grid {
	display: grid;
	gap: 3rem;
}

/* 64rem, not 62 — the reference splits the grid at Tailwind's `lg`. */
@media ( min-width: 64rem ) {
	.cobell-footer__grid {
		grid-template-columns: 1fr 2.5fr;
		gap: 4rem;
	}
}

/*
 * Brand mark. The logo is a full-colour SVG, so the footer paints a cream
 * silhouette of it: the <img> is held at opacity 0 to keep its layout box and
 * its alt text in the accessibility tree, and the link's ::after masks the
 * same file to fill the shape with cream.
 *
 * The reference sizes it by height — h-16, md:h-20 — and it is fixed at each,
 * not fluid. A clamp on the width reached 12.5rem at 1440 and stood 7px taller
 * than live. These are those two heights carried through the mark's own
 * 2063×899, because the <img> below is width-driven and setting a height here
 * would fight it.
 */
.cobell-footer__logo .custom-logo-link {
	position: relative;
	display: block;
	width: 9.1794rem;
}

@media ( min-width: 48rem ) {
	.cobell-footer__logo .custom-logo-link {
		width: 11.4736rem;
	}
}

.cobell-footer__logo img {
	height: auto;
	width: 100%;
	opacity: 0;
}

.cobell-footer__logo .custom-logo-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var( --wp--preset--color--cream );
	-webkit-mask-image: url( "../images/cobell-scholarship-logo-horizontal.svg" );
	mask-image: url( "../images/cobell-scholarship-logo-horizontal.svg" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: left center;
	mask-position: left center;
}

/*
 * Leading in the footer is set per element, not inherited. theme.json's global
 * 1.6 is a body-copy value; live runs a tighter scale down here — 1.5 at 16px
 * and 11px, 1.4286 at 14px, 1.3333 at 12px — so every row was a little loose
 * and the four link columns drifted progressively further apart down the list.
 */
.cobell-footer__tagline {
	margin: 1.25rem 0 0;
	max-width: 20rem;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 65%, transparent ); /* 3.46:1 — see the header note */
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
	line-height: 1.5;
}

/* The pair is not evenly spaced: the reference sets mt-6 on the first line and
   mt-1.5 on the second, so they read as one stacked block set off the tagline. */
.cobell-footer__meta-line {
	margin: 1.5rem 0 0;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 70%, transparent ); /* 3.77:1 — see the header note */
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	line-height: 1.3333;
	text-transform: uppercase;
}

.cobell-footer__meta-line + .cobell-footer__meta-line {
	margin-top: 0.375rem;
}

.cobell-footer__columns {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2.5rem;
}

@media ( min-width: 40rem ) {
	.cobell-footer__columns {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.cobell-footer__column-heading {
	margin: 0;
	color: var( --wp--preset--color--sunflower );
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * The 1.5 here is the <li>'s own strut, not the link's. The row is as tall as
 * the larger of the two, and theme.json's global 1.6 on a 16px strut made every
 * row 26px against live's 24 — two pixels five times over is 10px per column.
 * The reference inherits 1.5 from its body; setting it on the list is the local
 * equivalent, and the root value is shared by all 24 pages.
 */
.cobell-footer__links {
	margin: 1.25rem 0 0;
	padding: 0;
	line-height: 1.5;
	list-style: none;
}

.cobell-footer__links li + li {
	margin-top: 0.75rem;
}

/* The hover to full strength is live's own, and it is the reason these two link
   rules keep a hover at all — the rest state is the failing one. */
.cobell-footer__links a {
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 75%, transparent ); /* 4.10:1 — see the header note */
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
}

.cobell-footer__links a:hover,
.cobell-footer__links a:focus-visible {
	color: var( --wp--preset--color--cream );
}

/* Sub-footer */
/* Same as the closing row above: the flex is declared here now rather than
   inherited from a core group block's layout attribute. */
/* Same responsive direction as the closing row above, and the same reason:
   live is `flex-col gap-6 md:flex-row md:items-center md:justify-between`, so
   the social row sits above the legal row until md. Ours ran them side by side
   from the moment they fitted — 50px against live's 90 at 640. */
.cobell-footer__bottom {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 5rem;
	padding-top: 2rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--cream ) 10%, transparent );
	gap: 1.5rem;
}

@media ( min-width: 48rem ) {
	.cobell-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/*
 * The type is set on the list, not on the anchor, for the same reason as the
 * link columns: the <li> strut sizes the row. With 11px living only on the
 * anchor, each row inherited a 16px strut and stood 26px tall against live's
 * 17 — the whole sub-footer band was 9px deep in the wrong place.
 */
.cobell-footer__inline-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 55%, transparent ); /* 2.91:1 — see the header note */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	line-height: 1.5;
	list-style: none;
	text-transform: uppercase;
}

.cobell-footer__inline-links a:hover,
.cobell-footer__inline-links a:focus-visible {
	color: var( --wp--preset--color--cream );
}

.cobell-footer__copyright {
	margin: 1.5rem auto 0;
	color: color-mix( in srgb, var( --wp--preset--color--cream ) 65%, transparent ); /* 3.46:1 — see the header note */
	font-size: 0.75rem;
	line-height: 1.3333;
}

/*
 * The menu toggle carries a visible "Menu" label, as live's does — its trigger
 * is `inline-flex gap-2 text-[11px] uppercase tracking-[0.25em]` with the icon
 * beside the word, not an icon alone.
 *
 * Added as generated content because the button is core's and its markup is not
 * ours to change without filtering `render_block`. That is safe for 2.5.3 here:
 * core sets `aria-label="Open menu"` on the button, and the visible word is
 * contained in it, so the spoken name and the visible label agree. If that label
 * is ever renamed to something not containing "menu", this has to move into
 * markup.
 *
 * The word is not exposed twice, but not for the reason this comment gave until
 * 2026-08-07: it claimed the pseudo-element sat on an aria-hidden icon span.
 * There is no span — core renders a bare <svg> inside the button — so the rule
 * that fires is the one on the button itself, below. What keeps "Open menu Menu"
 * off is that an `aria-label` replaces the element's content in name
 * computation, so the generated text never enters it. A dead
 * `…-container-open svg::after` rule was sitting under the old explanation and
 * looked like the mechanism; an `::after` on a replaced element generates no
 * box, so it never did anything. Removed.
 */
/*
 * `display` is deliberately not set here. Core hides this button from 600 up
 * with `.wp-block-navigation__responsive-container-open:not(.always-shown)`,
 * which is also two classes — so an unconditional `display: flex` at the same
 * weight wins on source order and leaves the toggle on screen beside the desktop
 * nav row. The band it should appear in is owned by the breakpoint override
 * further up this file; this rule only dresses it.
 */
.cobell-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	/* 75% forest, live's, and it carries the mark as well as the label — both
	   are `currentColor`. 5.20:1 on cream, which an 11px label needs. Full
	   strength is the hover, as it is on the nav links. */
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cobell-nav .wp-block-navigation__responsive-container-open:hover,
.cobell-nav .wp-block-navigation__responsive-container-open:focus-visible {
	color: var( --wp--preset--color--forest );
}

/*
 * The mark is drawn here, not resized from core's.
 *
 * Core's icon is two 16-wide bars in a 24 viewBox, and the box was set 20 x 12.
 * An SVG scales to fit its *shorter* side, so a 24-square viewBox in a 20 x 12
 * box renders at half size and centres: the bars drew 8 x 0.8 inside a 20-wide
 * element. The box measured correct on both sides — 20 x 12 at the same x and y
 * as live's — and the glyph inside it was 40% of live's width. Measure the
 * marks, not the icon's box.
 *
 * Live's is three 1px rules on a 20 x 12 span at 0, 5.5 and 11. The outer two
 * are borders and the middle a background line, so under forced colours two of
 * the three survive — a background image is dropped there and a border is not.
 * `box-sizing` is explicit because this theme sets none globally, and content-box
 * would add the borders to the 12.
 */
.cobell-nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.cobell-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	box-sizing: border-box;
	display: block;
	width: 1.25rem;
	height: 0.75rem;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	/*
	 * The middle rule is drawn by the gradient's own stops rather than by
	 * `background-position`, because a position is snapped to whole pixels:
	 * live's line sits at 5.5 and every form of `center` or `top 5.5px` painted
	 * it at 6, which leaves 5px above the line and 4 below where live has 4.5
	 * of each. Stops are not snapped. `border-box` origin so the 5.5 is measured
	 * from the mark's own top edge rather than from inside the borders.
	 */
	background-image: linear-gradient( to bottom, transparent 5.5px, currentColor 5.5px, currentColor 6.5px, transparent 6.5px );
	background-origin: border-box;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/*
 * The one word on this site that CSS draws rather than PHP, because the button
 * is core's and the mark beside it is a ::before. Fed from Site Options as a
 * custom property rather than written here — pseudo-element content is invisible
 * to `textContent`, so a literal in this file is the single hardest kind of
 * hardcoded string to find again.
 *
 * The fallback is the shipped default, so a stylesheet loading before the
 * property is set still draws a labelled button rather than a bare mark.
 */
.cobell-nav .wp-block-navigation__responsive-container-open::after {
	content: var( --cobell-nav-menu-label, "Menu" );
}