/*
Theme Name: YRTX 2026
Theme URI: https://yrtx.gop/
Author: Young Republicans of Texas
Description: Hand-coded classic theme for the Young Republicans of Texas. Replaces the Elementor build. Dark-led navy/red system, Oswald + Archivo + Source Sans 3, single stylesheet, one deferred script. Server-rendered archives with real pagination anchors, breadcrumbs, and BreadcrumbList schema. The chapter custom post type and club-editable fields are deliberately NOT in this release — they belong to the separate multi-club project.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yrtx
Tags: politics, nonprofit, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   Design tokens
   Locked palette + type per .claude/TASKS.md. Do not introduce new hues here
   without updating that file — the brand system is the source of truth.
   ========================================================================== */
:root {
  --navy: #0b1f3a;
  --navy2: #13284a;
  --deep: #07152a;
  --red: #c8102e;   /* solid CTAs only — 5.2:1 on white text (AA) */
  --red2: #e23b3b;  /* borders and accents only — fails AA as a CTA fill */
  --bright: #ff5a5f;
  --canvas: #f5f6f8;
  --ink: #0b1f3a;
  --line: #dfe3e8;
  --muted: #64748b;

  --font-body: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Oswald', var(--font-body);
  --font-heavy: 'Archivo', var(--font-body);

  --wrap: 1160px;
  --gutter: 26px;
}

/* ==========================================================================
   Defensive colour anchors
   Elementor's global kit set `h1 { color: #000 }` and `a { color: #002156 }` on the
   body, which rendered the hero heading black on navy and the nav invisible.
   inc/elementor-compat.php dequeues that stylesheet; these declarations mean any
   future plugin doing the same thing cannot make text unreadable on dark bands.
   ========================================================================== */
.site-header,
.site-header a,
.hero,
.hero h1,
.hero h1.hl,
.post-hero,
.post-hero h1,
.chapter-hero,
.chapter-hero h1,
.who h2.st,
.chapters h2.st,
.site-footer h5 { color: #fff; }

.brand b { color: #fff; }
.links a { color: #cbd5e1; }
.links a:hover,
.links .current-menu-item > a { color: #fff; }

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
}

img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.arch { font-family: var(--font-heavy); }

/* Screen-reader-only. Also used by the skip link before it receives focus, and by the
   honeypot inputs on every public form.

   !important is deliberate and load-bearing here, matching the convention in Bootstrap's
   .sr-only and WordPress core's .screen-reader-text. The form rules below (.lead input,
   .joincard input, .fcontact input, .signup input) are all more specific than a single
   class, so without it they win and stretch the hidden honeypots to width:100%. Measured
   on staging: three absolutely-positioned honeypots at 739px each produced 712px of
   horizontal page overflow. A visually-hidden utility that can be overridden is not
   a utility. */
.sr,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The skip link opts back in when focused. */
.skip-link:focus {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  padding: 12px 18px;
  font-family: var(--font-heavy);
  font-weight: 800;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 14px;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: none;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px); }
.btn.p,
.btn.r2 { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(200, 16, 46, .4); }
.btn.g  { border: 1.5px solid rgba(255, 255, 255, .65); color: #fff; background: rgba(255, 255, 255, .06); }
.btn.dk { background: var(--navy); color: #fff; }
.btn.wt { background: #fff; color: var(--navy); }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.ey {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--red);
  margin-bottom: 10px;
  font-weight: 600;
}

h2.st {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 38px;
  margin: 0 0 16px;
  line-height: 1.02;
}

.body { font-size: 16.5px; line-height: 1.66; color: #475569; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
header.site-header {
  background: rgba(11, 31, 58, .92);
  backdrop-filter: blur(8px);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
  gap: 10px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.brand img { width: 44px; height: 44px; }
.brand b { font-family: var(--font-heavy); font-weight: 900; font-size: 14px; line-height: 1; max-width: 118px; }

.links {
  display: flex;
  gap: 22px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .05em;
  color: #cbd5e1;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}
.links a { color: inherit; text-decoration: none; }
.links a:hover,
.links .current-menu-item > a { color: #fff; }

.actions { display: flex; gap: 9px; align-items: center; }

.pill { font-family: var(--font-heavy); font-weight: 800; font-size: 12.5px; padding: 9px 15px; border-radius: 6px; text-decoration: none; }
.pill.join { border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; }
.pill.don { background: var(--red); color: #fff; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px; height: 38px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 6px;
  cursor: pointer;
  padding: 8px;
}
.menu-btn span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; flex: none; }

.mobile-menu {
  display: none;
  background: var(--deep);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 16px 16px 22px;
}
.mobile-menu.open { display: block; }
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .05em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu ul a {
  color: #e6ecf5;
  text-decoration: none;
  padding: 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: block;
}
.mobile-menu .mm-ctas { display: flex; gap: 10px; margin-top: 16px; }
.mobile-menu .mm-ctas a { flex: 1; text-align: center; }

@media (max-width: 880px) {
  .links { display: none; }
  .pill.join { display: none; }  /* Donate stays visible outside the menu */
  .menu-btn { display: flex; }

  /* Header scaled up on mobile. The previous 44px mark and 12.5px wordmark read as
     undersized against a 390px viewport — the brand is the only identity signal above
     the fold once the desktop nav collapses. */
  .nav { padding: 14px 16px; gap: 12px; }
  .brand { gap: 13px; }
  .brand img { width: 52px; height: 52px; }
  .brand b { font-size: 14px; max-width: 130px; line-height: 1.12; }
  .pill.don { font-size: 13.5px; padding: 11px 18px; }
}
@media (min-width: 881px) { .mobile-menu { display: none !important; } }

/* ==========================================================================
   Hero
   LCP note: the background is a real <img> (.hero-img), not a CSS background,
   so it can be preloaded and served with srcset. Do not revert to background-image.
   ========================================================================== */
.hero { position: relative; overflow: hidden; color: #fff; min-height: 80vh; display: flex; align-items: flex-start; }

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Faces occupy roughly the top third of the source group photo; the default 50% 50%
     centres the crop on the floor and the dot pattern instead. */
  object-position: 50% 34%;
  transform: scale(1.06);
  animation: kb 22s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes kb { to { transform: scale(1.16); } }

.hero-ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 17, 34, .96), rgba(9, 22, 44, .82) 44%, rgba(11, 31, 58, .45)),
    radial-gradient(1200px 500px at 15% 40%, rgba(200, 16, 46, .28), transparent 60%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr .82fr;
  gap: 40px;
  align-items: start;
  /* 34px sat the headline right under the sticky header and the hero read as cramped.
     The 07-25 pass set 34px to kill a gap that existed when this grid was centred; it is
     still top-aligned, so raising the top pad adds breathing room under the header
     without reintroducing that void. Shortening the lead card paid for the extra height. */
  padding-top: 76px;
  padding-bottom: 48px;
}
@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: auto; }
}

/* Showing more of the crowd on phones.
   The source is a 3:2 group photo whose faces span the full width. object-fit: cover into
   a ~0.48-aspect phone viewport takes a narrow vertical slice, which is why only two faces
   were visible. Three changes widen that slice:
     1. Kill the Ken Burns zoom — it magnifies, which is the wrong direction here.
     2. Sit the crop higher still, on the densest row of faces.
     3. Shorten the hero (tighter padding, smaller body copy) so the container is less tall
        relative to its width, which is what actually admits more of the frame.
   A phone cannot show every face at a readable size; this shows a crowd rather than a
   portrait, which is the point. */
@media (max-width: 640px) {
  /* The hero runs ~1,650px tall on a phone because the lead-capture card stacks below the
     copy inside it. Stretching a 3:2 photo over that leaves a 0.23-aspect slot — about 15%
     of the image width, which is why two faces filled the screen.

     So on phones the photo stops filling the hero. It occupies a band at the top at a
     near-landscape aspect (showing most of the crowd) and fades into the navy gradient
     that carries the rest of the section. The overlay still sits above it, so headline
     contrast is unchanged. */
  .hero { background: linear-gradient(180deg, #10254733 0%, var(--navy) 62%), var(--navy); }
  .hero-img {
    transform: none;
    animation: none;
    height: 46vh;
    max-height: 400px;
    min-height: 260px;
    bottom: auto;
    object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero-ov { background: linear-gradient(180deg, rgba(7,17,34,.62) 0%, rgba(11,31,58,.86) 46%, var(--navy) 100%); }
  .hero .wrap { padding-top: 30px; padding-bottom: 34px; gap: 20px; }
  .hero .eyb { margin-bottom: 12px; font-size: 12px; }
  .hbody { font-size: 16.5px; line-height: 1.5; margin-bottom: 20px; }
  .proof { margin-top: 18px; gap: 14px; }
}

.hero .eyb {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  color: #fff;
  opacity: .85;
  margin-bottom: 18px;
}

h1.hl {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 74px;
  line-height: .93;
  margin: 0 0 20px;
  letter-spacing: -.01em;
}
h1.hl .hi {
  background: var(--red);
  padding: 0 12px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The red panel behind "YOUNG." overlapped "FOR TEXAS" on phones — measured at 18.7px.
   Cause: a plain inline background is sized from the font's em box, which for Oswald is
   ~1.57x the font-size (66px at 42px). That is taller than any sane display leading, so
   the panel necessarily intrudes into the line above. Adding leading alone does not fix
   it; the box has to be given its own height.
   inline-block + line-height:1 makes the panel exactly font-size + padding, which then
   fits inside the line spacing. Verify with a client-rect measurement, not by eye — the
   collision is easy to miss at a glance and obvious once you look for it. */
h1.hl .hi {
  display: inline-block;
  line-height: 1;
  padding: 4px 12px 6px;
  vertical-align: baseline;
}

@media (max-width: 920px) {
  h1.hl { font-size: 50px; line-height: 1.24; }
  h1.hl .hi { padding: 3px 10px 5px; }
}
@media (max-width: 400px) {
  h1.hl { font-size: 42px; line-height: 1.26; }
}

.hbody { font-size: 17.5px; line-height: 1.55; color: #dbe3ee; max-width: 54ch; margin: 0 0 26px; }
.hbody b { color: #fff; }

.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.proof {
  margin-top: 22px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  color: #aebbcc;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.proof b { color: #fff; font-family: var(--font-heavy); font-weight: 900; font-size: 16px; }

/* ==========================================================================
   Lead capture card
   ========================================================================== */
.lead {
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  border-radius: 16px;
  padding: 22px 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.lead h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 23px; margin: 0 0 4px; color: var(--navy); }
.lead .s { font-size: 13px; color: var(--muted); margin: 0 0 15px; }
.lead input,
.lead textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 9px;
  font-family: inherit;
}
.lead .two { display: flex; gap: 10px; }
.lead .two > span { width: 50%; }
.lead .fine { font-size: 11.5px; color: var(--muted); text-align: center; margin: 10px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.lead button.btn { width: 100%; }
/* WPForms renders text fields at their "medium" size (~60% of the field), which in these
   narrow white cards reads as a stunted half-width input. Force them to fill the card. */
/* Scoped to the container, not to a hand-maintained list of sections. The previous
   version named only .lead and .joincard, so the FOOTER newsletter input was still
   rendering at WPForms' 60% "medium" cap — measured 182px inside a 303px column, visibly
   narrower than the button beneath it. Any form added later is now covered by default.

   .wpforms-field-hp is excluded deliberately. The honeypot is a real text input inside the
   form, and a width:100% that reaches it is what produced the 712px of horizontal page
   overflow recorded against the .sr utility above. */
.wpforms-container .wpforms-field:not(.wpforms-field-hp) input[type="text"],
.wpforms-container .wpforms-field:not(.wpforms-field-hp) input[type="email"],
.wpforms-container .wpforms-field:not(.wpforms-field-hp) input[type="tel"],
.wpforms-container .wpforms-field:not(.wpforms-field-hp) input[type="url"],
.wpforms-container .wpforms-field:not(.wpforms-field-hp) input[type="number"],
.wpforms-container .wpforms-field:not(.wpforms-field-hp) select,
.wpforms-container .wpforms-field:not(.wpforms-field-hp) textarea { max-width: 100% !important; width: 100%; }

/* Hero message box: two rows, per Andrew. WPForms modern derives a textarea's height
   from the INPUT height, not from anything a theme sets:

     div.wpforms-container-full .wpforms-form textarea.wpforms-field-small
       { height: calc( var(--wpforms-field-size-input-height) * 2.26 ) }

   which is 46 * 2.26 = 104px. Retuning that variable — the integration point used
   everywhere else in this file — is NOT usable here, because the same variable sizes the
   four text inputs stacked above the box; shrinking it would shrink those too. So this is
   the one place that legitimately needs to out-specify WPForms rather than configure it.
   The selector is deliberately one class deeper than theirs (0,4,2 vs 0,3,2), which avoids
   !important. WPForms' own resize:vertical is left alone so anyone who needs more room
   can drag it open. */
.lead div.wpforms-container-full .wpforms-form textarea.wpforms-field-small {
  height: 56px;
  min-height: 56px;
}

/* ------ Compacting the hero card ------
   Measured on the live page, the five-field card ran 772px against a 476px copy column,
   so the form visually outweighed the headline it was meant to support. 225px of that was
   pure inter-field spacing. Two different mechanisms produce it, and they need two
   different fixes:

   1. Field padding. WPForms hardcodes
        .wpforms-container .wpforms-field { padding: 15px 0 }
      at specificity (0,2,0) — exactly TYING this theme's own
        .wpforms-container .wpforms-field { padding: 0 0 14px }
      which then loses on source order, because wpforms-full.min.css is enqueued after
      style.css. That theme rule has therefore never had any effect on modern markup.
      One extra class wins it cleanly.

   2. The gap under each label is NOT a margin WPForms hardcodes — it is
      --wpforms-field-size-input-spacing, so it is set the supported way, as a variable.
      Safe to shrink: it only drives label spacing, divider padding and slider hints,
      never the input height.

   Field height comes down 46 -> 42 via the variable too. The submit button keeps its own
   --wpforms-button-size-height, so it stays a full 46px tap target. */
.lead .wpforms-container {
  --wpforms-field-size-input-spacing: 4px;
  --wpforms-field-size-input-height: 42px;
}
.lead .wpforms-container .wpforms-field { padding: 4px 0; }

.lead h3 { font-size: 21px; }
.lead .s { margin: 0 0 12px; }
.lead { padding: 20px; }

/* ==========================================================================
   About page — leadership 2x2 grid
   The four officers were one vertical column of full-width portraits, which made
   /about-us/ a very long desktop scroll. On desktop they now sit two-up; the portraits
   are normalised to a common 4:3 crop (object-position high, to keep faces) so the cards
   line up cleanly regardless of the source photo's aspect ratio.
   ========================================================================== */
.leader-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; margin: 10px 0 8px; align-items: start; }
.leader figure { margin: 0 0 12px; }
.leader img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; border-radius: 12px; display: block; }
.leader h3 { margin: 0 0 2px; }
.leader h3 + p { margin: 0 0 8px; }
.leader blockquote { margin: 0; }
@media (max-width: 760px) { .leader-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ==========================================================================
   Stats bar
   ========================================================================== */
.stats {
  background: #fff;
  box-shadow: 0 16px 40px rgba(11, 31, 58, .14);
  border-radius: 16px;
  margin: -42px auto 0;
  max-width: 940px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 28px 10px;
  border-top: 4px solid var(--red);
}
.stat { text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border: none; }
.stat b { font-family: var(--font-heavy); font-weight: 900; font-size: 42px; color: var(--navy); display: block; line-height: 1; }
.stat span { font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .12em; color: var(--muted); }

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; margin: -30px 16px 0; padding: 8px 10px; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .stat:last-child { border: none; }
  .stat b { font-size: 32px; }
}

/* ==========================================================================
   Photo strip
   ========================================================================== */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 52px; border-top: 4px solid var(--red); }
.ptile { position: relative; height: 280px; overflow: hidden; }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ptile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, .05), rgba(11, 31, 58, .55));
  mix-blend-mode: multiply;
}
.ptile:hover img { transform: scale(1.08); }
@media (max-width: 820px) { .strip { grid-template-columns: repeat(3, 1fr); } .ptile { height: 200px; } }
@media (max-width: 520px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Press marquee
   ========================================================================== */
.featured { padding: 34px 0 38px; background: #fff; border-bottom: 1px solid var(--line); }
.featured .lab {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 22px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track { display: flex; align-items: center; gap: 64px; width: max-content; animation: scroll 28s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.track img { height: 30px; width: auto; filter: grayscale(.35); opacity: .72; transition: .2s; }
.track img:hover { filter: none; opacity: 1; }

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: 66px 0; }
.light { background: var(--canvas); }
.white { background: #fff; }

.joinlist { background: linear-gradient(155deg, var(--navy2), var(--navy)); color: #fff; }
.joincard {
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 34px;
  max-width: 740px;
  margin: 0 auto;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .28);
}
.joincard h2 { font-family: var(--font-display); text-transform: uppercase; text-align: center; font-size: 30px; margin: 0 0 6px; }
.joincard .s { text-align: center; color: var(--muted); margin: 0 0 20px; }
.joincard .fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .joincard .fields { grid-template-columns: 1fr; } }
.joincard input { padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; width: 100%; }
.joincard button.btn { width: 100%; }

/* TCPA consent — copy is legally verbatim. Style freely; never reword the text. */
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.consent .fine { font-size: 11.5px; color: var(--muted); line-height: 1.5; text-align: left; }
.consent a { color: var(--red); font-weight: 600; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.two-col img { border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 31, 58, .2); width: 100%; height: 380px; object-fit: cover; }

.who { background: linear-gradient(155deg, var(--navy), var(--navy2)); color: #fff; }
.who h2.st { color: #fff; }
.who .body { color: #cbd5e1; }
.who a.link { color: var(--bright); font-weight: 700; }

.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
@media (max-width: 820px) { .res-grid { grid-template-columns: 1fr; } }
.res {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red2);
  border-radius: 10px;
  padding: 18px;
  transition: .15s;
}
.res:hover { box-shadow: 0 10px 26px rgba(11, 31, 58, .12); transform: translateY(-3px); }
.res .d { font-family: var(--font-display); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--muted); margin: 8px 0; }
.res h4 { margin: 0; font-family: var(--font-heavy); font-weight: 800; font-size: 15px; line-height: 1.3; }
.res h4 a { color: inherit; text-decoration: none; }
.res .more { font-size: 13px; color: var(--red); font-weight: 700; text-decoration: none; }
.res-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.chapters { background: linear-gradient(160deg, var(--red), #9c0c25); color: #fff; text-align: center; }
.chapters h2.st { color: #fff; }
.chapters .body { color: #ffdbe0; max-width: 60ch; margin: 0 auto 28px; }
.crests { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 0 auto 30px; max-width: 980px; list-style: none; padding: 0; }
.crest {
  background: #fff;
  border-radius: 50%;
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  padding: 11px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .30);
  transition: transform .15s;
}
.crest:hover { transform: translateY(-5px) scale(1.05); }

/* Each crest is now a real link (previously a bare image passing no link equity).
   The anchor fills the circle so the whole crest is the tap target, not just the glyph. */
.crest a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; }
.crest img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* .entry img sets a 12px radius at equal specificity and would otherwise win by source
   order, squaring off every crest inside post content. */
.crest img { border-radius: 50%; }
@media (max-width: 520px) { .crest { width: 84px; height: 84px; } }

.donate { text-align: center; }
.amts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.amt {
  border: 2px solid var(--navy);
  color: var(--navy);
  border-radius: 9px;
  padding: 14px 24px;
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 16px;
  min-width: 78px;
}
.amt.on { background: var(--red); border-color: var(--red); color: #fff; }

/* Accepted-payment logos on /donate/ (replaced a plain text list). Uniform 28px-tall row; the
   card tiles carry their own colored background, the Apple/Google Pay marks sit on white. The
   img selector is scoped under .entry ul.pay-logos so it outranks `.entry img` (which would
   otherwise force a 12px radius and 26px vertical margin on each mark). */
.entry ul.pay-logos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; list-style: none; margin: 22px 0 14px; padding: 0; }
.entry ul.pay-logos li { margin: 0; }
.entry ul.pay-logos img { height: 28px; width: auto; margin: 0; border-radius: 4px; display: block; }

/* ==========================================================================
   Breadcrumbs
   Guarantees every post has a crawlable path back to its hub, independent of
   any related-posts or archive logic. See inc/template-tags.php.
   ========================================================================== */
/* The bar carries the hero's navy so it merges the sticky header and the .post-hero band
   into one continuous dark zone (page/single/archive all render the trail here). Previously
   it was a white strip stranded between two dark bands. Rendered from 7 templates, so this
   is styled once rather than moved into each hero. */
.breadcrumbs {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: #aebbcc;
  background: var(--navy);
  padding: 13px 0 12px;
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li::after { content: "\203A"; margin-left: 8px; color: rgba(255, 255, 255, .32); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: #cbd5e1; text-decoration: none; }
.breadcrumbs a:hover { color: var(--bright); }

/* ==========================================================================
   Post / archive
   ========================================================================== */
.post-hero { background: linear-gradient(155deg, var(--navy), var(--navy2)); color: #fff; padding: 54px 0 48px; }
.post-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: 44px; line-height: 1.04; margin: 10px 0 14px; }
@media (max-width: 700px) { .post-hero h1 { font-size: 32px; } }
.post-meta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: #aebbcc; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.post-meta a { color: #fff; text-decoration: none; }

/* Visible byline — schema asserts an author, so the page must show one.
   A schema-only author is an E-E-A-T mismatch Google explicitly looks for. */
.byline { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.byline img { width: 38px; height: 38px; border-radius: 50%; }
.byline .n { font-family: var(--font-heavy); font-weight: 800; font-size: 14px; color: #fff; }
.byline .r { font-size: 12px; color: #aebbcc; }

/* The horizontal gutter is load-bearing: without it, interior-page body content (this is
   the ONLY wrapper the_content() gets — page.php nests no .wrap around it) hugs both viewport
   edges on any phone, so the intro copy and the CTA button bled to x=0. The extra sits in
   max-width, not just padding, so the desktop reading measure stays exactly 760px
   (box-sizing:border-box would otherwise subtract the padding from it). 26px == --gutter, so
   the body left edge lines up with the .post-hero title, which is padded by .wrap. */
.entry { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 46px var(--gutter) 60px; font-size: 17px; line-height: 1.72; color: #24313f; }
.entry > * { margin-left: auto; margin-right: auto; }
.entry h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 28px; margin: 40px 0 14px; color: var(--navy); line-height: 1.1; }
.entry h3 { font-family: var(--font-heavy); font-weight: 800; font-size: 20px; margin: 30px 0 10px; color: var(--navy); }
.entry a { color: var(--red); font-weight: 600; }
.entry img { border-radius: 12px; margin: 26px 0; }
.entry blockquote {
  border-left: 4px solid var(--red);
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  color: #475569;
  font-size: 18px;
}
.entry table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.entry th, .entry td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.entry th { background: var(--canvas); font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.entry ul, .entry ol { padding-left: 22px; }
.entry li { margin-bottom: 8px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .15s;
}
.card:hover { box-shadow: 0 12px 30px rgba(11, 31, 58, .13); transform: translateY(-3px); }
/* No featured image means no .thumb element at all — an empty grey placeholder box
   looked like a broken image on the archive, which is worse than a text-only card. */
.card .thumb { height: 178px; overflow: hidden; background: var(--canvas); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb:empty { display: none; }

/* Text-only cards get a red rule so the grid still reads as a set of cards rather
   than a wall of undifferentiated text. */
.card:not(:has(.thumb)) { border-top: 4px solid var(--red); }
.card .inner { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card .cat { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--red); margin-bottom: 8px; }
.card h3 { font-family: var(--font-heavy); font-weight: 800; font-size: 16.5px; line-height: 1.3; margin: 0 0 10px; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { color: var(--red); }
.card .ex { font-size: 14.5px; line-height: 1.6; color: #556; flex: 1; margin: 0 0 12px; }
.card .d { font-family: var(--font-display); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--muted); }

.related { background: var(--canvas); padding: 56px 0; }
.related h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; margin: 0 0 22px; color: var(--navy); }

/* ==========================================================================
   Pagination — real anchors, rendered before any JS runs.
   Never replace with a hrefless load-more button.
   ========================================================================== */
.pagination { margin: 46px 0 0; }

/* the_posts_pagination() nests the numbers inside .nav-links, so the flex context
   has to live there — putting it on .pagination alone leaves the buttons butted
   together with no gap. */
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 15px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  text-decoration: none;
  min-width: 44px;
  text-align: center;
}
.pagination .page-numbers:hover { border-color: var(--red); color: var(--red); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   Chapters (custom post type)
   ========================================================================== */
.chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .chapter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .chapter-grid { grid-template-columns: 1fr; } }

.chapter-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  transition: .15s;
}
.chapter-card:hover { box-shadow: 0 12px 30px rgba(11, 31, 58, .13); transform: translateY(-3px); }
.chapter-card .crest { margin: 0 auto 14px; box-shadow: 0 6px 16px rgba(11, 31, 58, .16); }
.chapter-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 19px; margin: 0 0 6px; }
.chapter-card h3 a { color: var(--navy); text-decoration: none; }
.chapter-card .county { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.chapter-card .socials { display: flex; gap: 8px; justify-content: center; }
.chapter-card .socials a {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.chapter-card .socials a:hover { background: var(--red); color: #fff; }

/* Chapter-card social links: real brand icons via CSS mask, keyed on the title attribute, so the
   letter placeholders (F/I/X/L/S/Y/W) render as recognizable icons that inherit the link color
   (navy, white on hover). The aria-label + title stay for accessibility. */
.chapter-card .socials a { font-size: 0; }
.chapter-card .socials a::before { content:""; display:block; width:15px; height:15px; background:currentColor; -webkit-mask:var(--yrt-ico) center/contain no-repeat; mask:var(--yrt-ico) center/contain no-repeat; }
.chapter-card .socials a[title="Facebook"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="Instagram"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228%201.3877-.6652.6677-1.075%201.3368-1.3802%202.127-.2954.7638-.4956%201.6365-.552%202.914-.0564%201.2775-.0689%201.6882-.0626%204.947.0062%203.2586.0206%203.6671.0825%204.9473.061%201.2765.264%202.1482.5635%202.9107.308.7889.72%201.4573%201.388%202.1228.6679.6655%201.3365%201.0743%202.1285%201.38.7632.295%201.6361.4961%202.9134.552%201.2773.056%201.6884.069%204.9462.0627%203.2578-.0062%203.668-.0207%204.9478-.0814%201.28-.0607%202.147-.2652%202.9098-.5633.7889-.3086%201.4578-.72%202.1228-1.3881.665-.6682%201.0745-1.3378%201.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982%201.33%2020.628.9208%2019.8378.6165%2019.074.321%2018.2017.1197%2016.9244.0645%2015.6471.0093%2015.236-.005%2011.977.0014%208.718.0076%208.31.0215%207.0301.0839m.1402%2021.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814%201.3783-.9003.423-.1651%201.0575-.3614%202.227-.4171%201.2655-.06%201.6447-.072%204.848-.079%203.2033-.007%203.5835.005%204.8495.0608%201.169.0508%201.8053.2445%202.228.408.5608.216.96.4754%201.3816.895.4217.4194.6816.8176.9005%201.3787.1653.4217.3617%201.056.4169%202.2263.0602%201.2655.0739%201.645.0796%204.848.0058%203.203-.0055%203.5834-.061%204.848-.051%201.17-.245%201.8055-.408%202.2294-.216.5604-.4763.96-.8954%201.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953%205.5864A1.44%201.44%200%201%200%2018.39%204.144a1.44%201.44%200%200%200-1.437%201.4424M5.8385%2012.012c.0067%203.4032%202.7706%206.1557%206.173%206.1493%203.4026-.0065%206.157-2.7701%206.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156%202.771-6.1496%206.1738M8%2012.0077a4%204%200%201%201%204.008%203.9921A3.9996%203.9996%200%200%201%208%2012.0077%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="X"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M14.234%2010.162%2022.977%200h-2.072l-7.591%208.824L7.251%200H.258l9.168%2013.343L.258%2024H2.33l8.016-9.318L16.749%2024h6.993zm-2.837%203.299-.929-1.329L3.076%201.56h3.182l5.965%208.532.929%201.329%207.754%2011.09h-3.182z%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="Youtube"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="Linktree"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27m13.73635%205.85251%204.00467-4.11665%202.3248%202.3808-4.20064%204.00466h5.9085v3.30473h-5.9365l4.22865%204.10766-2.3248%202.3338L12.0005%2012.099l-5.74052%205.76852-2.3248-2.3248%204.22864-4.10766h-5.9375V8.12132h5.9085L3.93417%204.11666l2.3248-2.3808%204.00468%204.11665V0h3.4727zm-3.4727%2010.30614h3.4727V24h-3.4727z%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="Substack"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M22.539%208.242H1.46V5.406h21.08v2.836zM1.46%2010.812V24L12%2018.11%2022.54%2024V10.812H1.46zM22.54%200H1.46v2.836h21.08V0z%27%2F%3E%3C%2Fsvg%3E");}
.chapter-card .socials a[title="Website"]{--yrt-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm-1%2017.93c-3.95-.49-7-3.85-7-7.93%200-.62.08-1.21.21-1.79L9%2015v1c0%201.1.9%202%202%202v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55%200%201-.45%201-1V7h2c1.1%200%202-.9%202-2v-.41c2.93%201.19%205%204.06%205%207.41%200%202.08-.8%203.97-2.1%205.39z%27%2F%3E%3C%2Fsvg%3E");}


.chapter-hero { background: linear-gradient(155deg, var(--navy), var(--navy2)); color: #fff; padding: 48px 0; }
.chapter-hero .inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.chapter-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: 42px; margin: 0 0 8px; line-height: 1.04; }
@media (max-width: 700px) { .chapter-hero h1 { font-size: 30px; } }
.chapter-hero .sub { color: #cbd5e1; font-size: 16px; margin: 0; }

.chapter-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 30px 0; }
.chapter-facts div { background: var(--canvas); border-radius: 10px; padding: 16px 18px; }
.chapter-facts dt { font-family: var(--font-display); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-bottom: 5px; }
.chapter-facts dd { margin: 0; font-family: var(--font-heavy); font-weight: 800; font-size: 15px; color: var(--navy); }

/* ==========================================================================
   404 / search
   ========================================================================== */
.utility { padding: 90px 0; text-align: center; }
.utility h1 { font-family: var(--font-display); text-transform: uppercase; font-size: 56px; margin: 0 0 12px; color: var(--navy); }
.utility p { font-size: 17px; color: var(--muted); max-width: 52ch; margin: 0 auto 26px; }
.search-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 34px; }
.search-form input[type="search"] { flex: 1; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer { background: var(--deep); color: #9fb0c6; padding: 54px 0 26px; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 30px; }
@media (max-width: 820px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.fbrand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.fbrand img { width: 50px; height: 50px; }
.fbrand b { color: #fff; font-family: var(--font-heavy); font-size: 14px; line-height: 1.15; }
footer.site-footer h5 { font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: #fff; margin: 0 0 14px; }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2.05; }
footer.site-footer ul a { color: #9fb0c6; text-decoration: none; }
footer.site-footer ul a:hover { color: #fff; }
.fcontact input,
.fcontact textarea { width: 100%; padding: 9px 11px; border: none; border-radius: 6px; margin-bottom: 8px; font-size: 13px; font-family: inherit; }
.fcontact-note { font-size: 13px; line-height: 1.55; margin: 0 0 12px; color: #9fb0c6; }
.fcontact-btn { display: inline-block; padding: 9px 16px; }
.signup { margin-top: 20px; }
.signup h5 { margin-bottom: 8px; }
.signup .wpforms-container,
.signup .wpforms-form,
.signup .wpforms-field-container { margin: 0; padding: 0; }
.signup .wpforms-field { padding: 0; }
.signup .wpforms-submit-container { margin-top: 6px; padding: 0; }
.signup input { width: 100%; padding: 10px 12px; border: none; border-radius: 7px; margin-bottom: 8px; font-family: inherit; }
.signup button.btn { display: block; width: 100%; text-align: center; }
.social { display: flex; gap: 8px; margin-top: 14px; }
.social a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background .15s ease;
}
.social a svg { width: 15px; height: 15px; display: block; }
.social a:hover { background: #a51226; }
/* Donate strip and recent-posts row — both sit below the main footer grid.
   Recovered from Elementor footer template 845 (donate tiers) and added for internal
   linking (recent posts). */
.footer-donate,
.footer-recent {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 28px;
  padding-top: 20px;
}

.footer-amts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-amts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  border: 1.5px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 9px 15px;
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.footer-amts a:hover { transform: translateY(-1px); }

/* ==========================================================================
   Home: strength-in-numbers crowd band (full-bleed photo + navy scrim)
   ========================================================================== */
.crowd-band {
  position: relative;
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 96px var(--gutter);
  text-align: center;
}
.crowd-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, .80), rgba(7, 21, 42, .90));
}
.crowd-band__inner { position: relative; }
.crowd-band__eyebrow {
  color: var(--bright);
  font-family: var(--font-heavy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  margin: 0 0 12px;
}
.crowd-band__stat {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.04;
  margin: 0 auto 16px;
  max-width: 15ch;
}
.crowd-band__sub {
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  margin: 0 0 28px;
}
.crowd-band__cta {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-heavy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 15px 34px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.crowd-band__cta:hover { background: var(--bright); transform: translateY(-1px); }
.footer-amts a:hover { background: var(--red); border-color: var(--red); }

.footer-recent ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .footer-recent ul { flex-direction: column; gap: 6px; }
}

.legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 34px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.legal a { color: #9fb0c6; }
.phone { font-family: var(--font-heavy); font-weight: 800; color: #fff; font-size: 16px; margin-bottom: 8px; }
.phone a { color: #fff; text-decoration: none; }

/* ==========================================================================
   WPForms
   WPForms ships its own stylesheet with a blue submit button and dark label text.
   Both are wrong here: the buttons are off-brand, and dark labels on the navy footer
   rendered as near-invisible text — the same failure as Elementor's global kit, caught
   on a real phone rather than by any automated check I ran.
   ========================================================================== */
/* WPForms renders with "modern markup" (.wpforms-render-modern) and drives its own
   appearance from CSS custom properties. Its selectors — div.wpforms-container-full
   button[type="submit"] — outrank anything sensible a theme would write, so setting
   these variables is the supported integration point rather than a specificity war.
   Defaults being replaced: button #066aab (WPForms blue), radii 3px, label rgba(0,0,0,.85). */
.wpforms-container {
  margin: 0;

  /* Counter-intuitive but correct: WPForms styles the RESTING button from the "-alt"
     variable (its rule is :not(:hover):not(:active) { background: var(--alt, var(--base)) }),
     so -alt must hold the primary red and the base holds the darker hover shade.
     Setting these the obvious way round renders the button in the hover colour at rest. */
  --wpforms-button-background-color-alt: var(--red);
  --wpforms-button-background-color: #a60d26;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-text-color-alt: #ffffff;
  --wpforms-button-border-radius: 8px;
  --wpforms-button-size-font-size: 14px;
  --wpforms-button-size-height: 46px;
  --wpforms-button-size-padding-h: 24px;

  --wpforms-field-border-radius: 8px;
  --wpforms-field-border-color: var(--line);
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-text-color: var(--ink);
  --wpforms-field-size-font-size: 15px;
  --wpforms-field-size-input-height: 46px;

  --wpforms-label-color: var(--ink);
  --wpforms-label-sublabel-color: var(--muted);
  --wpforms-label-error-color: var(--red2);
  --wpforms-label-size-font-size: 13px;
}

/* Dark bands: labels must go light or they vanish. Field backgrounds stay white so the
   contrast lives on the input, not the label. */
.site-footer .wpforms-container,
.who .wpforms-container {
  --wpforms-label-color: #e6ecf5;
  --wpforms-label-sublabel-color: #cbd5e1;
  --wpforms-label-error-color: #ffb3bd;
}

.wpforms-container .wpforms-form { margin: 0; }

/* The `body` prefix is load-bearing, not decoration. WPForms hardcodes
     .wpforms-container .wpforms-field { padding: 15px 0 }
   at the SAME specificity (0,2,0) as this rule, so the winner is decided purely by source
   order — and WP Rocket's "Remove Unused CSS" inlines one merged stylesheet whose rule
   order is not the original enqueue order. Measured 2026-07-25: identical footer markup
   computed `15px 0` on /, /about-us/ and /donate/ but `0 0 14px` on /contact/,
   /start-a-chapter/ and /join/. Same site, same form, opposite winners, reproducible.
   One extra selector takes specificity to (0,2,1) so this rule wins regardless of the
   order Rocket emits. Do not "simplify" it back. */
body .wpforms-container .wpforms-field { padding: 0 0 14px; }

.wpforms-container .wpforms-field-label {
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus { border-color: var(--red); }

.wpforms-container textarea { min-height: 110px; }

/* Submit: brand red, matching .btn.p rather than WPForms blue. */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: 14px;
  padding: 14px 24px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(200, 16, 46, .4);
  transition: transform .12s;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover { transform: translateY(-2px); background: var(--red); }

/* Consent checkbox: small print, and the label must wrap rather than clip. */
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.wpforms-container .wpforms-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* Dark contexts — the footer and any navy band. Labels inherit light text; inputs stay
   white so the contrast is on the field, not the label. */
.site-footer .wpforms-container .wpforms-field-label,
.site-footer .wpforms-container .wpforms-field-sublabel,
.who .wpforms-container .wpforms-field-label,
.joinlist .wpforms-container .wpforms-field-label { color: #e6ecf5; }

.site-footer .wpforms-container .wpforms-field-checkbox label,
.site-footer .wpforms-container .wpforms-required-label { color: #cbd5e1; }

.site-footer .wpforms-container .wpforms-confirmation-container,
.site-footer .wpforms-container .wpforms-confirmation-container-full {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #e6ecf5;
  border-radius: 8px;
  padding: 12px 14px;
}

/* The joincard sits on white, so labels there keep the default ink colour. */
.joincard .wpforms-container .wpforms-field-label { color: var(--ink); }

.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error { color: var(--red2); font-size: 12.5px; }

.site-footer .wpforms-container .wpforms-error,
.site-footer .wpforms-container label.wpforms-error { color: #ffb3bd; }

/* ==========================================================================
   Touch targets
   Measured on staging at 375px: the Donate pill rendered 76x32 and the hamburger
   42x38 — the two most-tapped controls on the page, both under the 44x44 minimum
   (WCAG 2.5.5 Target Size, and Apple's HIG uses the same figure). Sizes are only
   relaxed back on pointer:fine, so the desktop proportions from the approved mockup
   are unchanged.
   ========================================================================== */
@media (pointer: coarse), (max-width: 880px) {
  .pill,
  .btn,
  .wpforms-submit,
  button[type="submit"],
  input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .menu-btn {
    width: 44px;
    height: 44px;
  }

  /* Footer amount chips are small by design, but still need a thumb-sized hit area. */
  .footer-amts a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Stacked link lists get vertical breathing room so neighbouring targets do not
     merge into one another. */
  .footer-recent ul a,
  footer.site-footer ul a { display: inline-block; padding: 4px 0; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-img { transform: none; }
  .track { transform: none; }
}