/*
 * chrome.css — the site FRAME.
 *
 * Header, mobile drawer, primary navigation, mega menu, wordmark, footer.
 * Everything that surrounds the page rather than being part of it; the bands
 * themselves are in sections.css.
 *
 * This file carries the largest new work in the port, and it is worth being
 * precise about which parts are ported and which are new:
 *
 *   PORTED VERBATIM   the wordmark, the footer lists, and all 46 `.bb-mega`
 *                     selectors. Two documented traps are encoded in them and
 *                     must survive any edit — see the comments in place.
 *
 *   ABSORBED          the base flex layout for the navigation. A block theme
 *                     got this from core's navigation stylesheet plus a
 *                     generated `wp-container-*` rule for the block's `layout`
 *                     and `blockGap` attributes. A classic theme enqueues
 *                     neither, because core/navigation never renders. Without
 *                     these rules the menu is a vertical stack of bullets.
 *
 *   MOVED FROM theme.json  the `styles.blocks.core/navigation` node. Whether
 *                     WordPress prints block-scoped global styles for a block
 *                     that never renders is version-dependent, and a site whose
 *                     nav typography silently depends on that answer is a site
 *                     that breaks on a core update. It is plain CSS here, and
 *                     the theme.json node is deleted rather than left to rot.
 *
 *   NEW               the drawer. Amendment B — see template-parts/navigation.php.
 *
 * Loads SECOND, immediately after style.css.
 */

/* --------------------------------------------------------------------------
   Header frame
   -------------------------------------------------------------------------- */

.bb-site-header {
	position: relative;
	z-index: 30;
}

/* THE CREAM BAND. Full-bleed, and it must remain a separate element from
   <header> — see the long note in header.php. The padding lives here rather
   than on <header> so that the band paints the whole of the header's height;
   on <header> it would leave the padding outside the background on Home, where
   art-direction.css makes the band itself transparent. */
.bb-header__inner {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
}

/* The 1200px content container, and the element .bb-mega__panel anchors to.
   The max-width sat on .bb-header__inner until the background moved outward;
   it has to travel with the CONTENT, not with the band, or the cream stops at
   1200px and the page gets a cream stripe with base-coloured margins either
   side above 1248px. */
.bb-header__bar {
	margin-inline: auto;
	max-width: 1200px;
}

/* The bar the mega panel anchors itself to. position:relative here and
   position:static on everything between it and the panel is one decision in two
   halves; see the desktop block further down. */
.bb-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.bb-header__cta {
	flex: 0 0 auto;
}

/*
 * DONATE NEVER GETS A LINE OF ITS OWN.
 *
 * The bar is three flex children — wordmark, navigation, Donate — and it used
 * to be `flex-wrap: wrap`. Wrapping picks the LAST child to drop, so between
 * roughly 600px and 900px, where the desktop navigation is still shown but no
 * longer fits beside the wordmark, Donate fell onto its own row and the header
 * grew from 47px to 138px. Adding a sixth top-level menu item made that range
 * wider; it was always latent.
 *
 * The bar therefore does not wrap. Instead the NAVIGATION is the thing that
 * gives: it may shrink below its content width, and its own item list already
 * carries `flex-wrap: wrap` (ported from the block theme's layout attributes),
 * so menu items reflow within the nav's own box while the wordmark and Donate
 * stay on the first line where they belong.
 *
 * `min-width: 0` is the load-bearing half. A flex item's default
 * `min-width: auto` refuses to shrink below its content, so `flex-shrink`
 * alone would do nothing and the nav would push Donate out of the bar.
 */
.bb-header__bar {
	flex-wrap: nowrap;
}

.bb-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.bb-wordmark {
	flex: 0 1 auto;
	min-width: 0;
}

/* On the narrowest phones the wordmark, the drawer toggle and Donate together
   exceed the viewport. Donate keeps its label and its heart — both are
   load-bearing per the note in header.php — so the padding gives instead. */
@media ( max-width: 400px ) {

	.bb-donate {
		padding-inline: 1.05em;
	}
}

/* --------------------------------------------------------------------------
   Navigation base layout — what core's stylesheet used to supply
   --------------------------------------------------------------------------
   Transcribed from the block theme's header.php:59, where these were block
   attributes:

       layout: { type: flex, justifyContent: center, flexWrap: wrap }
       style.spacing.blockGap: var:preset|spacing|40

   WordPress turned those into a generated `wp-container-core-navigation-*`
   rule at render time. No block, no generated rule — so they are written out
   here, against the same class names the walker emits. */

.wp-block-navigation {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-navigation-item {
	display: flex;
	align-items: center;
	position: relative;
}

.wp-block-navigation-item__content {
	text-decoration: none;
	color: inherit;
}

/* Nav typography — moved out of theme.json's styles.blocks.core/navigation.
   Scoped to .bb-primary-nav so it cannot leak into a navigation-shaped list
   somewhere in page content. */
.bb-primary-nav {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
}

.bb-primary-nav a,
.bb-primary-nav .bb-mega__summary {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

.bb-primary-nav a:hover,
.bb-primary-nav a:focus {
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: underline;
}

/* motion.css:302-338 replaces that hover underline with its own animated
   pseudo-element wipe. This declaration is the no-JS / reduced-motion floor,
   not the finished treatment. */

.wp-block-navigation__submenu-container {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   The mobile drawer (Amendment B) — NEW CODE
   --------------------------------------------------------------------------
   A <details> element, so it opens, closes and announces with JavaScript
   disabled. assets/js/nav.js adds Escape, click-outside, the scroll lock, focus
   return and close-on-resize; none of those are required for the menu to be
   usable, which is the point.

   BREAKPOINT 600px, matching the `overlayMenu:"mobile"` threshold the block
   theme inherited from core, so visitors see no shift in behaviour. */

.bb-nav {
	position: static;
}

/* Kill the native disclosure triangle; the SVGs in the summary replace it. */
.bb-nav > summary::-webkit-details-marker {
	display: none;
}

.bb-nav > summary::marker {
	content: "";
}

.bb-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--forest);
	padding: 0.35rem;
	border-radius: 6px;
	line-height: 0;
}

.bb-nav__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-text);
	outline-offset: 2px;
}

.bb-nav__toggle-icon--close {
	display: none;
}

.bb-nav[open] .bb-nav__toggle-icon--open {
	display: none;
}

.bb-nav[open] .bb-nav__toggle-icon--close {
	display: block;
}

@media ( max-width: 599px ) {
	.bb-nav__toggle {
		display: inline-flex;
		/* 0.3rem, not 0.35rem. See the height note directly below. */
		padding: 0.3rem;
	}

	/* THE TOGGLE MUST NOT BE THE TALLEST THING IN THE HEADER BAR.
	   Below 600px the bar's height is set by its tallest flex child, which in
	   the block theme was the Donate button at 34.3px. Here the drawer toggle
	   came out at 37.1px and took over, making the header 3px taller than the
	   one it replaces — and since the header is the first thing on the page,
	   that 3px moved all 6,000px of Home underneath it. It was the single
	   biggest contributor left to the front page's diff at 390 and 599px.

	   Two things were wrong. The <details> was a block container, so it added a
	   line box on top of the summary's own height; `display: flex` makes it hug
	   its child. And the summary's 0.35rem padding put the icon in a 35.2px
	   box. At 0.3rem it is 33.6px, the Donate button governs the bar again, and
	   the header measures 66px — the baseline exactly.

	   33.6px is still a bigger target than the hamburger this replaces, which
	   was core's at 24px, and it clears the 24px WCAG 2.5.8 minimum with room
	   to spare. Do not shrink it further to buy pixels; there are none left to
	   buy here. */
	.bb-nav {
		display: flex;
	}

	/* The drawer is a panel under the bar rather than a full-screen modal.
	   Core's overlay covered the Donate button; keeping the bar visible means
	   the primary call to action survives the menu being open, which is what
	   the comp shows. */
	.bb-nav__drawer {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 60;
		background: var(--wp--preset--color--base);
		border-block-start: 1px solid rgba( 57, 62, 46, 0.12 );
		box-shadow: 0 18px 44px rgba( 42, 42, 36, 0.18 );
		padding: var(--wp--preset--spacing--40);
		max-height: calc( 100vh - 100% );
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bb-nav[open] .bb-nav__drawer {
		position: absolute;
	}

	/* Vertical inside the drawer, and full-width targets so a thumb has
	   something to hit. */
	.bb-nav__drawer .wp-block-navigation,
	.bb-nav__drawer .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--20);
	}

	.bb-nav__drawer .wp-block-navigation-item {
		display: block;
	}

	.bb-nav__drawer .wp-block-navigation-item__content,
	.bb-nav__drawer .bb-mega__summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-block: 0.7rem;
		font-size: var(--wp--preset--font-size--medium);
	}

	/* Scroll lock, applied by nav.js. Declared here rather than as an inline
	   style so that removing it cannot leave a stray attribute behind. */
	html.bb-nav-open,
	html.bb-nav-open body {
		overflow: hidden;
	}
}

/* At 600px and above the toggle is gone and the drawer is inert: the <details>
   wrapper must not be able to hide the menu regardless of its `open` state, or
   a visitor who left it closed on a phone and rotated to landscape would find
   no navigation at all.

   THIS RULE SHIPPED BROKEN ONCE. Writing down exactly how, because the failure
   was invisible in every check that did not open a browser.

   The first attempt was `display: block !important` on `.bb-nav__drawer`. That
   cannot work, and no amount of specificity would have helped: a closed
   <details> does not hide its content with `display`, it hides it with
   `content-visibility: hidden` on the `::details-content` PSEUDO-ELEMENT. The
   drawer is a child of that pseudo-element, so overriding the child's `display`
   overrides nothing.

   What it produced was worse than an obviously broken menu. The nav was still
   laid out — getBoundingClientRect() reported a perfectly healthy 851x21 box,
   and every "is it visible?" check that trusted geometry said yes — but it was
   never painted and never hit-tested. The desktop site simply had no
   navigation, while the markup, the CSS and the measurements all looked right.

   The fix targets the pseudo-element itself. Note that this is ALSO the one
   declaration permitted there: `content-visibility` is the only property that
   may appear on `::details-content` in this theme, because `translate` and
   `opacity` made it a containing block and collapsed the mega panel from 1200px
   to 116px. Setting content-visibility is the sanctioned use, not an exception
   to that rule. */
@media ( min-width: 600px ) {
	.bb-nav__toggle {
		display: none;
	}

	.bb-nav__drawer {
		position: static;
	}

	.bb-nav::details-content {
		content-visibility: visible;
	}
}

/* --------------------------------------------------------------------------
   Mega menu
   --------------------------------------------------------------------------
   Built on native <details>/<summary>, so it works with JavaScript disabled.
   The Interactivity API only adds hover intent, Escape, and click-outside. */

.bb-mega {
	position: relative;
	list-style: none;
}

.bb-mega__details {
	position: static;
}

.bb-mega__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}

/* Remove the native disclosure triangle; the chevron span replaces it. */
.bb-mega__summary::-webkit-details-marker {
	display: none;
}

.bb-mega__summary::marker {
	content: "";
}

.bb-mega__summary:hover,
.bb-mega__details[open] .bb-mega__summary {
	color: var(--wp--preset--color--terracotta-text);
}

.bb-mega__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-text);
	outline-offset: 3px;
	border-radius: 2px;
}

.bb-mega__chevron {
	display: inline-flex;
	transition: transform 0.18s ease;
}

.bb-mega__details[open] .bb-mega__chevron {
	transform: rotate( 180deg );
}

/* --- Panel --- */

.bb-mega__panel {
	background: var(--wp--preset--color--base);
}

.bb-mega__inner {
	display: grid;
	gap: 0;
}

.bb-mega__col {
	padding: clamp( 1.25rem, 3vw, 2.5rem );
}

.bb-mega__col--list {
	background: var(--wp--preset--color--base);
}

.bb-mega__col--feature {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.bb-mega__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-mega__col--feature .bb-mega__eyebrow {
	color: var(--wp--preset--color--terracotta-on-dark);
}

.bb-mega__headline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.5rem, 3vw, 2.1rem );
	line-height: 1.1;
	color: var(--wp--preset--color--forest);
	margin: 0 0 0.6rem;
}

.bb-mega__sub {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1.25rem;
}

.bb-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-mega__list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.85rem;
	border-top: 1px solid rgba( 42, 42, 36, 0.16 );
	text-decoration: none;
	color: var(--wp--preset--color--forest);
}

.bb-mega__list a:hover,
.bb-mega__list a:focus {
	color: var(--wp--preset--color--terracotta-text);
}

.bb-mega__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	flex: 1;
}

/* Concentric circles from the mockup, drawn from palette tokens rather than
   cropped as an image — an image would bake in a colour the contrast gate
   cannot check, and cost a request. */
.bb-mega__circle {
	display: block;
	width: clamp( 5rem, 9vw, 8rem );
	aspect-ratio: 1;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
	position: relative;
}

.bb-mega__circle::after {
	content: "";
	position: absolute;
	inset: 26%;
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
}

.bb-mega__feature-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.4rem, 2.6vw, 1.95rem );
	line-height: 1.15;
	margin: 0 0 1rem;
}

.bb-mega__feature-link a {
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.bb-mega__feature-text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.75rem 0 0;
	opacity: 0.9;
}

/* Kept after the deeper column's removal: the About panel's "About BASIC"
   footer link reuses it. When the panel content is a direct grid child (the
   About panel), it spans the full panel width below the cards. */
.bb-mega__all {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.bb-mega__inner > .bb-mega__all {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0 clamp( 1.25rem, 3vw, 2.5rem ) 1.5rem;
}

/* --- About panel: two featured cards (Stories / Testimonials) --- */

.bb-mega__col--card {
	background: var(--wp--preset--color--base);
	text-align: center;
}

.bb-mega__card-title {
	margin: 0 0 0.5rem;
}

.bb-mega__card-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.4rem, 2.6vw, 1.8rem );
	line-height: 1.15;
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

.bb-mega__card-title a:hover,
.bb-mega__card-title a:focus {
	color: var(--wp--preset--color--terracotta-text);
}

.bb-mega__card-text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* In-brand glyphs, CSS-drawn from palette tokens for the same reasons as
   .bb-mega__circle: an image would bake in a colour the contrast gate cannot
   check, and cost a request. */
.bb-about-glyph {
	display: block;
	width: clamp( 4.5rem, 8vw, 6.5rem );
	aspect-ratio: 1;
	margin: 0 auto 1.25rem;
	position: relative;
}

/* Stories: two offset "pages", terracotta beneath sage. */
.bb-about-glyph--stories::before,
.bb-about-glyph--stories::after {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 14%;
}

.bb-about-glyph--stories::before {
	background: var(--wp--preset--color--terracotta);
	transform: rotate( -8deg );
}

.bb-about-glyph--stories::after {
	background: var(--wp--preset--color--sage);
	transform: rotate( 4deg );
}

/* Testimonials: a sage circle carrying an oversized display-font quote mark,
   echoing the site's pull-quote styling. */
.bb-about-glyph--testimonials {
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
}

.bb-about-glyph--testimonials::after {
	content: "\201C";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-top: 0.4em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 3rem, 6vw, 4.5rem );
	line-height: 0;
	color: var(--wp--preset--color--terracotta);
}

/* --- Desktop: overlay panel --- */

/* The header must be its own POSITIONED layer, above <main>.
 *
 * Load-bearing, not decoration. motion.css names this element for view
 * transitions above 1200px, and per css-view-transitions-1 §2.1.1 a non-none
 * `view-transition-name` "forms a stacking context" AT ALL TIMES, not only
 * during a transition. That stacking context is unpositioned with
 * z-index:auto, so it paints atomically at its in-flow position — BEFORE its
 * <main> sibling. The panel's own z-index:50 is then trapped inside it and
 * cannot compete, so page content painted OVER the open mega-menu panel on
 * every interior page at >=1200px. Measured: with the panel open at 1250px,
 * the topmost element over the panel was the page's <img>, not the panel.
 *
 * `position: relative` is required — z-index alone does nothing on a static
 * box, and this element is otherwise static.
 *
 * 20 matches the value art-direction.css already uses for the home-page
 * header, because it is the same concept: one "header layer" above the page.
 * Home keeps its own rule (position:absolute over the hero); that selector
 * carries body.home so it outspecifies this one, and art-direction.css
 * cascades later anyway.
 *
 * NOT scoped to the 1200px media query. The trap only bites above 1200px
 * today, but a header that sits above page content is correct at every width,
 * and tying this to motion.css's breakpoint would silently reintroduce the bug
 * the moment that breakpoint moved.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 20;
}

/* The overlay starts at 600px — the same boundary where the drawer ends — not
   at 900px. Between 600 and 899px (phone landscape, small tablets) the panel
   used to open IN FLOW inside the horizontal bar, which inflated the bar and
   squeezed the links into the trigger's own ~150px column. Any width with a
   horizontal menu bar gets the anchored dropdown; only inside the drawer
   (<600px) does the panel open as an in-flow accordion. */
@media ( min-width: 600px ) {
	/* The panel is anchored to the HEADER BAR, not to the menu item.
	   Anchoring it to the <li> made a 1100px panel extend leftward from
	   wherever "Our Programs" happens to sit, pushing its first column off the
	   left edge of the viewport. The header bar is the 1200px content
	   container, so the panel spans it the way the mockup shows. */
	.bb-header__bar {
		position: relative;
	}

	/* THE PANEL ANCHORS TO .bb-header__bar, NOT TO THE <li>.
	   Every element between them must therefore be position:static, or the
	   panel resolves against a ~116px menu item: it first rendered 1100px wide
	   off the left edge, then 116px wide once inset-inline:0 applied to the
	   wrong ancestor. Two of these are the drawer chrome, which exists at every
	   width; the other two are the nav and its list.

	   The element qualifications the block theme carried (nav.wp-block-navigation)
	   are dropped: they existed to outspecify core's navigation stylesheet,
	   which a classic theme never enqueues. Nothing is competing any more, so
	   carrying them forward would be cargo. */
	.bb-header__bar .bb-nav,
	.bb-header__bar .bb-nav__drawer,
	.bb-header__bar .wp-block-navigation,
	.bb-header__bar .wp-block-navigation__container,
	.bb-header__bar li.bb-mega {
		position: static;
	}

	/* max-width + auto margins centre the panel within the header bar it is
	   anchored to; inset-inline: 0 still supplies the containing box. With
	   the deeper column gone, a full-bar panel read as two columns rattling
	   around in a 1200px tray. */
	.bb-mega__panel {
		position: absolute;
		inset-inline: 0;
		top: calc( 100% + 0.75rem );
		z-index: 50;
		max-width: 46rem;
		margin-inline: auto;
		border-radius: 18px;
		overflow: hidden;
		box-shadow: 0 18px 44px rgba( 42, 42, 36, 0.18 );
	}
}

/* 600–899px shows the links-only panel content (see the classic two-level
   media block near the end of this file), so the dropdown narrows to fit a
   list rather than presenting 46rem of near-empty tray. */
@media ( min-width: 600px ) and ( max-width: 899px ) {
	.bb-mega__panel {
		max-width: 26rem;
	}
}

@media ( min-width: 900px ) {
	.bb-mega__inner {
		grid-template-columns: 1.1fr 1fr;
	}

	/* The About panel's two cards split evenly; the list/feature asymmetry
	   above is tuned for the Our Programs panel only. */
	.bb-mega__inner:has( > .bb-mega__col--card ) {
		grid-template-columns: 1fr 1fr;
	}

	.bb-mega__col--card + .bb-mega__col--card {
		border-inline-start: 1px solid rgba( 42, 42, 36, 0.12 );
	}
}

/* --- Below 600px: native in-flow accordion, inside the drawer ---
   Nothing here positions the panel, so it opens as an ordinary <details> in
   the flow of the drawer. The DRAWER, not core's overlayMenu:"mobile", is what
   guarantees nothing positions above the page at small widths. --- */

@media ( max-width: 599px ) {
	.bb-mega__panel {
		border-radius: 12px;
		overflow: hidden;
		margin-block-start: 0.75rem;
	}
}

/* The featured circle never fits the reduced panel content below 900px; the
   whole feature column is hidden there too (end of this file), but the circle
   rule predates that block and costs nothing to keep explicit. */
@media ( max-width: 899px ) {
	.bb-mega__circle {
		display: none;
	}
}

/* Editor placeholder */
.bb-mega--editor {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bb-mega__editor-note {
	font-size: 0.7rem;
	opacity: 0.6;
	font-style: italic;
}
/* --------------------------------------------------------------------------
   Hero: undo the flow margin the new markup shape introduces
   --------------------------------------------------------------------------
   In the block theme the ENTIRE hero — artwork, copy and pull-quote — was the
   output of a single core/html block inside <section class="bb-hero">. Raw
   HTML, no layout class, so core's flow spacing never touched its children and
   .bb-hero__copy had margin-block-start: 0 at every width.

   Here the hero has to be a core/group, because `<!-- wp:basic-borrego/hero-art
   /-->` must stay a real block reference — it resolves assets/hero-paths.json
   at render time, which a baked HTML copy could not do. A group carries
   `is-layout-flow`, and core's global stylesheet then says

       :root :where(.is-layout-flow) > * { margin-block-start: 24px; }

   which lands on .bb-hero__copy because the artwork is the first child and the
   copy is the second. That is 24px the design never asked for, and it is
   NOT confined to small screens: above 900px the copy is absolutely positioned
   but its offsets are percentages, so the margin still shifts it down. It moved
   the headline, the lead, both buttons and the pull-quote on every view of the
   front page — worth about half of Home's remaining pixel difference.

   `:root` is on the front of the selector for specificity, not for scoping.
   Without it this is (0,1,0) — an exact tie with core's rule — and a tie is
   settled by which stylesheet prints last. That is precisely how the global
   styles moving to the footer broke this theme once already. (0,2,0) wins
   outright and stops depending on print order at all. */

:root .bb-hero > .bb-hero__copy {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */

.bb-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--wp--preset--color--forest);
	position: relative;
}

.bb-wordmark:hover,
.bb-wordmark:focus {
	text-decoration: none;
}

.bb-wordmark__mark {
	display: block;
	color: var(--wp--preset--color--terracotta);
	flex: 0 0 auto;
}

.bb-wordmark__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.bb-wordmark__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.bb-wordmark__place {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-top: 0.28em;
	opacity: 0.75;
}

/* Footer variant sits on deep forest, so it inherits cream from the band. */
.bb-wordmark--footer {
	color: var(--wp--preset--color--base);
}

.bb-wordmark--footer .bb-wordmark__mark {
	color: var(--wp--preset--color--terracotta-on-dark);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.bb-header__nav {
	flex: 1 1 auto;
	justify-content: center;
	gap: clamp( 1rem, 3vw, 2.25rem );
}

.bb-header__end {
	flex: 0 0 auto;
}

.bb-donate__heart {
	margin-inline-start: 0.5em;
	font-size: 0.9em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bb-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-footer-list li {
	margin-block: 0.45rem;
}

.bb-footer-list a {
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.bb-footer-list a:hover,
.bb-footer-list a:focus {
	color: var(--wp--preset--color--terracotta-on-dark);
	text-decoration: underline;
}

/* Contact links in the footer sit on deep forest — cream, not terracotta,
   because terracotta-text measures only 1.8:1 against forest-deep.

   The block theme qualified this with `.wp-block-group` because the footer WAS
   a group block. footer.php now emits a <footer>, so the qualification is
   dropped and the rule keys purely off the background class — which is why
   footer.php must keep emitting `has-forest-deep-background-color`. Remove that
   class and every footer link silently reverts to a colour that fails
   contrast. */
.has-forest-deep-background-color a {
	color: var(--wp--preset--color--base);
}

.has-forest-deep-background-color a:hover,
.has-forest-deep-background-color a:focus {
	color: var(--wp--preset--color--terracotta-on-dark);
}

/* --------------------------------------------------------------------------
   Footer frame
   --------------------------------------------------------------------------
   The block theme built this with core/columns at 30% / 18% / 18% / 34% and a
   blockGap of spacing|50. Reproduced here as a grid, because the columns are
   now emitted by footer.php rather than by block markup, and because a grid
   collapses more gracefully than percentage flex-basis when the two menu
   columns have different numbers of items. */

.bb-site-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.bb-footer__inner {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 30fr 18fr 18fr 34fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.bb-footer__heading {
	/* .bb-eyebrow in the pattern, with terracotta-on-dark at small size.
	   The colour is also emitted as `has-terracotta-on-dark-color` on the
	   element, because style.css:189 outspecifies this line; see the note in
	   inc/regions.php. This declaration is the fallback, not the mechanism. */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--terracotta-on-dark);

	/* NO BOTTOM MARGIN, deliberately.

	   This was `0 var(--wp--preset--spacing--30)` — 16px — which looks like an
	   ordinary spacing choice and was worth 9px of page height on EVERY page at
	   EVERY width, because the footer is the last thing on the page and the
	   tallest footer column sets its height.

	   The block theme's heading had no bottom margin at all. The 7.2px gap
	   under it is the first <li>'s own `margin-block: 0.45rem` collapsing out
	   through the unpadded <ul>. Leaving this at 0 reproduces that exactly:
	   max(0, 7.2px) = 7.2px. Setting it to 16px replaced the collapse with a
	   larger margin and pushed every list down. */
	margin-block: 0;
}

/* NO margin under the footer wordmark.

   There used to be `margin-block-end: var(--wp--preset--spacing--30)` here, and
   it was the wrong end of the gap. In the block theme the 16px between the
   wordmark and the tagline came from the TAGLINE's own top margin, set on the
   paragraph block. Putting it on the wordmark instead looked equivalent and was
   not: the wordmark is an inline-flex <a>, so its bottom margin does not
   collapse with the paragraph's top margin the way the block theme's plain
   <div> did. The two stacked, and the brand column ran 4px long at every width
   — which the stacked footer below 782px then passed on to everything under it.

   The margin is back on the paragraph, in patterns/footer-brand.php and in the
   synced pattern that overrides it. */
.bb-footer__brand > .bb-wordmark {
	margin-block-end: 0;
}

.bb-footer__legal {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
}

.bb-footer__legal p {
	margin: 0;
}

/* THE BREAKPOINT IS 782px, AND IT IS NOT ARBITRARY.
   The block theme built this footer from core/columns, which stacks to a single
   column below 782px and is four columns at or above it. Nothing else. Inventing
   a friendlier-looking ladder here (4 -> 2 -> 1) put the footer 418px short at
   600px and 235px tall at 899px, and because the footer is the last thing on the
   page those numbers landed in the total height of every page at those widths.
   Matching core's single breakpoint is what makes the footer the same height as
   the one it replaces. */
@media ( max-width: 781px ) {
	.bb-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Mega panel: numerals as a CSS counter
   --------------------------------------------------------------------------
   The block theme printed these with sprintf('%02d') in PHP, over a fixed list
   of exactly ten copy fields. The panel is a synced pattern now — staff add and
   remove programmes in the editor — so a hardcoded numeral would be wrong the
   first time somebody adds a fifth one, and wrong silently.

   A counter numbers whatever is there. The list is an ordinary core/list block,
   which is the point: nothing about editing it requires knowing this rule
   exists. */

.bb-mega__list {
	counter-reset: bb-mega-item;
}

.bb-mega__list > li {
	counter-increment: bb-mega-item;
}

.bb-mega__list > li > a::before {
	content: counter( bb-mega-item, decimal-leading-zero );
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--terracotta-text);
	min-width: 1.6rem;
	flex: 0 0 auto;
}

/* The trailing arrow was a <span> per item in the PHP version; per item it is
   pure decoration and repeats identically, so it is generated too. */
.bb-mega__list > li > a::after {
	content: "\2197";
	margin-inline-start: auto;
	color: var(--wp--preset--color--terracotta-text);
}

/* core/list adds its own list-style and padding; the panel's own reset above
   targets .bb-mega__list, and this covers the block class core adds alongside. */
.bb-mega__list.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Mega panels below 900px: a classic two-level menu
   --------------------------------------------------------------------------
   The flyouts reduce to plain link lists — no feature card, no glyphs, no
   intro copy, no numerals, no arrows. Tap the trigger, get the choices.

   This block MUST live after the counter/arrow rules above: the ::before
   numeral and ::after arrow are same-specificity selectors, so a `content:
   none` placed in the earlier <=899px media block (which sits before them in
   the file) would silently lose on source order. */

@media ( max-width: 899px ) {
	.bb-mega__col--feature,
	.bb-mega__eyebrow,
	.bb-mega__headline,
	.bb-mega__sub,
	.bb-about-glyph,
	.bb-mega__card-text {
		display: none;
	}

	.bb-mega__list > li > a::before,
	.bb-mega__list > li > a::after {
		content: none;
	}

	/* The About cards become two plain rows, styled like the list links. */
	.bb-mega__col--card {
		text-align: start;
		padding-block: 0;
	}

	.bb-mega__card-title {
		margin: 0;
	}

	.bb-mega__card-title a {
		display: block;
		padding-block: 0.85rem;
		border-top: 1px solid rgba( 42, 42, 36, 0.16 );
		font-family: inherit;
		font-size: inherit;
	}

	.bb-mega__inner > .bb-mega__all {
		padding-block: 0.85rem;
	}
}