/*
 * Bands For Heroes – Custom CSS
 * Mobile-first, Astra-compatible, Gutenberg-friendly.
 * Apply utility classes via the Gutenberg "Additional CSS Class" field.
 *
 * 2026-08-07: a full "Field & Flag" redesign was explored, then rolled back
 * per owner request — but four things from that exploration were kept
 * permanently: the Fraunces/Archivo type system, the button style (content
 * buttons AND the header's primary-menu buttons), the primary-menu gold
 * underline hover, the card ("info box") redesign, and the scroll-reveal
 * entrance-animation system. Everything else (hero treatment, divider style,
 * testimonial box, FAQ marker, footer) is back to the original style.
 *
 * Brand Palette
 *   Navy:     #1a3a5c   (primary)
 *   Gold:     #c8922a   (accent / CTA)
 *   Cream:    #f7f5f1   (light section bg)
 *   White:    #ffffff
 *   Text:     #1f1f1f
 *   Muted:    #4d4d4d
 *   Border:   #dedad4
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bfh-navy:        #1a3a5c;
  --bfh-navy-dark:   #102840;
  --bfh-navy-mid:    #234d73;
  --bfh-gold:        #c8922a;
  --bfh-gold-hover:  #b07d22;
  --bfh-gold-light:  #f0e0bc;
  --bfh-cream:       #f7f5f1;
  --bfh-white:       #ffffff;
  --bfh-text:        #1f1f1f;
  --bfh-muted:       #4d4d4d;
  --bfh-border:      #dedad4;
  --bfh-shadow:      0 14px 30px rgba(16,40,64,0.16);
  --bfh-radius:      3px;
  --bfh-radius-lg:   6px;

  /* Spacing tokens */
  --bfh-pad-sm:  2.5rem;
  --bfh-pad-md:  4rem;
  --bfh-pad-lg:  6rem;

  /* Content widths */
  --bfh-max:     1160px;
  --bfh-prose:   780px;
  --bfh-narrow:  640px;

  /* Typography */
  --bfh-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --bfh-font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Pre-redesign system-font stack. Kept ONLY for the quote paragraph, which
     the owner specifically wants left in the old font while everything else
     sitewide uses the new Fraunces/Archivo system. */
  --bfh-font-legacy:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bfh-mono:         "SFMono-Regular", Consolas, monospace;

  /* Motion */
  --bfh-ease:        cubic-bezier(.16,.84,.44,1);
  --bfh-motion-slow: 0.7s;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BASE OVERRIDES (Astra compatibility)
   ═══════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--bfh-font-body);
  color: var(--bfh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-content {
  padding-top: 0;
}

.ast-page-title-bar {
  display: none;
}

.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width:    100vw;
  width:        100vw;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bfh-font-display);
  color: var(--bfh-navy);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; }

p {
  line-height: 1.72;
  font-size: 1.05rem;
  color: var(--bfh-text);
  text-wrap: pretty;
}

a {
  color: var(--bfh-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--bfh-gold); }

.bfh-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  color: inherit;
  max-width: var(--bfh-prose);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-image figcaption,
.wp-element-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--bfh-muted);
  text-align: center;
}
.bfh-bg-navy .wp-block-image figcaption,
.bfh-bg-navy-dark .wp-block-image figcaption {
  color: rgba(255,255,255,0.65);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SECTION / LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

.bfh-section    { padding-top: var(--bfh-pad-lg) !important; padding-bottom: var(--bfh-pad-lg) !important; }
.bfh-section-sm { padding-top: var(--bfh-pad-sm) !important; padding-bottom: var(--bfh-pad-sm) !important; }

.bfh-hero {
  padding-top:    var(--bfh-pad-lg) !important;
  padding-bottom: var(--bfh-pad-lg) !important;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bfh-bg-navy      { background-color: var(--bfh-navy)      !important; }
.bfh-bg-navy-dark { background-color: var(--bfh-navy-dark) !important; }
.bfh-bg-gold      { background-color: var(--bfh-gold)      !important; }
.bfh-bg-cream     { background-color: var(--bfh-cream)     !important; }
.bfh-bg-white     { background-color: var(--bfh-white)     !important; }

.bfh-bg-navy,
.bfh-bg-navy-dark { color: #ffffff; }

.bfh-bg-navy h1, .bfh-bg-navy h2, .bfh-bg-navy h3, .bfh-bg-navy h4,
.bfh-bg-navy p,  .bfh-bg-navy li, .bfh-bg-navy a,
.bfh-bg-navy-dark h1, .bfh-bg-navy-dark h2, .bfh-bg-navy-dark h3, .bfh-bg-navy-dark h4,
.bfh-bg-navy-dark p,  .bfh-bg-navy-dark li, .bfh-bg-navy-dark a {
  color: #ffffff;
}
.bfh-bg-navy a:hover, .bfh-bg-navy-dark a:hover { color: var(--bfh-gold-light); }

.bfh-bg-gold h1, .bfh-bg-gold h2, .bfh-bg-gold h3,
.bfh-bg-gold p,  .bfh-bg-gold a { color: var(--bfh-navy-dark) !important; }

.bfh-section-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bfh-gold);
  margin-bottom: 0.5rem;
}
.bfh-bg-navy .bfh-section-label,
.bfh-bg-navy-dark .bfh-section-label { color: var(--bfh-gold-light); }

/* Boxed callout - for a short standalone statement (e.g. the Donate page's
   Financial Transparency note) that would otherwise float as orphaned text
   in a large single-color section with nothing to visually anchor it.
   White-on-cream matches the card treatment already used elsewhere on
   cream sections. */
.bfh-callout {
  background: var(--bfh-white);
  border: 1px solid rgba(26,58,92,0.16);
  border-radius: var(--bfh-radius-lg);
  padding: 2.25rem 2.5rem;
  /* Widened from 620px - at the narrower width the Financial Transparency
     paragraph wrapped to an awkward short widow line ("see it.") on its
     own. This matches --bfh-prose (780px), the same readable-width value
     already used for body text elsewhere on the site. */
  max-width: 780px;
  margin: 0 auto;
}
.bfh-callout .bfh-section-label { margin-bottom: 0.75rem; }
.bfh-callout p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   5. CARDS ("info boxes") — kept from the redesign exploration
   ═══════════════════════════════════════════════════════════════════════ */

.bfh-card {
  background: var(--bfh-white);
  border: 1px solid rgba(26,58,92,0.16);
  border-radius: var(--bfh-radius-lg);
  padding: 2.1rem 1.75rem;
  height: 100%;
  /* Baseline height so cards stay uniform even when one card's text wraps
     an extra line and its row-mates don't - matters most when a themed
     group of cards spans more than one wp:columns row (e.g. two rows of
     three), since flexbox only stretches cards to match within their own
     row, not across separate rows. */
  min-height: 250px;
  position: relative;
  /*
   * Use filter in the transition — NOT box-shadow.
   * filter:drop-shadow() is rendered outside the browser's overflow stack,
   * so it cannot be clipped by overflow:hidden on any parent container.
   * This is the correct fix for Gutenberg/Astra column layout clipping.
   */
  transition: transform 0.25s var(--bfh-ease), filter 0.25s var(--bfh-ease), border-color 0.25s ease;
  will-change: transform, filter;
}

.bfh-card:hover,
.bfh-card:focus-within {
  transform: translateY(-4px);
  filter: drop-shadow(0 14px 22px rgba(16,40,64,0.16));
  border-color: var(--bfh-gold);
}

/* Small roman-numeral marker, auto-numbered across a whole themed section
   rather than per individual columns row — the counter resets once on the
   enclosing .bfh-section, so a section built from two stacked rows of three
   cards numbers I-VI instead of restarting at I-III on the second row. */
.bfh-section { counter-reset: bfh-card; }
.bfh-card-cols .bfh-card::before {
  counter-increment: bfh-card;
  content: counter(bfh-card, upper-roman);
  display: block;
  font-family: var(--bfh-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bfh-gold-hover);
  margin-bottom: 0.85rem;
}

.bfh-card h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.3rem;
}
/* Gold foil-line hover underline — draws in under the card heading. */
.bfh-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--bfh-gold);
  transition: width 0.35s var(--bfh-ease);
}
.bfh-card:hover h3::after,
.bfh-card:focus-within h3::after { width: 100%; }

.bfh-card p {
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--bfh-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   6. BUTTONS — kept from the redesign exploration
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-button__link,
.wp-element-button {
  border-radius: var(--bfh-radius) !important;
  font-family: var(--bfh-font-body);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, transform 0.12s ease, filter 0.18s ease, border-color 0.18s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--bfh-gold) !important;
  color: #ffffff !important;
  border: 1px solid var(--bfh-gold) !important;
  padding: 0.9rem 2.1rem !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
  background-color: var(--bfh-gold-hover) !important;
  border-color: var(--bfh-gold-hover) !important;
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 14px rgba(200,146,42,0.35));
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  padding: 0.9rem 2.1rem !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  border-color: #ffffff !important;
  background-color: rgba(255,255,255,0.1) !important;
}

/*
 * SAFEGUARD: is-style-outline is designed for navy/dark backgrounds
 * (white border + white text). Placed on a white or cream section it
 * becomes invisible - white text and a near-invisible border on a light
 * background. Auto-correct to the navy outline variant whenever an
 * outline button lands on a light section, so this can't go invisible
 * again regardless of which page/section it's used on.
 */
.bfh-bg-white .wp-block-button.is-style-outline .wp-block-button__link,
.bfh-bg-cream .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--bfh-navy) !important;
  border-color: var(--bfh-navy) !important;
}
.bfh-bg-white .wp-block-button.is-style-outline .wp-block-button__link:hover,
.bfh-bg-cream .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--bfh-navy) !important;
  color: #ffffff !important;
}

/*
 * Header "Donate" button (button-2) was rendering taller/wider than "Sign
 * up" (button-1) - Astra's builder saved different padding for the two
 * even though both use the same "default" size (10/15 vs 15/30). Force
 * an exact match rather than fighting the builder's internal size preset.
 */
.ast-header-button-2 .ast-custom-button {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Header builder buttons should never show the site's default link
   underline (a.text-decoration:underline from section 3 applies to them
   since they're plain <a> tags). Button-1 had a one-off Customizer "Additional
   CSS" rule for this that never covered button-2 - handle both here instead. */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button {
  text-decoration: none !important;
}

/* Primary-menu buttons ("Sign up" / "Donate") get the same button skin as
   content buttons — uppercase, tracked, gold, subtle lift on hover — so the
   header's CTAs match the buttons used throughout the page. */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button {
  font-family: var(--bfh-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--bfh-radius) !important;
  transition: transform 0.12s ease, filter 0.18s ease !important;
}
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-2 .ast-custom-button:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 10px rgba(200,146,42,0.3));
}

/* ═══════════════════════════════════════════════════════════════════════
   7. HORIZONTAL SEPARATOR
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-separator {
  border-color: var(--bfh-border);
  opacity: 1;
  max-width: 80px;
  border-top-width: 3px;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
.bfh-bg-navy .wp-block-separator,
.bfh-bg-navy-dark .wp-block-separator { border-color: rgba(255,255,255,0.2); }

.bfh-separator-gold.wp-block-separator {
  border-color: var(--bfh-gold);
  max-width: 60px;
  border-top-width: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. QUOTE / TESTIMONIAL
   Box style is back to original. Quote body text is back to the original
   (pre-redesign) font. The citation/attribution treatment is kept from the
   redesign exploration per owner request.
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-quote {
  border-left: 4px solid var(--bfh-gold);
  padding-left: 1.5rem;
  margin-left: 0;
}
.wp-block-quote p {
  font-family: var(--bfh-font-legacy);
  font-size: 1.2rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--bfh-navy);
}
.wp-block-quote cite,
.wp-block-quote footer {
  font-size: 0.9rem;
  color: var(--bfh-muted);
  font-style: normal;
}

.bfh-testimonial {
  max-width: var(--bfh-prose);
  margin: 0 auto;
  text-align: center;
  border-left: none !important;
  padding-left: 0 !important;
}
.bfh-testimonial p {
  font-family: var(--bfh-font-legacy);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  color: var(--bfh-navy);
}
.bfh-testimonial::before {
  content: "\201C";
  display: block;
  font-size: 5rem;
  line-height: 1;
  color: var(--bfh-gold);
  margin-bottom: -0.5rem;
  font-family: Georgia, serif;
}

/*
 * Quote attribution — kept from the redesign exploration per owner request
 * (2026-08-07): uppercase, wider tracking, new body font. Applies to the
 * native Gutenberg citation (<cite>) on every quote block sitewide.
 */
.wp-block-quote cite,
.wp-block-quote footer {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--bfh-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bfh-gold-hover);
}
.bfh-testimonial cite,
.bfh-testimonial footer {
  color: var(--bfh-gold-hover);
}
.bfh-bg-navy .wp-block-quote cite,
.bfh-bg-navy .wp-block-quote footer,
.bfh-bg-navy-dark .wp-block-quote cite,
.bfh-bg-navy-dark .wp-block-quote footer {
  color: var(--bfh-gold-light);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. FAQ / DETAILS BLOCK
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-details {
  border: 1px solid var(--bfh-border);
  border-radius: var(--bfh-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--bfh-white);
}
.wp-block-details summary {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bfh-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bfh-gold);
  flex-shrink: 0;
  margin-left: 1rem;
}
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details p {
  margin-top: 0.75rem;
  margin-bottom: 0;
  color: var(--bfh-muted);
  font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. HEADER (Astra overrides)
   ═══════════════════════════════════════════════════════════════════════ */

.ast-site-name-wrap a,
.site-title a {
  font-family: var(--bfh-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--bfh-navy) !important;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Primary-menu hover — kept from the redesign exploration: a gold underline
   that draws in under the nav item, instead of only a color change. */
.main-header-menu .menu-item a {
  position: relative;
  font-family: var(--bfh-font-body);
  font-weight: 600;
  color: var(--bfh-navy);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.main-header-menu .menu-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--bfh-gold);
  transition: width 0.3s var(--bfh-ease);
}
.main-header-menu .menu-item a:hover,
.main-header-menu .menu-item.current-menu-item > a { color: var(--bfh-gold) !important; }
.main-header-menu .menu-item a:hover::after,
.main-header-menu .menu-item.current-menu-item > a::after { width: 100%; }

.ast-header-sticked,
.ast-primary-sticky-header { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

/* Sticky-header logo: Astra only ships a sizing rule for the regular logo
   (.custom-logo-link img, 118px) - there's no equivalent control for the
   sticky variant, so it was rendering tiny inside the compact sticky bar.
   Size it explicitly against the bar's own height instead of a fixed width,
   so it scales sensibly if the sticky bar height ever changes. */
.sticky-custom-logo img {
  width: auto !important;
  max-width: none !important;
  height: 48px !important;
  max-height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  background-color: var(--bfh-navy-dark);
  color: rgba(255,255,255,0.75);
  padding-top: 3.5rem;
  padding-bottom: 0;
}
.site-footer a { color: rgba(255,255,255,0.75); text-decoration: none; }
.site-footer a:hover { color: var(--bfh-gold-light); }
.site-footer .ast-footer-copyright { font-size: 0.88rem; }

/* Footer content grid: brand + link columns + contact, above a legal bar */
.bfh-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  /* Two rounds of manually guessing a margin/line-height offset to visually
     match the 1.2rem brand heading and the 0.75rem column labels both
     missed - different font-size text can't be aligned by eyeballing a
     margin number. This tells the browser to align every column to the
     actual text baseline of its first line, which is exact by construction
     regardless of font-size, and since every title now shares the same
     margin-bottom, the row below (About / Donate / info@...) shifts down
     with its header and lands aligned too. */
  align-items: baseline;
  text-align: left;
  max-width: var(--bfh-max);
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
  padding-bottom: 2.5rem;
}
.bfh-footer-brand h3 {
  font-family: var(--bfh-font-display);
  color: #ffffff;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}
.bfh-footer-brand p {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30ch;
}
.bfh-footer-col-title {
  display: block;
  /* This is a <p>, so without an explicit line-height it was inheriting
     the global p{line-height:1.72} rule - a much taller box than the
     heading's tight line-height, which silently added extra space on
     top of the margin below and threw off any margin-only comparison to
     .bfh-footer-brand h3. Match the heading's tight line-height so
     margin-bottom alone (same value as the brand h3) produces the same
     gap. */
  line-height: 1.18;
  margin: 0 0 0.6rem !important;
  color: rgba(200,220,245,0.75);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Explore / Support Us headings use the same gold as buttons. Contact
   uses a pale blue (base .bfh-footer-col-title color above) per request. */
.bfh-footer-explore .bfh-footer-col-title,
.bfh-footer-support .bfh-footer-col-title {
  color: var(--bfh-gold);
}
.bfh-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.bfh-footer-links a {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
}
.bfh-footer-links a:hover { color: var(--bfh-gold-light); }
/* :not() keeps this from also matching .bfh-footer-col-title (also a <p>
   inside this column), which was overriding its margin and making the
   Contact heading's spacing inconsistent with Explore/Support Us. */
.bfh-footer-contact p:not(.bfh-footer-col-title) {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.7rem;
}
.bfh-footer-contact a { font-weight: 600; }

.bfh-footer-legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: var(--bfh-max);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.5rem clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.bfh-footer-legal p {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  line-height: 1.7;
  margin: 0 0 0.3rem;
}
.bfh-footer-legal a { color: rgba(255,255,255,0.6); }

@media (max-width: 768px) {
  .bfh-footer-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  .bfh-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .bfh-footer-grid { grid-template-columns: 1fr; }
}

.footer-nav-online .menu,
.footer-nav-online .menu-item { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.footer-nav-online .menu-item a { color: rgba(255,255,255,0.7); font-size: 0.9rem; padding: 0.1rem 0.5rem; }
.footer-nav-online .menu-item a:hover { color: var(--bfh-gold-light); }

/* ═══════════════════════════════════════════════════════════════════════
   13. COLUMNS GRID HELPERS
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-columns { gap: 1.75rem; }

/*
 * KEY FIX FOR CARD HOVER:
 * Without overflow:visible on the column and columns wrapper, the parent
 * container clips the translateY lift and the expanded box-shadow, making
 * the hover effect invisible even though it is technically happening.
 */
.bfh-card-cols .wp-block-column {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.bfh-card-cols.wp-block-columns {
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. CTA STRIP
   ═══════════════════════════════════════════════════════════════════════ */

.bfh-cta-strip {
  text-align: center;
  padding-top: var(--bfh-pad-md) !important;
  padding-bottom: var(--bfh-pad-md) !important;
}
.bfh-cta-strip h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.bfh-cta-strip p  { max-width: 640px; margin: 0 auto 1.75rem; }

/* ═══════════════════════════════════════════════════════════════════════
   15. SCROLL-REVEAL MOTION — kept from the redesign exploration
   Progressive enhancement: .bfh-reveal elements are fully visible by
   default (works with no JS / non-JS crawlers). The paired footer script
   (bfh_scroll_reveal_script in functions.php) adds "bfh-js-reveal" to
   <html> only when JS is present AND the visitor has not requested
   reduced motion — only then do elements hide before animating in via
   IntersectionObserver. This means reduced-motion users never have to
   scroll to "unlock" content that never plays an animation for them.
   ═══════════════════════════════════════════════════════════════════════ */

.bfh-reveal { opacity: 1; transform: none; }

.bfh-js-reveal .bfh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--bfh-motion-slow) var(--bfh-ease),
              transform var(--bfh-motion-slow) var(--bfh-ease);
}
.bfh-js-reveal .bfh-reveal.bfh-in-view {
  opacity: 1;
  transform: none;
}

/* Stagger cards left-to-right within a row as they reveal. */
.bfh-card-cols .wp-block-column:nth-child(1) .bfh-reveal { transition-delay: 0s; }
.bfh-card-cols .wp-block-column:nth-child(2) .bfh-reveal { transition-delay: 0.1s; }
.bfh-card-cols .wp-block-column:nth-child(3) .bfh-reveal { transition-delay: 0.2s; }
.bfh-card-cols .wp-block-column:nth-child(4) .bfh-reveal { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════════════════════════════════
   16. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 3px solid var(--bfh-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   17. PRINT
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  .wp-block-buttons, .site-header, .site-footer { display: none; }
  body { color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   18. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --bfh-pad-lg: 4rem;
    --bfh-pad-md: 2.75rem;
    --bfh-pad-sm: 1.75rem;
  }
  .bfh-hero { min-height: 320px; }
  .wp-block-buttons { flex-direction: column; align-items: center; }
  .wp-block-button { width: 100%; max-width: 320px; }
  .wp-block-button__link { text-align: center; width: 100%; }
  .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap; }
  .bfh-card { padding: 1.5rem 1.25rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.45rem; }
  .bfh-testimonial::before { font-size: 3.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. COVER BLOCK IMAGE FADE-IN
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes bfh-cover-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wp-block-cover img {
  animation: bfh-cover-fade 0.4s ease forwards;
}

/* Align Zeffy shortcode button with plain buttons in the same card row */
.bfh-card-cols .zeffy-button-wrapper {
  margin-top: 0;
}

/* Keep all four card buttons on the same line, whatever their height */
.bfh-card-cols .wp-block-column {
  display: flex;
  flex-direction: column;
}
.bfh-card-cols .wp-block-column > .wp-block-buttons,
.bfh-card-cols .wp-block-column > .zeffy-button-wrapper,
.bfh-card-cols .wp-block-column > .wp-block-shortcode {
  margin-top: auto;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. ZEFFY INLINE EMBED (responsive height)
   Add the CSS class "bfh-donate-embed" to the Shortcode block that holds
   [zeffy-donate fullwidth=true]. Desktop uses a shorter height (the form
   lays out side-by-side); mobile uses a taller one (the form stacks).
   Tune the two pixel values until the "Continue" button sits at the bottom
   with no internal scrollbar and no large empty gap.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   END
   ═══════════════════════════════════════════════════════════════════════ */