/* Ben Baldwin for School Board: theme styles.
   Adapted from design-system/components/bundle.css to the markup WordPress core
   blocks produce (groups, buttons, images, navigation). Colors, fonts, radii and the
   spacing scale come from design-system/tokens.json.

   Sizing: type, gutters, section padding and the content width all scale with the
   screen (clamp + two large-screen steps), so the site holds together from a phone
   to a 2560px monitor. The design-system sizes are what you get at about 1280px. */

:root {
  --navy: #002c62; --navy-deep: #001b40; --red: #d91c24; --red-deep: #b3151c;
  --white: #ffffff; --paper: #f4f6f9; --sky: #dce6f2; --ink: #0e1a2b; --ink-muted: #4a5668;
  --on-navy-muted: #b8c6da; --line: #d5dce6; --field-border: #6b7889; --success: #17603a;
  --font-display: Oswald, "Arial Narrow", Impact, sans-serif;
  --font-sans: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-full: 9999px;
  --shadow-card: 0 1px 2px rgba(0, 27, 64, .08), 0 6px 20px rgba(0, 27, 64, .08);
  --shadow-card-hover: 0 2px 4px rgba(0, 27, 64, .10), 0 14px 32px rgba(0, 27, 64, .14);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 7.5vw, 136px);
  --col-gap: clamp(32px, 5vw, 96px);

  /* Type */
  --text: 17px; --text-lh: 28px;
  --small: 14px; --small-lh: 21px;
  --label: 15px;
  --kicker: 13px;
  --lead: clamp(19px, .6vw + 13.5px, 26px);
  --display: clamp(44px, 5vw + 12px, 120px);
  --h1: clamp(38px, 3.6vw + 12px, 84px);
  --h2: clamp(30px, 2.2vw + 14px, 52px);
  --h3: clamp(24px, 1vw + 13px, 32px);

  /* The logo's double red rule: two 8px bars, 8px apart */
  --stripes: linear-gradient(var(--red) 0 8px, transparent 8px 16px, var(--red) 16px 24px);
  --stripes-sm: linear-gradient(var(--red) 0 4px, transparent 4px 10px, var(--red) 10px 14px, transparent 14px);
}
@media (min-width: 1600px) {
  :root { --container: 1320px; --text: 18px; --text-lh: 30px; --small: 15px; --small-lh: 22px; --label: 16px; --kicker: 14px; }
}
@media (min-width: 2100px) {
  :root { --container: 1480px; --text: 20px; --text-lh: 33px; --small: 16px; --small-lh: 24px; --label: 17px; --kicker: 15px; }
}

/* ---------- Base ---------- */
.bb, .bb * { box-sizing: border-box; }
body.bb, .editor-styles-wrapper { margin: 0; font-family: var(--font-sans); font-size: var(--text); line-height: var(--text-lh); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.bb) :is(h1, h2, h3), .editor-styles-wrapper :is(h1, h2, h3) { font-family: var(--font-display); text-transform: uppercase; margin: 0; color: var(--navy); text-wrap: balance; }
:where(.bb) p, .editor-styles-wrapper p { margin: 0; text-wrap: pretty; }
.bb img { max-width: 100%; height: auto; }
.wp-block-image { margin: 0; }
.bb-site-header, .bb-site-footer { display: block; }

.bb :is(a, input, button, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white);
}

/* Containers */
.bb-wrap { max-width: var(--container); margin-left: auto; margin-right: auto; }
.bb-prose { max-width: 42em; display: grid; gap: var(--space-4); }
.bb-prose h2 { font-size: var(--h2); line-height: 1.05; font-weight: 600; }
.bb-prose .entry-content > * + * { margin-top: var(--space-4); }
.bb-lead { font-size: var(--lead); line-height: 1.5; }
.bb-meta { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }

/* ---------- Kicker & stripe rule ---------- */
.bb-kicker { font-family: var(--font-sans); font-size: var(--kicker); line-height: 1.25; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.bb-kicker--light { color: var(--white); }
.bb-stripes { display: flex; align-items: center; gap: var(--space-4); }
.bb-stripes::before, .bb-stripes::after { content: ""; flex: 1; height: 24px; background: var(--stripes); }
.bb-stripes--left::before { display: none; }
.bb-stripes--plain::before, .bb-stripes--plain::after { height: 8px; background: var(--red); }

/* ---------- Buttons ----------
   Raw <a>/<button class="bb-btn ..."> or a core Button block with the
   modifier class on its wrapper (style lands on .wp-block-button__link). */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.bb-btn, .wp-block-button[class*="bb-btn--"] > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 3.2em; padding: .9em 1.85em; border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--label); line-height: 1.3; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
:is(a, button).bb-btn--donate, .wp-block-button.bb-btn--donate > .wp-block-button__link { background: var(--red); color: var(--white); }
:is(a, button).bb-btn--donate:hover, .wp-block-button.bb-btn--donate > .wp-block-button__link:hover { background: var(--red-deep); color: var(--white); }
:is(a, button).bb-btn--primary, .wp-block-button.bb-btn--primary > .wp-block-button__link { background: var(--navy); color: var(--white); }
:is(a, button).bb-btn--primary:hover, .wp-block-button.bb-btn--primary > .wp-block-button__link:hover { background: var(--navy-deep); color: var(--white); }
:is(a, button).bb-btn--outline, .wp-block-button.bb-btn--outline > .wp-block-button__link { background: transparent; color: var(--navy); border-color: var(--navy); }
:is(a, button).bb-btn--outline:hover, .wp-block-button.bb-btn--outline > .wp-block-button__link:hover { background: var(--navy); color: var(--white); }
:is(a, button).bb-btn--light, .wp-block-button.bb-btn--light > .wp-block-button__link { background: transparent; color: var(--white); border-color: var(--white); }
:is(a, button).bb-btn--light:hover, .wp-block-button.bb-btn--light > .wp-block-button__link:hover { background: var(--white); color: var(--navy); }
:is(a, button).bb-btn--sm, .wp-block-button.bb-btn--sm > .wp-block-button__link { min-height: 2.8em; padding: .6em 1.3em; font-size: calc(var(--label) - 1px); }

/* ---------- Header ----------
   The inner row is as wide as the content column plus its gutters, so the logo
   and Donate line up with the edges of everything below. */
.bb-header { background: var(--navy); color: var(--white); }
.bb-header__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); }
.bb-header__logo img { display: block; width: clamp(60px, 3vw + 26px, 88px); height: auto; aspect-ratio: 1; border-radius: var(--radius-full); }
.bb-header__logo a, .bb-footer__logo a { display: block; border-radius: var(--radius-full); }
.bb-nav { margin-left: auto; }
.bb-nav .wp-block-navigation__container { gap: clamp(20px, 2.2vw, 40px); }
.bb-nav .wp-block-navigation-item__content, .bb-footer__nav .wp-block-navigation-item__content {
  font-size: var(--label); line-height: 1.35; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.bb-nav .wp-block-navigation-item__content { color: var(--on-navy-muted); padding: var(--space-2) 0; transition: color .15s; }
.bb-nav .wp-block-navigation-item__content:hover,
.bb-nav .current-menu-item > .wp-block-navigation-item__content,
.bb-nav [aria-current] { color: var(--white); }
.bb-nav .current-menu-item > .wp-block-navigation-item__content,
.bb-nav [aria-current] { box-shadow: inset 0 -2px 0 var(--white); }
.bb-nav .wp-block-navigation__responsive-container-open { color: var(--white); padding: var(--space-2); }
.bb-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.bb-nav .wp-block-navigation__responsive-container.is-menu-open { padding: var(--space-6) var(--space-4); }
.bb-nav .is-menu-open .wp-block-navigation__container { gap: var(--space-6); }
.bb-nav .is-menu-open .wp-block-navigation-item__content { color: var(--white); font-size: 20px; box-shadow: none; }
/* WP's menu toggle appears below 600px; keep Donate next to it. */
@media (max-width: 599px) { .bb-header__inner { gap: var(--space-3); } }

/* ---------- Navy bands: hero, page head ----------
   Each closes with the logo's double red rule along its bottom edge. */
.bb-hero::after, .bb-page-head::after { content: ""; display: block; height: 24px;
  background: linear-gradient(var(--red) 0 8px, var(--navy) 8px 16px, var(--red) 16px 24px); }

/* Page head (inner pages) */
.bb-page-head { background: var(--navy); color: var(--white); }
.bb-page-head .bb-wrap { display: grid; gap: var(--space-4); max-width: calc(var(--container) + 2 * var(--gutter));
  padding: clamp(48px, 6vw, 112px) var(--gutter) clamp(40px, 5vw, 88px); }
.bb-page-head h1 { color: var(--white); font-size: var(--h1); line-height: 1; font-weight: 700; }

/* Hero: copy lines up with the content column; the photo runs to the screen edge. */
.bb-hero { container-type: inline-size; background: var(--navy); color: var(--white); display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: 1fr auto; min-height: clamp(460px, min(42vw, 78vh), 860px); }
.bb-hero::after { grid-column: 1 / -1; }
.bb-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2vw, 36px);
  padding: var(--space-16) var(--col-gap) var(--space-16) max(var(--gutter), calc(50vw - var(--container) / 2));
  padding-left: max(var(--gutter), calc(50cqw - var(--container) / 2)); }
.bb-hero__copy::before { content: ""; width: 72px; height: 24px; flex: none; background: var(--stripes); }
.bb-hero__title { color: var(--white); font-size: var(--display); line-height: .92; font-weight: 700; letter-spacing: -.005em; }
.bb-hero__title span { display: block; margin-top: .12em; font-size: .5em; line-height: 1.05; font-weight: 600; letter-spacing: .01em; color: var(--on-navy-muted); }
.bb-hero__lead { font-size: var(--lead); line-height: 1.5; color: var(--on-navy-muted); max-width: 30ch; }
.bb-hero__actions { margin-top: var(--space-2); }
.bb-hero__photo { position: relative; min-height: 320px; }
.bb-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border-radius: var(--radius-none); }

/* ---------- Sections ---------- */
.bb-section { padding: var(--section-y) var(--gutter); }
.bb-section--paper { background: var(--paper); }
.bb-section--navy { background: var(--navy); color: var(--white); }
.bb-section__head { max-width: 40em; display: grid; gap: var(--space-3); margin-bottom: clamp(32px, 3.5vw, 56px); }
.bb-section__head h2 { font-size: var(--h2); line-height: 1.05; font-weight: 600; }
.bb-section--navy .bb-section__head h2 { color: var(--white); }

/* Intro: one large opening paragraph under a page head */
.bb-section:has(> .bb-intro) { padding-top: clamp(48px, 5vw, 96px); padding-bottom: clamp(48px, 5vw, 96px); }
.bb-intro .bb-lead { max-width: 34em; font-size: clamp(20px, .9vw + 13px, 30px); line-height: 1.45; color: var(--navy); }

/* Split: heading on the left, text on the right (Priorities, "Why he's running").
   The heading stays in view while its text scrolls past. */
.bb-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-8) var(--col-gap); align-items: start; }
.bb-split__head { display: grid; gap: var(--space-4); position: sticky; top: var(--space-12); }
.bb-split__head h2 { font-size: var(--h2); line-height: 1.05; font-weight: 600; }
.bb-split__body { padding-top: 2px; }
.bb-commit { margin-top: var(--space-4); padding: var(--space-6); background: var(--sky); border-radius: var(--radius-md); font-weight: 600; color: var(--navy); }
.bb-commit strong { display: block; margin-bottom: var(--space-1); font-size: var(--kicker); line-height: 1.25; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.bb-section--paper .bb-commit { background: var(--white); box-shadow: var(--shadow-card); }

/* ---------- Issue cards ---------- */
.bb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 32px); }
.bb-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: clamp(24px, 2.6vw, 44px);
  display: grid; gap: var(--space-3); align-content: start; grid-template-rows: auto auto 1fr auto; transition: box-shadow .2s, transform .2s; }
.bb-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.bb-card::before { content: ""; display: block; width: 48px; height: 16px; margin-bottom: var(--space-1); background: var(--stripes-sm); }
.bb-card h3 { font-size: var(--h3); line-height: 1.12; font-weight: 600; }
.bb-card p { color: var(--ink-muted); }
.bb-card p:last-child { margin-top: var(--space-2); }
.bb-card a { color: var(--navy); font-size: var(--label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bb-card a:hover { color: var(--red-deep); }

/* ---------- Bio split ---------- */
.bb-bio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: center; }
.bb-bio--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bb-bio--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bb-bio--flip > .wp-block-image { order: 2; }
.bb-bio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); display: block; box-shadow: var(--shadow-card); }
.bb-bio--wide img { aspect-ratio: 3 / 2; }
.bb-bio__copy { display: grid; gap: var(--space-4); max-width: 40em; }
.bb-bio--flip .bb-bio__copy { justify-self: start; }
.bb-bio__copy h2 { font-size: var(--h2); line-height: 1.05; font-weight: 600; }
.bb-bio__copy .wp-block-buttons, .bb-prose .wp-block-buttons { margin-top: var(--space-3); }
.bb-facts { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.bb-facts li { padding-left: 1.7em; position: relative; }
.bb-facts li::before { content: "★"; position: absolute; left: 0; color: var(--red); }
.bb-bio__copy .bb-facts { padding-top: var(--space-4); border-top: 1px solid var(--line); font-weight: 600; color: var(--navy); }

/* Links in running text and lists */
.bb-facts a, .bb-prose p a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bb-facts a:hover, .bb-prose p a:hover { color: var(--red-deep); }

/* ---------- Endorsement ---------- */
.bb-quote { background: var(--sky); padding: var(--space-12); display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; border-radius: var(--radius-md); }
.bb-quote:not(:has(img)) { grid-template-columns: 1fr; }
.bb-quote img { width: 120px; height: 120px; border-radius: var(--radius-full); object-fit: cover; }
.bb-quote .wp-block-quote { margin: 0; padding: 0; border: 0; }
.bb-quote .wp-block-quote p { font-family: var(--font-display); font-size: clamp(24px, 1.2vw + 15px, 38px); line-height: 1.2; font-weight: 500; color: var(--navy); }
.bb-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }
.bb-quote cite strong { color: var(--ink); }

/* ---------- Signup ---------- */
.bb-signup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: start; }
.bb-signup .bb-section__head { margin-bottom: 0; gap: var(--space-4); }
.bb-form { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: clamp(24px, 2.6vw, 44px);
  display: grid; gap: var(--space-6); width: 100%; max-width: 38em; justify-self: end; scroll-margin-top: var(--space-6); }
.bb-form h3 { font-size: var(--h3); line-height: 1.15; font-weight: 600; }
.bb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bb-field { display: grid; gap: 6px; }
.bb-field label { font-size: var(--small); line-height: var(--small-lh); font-weight: 700; color: var(--ink); }
.bb-field input { width: 100%; height: 3em; padding: 0 .85em; border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: var(--white); transition: border-color .15s; }
.bb-field input:hover { border-color: var(--navy); }
.bb-checks { display: grid; gap: var(--space-3); }
.bb-check { display: flex; gap: var(--space-3); align-items: center; font-size: calc(var(--text) - 1px); cursor: pointer; }
.bb-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--navy); }
.bb-form__note { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }
.bb-form__ok { padding: var(--space-3) var(--space-4); background: #e6f2eb; border-radius: var(--radius-sm); font-size: calc(var(--text) - 1px); font-weight: 700; color: var(--success); }
.bb-form__error { padding: var(--space-3) var(--space-4); background: #fbe9ea; border-radius: var(--radius-sm); font-size: calc(var(--text) - 1px); font-weight: 700; color: var(--red-deep); }
/* Gravity Forms signup (bb_signup_form): Orbital theme, colours set on the block; type, button and messages matched here. */
.bb-form--gf .gform_wrapper.gform-theme { --gf-form-gap-y: var(--space-4); --gf-form-gap-x: var(--space-4); margin: 0; font-family: var(--font-sans); }
.bb-form--gf .gform_wrapper.gform-theme .gform_fields { row-gap: var(--space-4); }
.bb-form--gf .gform_wrapper.gform-theme .gfield_label { font-family: var(--font-sans); font-size: var(--small); line-height: var(--small-lh); font-weight: 700; color: var(--ink); }
.bb-form--gf .gform_wrapper.gform-theme .gfield_required { color: var(--red-deep); }
.bb-form--gf .gform_wrapper.gform-theme input[type="text"], .bb-form--gf .gform_wrapper.gform-theme input[type="email"] { font-family: var(--font-sans); font-size: var(--text); border-width: 1.5px; }
.bb-form--gf .gform_wrapper.gform-theme input[type="text"]:hover, .bb-form--gf .gform_wrapper.gform-theme input[type="email"]:hover { border-color: var(--navy); }
.bb-form--gf .gform_wrapper.gform-theme .gchoice { gap: var(--space-3); }
.bb-form--gf .gform_wrapper.gform-theme .gfield-choice-input + label { font-size: calc(var(--text) - 1px); color: var(--ink); }
.bb-form--gf .gform_wrapper.gform-theme .gfield--type-checkbox .gfield_checkbox { display: grid; gap: var(--space-3); }
.bb-form--gf .gform_wrapper.gform-theme .gform_footer { margin: var(--space-6) 0 0; padding: 0; }
.bb-form--gf .gform_wrapper.gform-theme .gform_footer .gform_button.button {
  min-height: 3.2em; padding: .9em 1.85em; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--label); line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bb-form--gf .gform_wrapper.gform-theme .gform_footer .gform_button.button:hover { background: var(--navy-deep); }
.bb-form--gf .gform_wrapper.gform-theme .gform_required_legend { margin: 0 0 var(--space-3); font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }
.bb-form--gf .gform_wrapper.gform-theme .gform_validation_errors { border-radius: var(--radius-sm); box-shadow: none; }
.bb-form--gf .gform_confirmation_message { padding: var(--space-3) var(--space-4); background: #e6f2eb; border-radius: var(--radius-sm); font-size: calc(var(--text) - 1px); font-weight: 700; color: var(--success); }
.bb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Home: donation amounts box ----------
   A white card on the paper ground, directly under the hero. The priorities
   section below is also paper, so the card reads as the top of that region. */
.bb-give-wrap { background: var(--paper); padding: clamp(32px, 4vw, 72px) var(--gutter) 0; }
.bb-give-wrap + .bb-section--paper { padding-top: clamp(56px, 5.5vw, 104px); }
.bb-give { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 52px) clamp(24px, 3.6vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6) var(--col-gap); align-items: center; }
.bb-give__copy { display: grid; gap: var(--space-2); }
.bb-give__copy::before { content: ""; width: 48px; height: 16px; margin-bottom: var(--space-1); background: var(--stripes-sm); }
.bb-give__copy h2 { font-size: clamp(28px, 1.6vw + 14px, 44px); line-height: 1.05; font-weight: 600; }
.bb-give__copy p:not(.bb-kicker) { color: var(--ink-muted); max-width: 32em; }
.bb-give .wp-block-buttons.bb-give__amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.bb-give__amounts .wp-block-button { margin: 0; width: 100%; }
.bb-give__amounts .wp-block-button:last-child { grid-column: 1 / -1; }
.bb-amount > .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(56px, 4.4vw, 88px); padding: 0 var(--space-3);
  border: 2px solid var(--navy); border-radius: var(--radius-sm); background: var(--white); color: var(--navy);
  font-family: var(--font-display); font-size: clamp(24px, 1.3vw + 12px, 40px); line-height: 1; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: background-color .15s, color .15s; }
.bb-amount > .wp-block-button__link:hover { background: var(--navy); color: var(--white); }
.bb-amount:last-child > .wp-block-button__link { min-height: 3.2em; border-color: transparent; background: var(--navy); color: var(--white);
  font-family: var(--font-sans); font-size: var(--label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bb-amount:last-child > .wp-block-button__link:hover { background: var(--navy-deep); }

/* Donate page: the same card, stacked and centered */
.bb-give--stack { grid-template-columns: 1fr; max-width: 46em; gap: var(--space-8); padding-top: clamp(32px, 3.6vw, 64px); padding-bottom: clamp(32px, 3.6vw, 64px); }
.bb-give--stack .bb-give__copy h2 { font-size: var(--h2); }
.bb-give__note { font-size: var(--small); line-height: var(--small-lh); color: var(--ink-muted); }

/* ---------- Donate band ---------- */
.bb-donate { background: var(--navy); color: var(--white); padding: clamp(56px, 6vw, 112px) var(--gutter); display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.bb-donate h2 { color: var(--white); font-size: var(--h2); line-height: 1.05; font-weight: 600; }
.bb-donate p { color: var(--on-navy-muted); max-width: 52ch; }
.bb-donate .wp-block-buttons { justify-content: center; }
.bb-donate .bb-chips { gap: var(--space-3); margin-top: var(--space-2); }
.bb-chip > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-width: 4.2em; height: 2.4em; padding: 0 .8em;
  border: 2px solid var(--white); border-radius: var(--radius-sm); background: transparent; color: var(--white);
  font-family: var(--font-display); font-size: clamp(22px, .8vw + 13px, 30px); line-height: 1; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: background-color .15s, color .15s; }
.bb-chip > .wp-block-button__link:hover { background: var(--white); color: var(--navy); }
.bb-donate .bb-donate__note { font-size: var(--small); line-height: var(--small-lh); }
/* ---------- Footer ---------- */
.bb-footer { background: var(--navy-deep); color: var(--on-navy-muted); padding: clamp(40px, 4vw, 72px) var(--gutter); }
.bb-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-12); align-items: center; }
.bb-footer__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6) var(--space-8); flex-wrap: wrap;
  padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.bb-footer__logo img { display: block; width: clamp(80px, 3vw + 46px, 112px); height: auto; aspect-ratio: 1; border-radius: var(--radius-full); }
.bb-footer__nav .wp-block-navigation__container { gap: var(--space-3) clamp(20px, 2.2vw, 40px); }
.bb-footer__nav .wp-block-navigation-item__content { color: var(--white); }
.bb-footer__nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bb-footer .bb-disclaimer { justify-self: start; border: 2px solid var(--white); padding: var(--space-3) var(--space-4); color: var(--white); font-size: var(--small); line-height: var(--small-lh); font-weight: 700; }
.bb-footer__meta { font-size: var(--small); line-height: var(--small-lh); text-align: right; }
.bb-footer__meta a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Tablets and below ---------- */
@media (max-width: 960px) {
  .bb-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .bb-split__head { position: static; }
  .bb-give { grid-template-columns: 1fr; }
  .bb-signup { grid-template-columns: 1fr; gap: var(--space-8); }
  .bb-form { justify-self: start; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .bb-hero { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .bb-hero__copy { padding: var(--space-12) var(--gutter); }
  .bb-hero__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .bb-bio, .bb-bio--flip, .bb-bio--wide, .bb-form__row, .bb-quote { grid-template-columns: 1fr; }
  .bb-bio { gap: var(--space-8); }
  .bb-bio--flip > .wp-block-image { order: 0; }
  .bb-bio:not(.bb-bio--wide) img { aspect-ratio: 1; object-position: center 20%; }
  .bb-quote { padding: var(--space-6); }
  .bb-footer__inner { grid-template-columns: 1fr; }
  .bb-footer__meta { text-align: left; }
}
@media (max-width: 480px) {
  .bb-give .wp-block-buttons.bb-give__amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .bb *, .bb *::before, .bb *::after { transition: none !important; }
  .bb-card:hover { transform: none; }
}