/*
Theme Name: ABF 2026
Theme URI: https://www.albertbakerfund.org/
Description: Albert Baker Fund 2026 rebrand child theme. Brand system lives in theme.json (palette, gradients, type scale, self-hosted fonts) so the block editor can only offer approved brand colors. Source: ABF_Brand_Standards_Spring2026.pdf. Headings: Sorts Mill Goudy (H1) + Figtree all-caps (H2-H4). Figtree replaces Quiet Sans, which is Adobe-only and not self-hostable.
Author: Serafini Studios
Template: generatepress
Version: 0.2.11
*/

/* Brand tokens are exposed by theme.json as --wp--preset--* custom properties.
   Aliases here keep authored CSS readable and parent-theme-agnostic. */
:root {
  /* Raised surface — 8% Deep Teal in white (#ebeff0).
     The page ground #fffdeb is already ~98% of the way to white, so making a
     panel "lighter" buys at most 1.02:1 against it — imperceptible. Separation
     has to come from going slightly cooler and darker instead. This reads at
     1.13:1 against the page while keeping deep-teal text at 11.1:1 (AAA) and
     mulberry hover at 7.0:1 (AAA). */
  --abf-surface-raised: #ebeff0;

  --abf-deep-teal:   var(--wp--preset--color--deep-teal);
  --abf-bright-teal: var(--wp--preset--color--bright-teal);
  --abf-mulberry:    var(--wp--preset--color--mulberry);
  --abf-pink:        var(--wp--preset--color--pink);
  --abf-goldenrod:   var(--wp--preset--color--goldenrod);
  --abf-off-white:   var(--wp--preset--color--off-white);
}

body { background-color: #ffffff; color: var(--abf-deep-teal); }

/* Accents that FAIL contrast on light grounds (goldenrod 2.05:1, bright teal
   2.85:1) are only ever used reversed out of deep teal, where goldenrod reaches
   6.12:1. See brand-tokens.css for the full measured table. */
.abf-panel-donor   { background: var(--abf-deep-teal); color: var(--abf-off-white); }
.abf-panel-donor a { color: var(--abf-goldenrod); }

/* Type — both faces are self-hosted from ./fonts, no Google CDN dependency.
   Figtree stands in for Quiet Sans (Adobe Fonts, subscription-bound, cannot be
   self-hosted). It was chosen for matching Quiet Sans's wide monolinear
   geometry and open apertures while keeping humanist warmth alongside Goudy. */
:root {
  --abf-font-serif: var(--wp--preset--font-family--goudy);
  --abf-font-sans:  var(--wp--preset--font-family--brand-sans);
}

/* ---------------------------------------------------------------------------
   BRAND TYPE ASSERTIONS  —  why this block has to exist
   GeneratePress is a classic theme, and WordPress enqueues its stylesheet
   (generate-style-css) AFTER global-styles-inline-css. At equal specificity the
   later sheet wins, so the parent silently overrode theme.json's font-family
   and text-transform: H1 rendered in the sans instead of Goudy, and H2/H3 lost
   their uppercase while H4 kept it. theme.json REMAINS the single source of
   truth for the values — this child sheet (which loads last) only re-asserts
   them via the same --wp--preset--* custom properties. Do not hardcode values
   here; change them in theme.json.
   --------------------------------------------------------------------------- */
body,
.entry-content,
.site-content {
  font-family: var(--wp--preset--font-family--goudy);
  color: var(--wp--preset--color--deep-teal);
}

/* PAGE GROUND IS WHITE (decided by Gabriel 2026-08-21 after a week-long
   cream-vs-white comparison: "a little more boring, but a lot more
   functional"). The brand cream lives on as the masthead band and the
   homepage program cards. GP paints its own site background on #page above
   body, so that layer goes transparent or the white never shows. Every
   container below inherits. */
body { background-color: #ffffff; }
#page { background-color: transparent; }

.site-content,
.content-area,
.site-main,
.entry-content,
article.page,
article.post,
.widget-area .widget { background-color: transparent; }

h1, .entry-title {
  font-family: var(--wp--preset--font-family--goudy);
  color: var(--wp--preset--color--deep-teal);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
}

h2, h3, h4 {
  font-family: var(--wp--preset--font-family--brand-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

h2, h3 { color: var(--wp--preset--color--mulberry); }
h4     { color: var(--wp--preset--color--deep-teal); }

a       { color: var(--wp--preset--color--mulberry); }
a:hover { color: var(--wp--preset--color--deep-teal); }

/* ---------------------------------------------------------------------------
   BUTTONS — same override problem as the headings.
   GeneratePress ships its own .wp-block-button__link / .button styling and its
   sheet loads after global-styles, so theme.json's button colors lost and the
   default button rendered GREY instead of Deep Teal. Re-asserted here, still
   reading from the theme.json presets.
   --------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.button {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--brand-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
  background-color: var(--wp--preset--color--mulberry);
  color: var(--wp--preset--color--off-white);
}

/* Buttons that explicitly choose a brand color in the editor must win over the
   blanket rule above, otherwise every button collapses to Deep Teal. */
.wp-block-button__link.has-background,
.wp-element-button.has-background { background-color: unset; }
.wp-block-button__link.has-text-color,
.wp-element-button.has-text-color { color: unset; }

/* ---------------------------------------------------------------------------
   MOBILE — overflow guard.
   Anything with an intrinsic or inline width (logos, embeds, wide tables) must
   never force the page wider than the viewport. Cheap insurance: a single
   oversized element used to push the whole layout sideways and clip every
   heading on a 390px phone.
   --------------------------------------------------------------------------- */
img, svg, video, table { max-width: 100%; height: auto; }
/* No height:auto on iframes: they have no intrinsic ratio, so it collapses
   embedded forms and maps to 150px. Videos get their ratio from a wrapper
   (core embed blocks, or the FluidVids plugin for classic YouTube iframes). */
iframe { max-width: 100%; }
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   MOBILE HEADER PROPORTIONS
   The toggle wrapper carries the class .main-navigation, so it inherited the
   deep-teal nav background and rendered as a heavy filled slab that visually
   outweighed the logo. The toggle should be a light icon; only the OPEN menu
   panel should be a teal surface.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Toggle: icon, not a block. */
  .main-navigation.mobile-menu-control-wrapper,
  .mobile-menu-control-wrapper .menu-toggle,
  .main-navigation:not(.toggled) .menu-toggle {
    background-color: transparent;
  }
  .mobile-menu-control-wrapper .menu-toggle,
  .main-navigation .menu-toggle {
    color: var(--wp--preset--color--deep-teal);
    font-size: 26px;
    line-height: 1;
    padding: 0;
    width: 48px;          /* keeps a 48x48 touch target without a visible box */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu-control-wrapper .menu-toggle:hover,
  .mobile-menu-control-wrapper .menu-toggle:focus,
  .main-navigation .menu-toggle:hover,
  .main-navigation .menu-toggle:focus {
    background-color: transparent;
    color: var(--wp--preset--color--mulberry);
  }

  /* Put the logo and the toggle on a shared vertical center and tighten the
     40px desktop header padding, which is too airy on a phone. */
  .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .site-logo { margin: 0; line-height: 0; }

  /* Logo can breathe now that it is not competing with a filled slab. */
  .site-logo img, .header-image { max-width: 210px; height: auto; }

  /* The open panel stays a teal surface - that part was right - but it must go
     edge to edge. GP nests it inside .inside-navigation.grid-container, whose
     padding left it floating 310px wide inside a 390px screen, which read as
     a stray box rather than a menu. */
  .main-navigation.toggled .main-nav > ul {
    background-color: var(--wp--preset--color--deep-teal);
  }
  /* Full-bleed the open panel. Negative-margin breakout fought the flex layout
     on .inside-header (it shifted the panel the wrong way), so instead drop the
     header's horizontal padding on mobile and inset the logo and toggle
     individually. The nav is a sibling of both, so it spans edge to edge. */
  .inside-header { padding-left: 0; padding-right: 0; }
  .site-logo { padding-left: 20px; }
  .mobile-menu-control-wrapper { padding-right: 20px; }
  .main-navigation.toggled .inside-navigation,
  .main-navigation.toggled .main-nav,
  .main-navigation.toggled .main-nav > ul {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .main-navigation.toggled .main-nav > ul > li > a {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 400px) {
  .site-logo img, .header-image { max-width: 190px; height: auto; }
}

/* ---------------------------------------------------------------------------
   REVERSED PANEL BLOCK STYLES
   Two variants of the same Deep Teal band, registered in functions.php so they
   are one click in the editor. They follow the brand book's audience guidance:
   donors get teal/goldenrod, students get mulberry/pink.

   ACCESSIBILITY — measured against #003746, and the two variants are NOT equal:
     goldenrod #f99f1c  6.12:1  AA for body text at any size
     pink      #ed037c  3.00:1  AA for LARGE TEXT ONLY (>=24px, or >=18.66px bold)
   So pink is safe for the big all-caps subhead but must never carry body copy
   on teal. Body stays off-white (12.54:1) in both variants.

   Buttons: a pink button on teal is a trap. Off-white label on pink is 4.18:1
   and deep teal on pink is 3.00:1 — both miss the 4.5:1 needed at normal button
   label sizes. Both variants therefore use an off-white button with deep-teal
   text (12.54:1). Only the heading color changes between them.
   --------------------------------------------------------------------------- */
.wp-block-group.is-style-abf-reversed-donor,
.wp-block-group.is-style-abf-reversed-student {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  padding: 2.5rem 2rem;
}

.wp-block-group.is-style-abf-reversed-donor h1,
.wp-block-group.is-style-abf-reversed-donor h2,
.wp-block-group.is-style-abf-reversed-donor h3,
.wp-block-group.is-style-abf-reversed-donor h4 {
  color: var(--wp--preset--color--goldenrod);
}

.wp-block-group.is-style-abf-reversed-student h1,
.wp-block-group.is-style-abf-reversed-student h2,
.wp-block-group.is-style-abf-reversed-student h3,
.wp-block-group.is-style-abf-reversed-student h4 {
  color: var(--wp--preset--color--pink);
}

/* H1 in a reversed panel stays off-white — it is Goudy at display size and the
   accent belongs on the smaller all-caps subhead above it, not on both. */
.wp-block-group.is-style-abf-reversed-donor h1,
.wp-block-group.is-style-abf-reversed-student h1 {
  color: var(--wp--preset--color--off-white);
}

.wp-block-group.is-style-abf-reversed-donor p,
.wp-block-group.is-style-abf-reversed-student p {
  color: var(--wp--preset--color--off-white);
}

/* Accessible button for both variants. */
.wp-block-group.is-style-abf-reversed-donor .wp-block-button__link:not(.has-background),
.wp-block-group.is-style-abf-reversed-student .wp-block-button__link:not(.has-background) {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
}
.wp-block-group.is-style-abf-reversed-donor .wp-block-button__link:not(.has-background):hover,
.wp-block-group.is-style-abf-reversed-student .wp-block-button__link:not(.has-background):hover {
  background-color: var(--wp--preset--color--goldenrod);
  color: var(--wp--preset--color--deep-teal);
}
.wp-block-group.is-style-abf-reversed-student .wp-block-button__link:not(.has-background):hover {
  background-color: var(--wp--preset--color--pink);
  color: var(--wp--preset--color--off-white);
}

/* Links inside a reversed panel take the variant accent. */
.wp-block-group.is-style-abf-reversed-donor a:not(.wp-block-button__link)   { color: var(--wp--preset--color--goldenrod); }
.wp-block-group.is-style-abf-reversed-student a:not(.wp-block-button__link) { color: var(--wp--preset--color--pink); }

/* ---------------------------------------------------------------------------
   TOP NAVIGATION — sans-serif, no filled blocks.
   The nav was inheriting Goudy from body and sat in a deep-teal bar with a
   mulberry block on the current item. Now it is Figtree on the bare off-white
   ground. Note the colors had to flip with the background: off-white links on
   a transparent bar would have been invisible, so links are deep teal (12.5:1)
   with mulberry hover/current (7.9:1) — both AAA.
   Current page is marked with a rule rather than a filled block.
   --------------------------------------------------------------------------- */
.main-navigation,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family: var(--wp--preset--font-family--brand-sans);
}

.main-navigation .main-nav ul li a {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Kill the bar and any block fills, including GP's hover/current states. */
.main-navigation,
.main-navigation ul ul,
.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
  background-color: transparent;
}

/* Current page: a quiet underline instead of a coloured block.
   GP gives nav links line-height:60px with zero vertical padding, so an inset
   box-shadow landed 21px below the text and read as a detached floating line.
   A pseudo-element positioned from the text's own center sits ~5px under the
   word instead, and the 20px horizontal inset matches GP's link padding so the
   rule is the width of the label rather than the whole click target. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  position: relative;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(50% + 0.95em);
  height: 2px;
  background-color: var(--wp--preset--color--mulberry);
}

/* Sub-menu surface. Was #fffdeb — exactly the page color — so the panel had
   no fill separation at all and leaned entirely on a hairline. */
.main-navigation .main-nav ul ul {
  background-color: var(--abf-surface-raised);
  border: 1px solid rgba(0, 55, 70, 0.22);
}

@media (max-width: 768px) {
  /* The open mobile panel continues the CREAM MASTHEAD: with the v4 white
     reading canvas (2026-08-14), a raised-tint panel read as a stray white
     block with the header's cream bottom padding peeking out beneath it.
     Cream panel + cream header = one masthead surface; the hairline bottom
     border draws the line where the white canvas begins. */
  .main-navigation.toggled .main-nav > ul {
    background-color: var(--wp--preset--color--off-white);
    border-top: 1px solid rgba(0, 55, 70, 0.22);
    border-bottom: none;
  }
  .main-navigation.toggled .main-nav ul li a {
    color: var(--wp--preset--color--deep-teal);
  }
  .main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a {
    color: var(--wp--preset--color--mulberry);
    box-shadow: inset 3px 0 0 0 var(--wp--preset--color--mulberry);
  }
  /* The desktop underline would otherwise stack on top of the left bar and
     double-mark the current item. One indicator per breakpoint. */
  .main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   DROPDOWN SUB-MENUS
   Sub-items inherited the top-level uppercase, which read shouty and flattened
   the hierarchy — two levels shouting at the same volume. Sentence case at the
   second level separates them and is easier to scan.
   GP also fixes sub-menus at 200px, which wrapped "National Leadership Council"
   onto two lines; sizing to content with a sane min/max fixes that without
   letting a long label run away.
   --------------------------------------------------------------------------- */
.main-navigation .main-nav ul ul {
  width: auto;
  min-width: 210px;
  max-width: 320px;
  padding: 6px 0;
  background-color: var(--abf-surface-raised);
  border: 1px solid rgba(0, 55, 70, 0.22);
  /* Slightly stronger lift now that the fill also carries separation. */
  box-shadow: 0 8px 22px rgba(0, 55, 70, 0.13);
}

.main-navigation .main-nav ul ul li a {
  text-transform: none;      /* sentence case at the second level */
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;       /* stop long labels wrapping */
  padding: 9px 20px;
}

/* Sub-item hover: mulberry text, no fill — consistent with the top level. */
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  color: var(--wp--preset--color--mulberry);
  background-color: transparent;
}

/* The current-page underline is a top-level device only. */
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a::after { display: none; }

@media (max-width: 768px) {
  /* Nested items in the mobile panel: indent and de-emphasise so the two
     levels are distinguishable in a single flat column. */
  .main-navigation.toggled .main-nav ul ul {
    box-shadow: none;
    border: 0;
    min-width: 0;
    max-width: none;
    padding: 0;
  }
  .main-navigation.toggled .main-nav ul ul li a {
    padding-left: 40px;
    font-weight: 400;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   FOOTER
   Mirrors the current albertbakerfund.org footer — identity block, socials,
   search — in the 2026 brand. Deep Teal ground, so every element here uses the
   REVERSE artwork and off-white text (12.5:1). Goldenrod is the accent because
   at 6.1:1 on teal it is the only warm color safe for links at normal size;
   pink would be 3.0:1 and fails for anything but large text.
   --------------------------------------------------------------------------- */
.site-footer,
.site-footer .footer-widgets {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
}

.site-footer .footer-widgets-container {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.site-footer .widget { margin-bottom: 1.5rem; }

.abf-foot-logo {
  max-width: 280px;
  height: auto;
  display: block;
  margin-bottom: 1.25rem;
}

.abf-foot-heading {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--wp--preset--color--goldenrod);
  margin-bottom: 1rem;
}

/* Address / phone / email: sans-serif and a step larger. Goudy is a
   high-contrast old-style face — lovely for prose, but it thins out badly at
   small sizes on a dark ground, which is exactly where an address block lives. */
.abf-foot-address,
.abf-foot-contact {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: var(--wp--preset--color--off-white);
  margin-bottom: 0.9rem;
}
/* Phone and email read as CONTACT INFORMATION, not accent links, so they take
   the same off-white as the address rather than the goldenrod used elsewhere in
   the footer. Goldenrod returns on hover so they still signal they are tappable.

   Off-white #fffdeb rather than pure #ffffff on purpose: Jeff's Reverse artwork
   is drawn in #fffeec, so true-white text would sit brighter than the signature
   lockup directly above it and make the logo look dingy by comparison.
   Contrast is effectively identical either way — 12.5:1 vs 12.8:1 on Deep Teal. */
/* Scoped under .site-footer deliberately. `.abf-foot-contact a` alone ties with
   `.site-footer a` on specificity (0,1,1 each) and loses on source order,
   because the generic footer link rule is declared later in this file. */
.site-footer .abf-foot-contact a {
  color: var(--wp--preset--color--off-white);
  text-decoration: none;
}
.site-footer .abf-foot-contact a:hover,
.site-footer .abf-foot-contact a:focus {
  color: var(--wp--preset--color--goldenrod);
  text-decoration: underline;
}

.abf-foot-note {
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wp--preset--color--off-white);
  margin-bottom: 0.75rem;
}

.abf-foot-note { opacity: 0.75; font-size: 0.88rem; margin-top: 0.9rem; }

.site-footer a { color: var(--wp--preset--color--goldenrod); }
.site-footer a:hover,
.site-footer a:focus { color: var(--wp--preset--color--off-white); }

/* Socials — icon + label, no filled chips. */
.abf-social-list { list-style: none; margin: 0; padding: 0; }
.abf-social-list li { margin-bottom: 0.6rem; }
.abf-social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.9rem;
  color: var(--wp--preset--color--off-white);
  text-decoration: none;
}
.abf-social-list a:hover,
.abf-social-list a:focus {
  color: var(--wp--preset--color--off-white);
  text-decoration: underline;
}
.abf-social-list svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 22px;
}

/* Search — off-white field on the teal ground so the input is unmistakably an
   input, with a goldenrod submit. */
.abf-search-form { display: flex; max-width: 320px; }
.abf-search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(255, 253, 235, 0.45);   /* 3.74:1 — was .35 = 2.83:1, under the 3:1 UI floor */
  border-right: 0;
  background-color: rgba(255, 253, 235, 0.06);
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
}
.abf-search-form input[type="search"]::placeholder {
  color: rgba(255, 253, 235, 0.6);
}
.abf-search-form input[type="search"]:focus {
  outline: 2px solid var(--wp--preset--color--goldenrod);
  outline-offset: -2px;
}
.abf-search-form button {
  flex: 0 0 auto;
  background-color: var(--wp--preset--color--goldenrod);
  color: var(--wp--preset--color--deep-teal);
  border: 0;
  padding: 0 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.abf-search-form button svg { width: 20px; height: 20px; fill: currentColor; }
.abf-search-form button:hover { background-color: var(--wp--preset--color--off-white); }

@media (max-width: 768px) {
  .site-footer .footer-widgets-container { padding-top: 2.25rem; }
  .abf-foot-logo { max-width: 230px; }
  .abf-search-form { max-width: 100%; }
}

/* Footer bar: quieter than the widget area above it, with a hairline divider. */
.site-info {
  background-color: var(--wp--preset--color--deep-teal);
  color: rgba(255, 253, 235, 0.75);
  border-top: 1px solid rgba(255, 253, 235, 0.15);
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.82rem;
}
.site-info a { color: var(--wp--preset--color--goldenrod); }
.site-info a:hover { color: var(--wp--preset--color--off-white); }

/* ---------------------------------------------------------------------------
   ALTERNATE LIGHT FOOTER
   Off-white ground instead of Deep Teal. Add `footer-light` to the body class
   (on staging, append ?footer=light to any URL) to preview it.

   The accent has to change with the ground, and this is not a preference:
     on DEEP TEAL   goldenrod 6.1:1 works, mulberry would be too dark
     on OFF-WHITE   goldenrod is 2.05:1 and FAILS outright; mulberry is 7.9:1
   So the dark footer is teal+goldenrod and the light footer is off-white+
   mulberry. Each ground has exactly one warm accent that carries text safely.
   --------------------------------------------------------------------------- */
body.footer-light .site-footer,
body.footer-light .site-footer .footer-widgets,
body.footer-light .site-info {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
}

body.footer-light .site-footer .footer-widgets {
  border-top: 1px solid rgba(0, 55, 70, 0.18);
}

body.footer-light .abf-foot-address,
body.footer-light .abf-foot-contact,
body.footer-light .abf-foot-note {
  color: var(--wp--preset--color--deep-teal);
}

body.footer-light .abf-foot-heading { color: var(--wp--preset--color--mulberry); }

/* Same treatment on the light ground: contact info reads as text, accent on hover. */
body.footer-light .site-footer .abf-foot-contact a { color: var(--wp--preset--color--deep-teal); }
body.footer-light .site-footer .abf-foot-contact a:hover,
body.footer-light .site-footer .abf-foot-contact a:focus { color: var(--wp--preset--color--mulberry); }

body.footer-light .site-footer a,
body.footer-light .site-info a { color: var(--wp--preset--color--mulberry); }
body.footer-light .site-footer a:hover,
body.footer-light .site-info a:hover { color: var(--wp--preset--color--deep-teal); }

body.footer-light .site-info {
  color: rgba(0, 55, 70, 0.8);
  border-top: 1px solid rgba(0, 55, 70, 0.18);
}

/* Swap to the Deep Teal signature — the reverse artwork would disappear here. */
body.footer-light .abf-foot-logo { content: url("images/abf-signature-deepteal@2x.png"); }

body.footer-light .abf-search-form input[type="search"] {
  border-color: rgba(0, 55, 70, 0.45);
  background-color: rgba(0, 55, 70, 0.04);
  color: var(--wp--preset--color--deep-teal);
}
body.footer-light .abf-search-form input[type="search"]::placeholder {
  color: rgba(0, 55, 70, 0.6);
}
body.footer-light .abf-search-form input[type="search"]:focus {
  outline-color: var(--wp--preset--color--mulberry);
}
body.footer-light .abf-search-form button {
  background-color: var(--wp--preset--color--mulberry);
  color: var(--wp--preset--color--off-white);
}
body.footer-light .abf-search-form button:hover {
  background-color: var(--wp--preset--color--deep-teal);
}

/* ---------------------------------------------------------------------------
   HOMEPAGE
   Student path leads, donor panel second, no news block (per Gabriel).
   The student story uses the pink reversed style and the donor block the
   goldenrod one, which is exactly the audience split the brand book sets out.
   --------------------------------------------------------------------------- */
.abf-eyebrow {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--mulberry);
  margin-bottom: 0.75rem;
}

.abf-hero h1 { margin-bottom: 1rem; }
.abf-hero .wp-block-buttons { margin-top: 1.75rem; }
.abf-hero-img img,
.abf-story-img img { display: block; width: 100%; height: auto; }

/* Outline button for the secondary hero action — the primary is solid teal, so
   the secondary must not compete. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--deep-teal);
  border: 2px solid var(--wp--preset--color--deep-teal);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
}

/* Programme cards — raised surface, same token as the nav dropdowns so
   "raised thing on the page" means one color sitewide. */
.abf-card {
  /* Cream on the white page ground: the raised cool tint washed out once the
     ground went white (2026-08-14); cream echoes the masthead and keeps the
     homepage's warmth. */
  background-color: var(--abf-off-white);
  border: 1px solid rgba(0, 55, 70, 0.18);
  padding: 1.75rem 1.5rem;
}
.abf-card h3 { margin-bottom: 0.6rem; }
.abf-card p:last-child { margin-bottom: 0; }

.abf-story,
.abf-donor { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* The student-profile name and the donor headline are set as H2 but should not
   be all-caps like a section label — they are names and statements, not labels. */
.abf-story h2,
.abf-donor h2 {
  font-family: var(--wp--preset--font-family--goudy);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--wp--preset--color--off-white);
  margin-bottom: 0.75rem;
}

.abf-donor .wp-block-buttons { margin: 1.5rem 0 1rem; }

@media (max-width: 768px) {
  .abf-hero { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .abf-card { padding: 1.4rem 1.2rem; }
  .abf-story, .abf-donor { margin-top: 1.75rem; margin-bottom: 1.75rem; }
}

/* ---------------------------------------------------------------------------
   HEADER FIT
   The real ABF menu has seven top-level items, several with long labels
   ("Student Resources", "Contact Us"). At the previous size that overflowed
   beside a 300px logo and wrapped to a second row at 1280px. Tightened the nav
   and trimmed the desktop logo so the header holds one line down to ~1100px.
   Below that the mobile toggle takes over anyway.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .main-navigation .main-nav ul li a {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    padding-left: 13px;
    padding-right: 13px;
  }
  .site-logo img, .header-image { max-width: 250px; height: auto; }
}

/* Sub-menu items keep a comfortable reading size — the squeeze is only needed
   on the single top row. */
@media (min-width: 769px) {
  .main-navigation .main-nav ul ul li a {
    font-size: 0.88rem;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 0;
  }
}

/* ---------------------------------------------------------------------------
   CONTENT PAGES AND POSTS — full-canvas reading layout (v4)
   Width history: v1 capped text at 68ch inside GP's container and the empty
   card to its right read as a layout error. v2 shrank a white sheet to hug
   the measure (760px) — Gabriel: feels narrow on desktop. v3 widened the
   sheet to 880px with media filling it — still a card floating on the ground.
   v4 (Gabriel, 2026-08-14): drop the card. The page canvas is the full
   browser width, matching the header and homepage, and content flows on the
   warm brand ground in centered tracks:
       text   720px   ~75 characters at the 18px article size
       media  920px   images, galleries, tables, covers, media-text, embeds
       wide  1120px   editor "Wide width"
       full   edge-to-edge viewport bleed — editor "Full width"
   Readability comes from the text track, presence from the canvas and the
   media/wide/full tracks. The homepage keeps its own composed layout.
   --------------------------------------------------------------------------- */
/* Page anatomy: cream masthead (.site-header carries its own off-white
   background and sits outside GP's container), full-width white reading
   canvas, deep-teal footer. The white ground itself is set globally near the
   top of this file. */

/* Cream and white sit close in value, so the masthead edge needs a deliberate
   cue: a soft shadow reads as elevation instead of a near-miss color match
   (Gabriel, 2026-08-14). Tinted with the brand ink — neutral gray shadows go
   muddy on warm grounds. Applied on every page (homepage included) so the
   masthead behaves as one consistent element; z-index lifts the shadow above
   the content that follows. */
.site-header {
  position: relative;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 55, 70, 0.05), 0 3px 10px rgba(0, 55, 70, 0.07);
}
body:not(.home) .site-main > article > .inside-article {
  background-color: transparent;
  border: none;
  padding: 0;
  max-width: none;
}

/* Articles read a touch larger than UI text; 18px is also what lets the
   720px track hold ~75 characters. Headings use theme.json presets and are
   unaffected by this inherited size. */
body:not(.home) .site-main > article .entry-content { font-size: 1.06em; }

/* Track 1 — text. Every element defaults to the centered reading column. */
body:not(.home) .site-main > article .entry-header,
body:not(.home) .site-main > article .entry-content > *,
body:not(.home) .site-main .post-navigation,
body:not(.home) .site-main .comments-area {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Track 2 — media. Images, galleries, embeds (all figures), tables, covers,
   media-text and columns get more presence than running text. The centering
   margins from the track-1 rule still apply. */
body:not(.home) .site-main > article .entry-content > figure,
body:not(.home) .site-main > article .entry-content > table,
body:not(.home) .site-main > article .entry-content > .wp-block-table,
body:not(.home) .site-main > article .entry-content > .wp-block-cover,
body:not(.home) .site-main > article .entry-content > .wp-block-media-text,
body:not(.home) .site-main > article .entry-content > .wp-block-columns {
  max-width: 920px;
}

/* Track 3 — the editor's "Wide width" button. width/margins are re-asserted
   because GP's inline dynamic CSS gives alignwide negative margins and
   width: calc(100% + 60/80px), which bled the figure past the right screen
   edge on mobile and clipped its caption. */
body:not(.home) .site-main > article .entry-content > .alignwide {
  width: auto;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Track 4 — the editor's "Full width" button: a true edge-to-edge viewport
   bleed out of GP's centered container. Symmetric negative viewport margins
   are the standard GP technique; body overflow-x hidden absorbs the
   scrollbar's ~15px of 100vw imprecision. */
body:not(.home) .site-main > article .entry-content > .alignfull {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body { overflow-x: hidden; }

/* A touch more air between paragraphs for sustained reading. */
body:not(.home) .site-main > article .entry-content p { line-height: 1.68; }

body:not(.home) .site-content { padding-top: 3rem; padding-bottom: 4rem; }

@media (max-width: 768px) {
  body:not(.home) .site-content { padding-top: 1.5rem; padding-bottom: 2rem; }
}

/* Floated images inside the article sheet (revised 2026-08-14 — Gabriel:
   "left / right floated images still need to work").
   First pass banned floats outright because a 393px-wide alignright inside the
   612px text column left ~110px for words. The editorial tool is fine; the
   problem is only WIDTH relative to the measure. So: floats keep working, but
   a floated image may take at most 45% of the column (~275px), leaving a
   ~320px text run — tight but readable. The width="393" HTML attribute is
   overridden by max-width. On phones any float is too tight, so they stack. */
body:not(.home) .site-main > article .entry-content img[style*="float"],
body:not(.home) .site-main > article .entry-content .alignright,
body:not(.home) .site-main > article .entry-content .alignleft {
  max-width: min(45%, 300px);
  height: auto;
}
/* The outer margin pulls a floated DIRECT CHILD in from the container edge so
   it sits flush with the centered 720px text column. For floats nested inside
   a paragraph, 100% is the paragraph's own width, the calc goes negative, and
   max() clamps the pull-in to zero — one rule covers both cases.

   Consecutive same-side floats must CLEAR each other: floats stack
   horizontally by default, and with a ~200px pull-in margin on each, the
   second float lands deep inside the text column and squeezes the wrap to a
   sliver (caught on the QA fixture, 2026-08-14). Clearing stacks them
   vertically at the column edge — the behavior an editor expects anyway. */
body:not(.home) .site-main > article .entry-content > .alignright {
  clear: right;
}
body:not(.home) .site-main > article .entry-content > .alignleft {
  clear: left;
}
body:not(.home) .site-main > article .entry-content .alignright,
body:not(.home) .site-main > article .entry-content img[style*="float: right"],
body:not(.home) .site-main > article .entry-content img[style*="float:right"] {
  float: right;
  margin: 0.35em max(0px, calc((100% - 720px) / 2)) 1rem 1.5rem;
}
body:not(.home) .site-main > article .entry-content .alignleft,
body:not(.home) .site-main > article .entry-content img[style*="float: left"],
body:not(.home) .site-main > article .entry-content img[style*="float:left"] {
  float: left;
  margin: 0.35em 1.5rem 1rem max(0px, calc((100% - 720px) / 2));
}

@media (max-width: 640px) {
  body:not(.home) .site-main > article .entry-content img[style*="float"],
  body:not(.home) .site-main > article .entry-content .alignright,
  body:not(.home) .site-main > article .entry-content .alignleft {
    float: none !important;
    display: block;
    max-width: 100%;
    margin: 0 0 1.25rem;
  }
  /* WP core gives figcaption display:table-caption, which needs the figure to
     be display:table. The stack rule above makes the figure a block, and a
     table-caption inside a block collapses to min-content width (a 41px text
     sliver — caught on mobile QA). Make the caption a normal block too. */
  body:not(.home) .site-main > article .entry-content .alignright figcaption,
  body:not(.home) .site-main > article .entry-content .alignleft figcaption {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   HOMEPAGE — impact KPIs.
   Four organization-wide measures use one consistent number-over-label
   pattern. A pale blue ground keeps the section distinct without adding the
   visual weight of another reversed band.
   --------------------------------------------------------------------------- */
.abf-stats {
  background-color: #e8f3f5;
  color: var(--wp--preset--color--deep-teal);
  border: 1px solid rgba(0, 55, 70, 0.12);
  border-radius: 2px;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  margin: 0.5rem 0 2rem;
  text-align: center;
}
.abf-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.abf-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.4rem clamp(0.75rem, 2vw, 1.5rem);
  text-align: center;
}
.abf-stat + .abf-stat {
  border-left: 1px solid rgba(0, 55, 70, 0.14);
}
/* Gutenberg's flow layout adds 24px before every sibling, even when the group
   is turned into a CSS grid. Reset those generated margins so every KPI and
   each line within it shares the same baseline. */
.abf-stat-grid > .abf-stat,
.abf-stat > * { margin-block-start: 0; }
.abf-stat-number {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 650;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--wp--preset--color--mulberry);
  margin-bottom: 0.5rem;
}
.abf-stat-label {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--deep-teal);
  margin-bottom: 0;
}
.abf-blessing {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--wp--preset--color--deep-teal);
  opacity: 0.84;
  border-top: 1px solid rgba(0, 55, 70, 0.14);
  max-width: 70ch;
  padding-top: 1rem;
  margin: 1.25rem auto 0;
}

@media (max-width: 600px) {
  .abf-stats { padding: 1.5rem 0.8rem 1.25rem; }
  .abf-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .abf-stat {
    min-height: 6.5rem;
    padding: 0.65rem 0.35rem;
  }
  .abf-stat + .abf-stat { border-left: 0; }
  .abf-stat:nth-child(even) {
    border-left: 1px solid rgba(0, 55, 70, 0.14);
  }
  .abf-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(0, 55, 70, 0.14);
  }
  .abf-stat-number { font-size: 2.35rem; }
  .abf-stat-label { font-size: 0.68rem; letter-spacing: 0.035em; }
  .abf-blessing { font-size: 1rem; }
}

/* Pull quote inside the student panel — Jane's real words carry the panel, so
   they get the Goudy italic voice at reading-aloud size. */
.abf-story .abf-pullquote {
  border: 0;
  margin: 0.4rem 0 0.9rem;
  padding: 0;
}
.abf-story .abf-pullquote p {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--wp--preset--color--off-white);
  border-left: 3px solid var(--wp--preset--color--pink);
  padding-left: 1.2rem;
  margin-bottom: 0.6rem;
}
.abf-story .abf-pullquote cite {
  display: block;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--off-white);
  opacity: 0.85;
  padding-left: calc(1.2rem + 3px);
}

@media (max-width: 768px) {
  .abf-story .abf-pullquote p { font-size: 1.2rem; }
}

/* Post meta: GP prints both the modified and published dates back to back the
   moment a post has ever been edited ("August 12, 2026January 27, 2026").
   Show the published date only. */
.entry-header .posted-on .updated:not(.published) ~ .published { display: inline; }
.entry-header .posted-on time.updated:not(.published) { display: none; }

/* ---------------------------------------------------------------------------
   STUDENT PROFILE — gradient variant (Gabriel, 2026-08-11 evening).
   The pink->goldenrod student gradient as the panel surface. Off-white text
   fails at the goldenrod end (2.05:1), so no text sits on the gradient
   directly: the portrait cut-out lives on the gradient, and all words go on
   an off-white card at full contrast. Same pattern as the brand book's
   pocket-folder spreads — gradient as ground, content on a sheet.
   --------------------------------------------------------------------------- */
.abf-story-gradient {
  background: var(--wp--preset--gradient--student);
  padding: 2.5rem 2rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.abf-story-gradient .abf-story-card {
  background-color: var(--wp--preset--color--off-white);
  padding: 1.75rem 2rem;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0, 55, 70, 0.22);
}

.abf-story-gradient .abf-story-card h3 {
  color: var(--wp--preset--color--mulberry);
  margin-bottom: 0.75rem;
}

.abf-story-gradient .abf-pullquote { border: 0; margin: 0 0 0.6rem; padding: 0; }
.abf-story-gradient .abf-pullquote p {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--wp--preset--color--deep-teal);
  border: 0;
  padding-left: 0;
  margin-bottom: 0.6rem;
}
.abf-story-gradient .abf-pullquote cite {
  display: block;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--deep-teal);
  opacity: 0.85;
  padding-left: 0;
}
.abf-story-gradient .abf-story-card a:not(.wp-block-button__link) { color: var(--wp--preset--color--mulberry); }
.abf-story-gradient .abf-story-card a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--deep-teal); }

/* The cut-out portrait sits straight on the gradient with a little lift. */
.abf-story-gradient .abf-story-img img {
  filter: drop-shadow(0 8px 18px rgba(0, 55, 70, 0.28));
}

@media (max-width: 768px) {
  .abf-story-gradient { padding: 1.5rem 1.1rem; }
  .abf-story-gradient .abf-story-card { padding: 1.3rem 1.2rem; }
  .abf-story-gradient .abf-pullquote p { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------------------
   HOMEPAGE v6 (Gabriel, 2026-08-12 evening): tighter header gap, photo cards
   on the program blocks, donor panel on the full donor gradient with the
   Impact Report as a secondary button.
   --------------------------------------------------------------------------- */

/* 1 — header-to-hero gap was 88px (40 content padding + 48 hero padding).
   Hero inline padding is now 1.5rem in the markup; this brings the total
   to ~34px. Home only — article pages keep their reading padding. */
.home .site-content { padding-top: 10px; }

/* 2 — photo cards. The image bleeds to the card edges (negative margins match
   the card padding), fixed 16:10 crop so the three stay in register however
   the source images are shaped. */
.abf-card .abf-card-img {
  margin: -1.75rem -1.5rem 1.25rem;
}
.abf-card .abf-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* The chaplaincy portrait is a tight headshot — bias the crop upward so the
   face stays whole. */
.abf-card .abf-card-img.abf-focus-top img { object-position: center 18%; }

/* 3+4 — donor panel on the full donor gradient (deep teal -> bright teal,
   135deg). Off-white body text fails at the bright end (2.85:1), so text is
   width-capped to stay over the darker two-thirds of the diagonal; measured
   worst case for the capped copy is ~5:1. Buttons carry their own surfaces.
   The bright corner blooms on the right as pure ground, like the brand
   book's donor spreads. */
.abf-donor-gradient {
  background: var(--wp--preset--gradient--donor);
}
.abf-donor-gradient h2,
.abf-donor-gradient h3,
.abf-donor-gradient p {
  max-width: 640px;
}

/* Secondary button on the gradient: quiet outline, off-white on the dark
   zone. The global outline style is deep-teal-on-light, so it is re-scoped
   here. */
.abf-donor-gradient .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--off-white);
  border: 2px solid rgba(255, 253, 235, 0.7);
}
.abf-donor-gradient .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
  border-color: var(--wp--preset--color--off-white);
}

@media (max-width: 768px) {
  .abf-card .abf-card-img { margin: -1.4rem -1.2rem 1rem; }
  .abf-donor-gradient h2, .abf-donor-gradient h3, .abf-donor-gradient p { max-width: 100%; }
}

/* On the gradient, the goldenrod headline dips to ~2.5:1 where it crosses the
   brighter diagonal — under even the 3:1 large-text floor. Headline goes
   off-white (5.2:1 at its worst point); the short top-left "For donors" kicker
   stays goldenrod, where the ground is still dark (4.8:1).
   Selector matches the block-style rule's specificity and is declared later,
   which is what it takes to win on this theme. */
.wp-block-group.abf-donor-gradient h2 {
  color: var(--wp--preset--color--off-white);
}

/* Program-card images and titles are links (Gabriel, 2026-08-14). The title
   keeps its heading colour rather than turning into an underlined link; the
   whole-card affordance comes from the hover states. */
.abf-card h3 a {
  color: inherit;
  text-decoration: none;
}
.abf-card h3 a:hover,
.abf-card h3 a:focus {
  color: var(--wp--preset--color--deep-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.abf-card .abf-card-img a { display: block; }
.abf-card .abf-card-img a:hover img,
.abf-card .abf-card-img a:focus img { opacity: 0.92; }

/* ---------------------------------------------------------------------------
   BUILT-IN FORMATTING CLASSES — gaps found by the kitchen-sink audit
   (page /formatting-test-qa/, 2026-08-14). Floats, captions, galleries,
   aligncenter, separators and screen-reader-text all pass unaided; these are
   the four that did not.
   --------------------------------------------------------------------------- */

/* 1 — code inherited Goudy from the body font assertion. Code is monospace,
   always. */
.entry-content code,
.entry-content pre,
.entry-content kbd,
.entry-content samp,
.wp-block-code,
.wp-block-preformatted {
  font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.88em;
}

/* 2 — blockquote had GP's near-invisible gray rule and a 20px cite. Brand
   treatment: pink rule, Goudy italic, quiet small cite. */
.entry-content .wp-block-quote:not(.abf-pullquote),
.entry-content blockquote:not(.wp-block-pullquote blockquote):not(.abf-pullquote) {
  border-left: 3px solid var(--wp--preset--color--pink);
  padding: 0.2em 0 0.2em 1.2rem;
  margin-left: 0;
}
.entry-content .wp-block-quote p,
.entry-content blockquote p {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.55;
}
.entry-content .wp-block-quote cite,
.entry-content blockquote cite {
  display: block;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--mulberry);
  margin-top: 0.4rem;
}

/* 3 — pullquote was bare. Centered, Goudy italic large, mulberry rules. */
.entry-content .wp-block-pullquote {
  border-top: 3px solid var(--wp--preset--color--mulberry);
  border-bottom: 3px solid var(--wp--preset--color--mulberry);
  padding: 1.5rem 0;
  margin: 2rem 0;
  text-align: center;
}
.entry-content .wp-block-pullquote p {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--wp--preset--color--deep-teal);
}
.entry-content .wp-block-pullquote cite {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mulberry);
}

/* 4 — tables were unstyled 1px grids. Deep-teal header band, hairline rows,
   subtle zebra. Scholarship deadline tables deserve better than default. */
.entry-content .wp-block-table th {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 0.9rem;
  border: 0;
}
.entry-content .wp-block-table td {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 55, 70, 0.15);
}
.entry-content .wp-block-table tbody tr:nth-child(even) td {
  background-color: var(--abf-surface-raised);
}

/* 5 — drop cap rendered at 142px (roughly five lines) with the display scale.
   Three lines is the classic book proportion. */
.entry-content .has-drop-cap:not(:focus)::first-letter {
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 5.2em;
  line-height: 0.78;
  margin: 0.05em 0.12em 0 0;
  color: var(--wp--preset--color--deep-teal);
}

/* Gutenberg part-2 fixes (kitchen-sink round 2, 2026-08-14) */

/* Verse is poetry, not code — it was caught by the monospace pre rule. */
.entry-content .wp-block-verse {
  font-family: var(--wp--preset--font-family--goudy);
  font-style: italic;
  font-size: 1.05em;
  background: none;
  padding-left: 1.2rem;
  border-left: 3px solid rgba(0, 55, 70, 0.18);
}

/* Cover text: brand off-white rather than WP's pure white, matching every
   other reversed surface on the site. */
.entry-content .wp-block-cover .wp-block-cover__inner-container {
  color: var(--wp--preset--color--off-white);
}

/* Block-level Gutenberg blocks ship with margin-bottom: 0 on the front end
   (GP only spaces p/headings/lists), so a cover, gallery or buttons row jams
   against whatever follows it. Match the paragraph rhythm. :where() keeps
   specificity at zero so float/figure rules above always win. */
.entry-content > :where(
  .wp-block-buttons,
  .wp-block-media-text,
  .wp-block-cover,
  .wp-block-gallery,
  .wp-block-embed,
  .wp-block-audio,
  .wp-block-video,
  .wp-block-details,
  .wp-block-image:not(.alignleft):not(.alignright)
) {
  margin-bottom: 1.5em;
}

/* ---------------------------------------------------------------------------
   HOMEPAGE HERO TYPE — Gabriel, 2026-08-25.
   The deadline label was visually lost beside a 42px headline and a 34px lead.
   Promote the deadline to readable UI text, and bring the two display sizes
   closer to the rest of the page without flattening the hierarchy.
   --------------------------------------------------------------------------- */
.abf-eyebrow { font-size: 0.95rem; }
.abf-hero h1 { font-size: clamp(2.15rem, 3vw, 2.45rem); }
.abf-hero .has-large-font-size {
  font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .abf-eyebrow { font-size: 0.88rem; }
  .abf-hero h1 { font-size: 2rem; }
  .abf-hero .has-large-font-size { font-size: 1.25rem !important; }
}

/* ---------------------------------------------------------------------------
   U.S. SCHOLARSHIP LANDING PAGE — new-theme rebuild, 2026-08-25.
   The legacy page is a long Bootstrap document. This surface preserves its
   policy content but gives applicants a clear decision path: understand the
   award, check eligibility, gather documents, then request the application.
   --------------------------------------------------------------------------- */
body:not(.home) .site-main > article .entry-content > .abf-scholarship-page {
  width: auto;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.abf-scholarship-page {
  color: var(--wp--preset--color--deep-teal);
  padding-bottom: 1rem;
}

.abf-scholarship-hero {
  background: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  padding: 3rem;
  overflow: hidden;
}

.abf-scholarship-hero .wp-block-columns {
  align-items: stretch;
  gap: 2.5rem;
  margin-bottom: 0;
}

.abf-scholarship-hero .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.abf-scholarship-hero h1 {
  color: var(--wp--preset--color--off-white);
  font-size: clamp(2.5rem, 4.2vw, 3.65rem);
  margin-bottom: 1rem;
}

.abf-scholarship-eyebrow,
.abf-section-kicker,
.abf-fact-label {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.abf-scholarship-eyebrow {
  color: var(--wp--preset--color--goldenrod);
  margin-bottom: 0.75rem;
}

.abf-scholarship-lead {
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 1.45rem;
  line-height: 1.5;
  max-width: 32em;
}

.abf-scholarship-status {
  border-left: 3px solid var(--wp--preset--color--goldenrod);
  color: var(--wp--preset--color--off-white);
  padding-left: 1rem;
  margin: 1.25rem 0 1.5rem;
}

.abf-scholarship-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--wp--preset--color--goldenrod);
  color: var(--wp--preset--color--deep-teal);
}

.abf-scholarship-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.abf-scholarship-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
}

.abf-scholarship-hero .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--off-white);
}

.abf-scholarship-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.abf-scholarship-hero .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
}

.abf-scholarship-hero-photo {
  height: 100%;
  margin: 0;
}

.abf-scholarship-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.abf-scholarship-facts {
  gap: 1.25rem;
  margin: 1.25rem 0 0;
}

.abf-scholarship-facts > .wp-block-column {
  background-color: var(--wp--preset--color--off-white);
  border: 1px solid rgba(0, 55, 70, 0.16);
  padding: 1.4rem 1.5rem;
}

.abf-fact-label {
  color: var(--wp--preset--color--mulberry);
  margin-bottom: 0.3rem;
}

.abf-fact-value {
  color: var(--wp--preset--color--deep-teal);
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.abf-scholarship-facts p:last-child {
  font-size: 0.96rem;
  line-height: 1.45;
  margin-bottom: 0;
}

.abf-page-nav {
  border-bottom: 1px solid rgba(0, 55, 70, 0.15);
  border-top: 1px solid rgba(0, 55, 70, 0.15);
  margin: 2rem 0 0;
  padding: 1rem 0;
}

.abf-page-nav p { margin: 0; }
.abf-page-nav a { margin-left: 1rem; white-space: nowrap; }

.abf-scholarship-section {
  margin: 0 auto;
  max-width: 920px;
  padding: 4rem 0;
}

.abf-section-tinted {
  background-color: var(--wp--preset--color--off-white);
  max-width: none;
  padding: 3.5rem 5rem;
}

.abf-section-kicker {
  color: var(--wp--preset--color--mulberry);
  margin-bottom: 0.65rem;
}

.abf-scholarship-section > h2,
.abf-apply-panel > h2 {
  margin-bottom: 1rem;
}

.abf-section-intro {
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 50em;
}

.abf-scholarship-section .wp-block-columns { gap: 2rem; }

.abf-note {
  background-color: var(--abf-surface-raised);
  border-left: 3px solid var(--wp--preset--color--bright-teal);
  padding: 1rem 1.2rem;
}

.abf-deadline-table { margin: 1.5rem 0; }
.abf-deadline-table table { margin-bottom: 0; }

.abf-checklist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.abf-checklist li {
  border-bottom: 1px solid rgba(0, 55, 70, 0.12);
  padding: 0.8rem 0 0.8rem 2rem;
  position: relative;
}

.abf-checklist li::before {
  color: var(--wp--preset--color--mulberry);
  content: "✓";
  font-family: var(--wp--preset--font-family--brand-sans);
  font-weight: 700;
  left: 0.25rem;
  position: absolute;
  top: 0.8rem;
}

.abf-help-card {
  background-color: var(--wp--preset--color--off-white);
  border: 1px solid rgba(0, 55, 70, 0.16);
  margin-top: 2.25rem;
  padding: 1.5rem 1.75rem;
}

.abf-help-card .wp-block-columns { margin-bottom: 0; }
.abf-help-card p:last-child { margin-bottom: 0; }

.abf-help-photo { margin: 0; }
.abf-help-photo img {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  width: 150px;
}

.abf-process { gap: 1rem !important; }

.abf-process > .wp-block-column {
  background-color: #ffffff;
  border-top: 4px solid var(--wp--preset--color--mulberry);
  padding: 1.35rem 1.2rem;
}

.abf-step-number {
  color: var(--wp--preset--color--mulberry);
  font-family: var(--wp--preset--font-family--goudy);
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 0.65rem;
}

.abf-process h3 { font-size: 0.9rem; }
.abf-process p:last-child { margin-bottom: 0; }

.abf-scholarship-section .wp-block-details {
  border: 1px solid rgba(0, 55, 70, 0.18);
  margin-bottom: 0.7rem;
  padding: 0;
}

.abf-scholarship-section .wp-block-details summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-weight: 700;
  padding: 0.95rem 1.1rem;
}

.abf-scholarship-section .wp-block-details[open] summary {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--mulberry);
}

.abf-scholarship-section .wp-block-details > :not(summary) {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

.abf-scholarship-section .wp-block-details > :last-child {
  margin-bottom: 1.1rem;
}

.abf-subsection-heading { margin-top: 3rem; }

.abf-special-card {
  background-color: var(--wp--preset--color--off-white);
  border-top: 4px solid var(--wp--preset--color--goldenrod);
  margin-top: 3rem;
  padding: 1.75rem 2rem;
}

.abf-special-card > :last-child { margin-bottom: 0; }

.abf-apply-panel {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  margin: 1rem 0 0;
  padding: 3rem;
}

.abf-apply-panel .abf-section-kicker { color: var(--wp--preset--color--goldenrod); }
.abf-apply-panel h2,
.abf-apply-panel .abf-section-intro { color: var(--wp--preset--color--off-white); }
.abf-apply-panel .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--off-white);
}
.abf-apply-panel .wp-block-button.is-style-outline .wp-block-button__link:hover,
.abf-apply-panel .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--off-white);
  border-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--deep-teal);
}
.abf-apply-panel a { color: var(--wp--preset--color--goldenrod); }
.abf-apply-panel a:hover,
.abf-apply-panel a:focus { color: var(--wp--preset--color--off-white); }
.abf-apply-help { margin-bottom: 0; }

.abf-approved-schools-list {
  columns: 2;
  column-gap: 3rem;
  margin-top: 1.75rem;
}

.abf-approved-schools-list li {
  break-inside: avoid;
  margin-bottom: 0.65rem;
}

.abf-contact-grid { gap: 1rem !important; }

.abf-contact-grid > .wp-block-column {
  background-color: var(--wp--preset--color--off-white);
  border-top: 4px solid var(--wp--preset--color--bright-teal);
  padding: 1.4rem 1.35rem;
}

.abf-contact-grid h3 { margin-bottom: 0.55rem; }
.abf-contact-grid p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .abf-scholarship-hero { padding: 2.25rem; }
  .abf-section-tinted { padding-left: 2.5rem; padding-right: 2.5rem; }
  .abf-process { flex-wrap: wrap !important; }
  .abf-process > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; }
}

@media (max-width: 781px) {
  .abf-scholarship-hero { padding: 1.75rem 1.35rem; }
  .abf-scholarship-hero h1 { font-size: 2.35rem; }
  .abf-scholarship-lead { font-size: 1.25rem; }
  .abf-scholarship-hero .wp-block-button__link {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.85rem 1rem;
    white-space: nowrap;
  }
  .abf-scholarship-hero-photo img { min-height: 0; max-height: 360px; }
  .abf-scholarship-facts { gap: 0.75rem; }
  .abf-page-nav a { display: inline-block; margin: 0.35rem 0.8rem 0.2rem 0; }
  .abf-scholarship-section { padding: 2.75rem 0; }
  .abf-section-tinted { padding: 2.5rem 1.25rem; }
  .abf-help-photo img { margin: 0 auto; width: 132px; }
  .abf-help-card { text-align: center; }
  .abf-process > .wp-block-column { flex-basis: 100% !important; }
  .abf-approved-schools-list { columns: 1; }
  .abf-apply-panel { padding: 2.25rem 1.35rem; }
}

/* ---------------------------------------------------------------------------
   GLOBAL SCHOLARSHIP HUB — country-routed application journey, 2026-08-26.
   The country question is the primary decision. The directory beneath it is
   both a scan-friendly alternative and a complete no-JavaScript fallback.
   --------------------------------------------------------------------------- */
body:not(.home) .site-main > article .entry-content > .abf-global-scholarships-hub {
  width: auto;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.abf-global-scholarships-hub {
  color: var(--wp--preset--color--deep-teal);
  padding-bottom: 1rem;
}

.abf-global-hub-intro {
  max-width: 820px;
  margin-bottom: 2rem;
}

.abf-global-hub-intro h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 0.85rem;
}

.abf-global-hub-lead {
  font-family: var(--wp--preset--font-family--goudy);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.55;
  max-width: 42em;
}

.abf-country-router {
  margin: 0 0 4.5rem;
}

.abf-country-router-form {
  background-color: var(--wp--preset--color--deep-teal);
  border-top: 5px solid var(--wp--preset--color--goldenrod);
  color: var(--wp--preset--color--off-white);
  margin: 0;
  padding: 2rem 2.25rem 2.25rem;
}

.abf-country-router-form > label {
  color: var(--wp--preset--color--off-white);
  display: block;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}

.abf-country-router-hint {
  color: rgba(255, 253, 235, 0.86);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  max-width: 58em;
}

.abf-country-router-controls {
  align-items: stretch;
  display: flex;
  gap: 0.75rem;
}

.abf-country-router-controls select {
  appearance: none;
  background-color: #ffffff;
  background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--deep-teal) 50%),
    linear-gradient(135deg, var(--wp--preset--color--deep-teal) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: 2px solid #ffffff;
  border-radius: 2px;
  color: var(--wp--preset--color--deep-teal);
  flex: 1 1 460px;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 1rem;
  min-height: 54px;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
}

.abf-country-router-controls button {
  background-color: var(--wp--preset--color--goldenrod);
  border: 2px solid var(--wp--preset--color--goldenrod);
  border-radius: 2px;
  color: var(--wp--preset--color--deep-teal);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  min-height: 54px;
  padding: 0.8rem 1.35rem;
  text-transform: uppercase;
}

.abf-country-router-controls button:hover,
.abf-country-router-controls button:focus {
  background-color: var(--wp--preset--color--off-white);
  border-color: var(--wp--preset--color--off-white);
}

.abf-country-router-controls select:focus,
.abf-country-router-controls button:focus {
  outline: 3px solid var(--wp--preset--color--pink);
  outline-offset: 3px;
}

.abf-country-help-card {
  background-color: var(--abf-surface-raised);
  border-left: 5px solid var(--wp--preset--color--goldenrod);
  margin: 0 0 1rem;
  padding: 1.75rem 2rem;
}

.abf-country-help-card .wp-block-columns,
.abf-country-help-card p:last-child {
  margin-bottom: 0;
}

.abf-country-help-card h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0.65rem;
}

.abf-country-help-card .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--deep-teal);
}

.abf-country-help-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.abf-country-help-card .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
}

@media (max-width: 781px) {
  .abf-global-hub-intro { margin-bottom: 1.5rem; }
  .abf-country-router { margin-bottom: 3.25rem; }
  .abf-country-router-form { padding: 1.5rem 1.25rem; }
  .abf-country-router-controls { flex-direction: column; }
  .abf-country-router-controls select { flex-basis: auto; width: 100%; }
  .abf-country-router-controls button { width: 100%; }
  .abf-country-help-card { padding: 1.5rem 1.25rem; }
  .abf-country-help-card .wp-block-buttons { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   HOMEPAGE TYPE SCALE (ABF review notes, 2026-09-23: "Fonts similar size,
   and more harmoniously blend. There are too many different sizes and
   fonts.")
   The homepage measured nine sizes from 13px to 64px, and its "large"
   paragraphs rendered at 34px, bigger than the section headings. That came
   from WordPress's own size presets shadowing this theme's (fixed with
   defaultFontSizes:false in theme.json). The page now uses five steps:
     36px  H1 and the KPI figures
     24px  section headings (H2)
     20px  lead text: donor message, mission, student quote
     17px  body, buttons, card and step titles (H3)
     13px  labels, captions, citations
   Family roles stay fixed: Sorts Mill Goudy for headlines and reading text,
   Figtree for headings-as-labels, buttons and figures.
   --------------------------------------------------------------------------- */
body.home .entry-content h1,
body.home .abf-stat-number {
  font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.25rem);
}
body.home .entry-content h1 { line-height: 1.15; }
body.home .abf-stat-number { letter-spacing: -0.02em; }

body.home .entry-content h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.25;
}

/* Top-align the KPI cells: centering let a two-line label ("schools in 33
   states") lift its figure out of line with the figure beside it in the
   two-column phone layout. */
body.home .abf-stat { justify-content: flex-start; min-height: 0; }

body.home .entry-content h3 { font-size: 1.0625rem; line-height: 1.35; }

body.home .entry-content .abf-lead,
body.home .abf-story-gradient .abf-pullquote p {
  font-size: 1.25rem;
  line-height: 1.5;
}

body.home .abf-stat-label,
body.home .abf-stats-title,
body.home .entry-content .wp-element-caption,
body.home .abf-story-gradient .abf-pullquote cite {
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   INTERIOR TYPE SCALE (2026-09-24): the homepage steps above, site-wide.
   Interior pages still had GeneratePress's defaults on phones and desktops
   alike: 42px titles and 35px / 29px all-caps H2 / H3, so legacy headings
   wrapped four and five lines deep on a 390px screen. :where() keeps these at
   element specificity: they beat GeneratePress's bare h1/h2/h3 rules, but any
   component's own heading size (heroes, cards, panels) still wins.
   --------------------------------------------------------------------------- */
h1.entry-title,
:where(.entry-content) h1 {
  font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.25rem);
  line-height: 1.15;
}
:where(.entry-content) h2 { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.25; }
:where(.entry-content) h3 { font-size: 1.0625rem; line-height: 1.35; }
:where(.entry-content) h4 { font-size: 0.9375rem; line-height: 1.4; }

/* Single posts: GeneratePress shows the featured image at full column width,
   which made portrait headshots about 900px tall above the title. Cap the
   height and keep the whole picture: report covers and posters carry text, so
   no cropping. (inc/featured-image.php drops it when the body repeats it.) */
.page-header-image-single img {
  width: auto;
  max-height: 28rem;
}

/* ---------------------------------------------------------------------------
   NEWS LISTINGS (blog page, categories, tags, dates, search), 2026-09-24.
   GeneratePress stacked title, full-width image and excerpt, so ten posts
   made a 15,500px page. Now one row per post: square thumbnail on the left,
   title, date and excerpt beside it; on phones a small thumbnail sits next to
   the title with the excerpt below. Thumbnails crop to a square, favoring the
   upper middle where faces sit.
   --------------------------------------------------------------------------- */
:is(.blog, .archive, .search) .site-main {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
:is(.blog, .archive, .search) .site-main > article {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 55, 70, 0.12);
}
:is(.blog, .archive, .search) .site-main > article .inside-article {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas: "image header" "image summary" "image footer";
  column-gap: 1.75rem;
  align-items: start;
  padding-left: 0;
  padding-right: 0;
}
:is(.blog, .archive, .search) .site-main > article:not(.has-post-thumbnail) .inside-article {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "summary" "footer";
}
:is(.blog, .archive, .search) .site-main > article .post-image {
  grid-area: image;
  margin: 0;
}
:is(.blog, .archive, .search) .site-main > article .post-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 25%;
}
/* body: matches the reading-track rule's specificity; its auto side margins
   shrank short titles and centered them inside the grid cell. */
body:is(.blog, .archive, .search) .site-main > article .entry-header {
  grid-area: header;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
:is(.blog, .archive, .search) .site-main > article .entry-summary { grid-area: summary; margin-top: 0.5rem; }
:is(.blog, .archive, .search) .site-main > article footer.entry-meta { grid-area: footer; }
:is(.blog, .archive, .search) .entry-summary p:last-child { margin-bottom: 0; }
:is(.blog, .archive, .search) h2.entry-title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
}
:is(.blog, .archive, .search) .page-header { margin-bottom: 0.5rem; }
:is(.blog, .archive, .search) .page-header .page-title {
  font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.25rem);
}

@media (max-width: 600px) {
  :is(.blog, .archive, .search) .site-main > article .inside-article {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-areas: "image header" "summary summary" "footer footer";
    column-gap: 1rem;
  }
}

/* "2025 at a glance": dates the KPIs as annual figures now that the
   all-time totals are gone. Styled as a stat label. */
.abf-stats-title {
  font-family: var(--wp--preset--font-family--brand-sans);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wp--preset--color--deep-teal);
  margin: 0 0 1.25rem;
}
/* The title links to the 2025 Impact Report, the source of the figures. */
.abf-stats-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.abf-stats-title a:hover,
.abf-stats-title a:focus {
  color: var(--wp--preset--color--mulberry);
}

/* Photo captions (review notes: "every picture should have a caption if it's
   not clear what it is from the context"). The card photo bleeds to the card
   edges, so its caption takes the card's text inset instead. */
.abf-card .abf-card-img .wp-element-caption {
  margin: 0.5rem 0 0;
  padding: 0 1.5rem;
}
.abf-hero-img .wp-element-caption { margin-top: 0.5rem; }
.home .entry-content .wp-element-caption {
  color: var(--wp--preset--color--deep-teal);
  opacity: 0.85;
  line-height: 1.4;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   LEGACY CONTENT COMPATIBILITY (F007 buildout, 2026-09-24)
   Older pages and posts were written for the previous Bootstrap 3 theme. Their
   markup survives in the content (measured in published items: .row / .col-*
   in 16, .btn in 9, .img-circle in 10, .well and .lead in a few), so these
   rules give it the new brand look instead of unstyled fallbacks. The grid is
   a 12-column CSS grid with Bootstrap's breakpoints (sm 768, md 992).
   --------------------------------------------------------------------------- */
.entry-content .row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 1.5rem;
  margin-bottom: 1.5em;
}
.entry-content > .row { max-width: 920px; }
/* Anything in a row that is not a column spans the full width. Legacy HTML
   has unclosed divs, so browsers nest later .row blocks inside earlier ones;
   auto-placed, those landed in single 1/12 cells and overlapped. */
.entry-content .row > * { grid-column: 1 / -1; min-width: 0; }
.entry-content .row > [class*="col-"] { grid-column: span 12; }
.entry-content .row > .col-xs-3 { grid-column: span 3; }
.entry-content .row > .col-xs-4 { grid-column: span 4; }
.entry-content .row > .col-xs-6 { grid-column: span 6; }
@media (min-width: 768px) {
  .entry-content .row > .col-sm-3 { grid-column: span 3; }
  .entry-content .row > .col-sm-4 { grid-column: span 4; }
  .entry-content .row > .col-sm-6 { grid-column: span 6; }
  .entry-content .row > .col-sm-8 { grid-column: span 8; }
}
@media (min-width: 992px) {
  .entry-content .row > .col-md-2 { grid-column: span 2; }
  .entry-content .row > .col-md-3 { grid-column: span 3; }
  .entry-content .row > .col-md-4 { grid-column: span 4; }
  .entry-content .row > .col-md-5 { grid-column: span 5; }
  .entry-content .row > .col-md-6 { grid-column: span 6; }
  .entry-content .row > .col-md-7 { grid-column: span 7; }
  .entry-content .row > .col-md-8 { grid-column: span 8; }
  .entry-content .row > .col-md-9 { grid-column: span 9; }
  .entry-content .row > .col-md-10 { grid-column: span 10; }
  .entry-content .row > .col-md-12 { grid-column: span 12; }
}
/* Legacy inline padding (style="padding: 2em") was sized for full-width
   Bootstrap rows; inside the reading column it only wastes space. */
.entry-content .row > [class*="col-"][style*="padding"] { padding: 0 !important; }

.entry-content img.img-circle { border-radius: 50%; }
.entry-content .lead { font-size: 1.25rem; line-height: 1.5; }
.entry-content .well {
  background-color: var(--abf-surface-raised);
  border: 1px solid rgba(0, 55, 70, 0.12);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5em;
}

/* Bootstrap buttons, drawn like the block-editor buttons. */
.entry-content a.btn {
  display: inline-block;
  background-color: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--off-white);
  border: 2px solid var(--wp--preset--color--deep-teal);
  border-radius: 999px;
  padding: 0.7em 1.6em;
  font-family: var(--wp--preset--font-family--brand-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
}
.entry-content a.btn:hover,
.entry-content a.btn:focus {
  background-color: var(--wp--preset--color--mulberry);
  border-color: var(--wp--preset--color--mulberry);
  color: var(--wp--preset--color--off-white);
}
.entry-content a.btn-danger { background-color: var(--wp--preset--color--mulberry); border-color: var(--wp--preset--color--mulberry); }
.entry-content a.btn-warning,
.entry-content a.btn-info { background-color: transparent; color: var(--wp--preset--color--deep-teal); }
.entry-content a.btn-lg,
.entry-content a.btn-large { font-size: 1.05rem; padding: 0.85em 2em; }
.entry-content a.btn-block { display: block; width: 100%; }