/*
Theme Name: Spur 2026
Theme URI: https://spurnorthshore.org
Author: Start & Scale Growth Advisors
Description: Custom full-site-editing block theme for Spur North Shore. Built from scratch — no commercial theme dependency. Design tokens live in theme.json; content structure (CPTs, fields) lives in the spur-core mu-plugin.
Version: 1.18.0
Requires at least: 6.4
Tested up to: 6.x
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spur-2026
*/

/* =========================================================================
 * Spur 2026 — component system.
 *
 * EVERY color / font / radius / shadow reference resolves to a theme.json
 * token (ADR-003 / ADR-006): var(--wp--preset--*) or var(--wp--custom--*).
 * No raw hex, no hard-coded font stack anywhere below. The 5/22 brand-token
 * refinement is therefore a theme.json values-only edit — never a CSS rewrite.
 *
 * Token quick-reference (theme.json semantic role map -> AA-safe palette slug):
 *   --wp--custom--color--text            ink        body copy
 *   --wp--custom--color--text-soft       ink-soft   secondary copy
 *   --wp--custom--color--primary         harbor     headings / links (AA)
 *   --wp--custom--color--primary-bright  harbor-brt large fills only
 *   --wp--custom--color--accent          ember      solid CTA fill + INK text (4.85:1) — never white text on it
 *   --wp--custom--color--accent-deep     ember-deep orange text / icons + hover fills (AA on every surface)
 *   --wp--custom--color--accent-bright   ember-brt  thin accents / icon-tile tints only (= ember)
 *   --wp--custom--color--secondary       sage       soft fills / borders
 *   --wp--custom--color--secondary-deep  sage-deep  green text / icons (AA)
 *   --wp--custom--color--surface         paper      warm surface
 *   --wp--custom--color--surface-2       paper-2    deeper warm surface
 *   --wp--custom--color--surface-cool    blue-tint  cool surface
 *   --wp--custom--color--surface-sage    sage-tint  green surface
 *   --wp--custom--color--highlight       sunshine   secondary CTA fill (ink text), stat-band rule, active filter (never text)
 *   --wp--custom--color--highlight-tint  sun-tint   soft yellow surface (ink text only)
 *   --wp--custom--color--highlight-deep  sun-deep   hover fill for Sunshine buttons (ink text, 4.95:1)
 *   --wp--custom--color--line            line       hairline borders
 *   --wp--custom--color--base            white
 *   --wp--custom--color--scrim           dark video scrim
 * ====================================================================== */

/* ---- Base -------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* One global focus-visible ring so every interactive element is keyboard-clear. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--custom--color--primary-bright);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Skip-link (WP prints .skip-link; keep it reachable + visible on focus). */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.6rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--wp--custom--color--base);
	color: var(--wp--custom--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--md);
}

/* Accessible visually-hidden helper. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Block-layout normalization (ADR-014) ------------------------------ */
/* Core injects margin-block between layout-container children (skipping the
 * first child) at (0,1,0) specificity via `:root :where(...)` rules — seen as
 * white strips between bands, a header/content gap, a taller-looking first
 * card in every grid, and a sagging hero row. The raw-div idiom owned its own
 * rhythm, so zero the injected margins inside the design system at the SAME
 * specificity and shape. These sit BEFORE the components ON PURPOSE: every
 * component class margin later in this file overrides them by order. About's
 * prose body, contact columns/meta, and stub internals are deliberately not
 * listed — they were native pre-ADR-014 and keep the default rhythm. */
:root :where(.wp-site-blocks) > * { margin-block: 0; }
/* Scoped to .page: the marketing canvas owns post_content as full-bleed
 * sections. CPT singles (programs; later posts) carry PROSE in post_content
 * and keep the default flow rhythm — unscoped, this rule flattened program
 * body copy to 0 (caught 2026-07-28). */
:root :where(.page .wp-block-post-content) > * { margin-block: 0; }
:root :where(.spur-inner, .spur-hero__inner, .spur-page-header__inner, .spur-stats-band__inner, .spur-newsletter__inner, .spur-hero__actions) > * { margin-block: 0; }
/* The band's OWN inner wrapper also gets core's injected 24px, which collapses
 * through the band and main into a white strip above program/archive heroes
 * (pages were saved by the .page scope above; caught 2026-07-29). */
:root :where(.spur-page-header) > * { margin-block: 0; }
:root :where(.spur-pathways, .spur-steps, .spur-stats, .spur-partners, .spur-faq, .spur-cards) > * { margin-block: 0; }
:root :where(.spur-pathway, .spur-step, .spur-stat, .spur-partner) > * { margin-block: 0; }
/* Grid/flex cells must not inherit core's injected sibling margin — the first
 * cell has none and rides high against its row (quick-facts caught 7/29). */
:root :where(.spur-quick-facts) > * { margin-block: 0; }

/* Section rhythm: full-width homepage sections breathe via a shared gap. Each section
 * pattern is a core group (align:full) so it breaks out of the constrained main; the
 * .spur-inner wrapper re-centers content at wide-size with responsive gutters.
 * Bands open on section.gapStart (40/60/72px at 390/1024/1440) and close on
 * section.gap (48/73/88): the small eyebrow that opens a band already adds optical
 * space above the title (Chris 10/10, "a bit much on the top"; ADR-024). The
 * fallback keeps the old symmetric padding if this CSS ever meets a page whose
 * global styles predate the gapStart token. */
.spur-section {
	padding-block: var(--wp--custom--section--gap-start, var(--wp--custom--section--gap)) var(--wp--custom--section--gap);
}
.spur-section--tight { padding-block: var(--wp--custom--section--gap-tight); }
.spur-section--paper { background-color: var(--wp--custom--color--surface); }
.spur-section--paper-2 { background-color: var(--wp--custom--color--surface-2); }
.spur-section--cool { background-color: var(--wp--custom--color--surface-cool); }
.spur-section--sage { background-color: var(--wp--custom--color--surface-sage); }

/* Design-audit 9/9 — section rhythm:
 * 1. Consecutive full-width bands stack flush. The root block gap otherwise
 *    leaves a 24px white sliver between tinted bands (visible on program
 *    pages between impact → donate → closing), which reads as a defect.
 * 2. Post-content H2s group with their own text: extra space ABOVE a heading
 *    so it belongs to what follows, not what precedes (proximity). */
main .spur-section.alignfull + .spur-section.alignfull { margin-block-start: 0; }
main .wp-block-post-content > h2:not(:first-child) { margin-block-start: 2.5rem; }
/* 3. Consecutive bands on the same surface share one padding (ADR-024): the seam is
 *    invisible, so two paddings read as a hole (Holiday Cheer's coming-soon card sat
 *    203px above "Get involved" on one tint). The next band drops its top padding to
 *    a floor that keeps the seam at least 4.5rem (72px) on phones, where the
 *    previous band's bottom alone (48px) would be barely more than a head's own
 *    40px gap. Anchor targets (#wish-lists, #get-involved) still land with air
 *    above them. Replaces the .spur-hc-tags one-off. */
main :is(.spur-section--paper + .spur-section--paper, .spur-section--paper-2 + .spur-section--paper-2, .spur-section--cool + .spur-section--cool, .spur-section--sage + .spur-section--sage) {
	padding-block-start: max(0px, calc(4.5rem - var(--wp--custom--section--gap))); /* assumes the band before closes on section.gap, not --tight */
	scroll-margin-block-start: var(--wp--custom--section--gap-start, 2.5rem);
}

.spur-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.spur-inner--narrow { max-width: 780px; }

/* The head spans the content width so a title wraps only when the screen runs out of
 * room (Chris 10/10: no two-line titles on desktop); the 60ch reading measure sits on
 * the intro paragraph alone. */
.spur-section__head { margin-inline: auto; text-align: center; margin-block-end: 2.5rem; }
/* Raw-markup heads (closing CTA, donate, wish-list bands) open on a <p> eyebrow that
 * kept the browser's 1em top margin, so those bands started ~18px lower than the
 * block-built ones (10/10 audit). */
.spur-section__head > :first-child { margin-block-start: 0; }
.spur-section__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--custom--color--primary);
	margin: 0;
}
.spur-section__intro { color: var(--wp--custom--color--text-soft); font-size: var(--wp--preset--font-size--large); line-height: 1.5; margin: 0.75rem auto 0; max-width: 60ch; text-wrap: pretty; }

/* Section eyebrow: the 0.78rem eyebrow token, as on 10/8 (Chris, 10/10 gate: the 10/9
 * larger-eyebrow amendment is reverted; small UI labels use the same token). */
.spur-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--custom--color--secondary-deep);
	margin-block-end: 0.5rem;
}

/* ---- Buttons ----------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.1;
	padding: 0.8em 1.6em;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid transparent;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease,
		background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	will-change: transform;
}

/* Brand button contract (ADR-017): the primary CTA is an Ember fill with ink text
 * (4.85:1); hover/focus deepens to ember-deep with white text (5.65:1). Buttons with
 * no color preset get that contract by default. */
.wp-block-button .wp-block-button__link {
	background-color: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--text);
}

/* Solid CTAs lift on hover; the ember fill deepens (harbor fills keep their color). */
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--md);
	filter: brightness(0.94);
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--color--accent-deep);
	color: var(--wp--custom--color--base);
	filter: none;
}

/* Content buttons saved with the pre-brand "white text on ember" preset pair are
 * corrected here (no page edit, no seed edit, no markup change). The preset classes
 * carry !important, so the correction must too. */
.wp-block-button__link.has-ember-background-color.has-white-color { color: var(--wp--custom--color--text) !important; }
.wp-block-button__link.has-ember-background-color.has-white-color:hover,
.wp-block-button__link.has-ember-background-color.has-white-color:focus-visible {
	background-color: var(--wp--custom--color--accent-deep) !important;
	color: var(--wp--custom--color--base) !important;
}
/* Harbor-preset buttons: no fill change on hover (white on harbor stays 9:1). */
.wp-block-button__link.has-harbor-background-color:hover,
.wp-block-button__link.has-harbor-background-color:focus-visible { color: var(--wp--custom--color--base); }
.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(0); filter: brightness(0.9); }

/* Secondary CTA on every hero and page-header band, photo or tinted (Chris 10/10:
 * Ember + Sunshine on heroes sitewide): Spur Sunshine fill with
 * ink text (8.1:1) — the brand kit's yellow, design director's call 9/26 (ADR-019).
 * The style slug stays `spur-outline-light` (saved in content; the slug is the
 * contract); only its look changed. Hover deepens by mixing a little ink in. */
.wp-block-button.is-style-spur-outline-light .wp-block-button__link {
	background-color: var(--wp--custom--color--highlight);
	color: var(--wp--custom--color--text);
	border-color: var(--wp--custom--color--highlight);
}
/* Hover/focus: the same lift + shadow every button gets, plus the fill flip the
 * ember button has (ember -> ember-deep): sunshine -> sunshine-deep, ink text kept
 * (4.95:1 — as deep as AA allows on a yellow). */
.wp-block-button.is-style-spur-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-spur-outline-light .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--color--highlight-deep);
	border-color: var(--wp--custom--color--highlight-deep);
	color: var(--wp--custom--color--text);
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--md);
	filter: none;
}

/* Ghost: secondary CTA inside light content sections (closing CTA, fit card); never
 * in a hero, where the secondary is Sunshine (ADR-019, 10/10). */
.wp-block-button.is-style-spur-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--custom--color--primary);
	border-color: var(--wp--custom--color--primary);
}
.wp-block-button.is-style-spur-ghost .wp-block-button__link:hover {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--base);
	filter: none;
}

/* Button utility classes for dev-owned core/html sections (hero, pathways, steps).
 * Same token-driven look as the core button variants above, usable in raw markup. */
.spur-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.1;
	padding: 0.8em 1.6em;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease,
		background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.spur-btn:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--md); filter: brightness(0.94); }
.spur-btn:active { transform: translateY(0); filter: brightness(0.9); }
.spur-btn--primary { background-color: var(--wp--custom--color--accent); color: var(--wp--custom--color--text); }
.spur-btn--primary:hover,
.spur-btn--primary:focus-visible { background-color: var(--wp--custom--color--accent-deep); color: var(--wp--custom--color--base); filter: none; }
.spur-btn--secondary { background-color: var(--wp--custom--color--primary); color: var(--wp--custom--color--base); }
.spur-btn--outline-light { background-color: var(--wp--custom--color--highlight); color: var(--wp--custom--color--text); border-color: var(--wp--custom--color--highlight); }
.spur-btn--outline-light:hover,
.spur-btn--outline-light:focus-visible { background-color: var(--wp--custom--color--highlight-deep); border-color: var(--wp--custom--color--highlight-deep); color: var(--wp--custom--color--text); transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--md); filter: none; }
.spur-btn--ghost { background-color: transparent; color: var(--wp--custom--color--primary); border-color: var(--wp--custom--color--primary); }
.spur-btn--ghost:hover { background-color: var(--wp--custom--color--primary); color: var(--wp--custom--color--base); filter: none; }

/* =========================================================================
 * SITE CHROME — header, descriptive contained mega-menu, footer
 * Header markup is dev-owned (ADR-007) inside a core/html block in the header
 * template part; JS behavior in assets/js/site-nav.js. Fully keyboard-operable.
 * ====================================================================== */

/* The header landmark is the header template-part wrapper (single banner). We style
 * it directly so the chrome applies on every template without a per-template
 * className. JS toggles .spur-header--nav-open on this same element for mobile.
 * Header scrolls with the page (client call, 8/28) — no sticky/fixed positioning. */
header.wp-block-template-part {
	background-color: var(--wp--custom--color--base);
	border-block-end: 1px solid var(--wp--custom--color--line);
}

/* Slim utility strip above the main bar. */
.spur-utility {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--base);
	font-size: var(--wp--preset--font-size--small);
}
.spur-utility__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: 0.3rem clamp(1.1rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
}
.spur-utility a { color: inherit; text-decoration: none; }
.spur-utility a:hover { text-decoration: underline; }
.spur-utility__social { display: inline-flex; gap: 0.75rem; align-items: center; }
.spur-utility__social a { display: inline-flex; line-height: 0; }
/* The global harbor-bright focus ring is about 2.5:1 on the harbor strip and footer
 * (WCAG 1.4.11 asks 3:1); white reads at 9:1 there, as on the footer's Cummings link. */
.spur-utility a:focus-visible,
footer.wp-block-template-part :is(a, input, button):focus-visible { outline-color: var(--wp--custom--color--base); }

/* Main bar: logo flush left at the content edge, the primary nav to its right and the
 * Donate CTA at the far right, all on one row (ADR-023, client 10/6; supersedes
 * ADR-012's centered layout). Grid columns: logo | left list (1fr, packed to the end)
 * | right list. Every item gets an explicit row: sparse auto-placement would otherwise
 * push a lower column onto a new row. The column gap matches the list gap, so the two
 * lists read as one evenly spaced menu. */
.spur-bar {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: 0.85rem clamp(1.1rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0 clamp(0.5rem, 1.6vw, 1.4rem);
}
/* Logo (brand pass 9/26): the horizontal lockup at 56px tall. Brand Guidelines V2
 * ask for ½X clear space (X = mark height, so 28px here): bar padding (0.85rem) + logo
 * padding (0.9rem) ≈ 28px above/below. The negative start margin cancels the inline
 * padding so the mark sits on the content edge; the gutter beside it (36px or more
 * above 900px) is the left clear space, and the free 1fr column keeps the menus well
 * clear on the right. The padding stays for the hit area and the focus ring. */
.spur-logo {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	padding: 0.9rem 0.5rem;
	margin-inline-start: -0.5rem;
	line-height: 0;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
}
.spur-logo img { height: 56px; width: auto; display: block; }

.spur-nav { display: contents; }
.spur-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.6vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.spur-nav__list--left { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.spur-nav__list--right { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.spur-nav__item { position: relative; }

.spur-nav__link,
.spur-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--custom--color--text);
	background: none;
	border: 0;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	border-block-end: 2px solid transparent;
}
.spur-nav__link:hover,
.spur-nav__toggle:hover,
.spur-nav__item--open > .spur-nav__toggle {
	color: var(--wp--custom--color--primary);
	border-block-end-color: var(--wp--custom--color--accent);
}
.spur-nav__toggle svg { transition: transform 0.2s ease; }
.spur-nav__item--open > .spur-nav__toggle svg { transform: rotate(180deg); }

/* Header Donate CTA (persistent). */
.spur-nav__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.55em 1.25em;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid transparent;
	background-color: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--text);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.spur-nav__cta:hover,
.spur-nav__cta:focus-visible { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--md); background-color: var(--wp--custom--color--accent-deep); color: var(--wp--custom--color--base); }

/* The contained, descriptive mega-panel (NOT a full-viewport takeover). */
.spur-mega {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: min(94vw, 480px);
	background-color: var(--wp--custom--color--base);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: 0.6rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 100; /* layers panels above page content now that the header itself is static */
}
.spur-nav__item--wide .spur-mega { width: min(94vw, 620px); }
.spur-nav__item--open .spur-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	/* Visibility is left out of the open transition so it flips at once (closing still
	 * waits out the fade): a transitioning visibility reads "hidden" on its first frame,
	 * so ArrowDown's open-then-focus in site-nav.js could not land on the first link.
	 * Leaving it out (rather than 0s) also holds under the reduced-motion override. */
	transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Invisible hover bridge across the 0.6rem toggle→panel gap so the pointer
 * never "leaves" the item mid-transit (desktop only; the mobile panel is
 * static/inline and must not grow a phantom hover strip). */
@media (min-width: 901px) {
	.spur-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.7rem;
		height: 0.7rem;
	}
	/* The right-hand group sits against the bar's end edge, so a centered panel there
	 * (Give) would run past the content edge, and off screen near 1024px. Anchor those
	 * panels to the item's end edge instead; both transform rules are overridden. */
	.spur-nav__list--right .spur-mega {
		left: auto;
		right: 0;
		transform: translateY(-6px);
	}
	.spur-nav__list--right .spur-nav__item--open .spur-mega { transform: translateY(0); }
}
.spur-mega__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem;
}
.spur-nav__item--wide .spur-mega__grid { grid-template-columns: 1fr 1fr; }
.spur-mega__link {
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	color: var(--wp--custom--color--text);
}
.spur-mega__link:hover,
.spur-mega__link:focus-visible {
	background-color: var(--wp--custom--color--surface-cool);
}
.spur-mega__title {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--primary);
}
.spur-mega__desc {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--custom--color--text-soft);
	margin-block-start: 0.1rem;
}

/* Mobile disclosure toggle (hamburger) — hidden on desktop. */
.spur-nav__mobile-toggle { display: none; }

@media (max-width: 900px) {
	/* Logo left, menu toggle right; the nav opens as a second row. */
	.spur-bar { grid-template-columns: 1fr auto; gap: 0.75rem; }
	/* 40px mark: ½X = 20px = bar padding + 0.4rem above/below. On the left the mark
	 * sits on the content edge, held at least 20px (1.25rem) from the viewport edge where
	 * the gutter is narrower than that (phones under about 500px). */
	.spur-logo {
		grid-column: 1;
		grid-row: 1;
		padding: 0.4rem 0.5rem;
		margin-inline-start: calc(max(0px, 1.25rem - clamp(1.1rem, 4vw, 2.5rem)) - 0.5rem);
	}
	.spur-logo img { height: 40px; }
	.spur-nav__mobile-toggle {
		grid-column: 2;
		grid-row: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--custom--color--line);
		border-radius: var(--wp--custom--radius--sm);
		background: var(--wp--custom--color--base);
		color: var(--wp--custom--color--primary);
		cursor: pointer;
	}
	.spur-nav {
		display: none;
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.spur-header--nav-open .spur-nav {
		display: block;
		border-block-start: 1px solid var(--wp--custom--color--line);
		margin-block-start: 0.75rem;
		padding-block-start: 0.75rem;
	}
	.spur-nav__list--left,
	.spur-nav__list--right {
		grid-column: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}
	/* border-box keeps the Contact link (an <a>, content-box by default) on the same
	 * end edge as the toggle buttons instead of 0.5rem past it. */
	.spur-nav__link,
	.spur-nav__toggle { box-sizing: border-box; justify-content: space-between; width: 100%; padding: 0.75rem 0.25rem; font-size: var(--wp--preset--font-size--medium); }
	.spur-mega {
		position: static;
		transform: none;
		width: auto;
		box-shadow: none;
		border: 0;
		border-inline-start: 2px solid var(--wp--custom--color--line);
		border-radius: 0;
		margin-inline-start: 0.5rem;
		padding: 0.2rem 0 0.4rem;
		opacity: 1;
		visibility: hidden;
		height: 0;
		overflow: hidden;
	}
	/* The desktop wide-panel width (0,2,0) outranks the width: auto above, so reset it
	 * here: otherwise the Programs panel stays 94vw wide inside the indented column and
	 * the open menu scrolls sideways on phones, clipping the focus ring. */
	.spur-nav__item--wide .spur-mega { width: auto; }
	.spur-nav__item--open .spur-mega { visibility: visible; height: auto; transform: none; }
	/* The collapsed panel needs overflow: hidden and has no inline padding, which clipped
	 * the sides of a link's focus ring: draw the ring inside the link instead. */
	.spur-mega__link:focus-visible { outline-offset: -3px; }
	.spur-nav__item--wide .spur-mega__grid { grid-template-columns: 1fr; }
	.spur-nav__cta { margin-block-start: 0.6rem; }
}

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

/* The contentinfo landmark is the footer template-part wrapper (single contentinfo). */
footer.wp-block-template-part {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--base);
}
footer.wp-block-template-part a { color: var(--wp--custom--color--base); }
.spur-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2.5rem) 1.5rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.spur-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; }
}
/* The hours line stays whole (Kim + Chris 10/9: "Mon–Fri, 10 AM - 2 PM" on one line at
 * desktop widths). Footer-scoped, no token: the Visit column is a 1fr track, so it takes
 * the width the unbroken line needs at 1024 and the other columns give a little. The
 * type is the body size, as on 10/8 (a one-token step tried on 10/10 was reverted at the
 * gate). Under 700px the columns stack and the line has room anyway. */
.spur-footer__hours { white-space: nowrap; }
.spur-footer__brand-logo { margin: 0 0 1.5rem; line-height: 0; }
.spur-footer__brand-logo img { height: 48px; width: auto; display: block; } /* ½X clear space = 24px; column gap and the 1.5rem margin exceed it */
.spur-footer__tag { color: color-mix(in srgb, var(--wp--custom--color--base) 82%, transparent); margin: 0; line-height: 1.5; }
/* Cummings Foundation logo under the footer tagline (10/8). Transparent reverse
 * version shipped as a theme asset, drawn 64px tall (the file is 2x, 140x128). Its
 * link gets a white focus ring: the global harbor-bright ring is about 2.5:1 on the
 * harbor footer and would sit right against the logo's blue circle. */
.spur-footer__supporter { margin: 1.5rem 0 0; line-height: 0; }
.spur-footer__supporter a { display: inline-block; border-radius: var(--wp--custom--radius--sm); }
.spur-footer__supporter img { height: 64px; width: auto; display: block; }
.spur-footer__supporter a:focus-visible { outline: 3px solid var(--wp--custom--color--base); outline-offset: 4px; }
.spur-footer__col h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--custom--color--base) 75%, transparent);
	margin: 0 0 0.9rem;
}
.spur-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.spur-footer__col a { text-decoration: none; }
.spur-footer__col a:hover { text-decoration: underline; }
.spur-footer__news p { color: color-mix(in srgb, var(--wp--custom--color--base) 82%, transparent); margin: 0 0 0.75rem; line-height: 1.5; }
.spur-footer__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.spur-footer__form input {
	flex: 1 1 10rem;
	font: inherit;
	padding: 0.6rem 0.8rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--base);
	color: var(--wp--custom--color--text);
}
.spur-footer__form button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--text);
}
.spur-footer__form button:hover,
.spur-footer__form button:focus-visible { background: var(--wp--custom--color--accent-deep); color: var(--wp--custom--color--base); }
.spur-footer__bar {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--custom--color--base) 22%, transparent);
	margin-block-start: 1rem;
}
.spur-footer__bar-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: 1rem clamp(1.1rem, 4vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--custom--color--base) 80%, transparent);
}
.spur-footer__bar a { text-decoration: none; }
.spur-footer__bar a:hover { text-decoration: underline; }

/* =========================================================================
 * HERO — home photo band (PRD §3.1 Section 1). The video stub left the hero
 * content on 10/9; the play styles below stay for the parked video upgrade.
 * ====================================================================== */

.spur-hero {
	position: relative;
	isolation: isolate;
	color: var(--wp--custom--color--base);
	background: var(--wp--custom--gradient--hero);
	overflow: hidden;
}
.spur-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--wp--custom--color--primary-bright) 35%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--wp--custom--color--text) 15%, transparent) 0%, color-mix(in srgb, var(--wp--custom--color--text) 55%, transparent) 100%);
}
/* Same height as the inner-page bands (Chris 10/9, ADR-013 amendment; was a
 * fixed 550px since 7/29). The hero and .spur-page-header share one geometry,
 * read from the band tokens: see the band rule under PAGE HEADER. */
.spur-hero__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-block: var(--wp--custom--band--pad-block);
	padding-inline: clamp(1.1rem, 4vw, 2.5rem);
	display: grid;
	justify-items: start;
	align-content: center;
	gap: 0.9rem;
}
.spur-hero__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--custom--color--base) 88%, transparent);
	margin: 0;
	text-wrap: balance; /* two even lines if it ever wraps (320px) */
}
.spur-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	/* Two-line target on desktop: capped below the huge preset, wrap width
	 * widened to match (7/29). */
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 1.05;
	font-weight: 600;
	color: var(--wp--custom--color--base);
	margin: 0;
	max-width: 26ch;
	text-wrap: balance;
}
.spur-hero__lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--custom--color--base) 92%, transparent);
	margin: 0;
	max-width: 58ch; /* the page-header lede measure: two lines on desktop (10/9) */
}
.spur-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-block-start: 0.5rem; }

/* Inert play affordance — no video asset yet (stub). */
.spur-hero__play {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--custom--color--base);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.4rem 0.2rem;
}
.spur-hero__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--custom--color--base) 18%, transparent);
	border: 2px solid color-mix(in srgb, var(--wp--custom--color--base) 70%, transparent);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.spur-hero__play:hover .spur-hero__play-icon { background: color-mix(in srgb, var(--wp--custom--color--base) 30%, transparent); transform: scale(1.05); }
.spur-hero__note {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--custom--color--base) 78%, transparent);
	margin: 0.25rem 0 0;
}

/* =========================================================================
 * STATS BAND — bold serif numbers (Kinderground reference), static
 * ====================================================================== */

.spur-stats-band { background-color: var(--wp--custom--color--surface-2); }
/* A head-only band on the stats band's own surface is that band's head (About "Our
 * impact", Chris 10/10): one tinted section, the title 2.5rem above the numbers (the
 * section head's usual gap) instead of two paddings across a color break. Both
 * conditions are content the editor shows (the band's tint, its lone head), so a band
 * Kim retints or gives content of its own falls back to the normal rhythm. */
main .spur-section--paper-2:has(> .spur-inner > .spur-section__head:only-child):has(+ .spur-stats-band) { padding-block-end: 0; }
main .spur-section--paper-2:has(> .spur-inner > .spur-section__head:only-child) + .spur-stats-band > .spur-stats-band__inner { padding-block-start: 2.5rem; }
.spur-stats-band__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: var(--wp--custom--section--gap-tight) clamp(1.1rem, 4vw, 2.5rem);
}
.spur-stats {
	display: grid;
	gap: 1.5rem 1rem;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
}
/* Four across only where the widest number fits its column (10/2: below ~1100px the
 * row ran past the viewport); 2x2 under that. */
@media (min-width: 1100px) { .spur-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 359px) { .spur-stats { grid-template-columns: 1fr; } }
.spur-stat { text-align: center; }
.spur-stat__num {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--custom--color--primary);
	letter-spacing: -0.01em;
}
/* Sunshine use 1 of 3 (ADR-017): a short brand-yellow rule under each stat number. */
/* Small qualifier inside a stat number ("Nearly 700"): keeps the tile one line. */
.spur-stat__num:has(.spur-stat__qual) { white-space: nowrap; }
.spur-stat__qual { font-size: 0.4em; letter-spacing: 0.01em; margin-inline-end: 0.15em; }
.spur-stat__num::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin: 0.6rem auto 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--highlight);
}
.spur-stat__label {
	display: block;
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--custom--color--text-soft);
}
.spur-stats__note {
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--custom--color--text-soft);
	margin: 1.75rem auto 0;
	font-style: italic; /* full content width: one line on desktop, wraps only when it must (Chris 10/10) */
	text-wrap: pretty; /* when it does wrap, never a lone last word ("day.") */
}

/* Impact stat callout — single-program page (PRD §3.3 anatomy). Same surface
 * as the org-wide stats band so program numbers visually rhyme with it. */
.spur-impact-callout {
	background-color: var(--wp--custom--color--surface-2);
	text-align: center;
}
.spur-impact-callout__stat {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--custom--color--primary);
	letter-spacing: -0.01em;
}

/* =========================================================================
 * WHAT WE DO — pathway-preview cards (homepage teaches the site)
 * ====================================================================== */

.spur-pathways {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 860px) { .spur-pathways { grid-template-columns: repeat(3, 1fr); } }
.spur-pathway {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.6rem 1.5rem 1.7rem;
	background-color: var(--wp--custom--color--base);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.spur-pathway:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--md); border-color: var(--wp--custom--color--secondary); }
.spur-pathway__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--color--surface-sage);
	color: var(--wp--custom--color--secondary-deep);
	line-height: 0;
}
.spur-pathway--give .spur-pathway__icon { background-color: var(--wp--custom--color--surface-cool); color: var(--wp--custom--color--primary); }
.spur-pathway--volunteer .spur-pathway__icon { background-color: color-mix(in srgb, var(--wp--custom--color--accent-bright) 22%, var(--wp--custom--color--base)); color: var(--wp--custom--color--accent-deep); }

/* Generic icon-tile tints so any pathway-preview card grid (e.g. the /volunteer
 * audience segments) can vary tiles without forking the component. */
.spur-pathway--ember .spur-pathway__icon { background-color: color-mix(in srgb, var(--wp--custom--color--accent-bright) 22%, var(--wp--custom--color--base)); color: var(--wp--custom--color--accent-deep); }
.spur-pathway--cool .spur-pathway__icon { background-color: var(--wp--custom--color--surface-cool); color: var(--wp--custom--color--primary); }
.spur-pathway--sage .spur-pathway__icon { background-color: var(--wp--custom--color--surface-sage); color: var(--wp--custom--color--secondary-deep); }
.spur-pathway__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--custom--color--primary);
	margin: 0;
}
.spur-pathway__desc { margin: 0; color: var(--wp--custom--color--text); line-height: 1.55; }
.spur-pathway__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.spur-pathway__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--text-soft);
}
.spur-pathway__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-block-start: 0.4rem;
	border-radius: 50%;
	background-color: var(--wp--custom--color--secondary);
}
.spur-pathway__more {
	margin-block-start: auto;
	padding-block-start: 0.4rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--primary);
	text-decoration: none;
}
.spur-pathway__more:hover { text-decoration: underline; }
.spur-pathway__more::after { content: " \2192"; }

/* =========================================================================
 * HOW IT WORKS — 1-2-3 sequence + "find your fit" axis preview
 * ====================================================================== */

.spur-steps {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	counter-reset: spur-step;
	margin-block: 1.5rem 0;
}
@media (min-width: 780px) { .spur-steps { grid-template-columns: repeat(3, 1fr); } }
.spur-step {
	position: relative;
	padding: 1.4rem 1.4rem 1.5rem;
	background-color: var(--wp--custom--color--base);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
}
.spur-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block-end: 0.75rem;
}
.spur-step__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--custom--color--primary); margin: 0 0 0.35rem; }
.spur-step__desc { margin: 0; color: var(--wp--custom--color--text); line-height: 1.5; }

/* Find-your-fit axis preview — real axis labels from spur_program_axis_config(). */
.spur-fit {
	margin-block-start: 2rem;
	padding: 1.5rem;
	background-color: var(--wp--custom--color--surface);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
}
/* Green intro line of the card, under "How it works": the eyebrow token, like the
 * section eyebrows (10/8 scale, restored at the 10/10 gate). */
.spur-fit__label {
	display: block;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--custom--color--secondary-deep);
	margin-block-end: 0.75rem;
}
.spur-fit__axes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spur-fit__axis {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--base);
	border: 1px solid var(--wp--custom--color--line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--custom--color--text);
}
.spur-fit__axis svg { color: var(--wp--custom--color--secondary-deep); }
.spur-fit .spur-btn { margin-block-start: 1.25rem; }

/* =========================================================================
 * PARTNERS & SPONSORS — refined wordmark row + tier labels
 * ====================================================================== */

.spur-partners {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	margin-block: 1.75rem 0;
}
@media (min-width: 720px) { .spur-partners { grid-template-columns: repeat(5, 1fr); } }
.spur-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	text-align: center;
	min-height: 104px;
	padding: 1rem;
	background-color: var(--wp--custom--color--base);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.spur-partner:hover { border-color: var(--wp--custom--color--secondary); box-shadow: var(--wp--custom--shadow--sm); }
/* Real sponsor logos in the partner cards (8/31): height-normalized, replacing
 * the wordmark placeholder where a logo asset exists. */
.spur-partner .spur-partner__logo { margin: 0; line-height: 0; }
.spur-partner .spur-partner__logo img { max-height: 48px; max-width: 100%; width: auto; }
/* Linked logos and names (10/8): room under the link so the keyboard focus ring
 * (3px + 2px offset) clears the tier label instead of touching it. */
.spur-partner .spur-partner__logo:has(> a),
.spur-partner .spur-partner__name:has(> a) { margin-block-end: 0.3rem; }
.spur-partner__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--custom--color--primary);
	line-height: 1.1;
}
.spur-partner__tier {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--text-soft);
}

/* =========================================================================
 * NEWSLETTER — warm band
 * ====================================================================== */

.spur-newsletter { background-color: var(--wp--custom--color--surface-sage); }
.spur-newsletter__inner {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--wp--custom--section--gap) clamp(1.1rem, 4vw, 2.5rem);
	text-align: center;
}
.spur-newsletter__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; color: var(--wp--custom--color--primary); margin: 0 0 0.6rem; }
.spur-newsletter__lede { color: var(--wp--custom--color--text); margin: 0 auto 1.5rem; max-width: 48ch; line-height: 1.55; }
.spur-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.spur-newsletter__form input {
	flex: 1 1 16rem;
	max-width: 22rem;
	font: inherit;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--base);
	color: var(--wp--custom--color--text);
}
.spur-newsletter__form button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--accent);
	color: var(--wp--custom--color--text);
}
.spur-newsletter__form button:hover,
.spur-newsletter__form button:focus-visible { background: var(--wp--custom--color--accent-deep); color: var(--wp--custom--color--base); }
.spur-newsletter__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--text-soft); margin: 0.85rem 0 0; }

/* =========================================================================
 * PROGRAM QUICK FACTS — seven-axis badge grid (PRD v1.6 §3.3)
 * ====================================================================== */

.spur-quick-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem 1.5rem;
	margin-block: 1.5rem;
}
@media (max-width: 600px) { .spur-quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spur-quick-facts__axis { display: flex; flex-direction: column; gap: 0.35rem; }
.spur-quick-facts__label {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--custom--color--secondary-deep);
}
.spur-quick-facts__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.spur-chip {
	display: inline-block;
	padding: 0.28rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--custom--color--text);
	background-color: var(--wp--custom--color--surface-sage);
	border: 1px solid var(--wp--custom--color--secondary);
}

/* "Commitment and details" panel (C4, ADR-021, 10/8). The
 * spur_program_quick_facts_in_content() filter places it inside the program's
 * post content, below the "What You'll Be Doing" section. A quiet paper card
 * with a hairline sets it apart from the prose around it (on Holiday Cheer it
 * follows the "1." / "2." sub-sections, so it must not read as a third step).
 * Air above it (2rem) is less than the 2.5rem the next H2 gets, so it groups
 * with What You'll Be Doing. The chip grid keeps three columns on desktop and
 * two at 600px and below, with a tighter column gap; below 360px it drops to
 * one column, because two columns inside the card are narrower than the
 * longest chip ("Weekday afternoon/evening" cannot wrap at the slash) and it
 * would cross the card's border at 320px (same breakpoint as .spur-stats).
 * Nothing is hidden or collapsed. */
.spur-program-facts {
	margin-block: 2rem 0;
	padding: clamp(1rem, 3vw, 1.75rem);
	background-color: var(--wp--custom--color--surface);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--md);
}
.spur-program-facts:first-child { margin-block-start: 0; }
.spur-program-facts__title { margin: 0 0 1.1rem; }
.spur-program-facts .spur-quick-facts { margin-block: 0; }
@media (min-width: 601px) { .spur-program-facts .spur-quick-facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
@media (max-width: 600px) { .spur-program-facts .spur-quick-facts { column-gap: 1rem; } }
@media (max-width: 359px) { .spur-program-facts .spur-quick-facts { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * PROGRAMS ARCHIVE + FILTER (PRD §3.3.1)
 * ====================================================================== */

.spur-programs-archive { padding-block: var(--wp--custom--section--gap-tight); margin-block-start: 0; /* counter core's injected 24px sibling margin so the band meets the grid like every other page (7/29 audit) */ }
.spur-archive {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin-block-start: 2rem;
}
@media (min-width: 783px) {
	.spur-archive { grid-template-columns: 16rem 1fr; align-items: start; }
	.spur-archive__count,
	.spur-program-grid,
	.spur-no-results { grid-column: 2; }
	.spur-filter { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 1.5rem; }
}
.spur-filter {
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.1rem 1.2rem 1.3rem;
	background-color: var(--wp--custom--color--base);
	box-shadow: var(--wp--custom--shadow--sm);
}
.spur-filter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-block-end: 0.75rem; }
.spur-filter__title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--primary); }
.spur-filter__reset { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--primary); text-decoration: underline; }
/* In the 16rem panel both head labels broke onto two lines ("Filter / programs",
 * "Reset / filters"); keep each whole and let Reset wrap below the title. */
.spur-filter__title, .spur-filter__reset { white-space: nowrap; }
.spur-filter__groups { display: flex; flex-direction: column; gap: 1rem; }
.spur-filter__group { border: 0; border-top: 1px solid var(--wp--custom--color--line); margin: 0; padding: 0.75rem 0 0; }
.spur-filter__legend { font-size: var(--wp--preset--font-size--eyebrow); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--custom--color--secondary-deep); padding: 0; margin-block-end: 0.4rem; }
.spur-filter__opt { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--wp--preset--font-size--small); line-height: 1.35; padding: 0.15rem 0; cursor: pointer; }
.spur-filter__opt:hover { color: var(--wp--custom--color--primary); }
.spur-filter__opt input { margin-block-start: 0.15rem; accent-color: var(--wp--custom--color--primary); }
/* Sunshine use 2 of 3 (ADR-017): a checked filter option reads as the active chip
 * (sunshine tint, ink text; the box-shadow spread pads it without a layout shift). */
.spur-filter__opt:has(input:checked) {
	background-color: var(--wp--custom--color--highlight-tint);
	box-shadow: 0 0 0 4px var(--wp--custom--color--highlight-tint);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--color--text);
	font-weight: 600;
}
.spur-filter__noscript { margin-block-start: 0.75rem; font-size: var(--wp--preset--font-size--small); }
.spur-archive__count { font-size: var(--wp--preset--font-size--small); font-weight: 600; margin: 0; color: var(--wp--custom--color--text-soft); }

/* Grid: 3 / 2 / 1 up */
.spur-program-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .spur-program-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .spur-program-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
 * PROGRAM CARD — designed photo-less fallback + real featured-image override
 * ====================================================================== */

.spur-program-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background-color: var(--wp--custom--color--base);
	box-shadow: var(--wp--custom--shadow--sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.spur-program-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--md); border-color: var(--wp--custom--color--secondary); }
.spur-program-card[hidden] { display: none; }
.spur-program-card__media-link { display: block; text-decoration: none; }

/* Media slot. Default = a brand-tinted gradient + meaningful mark (never a broken
 * frame). A real featured image (.spur-card__media--photo) overrides the gradient. */
.spur-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: var(--wp--custom--gradient--card);
	color: var(--wp--custom--color--primary);
	overflow: hidden;
}
.spur-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 120% at 85% 15%, color-mix(in srgb, var(--wp--custom--color--secondary) 32%, transparent), transparent 55%);
	pointer-events: none;
}
.spur-card__media-mark { position: relative; z-index: 1; opacity: 0.9; }
.spur-card__media--photo { background: var(--wp--custom--color--surface-2); }
.spur-card__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spur-card__media--photo::after { display: none; }

.spur-program-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem 1.3rem; } /* grows to the row height, so "Learn more" lines up across a row */
.spur-program-card__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.2; }
.spur-program-card__title a { text-decoration: none; color: var(--wp--custom--color--primary); }
.spur-program-card__title a:hover, .spur-program-card__title a:focus { text-decoration: underline; }
.spur-program-card__excerpt { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--wp--custom--color--text-soft); }
.spur-quick-facts--compact { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.spur-program-card__more { margin-block-start: auto; font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--primary); text-decoration: none; }
.spur-program-card__more:hover { text-decoration: underline; }

/* Zero-results */
.spur-no-results { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.5rem; border: 1px dashed var(--wp--custom--color--secondary); border-radius: var(--wp--custom--radius--md); }
.spur-no-results[hidden] { display: none; }

/* =========================================================================
 * SINGLE PROGRAM — hero photo now lives in the page-header band (ADR-015):
 * program-header passes the featured image to the shared renderer, so the
 * standalone program-hero band (and its pattern) were removed.
 * ====================================================================== */

/* =========================================================================
 * PAGE HEADER — shared inner-page header band (ADR-013)
 * One component for every inner page: eyebrow + H1 + lede + optional CTAs on
 * a warm tinted band. Rendered by spur_render_page_header() everywhere.
 * ====================================================================== */

.spur-page-header {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--custom--color--surface);
	background-image: radial-gradient(90% 130% at 94% -12%, color-mix(in srgb, var(--wp--custom--color--secondary) 24%, transparent), transparent 55%);
	border-block-end: 1px solid var(--wp--custom--color--line);
}
/* Photo band variant (ADR-015): the renderer emits a __media layer when its
 * caller supplies an image (single programs pass the featured image). Scrim
 * reuses the On-image token so photo bands read as one system everywhere;
 * the sibling combinator flips text light only when the layer exists. */
.spur-page-header__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
}
.spur-page-header__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--color--scrim);
	pointer-events: none;
}
.spur-page-header__media + .spur-page-header__inner :is(.spur-eyebrow, .spur-page-header__title, .spur-page-header__lede) {
	color: var(--wp--custom--color--base);
}
.spur-page-header__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-block: var(--wp--custom--band--pad-block);
	padding-inline: clamp(1.1rem, 4vw, 2.5rem);
	display: grid;
	justify-items: start;
	align-content: center;
	gap: 0.9rem;
}
/* Uniform hero presence (7/29 audit): band height floated 311-454px with text
 * length; a min block size pins every inner page to the same ~460px band on
 * desktop (and shows more of the photo). Since 10/9 the home .spur-hero shares
 * this geometry (Chris 10/9, ADR-013 amendment). Below 782px both bands use the
 * band padding and are content-driven. From 782px every band is the same total
 * height, min + 2 x padding (+ the page header's 1px bottom rule, which the
 * hero adds to its own min since it has no rule), with a padding floor, so
 * longer copy (the home hero's) still fits that height, centered, and a band
 * only grows if its copy outgrows it. Copy that fits the old 19.25rem box
 * renders exactly where it did. Inner is content-box (ADR-014 geometry rule). */
@media (min-width: 782px) {
	.spur-page-header__inner,
	.spur-hero__inner { padding-block: var(--wp--custom--band--pad-floor); }
	.spur-page-header__inner { min-block-size: calc(var(--wp--custom--band--min-block) + 2 * (var(--wp--custom--band--pad-block) - var(--wp--custom--band--pad-floor))); }
	.spur-hero__inner { min-block-size: calc(var(--wp--custom--band--min-block) + 2 * (var(--wp--custom--band--pad-block) - var(--wp--custom--band--pad-floor)) + 1px); }
}
/* Compact band for title-only headers (Chris 10/10, ADR-013 amendment): a tinted band
 * that carries no photo and no buttons (Contact, Volunteer Calendar, Privacy, Sponsor
 * Account, Become a Sponsor) has nothing to fill the uniform height, so it takes the
 * smaller band.minBlockCompact token instead. The rule reads the markup, not a per-page
 * class: a photo layer (programs: __media; pages: the body class set with the photo CSS)
 * or an actions row keeps the full height, and a page that gains a photo or buttons
 * later grows back on its own. Below 782px every band is content-driven already. */
@media (min-width: 782px) {
	body:not(.spur-page-has-photo) .spur-page-header:not(:has(.spur-page-header__media, .spur-page-header__actions)) .spur-page-header__inner {
		min-block-size: calc(var(--wp--custom--band--min-block-compact) + 2 * (var(--wp--custom--band--pad-block) - var(--wp--custom--band--pad-floor)));
	}
}
.spur-page-header__inner .spur-eyebrow { margin-block-end: 0; }
.spur-page-header__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.05;
	font-weight: 600;
	color: var(--wp--custom--color--primary);
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}
.spur-page-header__lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--custom--color--text-soft);
	margin: 0;
	max-width: 58ch;
}
.spur-page-header__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-start: 0.4rem; }

/* Closing CTA band — centered action row under the section head. */
.spur-closing-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* =========================================================================
 * SECONDARY PAGES — Volunteer / Give / About / Contact scaffolding
 * (retained class contracts; refreshed tokens)
 * ====================================================================== */

.spur-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-block: 1.5rem; }
@media (min-width: 600px) { .spur-cards--2 { grid-template-columns: repeat(2, 1fr); } .spur-cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .spur-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.spur-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.35rem 1.45rem; border: 1px solid var(--wp--custom--color--line); border-radius: var(--wp--custom--radius--lg); background-color: var(--wp--custom--color--base); box-shadow: var(--wp--custom--shadow--sm); }
.spur-card__icon { color: var(--wp--custom--color--secondary-deep); line-height: 0; }
.spur-card__role { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--custom--color--primary); }

/* FAQ list — Common Questions styled to the card system (narrow measure). */
.spur-faq { max-width: 780px; margin-inline: auto; display: grid; gap: 1rem; }
.spur-faq .spur-card h3 { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--custom--color--primary); }
.spur-faq .spur-card p { margin: 0; color: var(--wp--custom--color--text); line-height: 1.55; }

/* The Holiday Cheer tags explainer and the wish-list band below it share the cool
 * surface: the same-surface rule in the section-rhythm block sets their seam (ADR-024). */

.spur-stub { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding: 2.5rem 1.5rem; border: 2px dashed var(--wp--custom--color--secondary); border-radius: var(--wp--custom--radius--lg); background-color: var(--wp--custom--color--surface); color: var(--wp--custom--color--text); }
.spur-stub__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--primary); }
.spur-stub__icon { color: var(--wp--custom--color--secondary-deep); line-height: 0; }

.spur-form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.spur-field { display: flex; flex-direction: column; gap: 0.35rem; }
.spur-field label { font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--text); }
.spur-field input, .spur-field textarea { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--wp--custom--color--line); border-radius: var(--wp--custom--radius--sm); background-color: var(--wp--custom--color--base); color: var(--wp--custom--color--text); }
.spur-field input:focus-visible, .spur-field textarea:focus-visible { outline: 2px solid var(--wp--custom--color--primary); outline-offset: 1px; }
.spur-form__submit { align-self: flex-start; font: inherit; font-weight: 600; cursor: pointer; padding: 0.7rem 1.5rem; border: 0; border-radius: var(--wp--custom--radius--pill); color: var(--wp--custom--color--text); background-color: var(--wp--custom--color--accent); }
.spur-form__submit:hover,
.spur-form__submit:focus-visible { background-color: var(--wp--custom--color--accent-deep); color: var(--wp--custom--color--base); }
.spur-form__submit:focus-visible { outline: 2px solid var(--wp--custom--color--text); outline-offset: 2px; }
.spur-form__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--text-soft); }
/* Contact form states (inc/contact-form.php, playbook B3, 10/10). The honeypot field is
 * off-screen and out of the tab order; the error summary and the thank-you take focus. */
.spur-form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.spur-field__opt { font-weight: 400; color: var(--wp--custom--color--text-soft); }
.spur-field__req { color: var(--wp--custom--color--accent-deep); }
.spur-field--error input, .spur-field--error textarea { border-color: var(--wp--custom--color--accent-deep); border-width: 2px; }
.spur-field__error { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--custom--color--text); }
.spur-form__errors { border-inline-start: 4px solid var(--wp--custom--color--accent-deep); background-color: var(--wp--custom--color--surface); border-radius: var(--wp--custom--radius--sm); padding: 0.9rem 1.1rem; }
.spur-form__errors-title { margin: 0; font-weight: 700; color: var(--wp--custom--color--text); }
.spur-form__errors ul { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; }
.spur-form__errors li { margin: 0.15rem 0; }
.spur-form__errors a { color: var(--wp--custom--color--primary); }
.spur-form__success { max-width: 560px; border-inline-start: 4px solid var(--wp--custom--color--secondary); background-color: var(--wp--custom--color--surface-sage); border-radius: var(--wp--custom--radius--sm); padding: 1.1rem 1.3rem; }
.spur-form__success-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); margin: 0 0 0.35rem; color: var(--wp--custom--color--primary); }
.spur-form__success p { margin: 0; }
.spur-form__errors:focus-visible, .spur-form__success:focus-visible { outline: 2px solid var(--wp--custom--color--primary); outline-offset: 3px; }

/* Little Green Light donation embed (PRD §5.2, ADR-016). The container is
 * full-width within its content column; LGL's form_engine script writes the
 * form inline at the script position and styles itself. min-height softens
 * layout shift while the third-party script loads. */
.spur-lgl-form { width: 100%; min-height: 24rem; }
.spur-lgl-form iframe { width: 100%; border: 0; }
/* Click-through (iframe) format, 9/26: LGL posts no height message, so the frame
 * is sized in CSS. Tallest step measured on Local incl. LGL's own chrome: 824px at
 * 390, 801px at 768, 815px at 1440 — 54rem (864px) covers every step, no scrollbar. */
.spur-lgl-form--iframe { min-height: 0; }
.spur-lgl-form--iframe iframe { display: block; min-height: 54rem; }
.spur-lgl-form__fallback { margin: 0.75rem 0 0; text-align: center; text-wrap: pretty; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--text-soft); }
.spur-lgl-form + .spur-form__note { margin-block-start: 1rem; text-align: center; text-wrap: pretty; }
.spur-lgl-form__lede { margin-block-end: 1.5rem; text-align: center; text-wrap: pretty; } /* lede and note sit in the head's centered column (10/10); pretty = no lone last word */

/* Editor placeholder for the spur/lgl-form block — the stub-card look, so the
 * block reads as a managed slot rather than missing content. */
.spur-lgl-form--editor, .spur-contact--editor { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; min-height: 0; text-align: center; padding: 2.5rem 1.5rem; border: 2px dashed var(--wp--custom--color--secondary); border-radius: var(--wp--custom--radius--lg); background-color: var(--wp--custom--color--surface); color: var(--wp--custom--color--text); }
.spur-lgl-form__editor-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wp--preset--font-size--small); color: var(--wp--custom--color--primary); }
.spur-contact-meta { display: flex; flex-direction: column; gap: 0.4rem; }

.spur-avatar { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background-color: var(--wp--custom--color--surface-sage); color: var(--wp--custom--color--secondary-deep); line-height: 0; }

/* Team roster cards (About) — same designed photo-less fallback approach as program
 * cards: the avatar tile carries the brand until a real photo replaces it. */
.spur-cards--roster { max-width: 880px; margin-inline: auto; }
.spur-card--person { align-items: center; text-align: center; padding-block: 2rem 1.9rem; }
.spur-card--person .spur-avatar {
	width: 96px;
	height: 96px;
	background-image: radial-gradient(120% 120% at 80% 15%, color-mix(in srgb, var(--wp--custom--color--secondary) 34%, transparent), transparent 60%);
	border: 1px solid var(--wp--custom--color--secondary);
	margin-block-end: 0.35rem;
}
.spur-card--person h3 { margin: 0; }
.spur-card--person .spur-card__role { letter-spacing: 0.08em; color: var(--wp--custom--color--secondary-deep); }

/* Real headshots (8/28 team rebuild): the image block renders as a circular
 * avatar, same visual slot the SVG placeholder held. */
.spur-card--person .spur-avatar-photo { margin: 0 0 0.35rem; }
.spur-card--person .spur-avatar-photo img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--wp--custom--color--secondary);
}

/* Staff email cards (About, 10/8): the name heading carries the card's only link, a
 * pre-addressed mailto. On the front end the link's ::after stretches over the whole
 * card, so the photo, name and role open the email through ONE link and ONE tab stop,
 * and the focus ring and hover state draw on the card edge. A thin underline marks
 * the name as a link at rest (touch screens never see the hover state). The overlay
 * stays out of the editor canvas (its body is .editor-styles-wrapper) so editors can
 * still select the photo and role text. Board cards have no link and keep their look. */
.spur-card--person { position: relative; }
.spur-card--person h3 a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--custom--color--secondary);
	text-underline-offset: 0.2em;
}
.spur-card--person h3 a:hover,
.spur-card--person h3 a:focus-visible { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
body:not(.editor-styles-wrapper) .spur-card--person h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--wp--custom--radius--lg); }
body:not(.editor-styles-wrapper) .spur-card--person h3 a:focus-visible { outline: none; }
body:not(.editor-styles-wrapper) .spur-card--person h3 a:focus-visible::after { outline: 3px solid var(--wp--custom--color--primary-bright); outline-offset: 2px; }
.spur-card--person:has(h3 a) { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.spur-card--person:has(h3 a:hover),
.spur-card--person:has(h3 a:focus-visible) { border-color: var(--wp--custom--color--secondary); box-shadow: var(--wp--custom--shadow--md); }

/* =========================================================================
 * NATIVE-BLOCK CONTENT (ADR-014) — content-owned sections
 * The marketing pages' sections live in post_content as native blocks. These
 * rules keep the rendered design identical to the retired core/html idiom:
 * decorative chrome (icons, step numbers, hero scrim) renders from CSS so the
 * editor shows clean text, and span-based micro-markup maps onto paragraphs.
 * ====================================================================== */

/* The __inner wrappers were raw divs (content-box: max-width holds the CONTENT,
 * padding sits outside — 1200 + 2 gutters). As Group blocks they inherit core's
 * border-box, which would shrink the content region by two gutters. Restore the
 * original geometry exactly. */
.wp-block-group:is(.spur-inner, .spur-hero__inner, .spur-page-header__inner, .spur-stats-band__inner, .spur-newsletter__inner) { box-sizing: content-box; }

/* Hero scrim without the markup span (replaces the .spur-hero__scrim island). */
.spur-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--wp--custom--color--primary-bright) 35%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--wp--custom--color--text) 15%, transparent) 0%, color-mix(in srgb, var(--wp--custom--color--text) 55%, transparent) 100%);
}

/* Injected block-gap margins are zeroed in the layout-normalization block at
 * the TOP of this file (order-sensitive — see the comment there). Below: the
 * calendar/give follow-up note breathes under its stub card (the raw idiom got
 * this from default paragraph margins, which the normalization removes). */
.spur-stub + .spur-form__note { margin-block-start: 1rem; }

/* Heading rhythm for the generic-prose idiom (About body, contact columns) —
 * calibrated to the section-head system (2026-07-28 audit): the kicker hugs
 * its title, a title hugs its own content, and real air separates prose
 * sections and the hero band, instead of the flat default 24px everywhere. */
/* Sponsor-logo row (Become a Sponsor page): plain image blocks in a flex row,
 * height-normalized so mixed logo orientations sit on one visual line. */
.spur-sponsor-logos { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; margin-block: 1rem 0; }
.spur-sponsor-logos .wp-block-image { margin: 0; }
.spur-sponsor-logos img { max-height: 88px; width: auto; }

/* .spur-prose = the same calibrated prose-page rhythm for other content-owned
 * prose pages (first used by the Become a Sponsor page, 8/28). */
.spur-about, .spur-prose { padding-block-start: var(--wp--custom--section--gap-tight); }
/* Bottom breathing room before the footer (Chris 10/2: sponsor logos sat flush on it). */
.spur-prose { padding-block-end: var(--wp--custom--section--gap); }
/* The About roster ended flush on the band after it (Our impact, tinted since 10/10). */
.spur-about { padding-block-end: var(--wp--custom--section--gap-tight); }
.spur-about > * + *, .spur-prose > * + * { margin-block-start: 3rem; }
.spur-about h2 + p, .spur-prose h2 + p { margin-block-start: 0.75rem; }
.spur-about h2 + .spur-cards, .spur-prose h2 + .spur-cards { margin-block-start: 1.25rem; }
/* "Board of Directors" follows the staff roster inside the Our Team section, so it
 * got core's 24px instead of the 3rem every other About H2 opens with (10/10). */
.spur-about .spur-cards + h2 { margin-block-start: 3rem; }
.wp-block-column .spur-eyebrow + h2 { margin-block-start: 0; }
.wp-block-column h2 + * { margin-block-start: 0.75rem; }
/* Contact: a column H2 over a form or a card needs more than a paragraph's 12px. */
.wp-block-column h2 + :is(form, .spur-card) { margin-block-start: 1.5rem; }

/* Program prose (single-program post_content) — same calibration: a heading
 * opens its topic with real air above and hugs the copy below; paragraphs
 * keep the default flow rhythm. */
.single-program .wp-block-post-content > h2:not(:first-child) { margin-block-start: 2.5rem; }
.single-program .wp-block-post-content > h2 + * { margin-block-start: 0.75rem; }
/* The program body sat 24px under the photo band and 24px above the tinted band
 * after it (10/10 audit). Open and close the body on gapTight, the About/Sponsor
 * prose opening, so "What You'll Be Doing" opens right under the band (ADR-029);
 * :not(.alignfull) keeps a white strip from opening between two bands. */
.single-program main > .spur-page-header + :not(.alignfull),
.single-program main > .wp-block-post-content + .alignfull { margin-block-start: var(--wp--custom--section--gap-tight); }
/* Prose sub-heads (Holiday Cheer steps, Sponsor tiers) sat halfway between the
 * block above and their own copy (24/24). Air above, hug below; the sponsor logo
 * row keeps its own 1rem. */
:is(.single-program .wp-block-post-content, .spur-prose section) > :not(h2) + h3 { margin-block-start: 2rem; }
.single-program .wp-block-post-content > h2 + h3 { margin-block-start: 1.5rem; } /* as on Sponsor: a sub-head right under its H2 */
:is(.single-program .wp-block-post-content, .spur-prose section) > h3 + :not(.spur-sponsor-logos) { margin-block-start: 0.75rem; }

/* Holiday Cheer account pages (My Wish Lists, Sponsor Account) hold a bare plugin
 * shortcode; the .page post-content reset put its first heading flush against the
 * page-header rule. Same opening as the prose pages. */
.page .wp-block-post-content > .hc { padding-block: var(--wp--custom--section--gap-tight); }
.page .wp-block-post-content > .hc > :last-child { margin-block-end: 0; }

/* Step numbers render from the existing spur-step counter (was an aria-hidden
 * span). The "/ ''" alternative text keeps the decorative number out of AT. */
.spur-step { counter-increment: spur-step; }
.spur-step::before {
	content: counter(spur-step) / "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block-end: 0.75rem;
}

/* Pathway-card icon: tile (::before, a flex child in the old span's slot) +
 * glyph (::after, masked so the color stays token-driven). The glyph comes
 * from the card's spur-icon-* class; tints from the pathway modifiers. */
.spur-pathway { position: relative; }
.spur-pathway::before {
	content: "";
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--color--surface-sage);
}
.spur-pathway[class*="spur-icon-"]::after {
	content: "";
	position: absolute;
	top: calc(1.6rem + 14px);
	left: calc(1.5rem + 14px);
	width: 28px;
	height: 28px;
	background-color: var(--wp--custom--color--secondary-deep);
	-webkit-mask: var(--spur-icon) center / contain no-repeat;
	mask: var(--spur-icon) center / contain no-repeat;
}
.spur-pathway--volunteer::before,
.spur-pathway--ember::before { background-color: color-mix(in srgb, var(--wp--custom--color--accent-bright) 22%, var(--wp--custom--color--base)); }
.spur-pathway--volunteer::after,
.spur-pathway--ember::after { background-color: var(--wp--custom--color--accent-deep); }
.spur-pathway--give::before,
.spur-pathway--cool::before { background-color: var(--wp--custom--color--surface-cool); }
.spur-pathway--give::after,
.spur-pathway--cool::after { background-color: var(--wp--custom--color--primary); }

/* Icon glyph library (mask alpha; the painted color comes from the rules above). */
.spur-icon-people { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='9' r='2.2'/%3E%3Cpath d='M2.5 20a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M14 20a5.5 5.5 0 0 1 8-4.7'/%3E%3C/svg%3E"); }
.spur-icon-grid { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E"); }
.spur-icon-heart { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a4.6 4.6 0 0 0-6.5 0l-.8.8-.8-.8a4.6 4.6 0 1 0-6.5 6.5l.8.8 6.5 6.5 6.5-6.5.8-.8a4.6 4.6 0 0 0 0-6.5z'/%3E%3C/svg%3E"); }
.spur-icon-family { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.5' cy='9.5' r='2'/%3E%3Cpath d='M16 20a5 5 0 0 1 5-5'/%3E%3C/svg%3E"); }
.spur-icon-group { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2.5 20a5.5 5.5 0 0 1 11 0M13 20a5.5 5.5 0 0 1 8.5-4.6'/%3E%3C/svg%3E"); }
.spur-icon-person { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.2'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"); }
.spur-icon-refresh { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5'/%3E%3C/svg%3E"); }
.spur-icon-building { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V7l9-4 9 4v14'/%3E%3Cpath d='M3 21h18M9 21v-5h6v5M7 11h.01M12 11h.01M17 11h.01'/%3E%3C/svg%3E"); }

/* Stub-card icons (was an inline SVG span; first flex item, centered). */
.spur-stub--map::before,
.spur-stub--heart::before,
.spur-stub--calendar::before {
	content: "";
	width: 48px;
	height: 48px;
	background-color: var(--wp--custom--color--secondary-deep);
	-webkit-mask: var(--spur-icon) center / contain no-repeat;
	mask: var(--spur-icon) center / contain no-repeat;
}
.spur-stub--map { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.spur-stub--heart { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.1A5.2 5.2 0 0 1 12 6a5.2 5.2 0 0 1 10 5.9C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.spur-stub--calendar { --spur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M7.5 13h3M13.5 13h3M7.5 16.5h3'/%3E%3C/svg%3E"); }

/* Paragraph parity where spans became paragraph blocks. */
.spur-partner > p { margin: 0; }
.spur-partner__name a { color: inherit; text-decoration: none; }
.spur-pathway__more a { color: inherit; text-decoration: none; }
.spur-pathway__more a:hover { text-decoration: underline; }

/* "On image" section style (registered on core/group): scrim + light text so
 * a background photo set via Styles → Background stays readable. */
.is-style-spur-on-image {
	position: relative;
	isolation: isolate;
}
.is-style-spur-on-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--color--scrim);
	pointer-events: none;
}
.is-style-spur-on-image :is(.spur-eyebrow, .spur-section__title, .spur-section__intro, .spur-page-header__title, .spur-page-header__lede, .spur-newsletter__title, .spur-newsletter__lede, .spur-stat__num, .spur-stat__label, .spur-stats__note) { color: var(--wp--custom--color--base); }

/* =========================================================================
 * Motion — respect prefers-reduced-motion (hover/reveal motion only)
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.spur-program-card:hover,
	.spur-pathway:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.spur-hero__play:hover .spur-hero__play-icon { transform: none !important; }
}