/*
 * Composition components — reusable across pages, owned by no page.
 *
 * WHY THIS FILE EXISTS
 *
 * art-direction.css states its own contract in its header: it is art direction
 * for specific compositions, traced from a comp. sections.css holds the bands
 * those compositions are built from. Neither is the right home for primitives
 * that ordinary PAGE CONTENT reaches for, because page content is authored in
 * the dashboard by staff, not in pattern files by a developer.
 *
 * Everything here is written to that standard:
 *
 *   - No page name appears in any selector. A rule that only makes sense on one
 *     page belongs in art-direction.css instead.
 *   - Every value comes from a theme.json preset. No new colors, no new type
 *     scale, no magic numbers that a future page would have to match by eye.
 *   - The COLOR rules key off the classes WordPress itself emits
 *     (.has-forest-background-color and friends), so they protect any block a
 *     staff member builds with the palette swatches — not only the blocks this
 *     file was written for. The SHAPE rules are opt-in classes.
 *
 * That split is the important one. Color failures are invisible until someone
 * with low vision hits them; shape is obvious the moment you look. So color is
 * automatic and shape is asked for.
 *
 * CASCADE POSITION: after sections.css, before art-direction.css. These are
 * defaults that a specific composition is allowed to overrule.
 *
 * @package BasicBorrego
 */

/* --------------------------------------------------------------------------
   On-dark guardrails
   --------------------------------------------------------------------------
   style.css already redirects HEADINGS inside a colored band to inherit the
   band's color, and explains why. Links and buttons have exactly the same
   problem and were never covered, because until now every dark band in this
   theme was hand-authored markup with no prose links or core buttons in it.

   Page content changes that. docs/editor-cheat-sheet.md actively teaches staff
   to make a colored band by grouping blocks and picking a background swatch,
   and a call-to-action band is precisely where someone then puts a link.

   The numbers, on forest #393E2E:

       terracotta-text  #8F4529   1.60:1   the theme.json default. Invisible.
       terracotta-on-dark #D6906F 4.25:1   passes AA for body text.
       base             #EFE7DB   8.90:1

   theme.json emits its element styles inside :where(), which carries zero
   specificity, so a single class wins cleanly — the same mechanism style.css
   relies on. */

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

.has-forest-background-color :is( a, a:visited ):hover,
.has-forest-deep-background-color :is( a, a:visited ):hover,
.has-terracotta-text-background-color :is( a, a:visited ):hover {
	color: var(--wp--preset--color--base);
}

.has-forest-background-color :is( a, a:visited ):focus-visible,
.has-forest-deep-background-color :is( a, a:visited ):focus-visible,
.has-terracotta-text-background-color :is( a, a:visited ):focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/*
 * Buttons on dark, inverted.
 *
 * theme.json paints every button terracotta-text on base. On a forest band the
 * FILL drops to 1.60:1 against the band, so the button's shape dissolves and
 * only its cream label survives — it stops reading as a button at a glance and
 * fails WCAG 1.4.11 for the control itself.
 *
 * The theme already answered this once: .bb-btn-invert (art-direction.css)
 * flips to a cream fill with a terracotta-text label, and every hand-authored
 * on-dark call to action uses it. This is that same treatment, applied to the
 * core button block so staff get it without knowing the class exists.
 */
.has-forest-background-color .wp-block-button__link,
.has-forest-deep-background-color .wp-block-button__link,
.has-terracotta-text-background-color .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta-text);
}

.has-forest-background-color .wp-block-button__link:hover,
.has-forest-deep-background-color .wp-block-button__link:hover,
.has-terracotta-text-background-color .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--terracotta-text);
}

.has-forest-background-color .wp-block-button__link:focus-visible,
.has-forest-deep-background-color .wp-block-button__link:focus-visible,
.has-terracotta-text-background-color .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* An outline button reads as secondary next to the filled one. Opt-in, and it
   is the one button variant that needs a class because core has no notion of
   it. */
.has-forest-background-color .is-style-outline .wp-block-button__link,
.has-forest-deep-background-color .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border-color: currentColor;
}

/* --------------------------------------------------------------------------
   Prose that lands directly in a flush composition
   --------------------------------------------------------------------------
   A composed page's <main> is is-layout-flow with no gutter and no content
   width — see basic_borrego_main_classes(). Every existing composed page gets
   away with that because each of its children is a <section> carrying its own
   inner wrapper.

   A staff member clicking "+" between two sections and typing a paragraph does
   not get that wrapper, and their text runs from one edge of the display to the
   other. This catches the handful of block types that can plausibly be added at
   the top level of a composition and gives them the article measure.

   Deliberately NOT `.bb-main--flush > *`: the sections themselves are direct
   children too, and constraining those would undo every full-bleed band on the
   home and about pages. Only core's own prose blocks are named. */

.bb-main--flush > :is(
	p,
	.wp-block-paragraph,
	.wp-block-heading,
	.wp-block-list,
	.wp-block-quote,
	.wp-block-table,
	.wp-block-details
) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   Band
   --------------------------------------------------------------------------
   The full-bleed colored band with soft organic edges, as a class any page can
   apply to a group block.

   This is deliberately the SAME component as the home page's impact band rather
   than a lookalike: it reuses that band's traced wave masks and amplitudes from
   :root, so a band on a new page and the band on the home page are the same
   object at the same proportions. A near-copy with slightly different waves
   would read as a mistake.

   Usage: a core/group, align full, with a palette background color. The
   background class does the color (and picks up the guardrails above); this
   does the shape. */

.bb-band {
	position: relative;
	padding-block: clamp( 3.5rem, 7vw, 5.5rem );
	margin-block:
		calc( var(--bb-amp-impact-top, 0) * 1vw )
		calc( var(--bb-amp-impact-bot, 0) * 1vw );
}

.bb-band::before,
.bb-band::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	background-color: inherit;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

/*
 * The `, 0` fallbacks matter. The wave masks and their amplitudes are declared
 * on :root in art-direction.css, which the BLOCK EDITOR does not load. Without a
 * fallback the height would compute to auto and the mask would be invalid,
 * which is a solid rectangle of color floating above the band while a staff
 * member edits. Falling back to zero height means the editor simply shows a
 * band with straight edges — accurate enough, and never alarming.
 */
.bb-band::before {
	bottom: 100%;
	height: calc( var(--bb-amp-impact-top, 0) * 1vw );
	-webkit-mask-image: var(--bb-divider-impact-top);
	mask-image: var(--bb-divider-impact-top);
}

.bb-band::after {
	top: 100%;
	height: calc( var(--bb-amp-impact-bot, 0) * 1vw );
	-webkit-mask-image: var(--bb-divider-impact-bot);
	mask-image: var(--bb-divider-impact-bot);
}

/* --------------------------------------------------------------------------
   Stat
   --------------------------------------------------------------------------
   A figure and its label. Sized to match .bb-home-impact__figure exactly, so a
   stat on any page is the same size as a stat on the home page.

   Applied to a PARAGRAPH, not a heading. A figure is not a section title, and
   four headings reading "$820K+ / 553 / 27 / 45" would put four meaningless
   entries in the document outline that screen-reader users navigate by. */

.bb-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.5rem, 3.4vw, 2.3rem );
	font-weight: 500;
	line-height: 1.05;
	margin-block: 0 0.35rem;
}

.bb-stat-label {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	opacity: 0.88;
	margin-block: 0;
}

/* Gold hairlines between stats, matching the impact band. Applied to the
   columns block that holds them; :first-child keeps the leading edge clean. */
.bb-stat-row .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid rgba( 201, 162, 39, 0.45 );
	padding-inline-start: clamp( 0.6rem, 2vw, 1.6rem );
}

/* --------------------------------------------------------------------------
   Panel
   --------------------------------------------------------------------------
   A soft raised surface for a self-contained piece of content: an action card,
   a callout, a sidebar note.

   Distinct from .bb-card (art-direction.css), which is the home page's
   photograph-led program card with a traced mask and a fixed aspect ratio.
   This one is type-only and takes whatever blocks are put in it. */

.bb-panel {
	background-color: var(--wp--preset--color--base-alt);
	border-radius: 10px;
	padding: clamp( 1.25rem, 3vw, 2rem );
	height: 100%;
	box-sizing: border-box;
}

/* On a dark band, a panel needs to lift AWAY from the band rather than sink
   into it. */
.has-forest-background-color .bb-panel,
.has-forest-deep-background-color .bb-panel {
	background-color: rgba( 239, 231, 219, 0.08 );
}

.bb-panel > :first-child {
	margin-block-start: 0;
}

.bb-panel > :last-child {
	margin-block-end: 0;
}

/* A panel whose job is to move someone onward: the action sits at the bottom
   edge however much copy is above it, so a row of them lines up. */
.bb-panel--action {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bb-panel--action .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

/* --------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------
   A numbered process, applied to an ordinary ordered core/list block.

   Distinct from .bb-timeline (sections.css), which needs hand-authored markup
   with a year span and a text span per item. This one needs nothing but a list
   a staff member can type into, which is the whole point: the steps of a
   process are exactly the kind of content that changes without a developer. */

.bb-steps {
	list-style: none;
	counter-reset: bb-step;
	margin-block: 1.5rem 0;
	padding-inline-start: 0;
	display: grid;
	gap: clamp( 0.9rem, 2vw, 1.4rem );
}

.bb-steps > li {
	counter-increment: bb-step;
	position: relative;
	padding-inline-start: 3.1rem;
	min-height: 2.2rem;
}

.bb-steps > li::before {
	content: counter( bb-step );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -0.1rem;
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--terracotta-text);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
}

/* The connecting rail, drawn between the markers rather than through them. */
.bb-steps > li:not( :last-child )::after {
	content: "";
	position: absolute;
	inset-inline-start: 1.05rem;
	inset-block-start: 2.3rem;
	bottom: calc( var(--wp--preset--spacing--30) * -1 );
	width: 2px;
	background-color: rgba( 143, 69, 41, 0.28 );
}

.bb-steps strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}

.has-forest-background-color .bb-steps strong,
.has-forest-deep-background-color .bb-steps strong {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Disclosure
   --------------------------------------------------------------------------
   Styles core/details globally — no class required, so every disclosure on the
   site matches whether or not whoever added it knew this file existed.

   CONSTRAINT, from motion.css and chrome.css: nothing but content-visibility
   may be declared on ::details-content. Animating disclosure means animating an
   element INSIDE the details, the way .bb-mega__panel does. Nothing here
   animates, which keeps it out of the way of that rule entirely. */

.wp-block-details {
	border-block-end: 1px solid rgba( 201, 162, 39, 0.5 );
	padding-block: 0.9rem;
}

.wp-block-details > summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* The marker is drawn rather than inherited so it can carry the theme's color
   and rotate on open. */
.wp-block-details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wp--preset--color--terracotta-text);
	border-bottom: 2px solid var(--wp--preset--color--terracotta-text);
	transform: rotate( -45deg );
	transition: transform 160ms ease;
}

.wp-block-details[open] > summary::before {
	transform: rotate( 45deg );
}

.wp-block-details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-text);
	outline-offset: 3px;
}

.has-forest-background-color .wp-block-details,
.has-forest-deep-background-color .wp-block-details {
	border-block-end-color: rgba( 201, 162, 39, 0.4 );
}

.has-forest-background-color .wp-block-details > summary,
.has-forest-deep-background-color .wp-block-details > summary {
	color: inherit;
}

.has-forest-background-color .wp-block-details > summary::before,
.has-forest-deep-background-color .wp-block-details > summary::before {
	border-color: var(--wp--preset--color--terracotta-on-dark);
}

/* --------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------
   Core ships a grey bordered table that belongs to no design system. This is
   the house treatment, applied to the core table block and to any hand-authored
   table that opts in, so the two never diverge. */

.wp-block-table table,
.bb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table :is( th, td ),
.bb-table :is( th, td ) {
	border: 0;
	border-block-end: 1px solid rgba( 143, 69, 41, 0.18 );
	padding: 0.7rem 0.85rem;
	text-align: start;
	vertical-align: baseline;
}

.wp-block-table thead :is( th, td ),
.bb-table thead :is( th, td ) {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--forest);
	border-block-end-width: 2px;
	border-block-end-color: rgba( 143, 69, 41, 0.35 );
}

.wp-block-table tbody th,
.bb-table tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}

.wp-block-table tbody tr:last-child :is( th, td ),
.bb-table tbody tr:last-child :is( th, td ) {
	border-block-end: 0;
}

.wp-block-table figcaption,
.bb-table caption {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	text-align: start;
	margin-block-end: 0.6rem;
}

/* A table wider than its container scrolls itself rather than the page. */
.wp-block-table,
.bb-table-scroll {
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Data bars
   --------------------------------------------------------------------------
   A data table whose rows carry a proportional bar behind them.

   THE MAINTENANCE CONTRACT, which is the reason this is built the way it is:
   the row carries the RAW NUMBER and the table carries the MAXIMUM, so whoever
   updates this once a year types the figure from the committee's report and
   nothing else. No percentages, no arithmetic, and a record year means changing
   --max once rather than recomputing every row.

       <table class="bb-bars" style="--max:86900">
         <tr style="--v:86900"> ... </tr>

   The bar is a background on the row, so there is no extra markup per row, no
   empty cell for a screen reader to announce, and the table stays a plain
   readable table if the styles never arrive. */

.bb-bars {
	--bb-bar-fill: rgba( 182, 99, 66, 0.3 );
	--bb-bar-fill-strong: rgba( 143, 69, 41, 0.42 );
}

.bb-bars tbody tr {
	background-image: linear-gradient(
		to right,
		var(--bb-bar-fill) 0 calc( 100% * var(--v, 0) / var(--max, 1) ),
		transparent calc( 100% * var(--v, 0) / var(--max, 1) )
	);
	background-repeat: no-repeat;
}

/* The most recent year, or any row worth pointing at. Deliberately NOT gold:
   gold on cream is 1.95:1, which would make the row this is meant to emphasize
   the hardest one on the page to see. */
.bb-bars tbody tr.is-highlight {
	--bb-bar-fill: var(--bb-bar-fill-strong);
	font-weight: 600;
}

.bb-bars :is( th, td ) {
	position: relative;
	white-space: nowrap;
}

/* Numeric columns read as a column when they share an edge. */
.bb-bars :is( th, td ) + :is( th, td ) {
	text-align: end;
}

.bb-bars thead :is( th, td ) + :is( th, td ) {
	text-align: end;
}

@media ( max-width: 34rem ) {

	.bb-bars {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.bb-bars :is( th, td ) {
		padding: 0.45rem 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   Milestones
   --------------------------------------------------------------------------
   A sequence read left to right: a marker, a name, and a line of explanation,
   with a rule running through the markers to say "these belong in this order."

   Applied to a core/columns block, so each milestone is an ordinary column a
   staff member can edit, duplicate or reorder in the dashboard. The connecting
   rule is drawn across the whole row by CSS, so adding a fourth milestone needs
   no adjustment anywhere.

   Distinct from .bb-timeline (sections.css), which runs VERTICALLY and needs
   hand-authored year and text spans, and from .bb-steps above, which numbers
   itself. This one is for named points in time. */

.bb-milestones.wp-block-columns {
	position: relative;
	gap: 0;
	margin-block-start: 2rem;
}

/* The rule sits behind the markers and stops short of both ends, so the
   sequence reads as bounded rather than running off the page. */
.bb-milestones.wp-block-columns::before {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-start: 1.05rem;
	height: 2px;
	background-color: var(--wp--preset--color--terracotta);
	opacity: 0.45;
}

.bb-milestones.wp-block-columns > .wp-block-column {
	position: relative;
	text-align: center;
	padding-inline: clamp( 0.5rem, 1.6vw, 1.25rem );
}

/* The marker: a year in a filled disc, which also masks the rule behind it. */
.bb-milestone-year {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.6rem;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--terracotta-text);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	margin-block: 0 0.9rem;
	font-variant-numeric: tabular-nums;
}

.has-forest-background-color .bb-milestone-year,
.has-forest-deep-background-color .bb-milestone-year {
	background-color: var(--wp--preset--color--terracotta-on-dark);
	color: var(--wp--preset--color--forest-deep);
}

.bb-milestones .wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 0.4rem;
	text-wrap: balance;
}

.bb-milestones p:not( .bb-milestone-year ) {
	font-size: var(--wp--preset--font-size--small);
	margin-block: 0 0.5rem;
}

/* An acronym spelled out with the letters that make it emphasized — the device
   BASIC's own materials use. */
.bb-initials strong {
	color: var(--wp--preset--color--terracotta-text);
	font-weight: 700;
}

.has-forest-background-color .bb-initials strong,
.has-forest-deep-background-color .bb-initials strong {
	color: var(--wp--preset--color--terracotta-on-dark);
}

@media ( max-width: 781px ) {

	/* Core stacks columns at this width, where a horizontal rule would be
	   nonsense. The sequence becomes vertical with the markers still aligned. */
	.bb-milestones.wp-block-columns::before {
		inset-inline: auto;
		inset-block: 1.05rem 1.05rem;
		left: calc( 50% - 1px );
		width: 2px;
		height: auto;
	}

	.bb-milestones.wp-block-columns > .wp-block-column + .wp-block-column {
		margin-block-start: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   Segments
   --------------------------------------------------------------------------
   One bar divided into parts, for a total made up of groups — the part-to-whole
   counterpart to .bb-bars above, which compares separate rows.

   Same maintenance contract as .bb-bars, for the same reason: each segment
   carries its RAW COUNT and the bar carries the TOTAL, so whoever updates this
   types the numbers from the report and nothing else.

       <div class="bb-segments" style="--total:45">
         <span style="--v:14"> ... </span>

   The key below it is a real list, so every figure is readable as text whether
   or not the bar renders. */

.bb-segments {
	display: flex;
	width: 100%;
	height: 2.6rem;
	border-radius: 6px;
	overflow: hidden;
	margin-block: 1.5rem 0;
	background-color: var(--wp--preset--color--base-alt);
}

.bb-segments > * {
	flex: 0 0 calc( 100% * var(--v, 0) / var(--total, 1) );
	min-width: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--base);
	overflow: hidden;
	white-space: nowrap;
}

/* Four tones stepping from terracotta to forest. They are distinguishable by
   lightness as well as hue, and each carries cream text above 4.5:1. */
.bb-segments > :nth-child( 1 ) { background-color: #8F4529; }
.bb-segments > :nth-child( 2 ) { background-color: #A15A38; }
.bb-segments > :nth-child( 3 ) { background-color: #5C5A38; }
.bb-segments > :nth-child( 4 ) { background-color: #393E2E; }

.bb-segments-key {
	list-style: none;
	margin-block: 1rem 0;
	padding-inline-start: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 0.6rem 1.5rem;
}

.bb-segments-key > li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.bb-segments-key > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
}

.bb-segments-key > :nth-child( 1 )::before { background-color: #8F4529; }
.bb-segments-key > :nth-child( 2 )::before { background-color: #A15A38; }
.bb-segments-key > :nth-child( 3 )::before { background-color: #5C5A38; }
.bb-segments-key > :nth-child( 4 )::before { background-color: #393E2E; }

.bb-segments-key strong {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Section sub-navigation
   --------------------------------------------------------------------------
   A row of pill links that says "this section has more than one page," placed
   directly under a hero so it is visible before anything has been scrolled.

   Applied to an ordinary core/list block, so the links are list items a staff
   member adds, removes and reorders in the dashboard — the same way they would
   edit any other list.

   Deliberately light: small pills on a quiet strip, so it reads as navigation
   chrome rather than as content competing with the section below it. */

.bb-subnav {
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.55rem;
}

.bb-subnav > li {
	margin: 0;
}

.bb-subnav > li > a {
	display: inline-block;
	padding: 0.32em 0.9em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta-text);
	border: 1px solid rgba( 143, 69, 41, 0.28 );
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* The page you are on. Marked with aria-current in the markup, so the styling
   and the announcement come from one source rather than two. */
.bb-subnav > li > a[aria-current="page"] {
	background-color: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	cursor: default;
}

.bb-subnav > li > a:hover,
.bb-subnav > li > a:focus-visible {
	background-color: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

/* The label that introduces the row, when there is one. */
.bb-subnav-label {
	text-align: center;
	margin-block: 0;
	opacity: 0.75;
	white-space: nowrap;
}

/* The bar itself: deliberately shallow. It is navigation chrome sitting
   between a hero and the page's first real section, and every pixel it takes
   is a pixel of the section below pushed under the fold. */
.bb-subnav-bar {
	padding-block: 0.7rem;

	/*
	 * The horizontal padding has to be declared here, and that is easy to miss.
	 *
	 * Core adds `has-global-padding` — the class that carries the page gutter —
	 * only to CONSTRAINED layout blocks. This bar is a FLEX layout block,
	 * because its label and its pills share one row, so it gets no gutter at all
	 * and its contents run to the very edge of the display. On a width where the
	 * three pills only just fit, the outer two touch the screen edges.
	 */
	padding-inline: var(--wp--preset--spacing--40);
}

/* Keep the row aligned with the page's own measure on wide displays rather than
   letting it drift out toward the edges. */
.bb-subnav-bar > .wp-block-list,
.bb-subnav-bar > .bb-subnav-label {
	max-width: 100%;
}

.bb-subnav-bar .wp-block-list {
	margin-block: 0;
}

.has-forest-background-color .bb-subnav > li > a,
.has-forest-deep-background-color .bb-subnav > li > a {
	background-color: transparent;
	border-color: rgba( 239, 231, 219, 0.4 );
	color: var(--wp--preset--color--base);
}

.has-forest-background-color .bb-subnav > li > a:hover,
.has-forest-deep-background-color .bb-subnav > li > a:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta-text);
}

@media ( prefers-reduced-motion: reduce ) {

	.bb-subnav > li > a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Icon badges
   --------------------------------------------------------------------------
   The small round icon that sits above a panel heading, matching the gold
   glyphs in the home page's impact band.

   The icon is a MASK, not an <img> or inline SVG, for two reasons: it takes
   currentColor so it inherits whatever the panel is doing, and it keeps the
   markup free of SVG so a staff member editing the panel sees only text.

   To use: add one of the bb-icon-* classes alongside .bb-panel.
   To add an icon: define one more class setting --bb-icon to a data URI.

   Safari still wants the -webkit- prefixed mask properties, which is why the
   theme's other mask rules carry them too. */

.bb-icon-cap,
.bb-icon-doc,
.bb-icon-calendar,
.bb-icon-gift,
.bb-icon-compass {
	--bb-icon-size: 1.9rem;
}

/*
 * The glyph is the mask and nothing else — no enclosing disc. That matches the
 * gold line icons in the home page's impact band, and it means the icon takes
 * whatever color is set here, so the on-dark variant is one extra rule rather
 * than a second set of artwork.
 *
 * A mask made from an SVG uses the image's ALPHA channel, so the artwork must
 * be an opaque glyph on a TRANSPARENT ground. An opaque background of any color
 * would make the whole box paint — which is exactly the solid blob you get if
 * you draw a filled circle behind the glyph and expect it to punch through.
 */
.bb-icon-cap::before,
.bb-icon-doc::before,
.bb-icon-calendar::before,
.bb-icon-gift::before,
.bb-icon-compass::before {
	content: "";
	display: block;
	width: var(--bb-icon-size);
	height: var(--bb-icon-size);
	margin-block-end: 0.75rem;
	background-color: var(--wp--preset--color--terracotta-text);
	-webkit-mask-image: var(--bb-icon);
	mask-image: var(--bb-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	isolation: isolate;
}

.has-forest-background-color :is( .bb-icon-cap, .bb-icon-doc, .bb-icon-calendar, .bb-icon-gift, .bb-icon-compass )::before,
.has-forest-deep-background-color :is( .bb-icon-cap, .bb-icon-doc, .bb-icon-calendar, .bb-icon-gift, .bb-icon-compass )::before {
	background-color: var(--wp--preset--color--terracotta-on-dark);
}

/* A mortarboard, for starting or finishing school. */
.bb-icon-cap {
	--bb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9z'/%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17z'/%3E%3C/svg%3E");
}

/* A clipboard with a tick, for proof and paperwork. */
.bb-icon-doc {
	--bb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-2 15-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10z'/%3E%3C/svg%3E");
}

/* A calendar, for dates and events. */
.bb-icon-calendar {
	--bb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5zM16 1v2H8V1H6v2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1zm3 20H5V8h14z'/%3E%3C/svg%3E");
}

/* A heart, for giving. */
.bb-icon-gift {
	--bb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E");
}

/* A compass needle, for finding the way to another page. */
.bb-icon-compass {
	--bb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m2.19 12.19L6 18l3.81-8.19L18 6z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Photo treatments
   --------------------------------------------------------------------------
   The site's own organic image shapes are already defined site-wide in
   style.css as .bb-shape-blob, .bb-shape-blob-soft, .bb-shape-blob-card and
   .bb-shape-lozenge, and a staff member can put those straight onto a core
   image block. All that is missing is making the photograph FILL the shape,
   because an image inside a rounded figure still ends up letterboxed unless
   something gives it an aspect ratio.

   .bb-photo-fill does that and nothing else, so it composes with whichever
   shape class is chosen rather than duplicating any of them. */

.bb-photo-fill img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-photo-portrait {
	aspect-ratio: 4 / 5;
}

.bb-photo-landscape {
	aspect-ratio: 3 / 2;
}

.bb-photo-portrait img,
.bb-photo-landscape img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Core centers a constrained image block; a shaped hero photo should fill its
   column instead. */
.wp-block-image.bb-photo-fill,
.wp-block-image.bb-photo-portrait,
.wp-block-image.bb-photo-landscape {
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   The masthead photograph on narrow screens
   --------------------------------------------------------------------------
   It is dropped, not shrunk, below the width where core stacks a columns block.

   This is the theme's own precedent rather than a new idea: art-direction.css
   hides .bb-hero__art below 900px on the home page, and records that the
   resulting loss of a view-transition capture "is correct, not a bug."

   The reasoning is the same here and worth stating. Once the columns stack, the
   photograph stops being half of a composition and becomes a tall block sitting
   between the headline and the first thing a student actually needs — which on
   this page is the row of actions. A smaller photograph would still cost that
   vertical space without earning it. The headline carries the message on its
   own; the photographs further down the page carry the feeling.

   Keyed to a class on the column rather than to :has() or :last-child, so it
   survives a staff member reordering the columns and needs no modern selector.

   781px is core's own columns stacking breakpoint. Matching it exactly means
   the photograph disappears on the same resize step that changes the layout,
   rather than leaving an empty column behind for a range of widths. */

@media ( max-width: 781px ) {

	.bb-hero-split .bb-hero-media {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Section continuity
   --------------------------------------------------------------------------
   A group of pages that belong together should not feel like separate
   documents. This theme already runs cross-document view transitions on every
   page (motion.css declares `@view-transition`), so naming the parts that are
   COMMON to every page in a section makes the browser morph them instead of
   redrawing them: the toolbar stays put, the eyebrow holds, and the photograph
   cross-fades to the new one.

   THE HARD RULE, documented at art-direction.css's motion section and worth
   repeating because breaking it is silent: a view-transition-name must match
   EXACTLY ONE rendered element per document. Two elements sharing a name makes
   ViewTransition.ready reject, and the browser then skips transitions on every
   page of the site — not just this one. Every selector below is scoped to a
   wrapper that appears once.

   `view-transition-name` also forms a stacking context at all times, which is
   why these are on layout wrappers rather than on anything that needs to
   escape its parent. */

.bb-subnav-bar {
	view-transition-name: bb-section-nav;
}

.bb-hero-split .bb-eyebrow {
	view-transition-name: bb-section-eyebrow;
}

/* The one image inside the section masthead. Scoped to .bb-hero-split because
   .wp-block-image appears many times on a page with a gallery on it. */
.bb-hero-split .wp-block-image img {
	view-transition-name: bb-section-hero-media;
	/*
	 * THE NAME IS ON THE <img>, NOT ON THE FIGURE AROUND IT, and that is what
	 * makes a clean slide possible. The figure carries .bb-shape-blob-soft, so
	 * naming the figure would capture an already-rounded snapshot; sliding that
	 * drags its curved edge through the frame. Naming the image captures a
	 * plain rectangle, and motion.css gives the WINDOW the organic shape, so
	 * two rectangular photographs slide inside a fixed blob.
	 *
	 * Deliberately NOT bb-section-swap. That class sequences its fades, which
	 * is right for text and wrong here — see motion.css.
	 */
	view-transition-class: bb-media;
}

/* The headline. The eyebrow above it holds still and the toolbar below it holds
   still; this is the part that visibly changes, so it is the part that moves.
   There is exactly one heading inside the masthead, and it is not an ancestor
   or a descendant of any other named element — names must never nest. */
.bb-hero-split .wp-block-heading {
	view-transition-name: bb-section-headline;
	view-transition-class: bb-section-swap;
}

/* --------------------------------------------------------------------------
   Onward links
   --------------------------------------------------------------------------
   Cards that carry the reader to a related page. Built on .bb-panel, so the
   surface is already right; this adds the affordance that says the card leads
   somewhere. */

.bb-onward .wp-block-column {
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.bb-onward .wp-block-column:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 20px rgba( 42, 42, 36, 0.12 );
}

.bb-onward-link {
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.bb-onward-link::after {
	content: "\2192";
	transition: transform 160ms ease;
}

.bb-onward .wp-block-column:hover .bb-onward-link::after {
	transform: translateX( 3px );
}

@media ( prefers-reduced-motion: reduce ) {

	.bb-onward .wp-block-column,
	.bb-onward-link::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Brush stroke
   --------------------------------------------------------------------------
   The tapered rule that sits under section titles across this site.

   basic_borrego_brush() emits it as inline SVG for pattern files. Page content
   authored in the dashboard cannot call a PHP function, so the same stroke is
   available here as a class on any heading — same path, same proportions, no
   markup. */

.bb-title-brush::after {
	content: "";
	display: block;
	width: 7.5rem;
	height: 0.55rem;
	margin-block-start: 0.7rem;
	background-color: var(--wp--preset--color--terracotta);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.2c22-3.4 52-5.4 84-5.8 30-.4 68 .8 112 3.4-40 3-78 4.2-112 4-32-.2-62-.6-84-1.6Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.2c22-3.4 52-5.4 84-5.8 30-.4 68 .8 112 3.4-40 3-78 4.2-112 4-32-.2-62-.6-84-1.6Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.has-forest-background-color .bb-title-brush::after,
.has-forest-deep-background-color .bb-title-brush::after {
	background-color: var(--wp--preset--color--terracotta-on-dark);
}

/* Centerd headings want a centered stroke. */
.bb-title-brush.has-text-align-center::after {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Collage
   --------------------------------------------------------------------------
   A core/gallery that reads as a scrapbook rather than a grid: images take
   alternating heights and a slight rotation, the way photographs pinned to a
   board do.

   Built for galleries that GROW. New photographs are dropped in through the
   media library and land in the rhythm automatically, because the variation
   comes from :nth-child rather than from per-image markup. */

.bb-collage.wp-block-gallery {
	gap: clamp( 0.6rem, 1.6vw, 1.1rem );
}

/* The same asymmetric card shape the home page's program cards use, so a wall
   of graduate photographs reads as part of this site rather than as a gallery
   dropped into it. */
.bb-collage.wp-block-gallery .wp-block-image {
	border-radius: 26% 26% 22% 22% / 7% 7% 5% 5%;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 4 / 5;
	box-shadow: 0 3px 14px rgba( 42, 42, 36, 0.16 );
}

.bb-collage.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-collage.wp-block-gallery .wp-block-image:nth-child( 3n + 1 ) {
	transform: rotate( -1.2deg );
}

.bb-collage.wp-block-gallery .wp-block-image:nth-child( 3n + 2 ) {
	transform: rotate( 0.8deg );
}

.bb-collage.wp-block-gallery .wp-block-image:nth-child( 3n ) {
	transform: rotate( -0.5deg );
}

@media ( prefers-reduced-motion: reduce ) {

	.bb-collage.wp-block-gallery .wp-block-image {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Media and text
   --------------------------------------------------------------------------
   Core's media-text block arrives unstyled in this theme. Rounding the image
   and giving the text column a little air is the whole treatment — the block
   already handles the two-column mechanics. */

.wp-block-media-text .wp-block-media-text__media img {
	border-radius: 10px;
}

.wp-block-media-text .wp-block-media-text__content {
	padding-inline: clamp( 1rem, 3vw, 2.5rem );
}

/* --------------------------------------------------------------------------
   Eyebrow on dark
   --------------------------------------------------------------------------
   .bb-eyebrow (style.css) inherits its color. Over a photograph or a dark
   band, inheriting is not good enough to promise a contrast ratio, so the
   on-dark case is named. */

.has-forest-background-color .bb-eyebrow,
.has-forest-deep-background-color .bb-eyebrow,
.wp-block-cover .bb-eyebrow {
	color: var(--wp--preset--color--terracotta-on-dark);
}

/* --------------------------------------------------------------------------
   Section rhythm
   --------------------------------------------------------------------------
   A composed page has no vertical rhythm of its own — .bb-main--flush zeroes
   the article padding. Sections that are not bands need to declare their own,
   and doing it with a class keeps every page's rhythm identical instead of
   depending on whoever typed the padding values into the sidebar that day. */

.bb-section {
	padding-block: clamp( 3rem, 6vw, 5rem );
}

.bb-section--tight {
	padding-block: clamp( 2rem, 4vw, 3rem );
}

/* --------------------------------------------------------------------------
   Subnav bar, seated
   --------------------------------------------------------------------------
   The bar's own padding is shallow on purpose (see .bb-subnav-bar above), but
   it was still floating in ~100px of space on each side: the section rhythm
   above adds clamp(3rem, 6vw, 5rem) of padding, and core's flow layout adds a
   1.5rem blockGap margin, on BOTH sides of it. The result read as the end of
   the page — a visitor could see the three pills and not realize content
   followed. Seat it against the hero above and the section below instead.

   Specificity does the work: core's flow rule is `:where(.is-layout-flow) > *`
   at (0,0,0), so these plain class selectors win without !important, and
   `.bb-subnav-bar + .bb-section` at (0,2,0) also beats .bb-section--tight. */

.bb-subnav-bar {
	margin-block-start: 0;
}

.bb-subnav-bar + * {
	margin-block-start: 0;
}

.bb-subnav-bar + .bb-section {
	padding-block-start: clamp( 1.25rem, 2.5vw, 1.75rem );
}

/* `~`, not `+`: a wp:html block of prefetch <link>s sits between the masthead
   and the bar. The links have no box, so they cost nothing visually, but they
   do break adjacency. The masthead is the only section preceding the bar on
   every page that has one.

   Kept as its own rule rather than merged into the list above: an unsupported
   selector invalidates the ENTIRE list it appears in, and the space below the
   bar is the part that matters most. */
.bb-section:has( ~ .bb-subnav-bar ) {
	padding-block-end: clamp( 1.25rem, 2.5vw, 1.75rem );
}