/* =========================================================================
   Renner Elementary PTA — Global Stylesheet
   Brand: Renner Roadrunners — navy + red, white canvas
   Fonts: Varela Round (headings) + Nunito Sans (body)
   ========================================================================= */

/* ---------- Design tokens ---------- */
/* ---------- Design tokens ----------
   One palette drives the whole site. Change a value here and every page
   follows. Legacy names (--blue, --coral) are kept as aliases so older
   markup keeps working. */
:root {
  /* Brand — Renner navy */
  --renner-navy-950: #06284A;
  --renner-navy-900: #082F57;
  --renner-navy-800: #123F6B;
  /* Brand — Roadrunner red */
  --renner-red-600:  #E3062F;
  --renner-red-700:  #C90429;
  /* Accents */
  --renner-yellow-400: #FFD42A;
  --renner-blue-50:    #F3F8FD;
  --renner-red-50:     #FFF1F3;
  --renner-yellow-50:  #FFF8DC;
  --renner-success:    #0F9D6B;

  /* Working aliases used throughout the stylesheet */
  --navy:        var(--renner-navy-900);
  --navy-dark:   var(--renner-navy-950);
  --navy-soft:   var(--renner-blue-50);
  --red:         var(--renner-red-600);
  --red-dark:    var(--renner-red-700);
  --red-soft:    var(--renner-red-50);
  --amber:       #F5A524;
  --amber-ink:   #8A5200;
  --amber-soft:  var(--renner-yellow-50);
  --green:       var(--renner-success);
  --green-soft:  #E3F5EE;
  --yellow:      var(--renner-yellow-400);

  /* Back-compat aliases (older markup used blue/coral) */
  --blue:        var(--navy);
  --blue-dark:   var(--navy-dark);
  --blue-soft:   var(--navy-soft);
  --coral:       var(--red);
  --coral-soft:  var(--red-soft);
  --border-cool: var(--navy-soft);

  /* Neutrals */
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --tint:        var(--renner-blue-50);
  --ink:         #09294D;
  --ink-2:       #24405F;
  --muted:       #526274;
  --border:      #DCE4EC;

  /* Effects */
  --ring:        0 0 0 4px rgba(8, 47, 87, .30);
  --shadow-sm:   0 2px 10px rgba(6, 40, 74, .06);
  --shadow-md:   0 8px 24px rgba(6, 40, 74, .10);
  --shadow-lg:   0 18px 40px -18px rgba(6, 40, 74, .28);

  /* Radii */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1440px;
  --nav-h: 78px;

  /* Type */
  --font-head: "Varela Round", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.14;
  margin: 0 0 .5em;
  font-weight: 400;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.15rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1rem; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 72px; }
@media (max-width: 1279px) { .container { padding-inline: 40px; } }
@media (max-width: 1023px) { .container { padding-inline: 32px; } }
@media (max-width: 767px)  { .container { padding-inline: 20px; } }
.section { padding: clamp(56px, 8vw, 104px) 0; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 72px); }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-dark); background: var(--red-soft);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.eyebrow--navy { color: var(--navy); background: var(--navy-soft); }
/* Neon money-green eyebrow — bold + pulsing, matches the Glow Run badge */
.eyebrow--neon {
  color: #05351f; background: var(--neon-green); font-weight: 800;
  text-shadow: 0 0 6px rgba(255, 255, 255, .5);
  animation: neonPillPulse 1.6s ease-in-out infinite;
}
.lead { font-size: 1.18rem; color: var(--muted); max-width: 60ch; }
.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); z-index: 1000; transition: top .2s ease;
}
.skip-link:focus { top: 16px; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px;
  font-family: var(--font-head); font-size: 1rem; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn svg { width: 20px; height: 20px; }

.btn--red {
  background: var(--red); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(200, 16, 46, .7);
}
.btn--red:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }

.btn--primary {
  background: var(--navy); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(16, 36, 68, .6);
}
.btn--primary:hover { background: var(--navy-dark); color: #fff; transform: translateY(-2px); }

.btn--amber {
  background: var(--amber); color: #4a2c00;
  box-shadow: 0 10px 22px -8px rgba(245, 165, 36, .8);
}
.btn--amber:hover { background: #e79514; color: #4a2c00; transform: translateY(-2px); }

.btn--ghost {
  background: #fff; color: var(--navy); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }

.btn--lg { padding: 18px 32px; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--navy-soft); }

/* Cards with a solid color-block header bar across the top */
.card--topbar {
  position: relative; overflow: hidden;
  border-width: 2px; padding-top: 34px;
  box-shadow: var(--shadow-md);
}
.card--topbar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
}
.card--topbar-red::before    { background: var(--red); }
.card--topbar-yellow::before { background: var(--yellow); }
.card--topbar-navy::before   { background: var(--navy); }
.card--topbar-green::before  { background: var(--green); }
.card--topbar:hover { box-shadow: var(--shadow-lg); }

.icon-badge {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center; margin-bottom: 18px;
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge--navy  { background: var(--navy-soft);  color: var(--navy); }
.icon-badge--blue  { background: var(--navy-soft);  color: var(--navy); }
.icon-badge--red   { background: var(--red-soft);   color: var(--red); }
.icon-badge--green { background: var(--green-soft); color: var(--green); }
.icon-badge--amber { background: var(--amber-soft); color: var(--amber-ink); }
.icon-badge--coral { background: var(--red-soft);   color: var(--red); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =========================================================================
   Header / Navigation
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-family: var(--font-head); color: var(--navy); font-size: 1.18rem; line-height: 1.05; flex: none; }
.brand:hover { color: var(--navy); }
.brand__mark { width: auto; height: 52px; flex: none; }
.brand > span { white-space: nowrap; }
.brand__sub {
  display: block; font-family: var(--font-body);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}

.nav__links { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; flex-wrap: nowrap; gap: 2px; list-style: none; }
.nav__links a {
  display: inline-block; font-family: var(--font-head); font-size: .96rem;
  color: var(--ink-2); padding: 9px 11px; border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav__links a:hover { background: var(--navy-soft); color: var(--navy); }
.nav__links a[aria-current="page"] { background: var(--navy-soft); color: var(--navy); }
.nav__cta { display: flex; align-items: center; gap: 12px; flex: none; }

.nav__toggle {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--border); background: #fff;
  border-radius: var(--r-md); cursor: pointer; color: var(--navy);
}
.nav__toggle svg { width: 24px; height: 24px; margin: auto; }

.brand > span { white-space: nowrap; }

@media (max-width: 1439px) {
  .nav__toggle { display: grid; place-items: center; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 16px 22px 24px; box-shadow: var(--shadow-md);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 13px 16px; font-size: 1.05rem; }
  .nav .btn--ghost { display: none; }
}

@media (max-width: 460px) {
  .brand__sub { display: none; }
  .brand__mark { width: auto; height: 44px; }
  .brand { font-size: 1.05rem; gap: 9px; }
  .nav__cta { gap: 8px; }
  .nav .btn--red, .nav .btn--primary { padding: 12px 16px; font-size: .92rem; }
  .container { padding-inline: 16px; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; padding: clamp(48px, 8vw, 92px) 0 clamp(56px, 8vw, 100px); overflow: hidden; }
.hero h1 span { color: var(--red); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__note { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: .95rem; color: var(--muted); }
.hero__note svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.hero__title { font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: 1.03; margin: 0 0 .12em; }
.hero__title span { color: var(--red); white-space: nowrap; }
.hero--center .lead { margin: 0 auto 4px; font-size: 1.24rem; max-width: 62ch; }
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__note { justify-content: center; }

/* =========================================================================
   Full-bleed photo hero (homepage)
   Photo: six Roadrunners grouped on the right; copy sits in the quiet,
   navy-scrimmed space on the left.
   ========================================================================= */
.hero--photo {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 560px;                 /* fixed height => no layout shift */
  padding: 0;
  text-align: left; color: #fff;
  background: #06284A url("../img/renner-pta-kids-hero.webp") center center / cover no-repeat;
}
/* Navy scrim — deep on the left so white text clears WCAG AA, clear on the
   right so the kids keep their natural brightness, colour and detail. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6, 40, 74, .99)  0%,
    rgba(6, 40, 74, .97) 20%,
    rgba(6, 40, 74, .91) 34%,
    rgba(6, 40, 74, .72) 45%,
    rgba(6, 40, 74, .35) 57%,
    rgba(6, 40, 74, .08) 70%,
    rgba(6, 40, 74, 0)   82%);
}

/* Hero shell — wider than .container so the copy column clears the children,
   while the 72px inset still lines the text up with the header logo. */
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  max-width: 1440px; margin-inline: auto;
  padding: 40px 72px;
}
.hero__content { max-width: 660px; }   /* holds "Small Dues. Big Impact." on one line */

/* Headline — Varela Round has no 800 weight, so the hero uses the site's
   other rounded sans (Nunito Sans) at 800. */
.hero--photo .hero__title {
  margin: 0 0 22px;
  max-width: 660px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(3rem, 3.6vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-shadow: none;
}
.hero--photo .hero__title span { display: block; color: #fff; white-space: normal; }
.hero--photo .hero__title .hero__highlight { color: #FFD42A; }

.hero--photo .lead {
  margin: 0 0 28px; max-width: 610px;
  color: #fff; text-shadow: none;
  font-size: 1.1875rem; font-weight: 400; line-height: 1.58;
}

/* CTA row */
.hero--photo .hero__actions {
  justify-content: flex-start; align-items: center; flex-wrap: wrap;
  gap: 20px; margin: 0 0 24px;
}
.hero--photo .hero__actions .btn {
  font-family: var(--font-body);
  min-width: 260px; min-height: 58px;
  padding: 18px 30px; border-radius: 10px;
}
.hero--photo .btn--red {
  background: #E3062F; color: #fff; border-color: transparent;
  font-size: 1.1875rem; font-weight: 800;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55);
}
.hero--photo .btn--red:hover { background: #C90429; color: #fff; transform: translateY(-1px); }
.hero--photo .btn--ghost {
  background: rgba(6, 40, 74, .22); color: #fff; border: 2px solid rgba(255, 255, 255, .92);
  font-size: 1.125rem; font-weight: 700; box-shadow: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hero--photo .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; transform: translateY(-1px); }
/* The global navy focus ring is invisible on navy — use a yellow one here. */
.hero--photo .btn:focus-visible { outline: 3px solid #FFD42A; outline-offset: 3px; box-shadow: none; }

/* Trust line */
.hero--photo .hero__note {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  margin: 0; color: #fff;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
}
.hero--photo .hero__note svg { width: 20px; height: 20px; color: #FFD42A; flex: none; }

/* ---- Tablet / small laptop ---- */
@media (max-width: 1279px) {
  .hero--photo { min-height: 600px; background-position: 50% center; }
  .hero__inner { padding: 40px 40px; }
  .hero__content { max-width: 500px; }
  /* 46px keeps line 1 of the headline intact inside the 500px column. */
  .hero--photo .hero__title { max-width: 500px; font-size: 2.875rem; }
  .hero--photo .lead { max-width: 480px; font-size: 1.0625rem; }
  .hero--photo .hero__actions { gap: 18px; }
  .hero--photo .hero__actions .btn { min-width: 236px; font-size: 1.0625rem; padding: 17px 20px; }
  .hero--photo::before {
    background: linear-gradient(90deg,
      rgba(6, 40, 74, .99)  0%,
      rgba(6, 40, 74, .98) 24%,
      rgba(6, 40, 74, .94) 40%,
      rgba(6, 40, 74, .78) 52%,
      rgba(6, 40, 74, .40) 64%,
      rgba(6, 40, 74, .10) 76%,
      rgba(6, 40, 74, 0)   86%);
  }
}

/* ---- Narrow screens: stack the composition ----
   Below ~950px there is no longer room for copy beside the group, so the photo
   becomes a band across the top (its baked-in fade blends into the navy panel)
   and the copy sits underneath it. */
@media (max-width: 1023px) {
  .hero--photo {
    min-height: 700px; align-items: flex-end;
    background-color: #06284A;
    background-image: url("../img/renner-pta-kids-hero-sm.webp");
    background-size: 100% auto;
    background-position: center top;
  }
  .hero__inner { padding: 48px 32px 44px; }
  .hero__content { max-width: 620px; }
  .hero--photo .hero__title {
    max-width: none; margin-bottom: 16px;
    font-size: clamp(2.5rem, 5.6vw, 3rem); line-height: 1.06;
  }
  .hero--photo .lead { max-width: 560px; margin-bottom: 24px; font-size: 1.0625rem; line-height: 1.55; }
  .hero--photo .hero__actions { gap: 16px; margin-bottom: 20px; }
  .hero--photo .hero__actions .btn { min-width: 220px; }
  .hero--photo::before {
    background: linear-gradient(180deg,
      rgba(6, 40, 74, .30)  0%,
      rgba(6, 40, 74, .26) 24%,
      rgba(6, 40, 74, .55) 42%,
      rgba(6, 40, 74, .86) 58%,
      rgba(6, 40, 74, .96) 72%,
      rgba(6, 40, 74, .99) 100%);
  }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  .hero--photo { min-height: 720px; }
  .hero__inner { padding: 40px 20px 40px; }
  .hero--photo .hero__title { font-size: clamp(2.375rem, 10.3vw, 2.625rem); line-height: 1.08; }
  .hero--photo .hero__title .hero__highlight { white-space: nowrap; }
  .hero--photo .hero__actions { gap: 15px; }
  .hero--photo .hero__actions .btn { width: 100%; min-width: 0; min-height: 56px; padding: 17px 22px; }
  .hero--photo .hero__note { align-items: flex-start; font-size: 1rem; }
  .hero--photo .hero__note svg { margin-top: 2px; }
}

@media (max-width: 419px) {
  .hero--photo .lead { font-size: 1rem; }
}
@media (max-width: 640px) { .social-cta { grid-template-columns: 1fr; } }
@keyframes drift { from { transform: translate(0,0);} to { transform: translate(18px,-18px);} }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__art { order: -1; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Section backgrounds ---------- */
.bg-surface { background: var(--tint); }
.bg-tint { background: var(--tint); }
.bg-navy { background: var(--navy); color: #D6E0EE; }
.bg-navy h2, .bg-navy h3 { color: #fff; }

/* ---------- Lists ---------- */
.list-check { list-style: none; display: grid; gap: 14px; }
.list-check li { display: flex; gap: 13px; align-items: flex-start; }
.list-check svg { width: 24px; height: 24px; flex: none; color: var(--green); margin-top: 1px; }
.tag { display: inline-block; font-family: var(--font-head); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-pill); }
.tag--blue, .tag--navy { background: var(--navy-soft); color: var(--navy); }
.tag--green { background: var(--green-soft); color: var(--green); }
.tag--amber { background: var(--amber-soft); color: var(--amber-ink); }
.tag--coral, .tag--red { background: var(--red-soft); color: var(--red); }

/* Solid-fill pills — bolder, higher-contrast, with a soft pop shadow */
.tag--fill-blue,
.tag--fill-red,
.tag--fill-yellow,
.tag--fill-white,
.tag--fill-green {
  font-weight: 700;
  box-shadow: 0 5px 14px -5px rgba(16, 36, 68, .45);
}
.tag--fill-blue   { background: var(--navy);   color: #fff; }
.tag--fill-red    { background: var(--red);    color: #fff; }
.tag--fill-yellow { background: var(--yellow); color: var(--navy); }
.tag--fill-green  { background: var(--green);  color: #fff; }
.tag--fill-white  { background: #fff; color: var(--navy); border: 1.5px solid var(--navy-soft); }

/* Neon money-green Signature Fundraiser badge — pulsing glow */
.tag--neon-green {
  background: var(--neon-green); color: #05351f; font-weight: 800;
  text-shadow: 0 0 6px rgba(255, 255, 255, .5);
  animation: neonPillPulse 1.6s ease-in-out infinite;
}
@keyframes neonPillPulse {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(34, 214, 111, .75), 0 0 14px 2px rgba(34, 214, 111, .45); }
  50%      { box-shadow: 0 0 12px 3px rgba(34, 214, 111, 1),  0 0 26px 6px rgba(34, 214, 111, .7); }
}

/* Neon card — the big donation fundraiser, glowing green */
.card--neon {
  border: 2px solid var(--neon-green);
  background: linear-gradient(180deg, rgba(34, 214, 111, .12) 0%, #fff 46%);
  animation: neonCardPulse 2.4s ease-in-out infinite;
}
@keyframes neonCardPulse {
  0%, 100% { box-shadow: 0 0 20px -2px rgba(34, 214, 111, .55), 0 0 44px -6px rgba(34, 214, 111, .40); }
  50%      { box-shadow: 0 0 34px 2px rgba(34, 214, 111, .85),  0 0 72px 2px rgba(34, 214, 111, .55); }
}
.card--neon:hover { animation: none; box-shadow: 0 0 40px 4px rgba(34, 214, 111, .95), 0 0 84px 6px rgba(34, 214, 111, .6); }

/* Cards that act as buttons/links to the photo gallery */
a.card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.card--link:hover { color: inherit; }
a.card--link:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.card__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: var(--font-head); font-size: .9rem; color: var(--navy);
}
.card__cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
a.card--link:hover .card__cta svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .tag--neon-green, .card--neon, .eyebrow--neon { animation: none; }
}
@media (max-width: 480px) { .event { grid-template-columns: 70px 1fr; gap: 14px; } }

/* ---------- Board member cards ---------- */
.person { text-align: center; }
.person__avatar { position: relative; overflow: hidden; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.55rem; color: #fff; flex: none; }
/* Real photo covers the initials; if the file is missing it's removed and initials show through */
.person__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Two people sharing one title — overlapping duo */
.person__avatars { display: flex; justify-content: center; align-items: center; margin: 0 0 16px; }
.person__avatars .person__avatar { margin: 0 0 0 -18px; width: 76px; height: 76px; font-size: 1.25rem; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(16, 36, 68, .18); }
.person__avatars .person__avatar:first-child { margin-left: 0; }
.person h3 { margin-bottom: 2px; }
.person__role { color: var(--red); font-family: var(--font-head); font-size: .95rem; }
.person--team { background: var(--navy-soft); border-color: var(--navy-soft); }

/* =========================================================================
   Board card designs — OPTION A ("Roadrunner Navy") vs OPTION B ("Spirit Stripe")
   Only circles that actually contain a photo turn light; photo-less members
   keep their coloured initials circle (:has keeps the fallback readable).
   ========================================================================= */

/* ---- Option C: WHITE card + spirit stripe, each person keeps their OWN circle colour ---- */
.board-c .person {
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  padding-top: 34px;
  box-shadow: 0 12px 28px -16px rgba(16, 36, 68, .45);
}
.board-c .person::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--red) 55%, #FBBF24 100%);
}
.board-c .person:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(16, 36, 68, .55); }
.board-c .person h3 { color: var(--navy); }
.board-c .person__role { color: var(--red); }
/* NOTE: no background override — the inline per-person gradient shows behind the cut-out */
.board-c .person__avatar { box-shadow: 0 8px 20px rgba(16, 36, 68, .28); }
.board-c .person__avatars .person__avatar { border: 3px solid #fff; }
.board-c .person--team { background: #fff; border-color: var(--navy); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--navy); color: #C4D0E2; padding: 60px 0 30px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h2 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; }
.site-footer a { color: #C4D0E2; }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 14px; }
.footer-contact { display: grid; gap: 12px; font-size: .95rem; }
.site-footer .footer-contact .info-row svg { color: var(--amber); }
.site-footer .footer-contact .info-row strong { color: #fff; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .88rem; color: #93A2BC; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.meeting-schedule {
  background: #fff; border-radius: var(--r-lg); padding: 8px;
  color: var(--ink-2); max-height: 340px; overflow: auto;
}
.meeting-schedule__title { font-family: var(--font-head); color: var(--navy); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px 6px; }
.meeting-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.meeting-row + .meeting-row { border-top: 1px solid var(--border); }
.meeting-row__date { font-family: var(--font-head); color: var(--ink); line-height: 1.2; }
.meeting-row__date small { display: block; color: var(--muted); font-family: var(--font-body); font-size: .8rem; }
.meeting-row__links { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.chip-join { font-family: var(--font-head); font-size: .82rem; background: var(--red); color: #fff; padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; }
.chip-join:hover { background: var(--red-dark); color: #fff; }
.chip-rsvp { font-family: var(--font-head); font-size: .82rem; color: var(--navy); padding: 7px 4px; white-space: nowrap; }
@media (max-width: 820px) { .meeting-hub { grid-template-columns: 1fr; } }

/* ---- RSVP form ---- */
.rsvp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 42px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field > label { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--ink); margin-bottom: 7px; }
.field .req { color: var(--red); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; font-family: var(--font-body); }
.input, .rsvp-card select, .rsvp-card textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .rsvp-card select:focus, .rsvp-card textarea:focus { border-color: var(--navy); box-shadow: var(--ring); outline: none; }
.rsvp-card textarea { min-height: 108px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; cursor: pointer; flex: 1; min-width: 160px; font-family: var(--font-head); color: var(--ink-2); transition: border-color .15s ease, background .15s ease; }
.radio input { accent-color: var(--navy); width: 18px; height: 18px; }
.radio:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); color: var(--navy); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-status { margin-top: 4px; font-size: .92rem; min-height: 1.2em; }
.form-status.is-error { color: var(--red-dark); }
.rsvp-success { display: none; text-align: center; padding: 12px 8px; }
.rsvp-success .icon-badge { margin: 0 auto 16px; }

/* =========================================================================
   Social links (header, footer, contact)
   ========================================================================= */
.social-links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.social-links a {
  min-width: 44px; min-height: 44px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: var(--navy); background: var(--navy-soft);
  transition: transform .15s ease, background .18s ease, color .18s ease;
}
.social-links a svg { width: 20px; height: 20px; }
.social-links a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.social-links a:active { transform: scale(.92); }

/* Header social (desktop only) */
.nav__social { display: inline-flex; flex: none; flex-wrap: nowrap; gap: 2px; margin-right: 6px; }
.nav__social a { flex: none; width: 36px; height: 36px; border-radius: 10px; background: transparent; color: var(--navy); }
.nav__social a svg { width: 19px; height: 19px; }
.nav__social a:hover { background: var(--navy-soft); color: var(--navy); transform: none; }
@media (max-width: 1500px) { .nav__social { display: none; } }

/* Footer social (on navy) */
.footer-social { margin-top: 20px; }
.footer-social a { color: #C4D0E2; background: rgba(255,255,255,.08); }
.footer-social a:hover { color: #fff; background: var(--red); }

/* Donate button in header */
.nav__donate svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .brand > span { display: none; }        /* logo only — makes room for both buttons */
  .brand__mark { height: 42px; }
  .nav__donate-label { display: none; }    /* Donate becomes icon-only */
  .nav__donate { padding: 12px 14px; }
  .nav .btn--red { padding: 12px 16px; font-size: .9rem; }
}

/* =========================================================================
   Google Calendar embed + subscribe buttons
   ========================================================================= */
.cal-shell {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 10px;
}
.cal-shell iframe { width: 100%; height: 700px; border: 0; border-radius: var(--r-md); display: block; background: #fff; }
@media (max-width: 760px) { .cal-shell iframe { height: 560px; } }

.cal-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .cal-actions { grid-template-columns: 1fr; } }
.cal-btn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; cursor: pointer; width: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cal-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy); color: var(--ink); }
.cal-btn__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--navy-soft); color: var(--navy); }
.cal-btn__icon svg { width: 24px; height: 24px; }
.cal-btn strong { display: block; font-family: var(--font-head); font-weight: 400; line-height: 1.2; }
.cal-btn small { color: var(--muted); font-size: .86rem; }
.cal-btn.is-copied .cal-btn__icon { background: var(--green-soft); color: var(--green); }

/* =========================================================================
   Sponsorship tiers (Business Partners page)
   ========================================================================= */
/* Flex (not grid) so an incomplete last row centers instead of hugging the left */
.tier-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; align-items: stretch; }
.tier {
  flex: 1 1 200px; max-width: 250px;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 20px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Featured "Most impact" tier — red outline that pops and glows */
.tier--featured { border: 2px solid var(--red); animation: glowRed 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tier--featured { animation: none; box-shadow: 0 0 22px -2px rgba(200,16,46,.7); } }
.tier__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-family: var(--font-head);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.tier__name { font-family: var(--font-head); color: var(--navy); font-size: 1.2rem; }
.tier__price { font-family: var(--font-head); font-size: clamp(1.6rem, 2.2vw, 2rem); color: var(--ink); line-height: 1; margin: 8px 0 2px; }
.tier__price span { font-size: .9rem; color: var(--muted); font-family: var(--font-body); }
.tier__perks { list-style: none; display: grid; gap: 10px; margin: 18px 0 22px; }
.tier__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.tier__perks svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; }
.tier__perks .muted-perk { color: var(--muted); font-style: italic; }
.tier .btn { margin-top: auto; white-space: normal; line-height: 1.2; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.note-box {
  background: var(--amber-soft); border: 1px dashed var(--amber);
  border-radius: var(--r-md); padding: 16px 18px; font-size: .92rem;
  color: var(--amber-ink); display: flex; gap: 12px; align-items: flex-start;
}
.note-box svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.note-box code { background: rgba(255,255,255,.6); padding: 1px 6px; border-radius: 6px; }

/* ---- Call-to-action band ------------------------------------------------
   Used on 7 pages. Dark band, white text, centered. Pages may override the
   background inline (the volunteer band on get-involved.html goes red).     */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  border-radius: 28px;
  padding: clamp(38px, 5.5vw, 62px) clamp(26px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 18px 40px rgba(16, 36, 68, .18);
}
.cta-band h2 { color: #fff; margin: 0 0 14px; }
.cta-band .eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.cta-band .eyebrow + h2 { margin-top: 16px; }
.cta-band p { color: rgba(255, 255, 255, .92); max-width: 58ch; margin-inline: auto; }
.cta-band a:not(.btn) { color: #fff; text-underline-offset: 3px; }

/* quick scannable points inside a band */
.cta-band__points {
  list-style: none; padding: 0;
  margin: 24px auto 0; max-width: 660px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.cta-band__points li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  font-weight: 700; font-size: .93rem; color: #fff;
}
.cta-band__points li::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: .9;
}

/* Light / outlined variant — white card, red border, dark text */
.cta-band--light {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--red);
  box-shadow: var(--shadow-md);
}
.cta-band--light h2 { color: var(--navy); }
.cta-band--light p { color: var(--muted); }
.cta-band--light .eyebrow { background: var(--red-soft); color: var(--red); }
.cta-band--light a:not(.btn) { color: var(--red); }
.cta-band--light .cta-band__points li {
  background: var(--navy-soft);
  border-color: var(--navy-soft);
  color: var(--navy);
}
.cta-band--light .cta-band__points li::before { background: var(--red); opacity: 1; }

/* =========================================================================
   Components whose markup shipped without styles
   ========================================================================= */

/* ---- Icon + label rows (footer, board, contact panels) -------------------
   NOTE: no colour on the row or its span — the footer is navy and inherits
   its own light text. .footer-contact rules are more specific and still win. */
.info-row { display: flex; align-items: flex-start; gap: 12px; }
.info-row > svg { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 2px; }
.info-row span { line-height: 1.5; }
.info-row strong { display: block; font-family: var(--font-head); font-weight: 400; color: var(--navy); }
.contact-social { margin: 2px 0 14px; }

/* ---- Sponsor / partner logo wall ---------------------------------------- */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.sponsor-card {
  display: grid; place-items: center;
  min-height: 158px; padding: 24px 18px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sponsor-card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: var(--shadow-md); }
.sponsor-card strong { display: block; font-family: var(--font-head); font-weight: 400; color: var(--navy); font-size: 1rem; }
.sponsor-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .78rem; }
.sponsor-card__logo {
  width: 48px; height: 48px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--navy-soft); color: var(--navy);
}
.sponsor-card__logo svg { width: 24px; height: 24px; }

/* ---- PTA documents ------------------------------------------------------ */
.doc-group + .doc-group { margin-top: 26px; }
.doc-group > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; color: var(--navy); }
.doc-group > h3 svg { width: 20px; height: 20px; flex: none; color: var(--red); }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.doc-item:hover { transform: translateX(3px); border-color: var(--red); background: var(--red-soft); }
.doc-item__icon {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--navy-soft); color: var(--navy);
}
.doc-item__icon svg { width: 18px; height: 18px; }
.doc-item__name { flex: 1 1 auto; font-weight: 700; }
.doc-item__meta {
  flex: none; padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--muted);
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* ---- Embed shells (Zeffy forms) + placeholders -------------------------- */
.embed-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--shadow-md);
}
.embed-shell > div { border-radius: var(--r-md); overflow: hidden; }
.embed-placeholder .icon-badge { margin: 0 auto 14px; }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer;
  font-family: var(--font-head); font-size: 1.02rem; color: var(--navy);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { background: var(--tint); }
.faq .chev { width: 20px; height: 20px; flex: none; color: var(--red); transition: transform .2s ease; }
.faq[open] .chev { transform: rotate(180deg); }
.faq__body { padding: 0 18px 18px; color: var(--ink-2); line-height: 1.65; }

/* ---- Section sub-navigation --------------------------------------------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.subnav__inner { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__inner a {
  flex: none; padding: 8px 15px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--navy); text-decoration: none;
  font-size: .9rem; font-weight: 700; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.subnav__inner a:hover { background: var(--navy-soft); border-color: var(--navy); }

/* ---- Two-column form layout (membership, donate) ------------------------
   The 340px rail is fixed, so the form column must be allowed to collapse
   below it — otherwise the Zeffy iframe is squeezed to nothing on phones.  */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}
@media (max-width: 900px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 520px) {
  .schedule th, .schedule td { display: block; width: auto; border-bottom: 0; padding: 2px 0; }
  .schedule tr { display: block; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .schedule tr:last-child { border-bottom: 0; }
}
.event-block__head .lead { margin: 0; }
/* Jump-nav for the gallery (reuses .subnav look) */
.gallery-jump a { white-space: nowrap; }

/* ---- Staff / school contact cards (resources) --------------------------- */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.staff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.staff-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.staff-card__role {
  display: block;
  font-family: var(--font-head); font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--red);
}
.staff-card__name { display: block; font-family: var(--font-head); font-size: 1.18rem; margin: 3px 0 12px; color: var(--navy); }
.staff-line { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: .95rem; color: var(--ink-2); }
.staff-line + .staff-line { border-top: 1px solid var(--border); }
.staff-line svg { width: 17px; height: 17px; flex: none; color: var(--navy); }
a.staff-line { color: var(--ink-2); }
a.staff-line:hover { color: var(--red); }
a.staff-line:hover svg { color: var(--red); }
.staff-line span { word-break: break-word; }
.district-callout .icon-badge { margin: 0; flex: none; }
/* trailing margin (not gap) so two duplicated halves wrap seamlessly at -50% */
.sponsor-marquee .sponsor-card { flex: none; width: 230px; margin: 4px 16px 4px 0; }

/* A real (filled) sponsor card — solid border, logo shown large */
.sponsor-card--filled { border-style: solid; border-color: var(--red); }
.sponsor-card--filled .sponsor-card__logo {
  width: auto; height: auto; min-height: 0;
  background: transparent; border-radius: 0; margin-bottom: 8px;
}
.sponsor-card--filled .sponsor-card__logo img { max-height: 74px; max-width: 170px; width: auto; border-radius: 8px; }
.sponsor-card--filled .sponsor-card__logo .sponsor-card__wordmark {
  font-family: var(--font-head); font-size: 1.7rem; color: var(--red); letter-spacing: -.02em; line-height: 1;
}
@keyframes sponsorScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-marquee { -webkit-mask: none; mask: none; overflow-x: auto; }
  .sponsor-marquee__track { animation: none; }
}

@media (max-width: 720px) {
  .sponsor-feature__addr { justify-content: center; }
}
@keyframes glowRed {
  0%, 100% { box-shadow: 0 0 16px -2px rgba(200,16,46,.6), 0 0 34px -8px rgba(200,16,46,.4); }
  50%      { box-shadow: 0 0 30px 2px rgba(200,16,46,.9), 0 0 64px 2px rgba(200,16,46,.55); }
}
@media (prefers-reduced-motion: reduce) { .glow-red { animation: none; box-shadow: 0 0 22px -2px rgba(200,16,46,.7); } }

/* "Next Week's Sponsors" spotlight (Hy-Vee + Kona Ice) */
.next-week {
  position: relative; max-width: 860px; margin: 0 auto 28px;
  border: 2px solid var(--red); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--red-soft) 0%, #fff 46%);
  padding: clamp(22px, 3.5vw, 36px); text-align: center;
}
.next-week__label {
  display: inline-block; font-family: var(--font-head); font-weight: 800;
  color: #fff; background: var(--red); padding: 8px 20px; border-radius: var(--r-pill);
  letter-spacing: .04em; margin-bottom: 18px; box-shadow: 0 4px 14px -4px rgba(200,16,46,.7);
}
.next-week__cards { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.next-week__card {
  flex: 1 1 280px; max-width: 360px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.next-week__logo { display: grid; place-items: center; height: 84px; margin-bottom: 12px; }
.next-week__logo img { max-height: 72px; max-width: 82%; width: auto; border-radius: 8px; }
.next-week__logo .wm { font-family: var(--font-head); font-size: 1.9rem; color: var(--red); }
.next-week__card strong { display: block; font-family: var(--font-head); font-weight: 400; color: var(--navy); font-size: 1.12rem; margin-bottom: 4px; }
.next-week__card small { color: var(--ink-2); font-size: .95rem; }

/* Per-sponsor colored outlines (each card pops in its own color) */
.sponsor-card--filled { border-width: 2px; }
@keyframes showcaseSpin { to { transform: rotate(360deg); } }
.showcase-sparkle.ss1 { top: -11px;  left: 7%;   animation: ssTwinkle 1.4s ease-in-out infinite; }
.showcase-sparkle.ss2 { top: -13px;  right: 11%; width: 14px; height: 14px; animation: ssTwinkle 1.1s ease-in-out .3s infinite; }
.showcase-sparkle.ss3 { bottom: -11px; left: 24%; width: 16px; height: 16px; animation: ssTwinkle 1.6s ease-in-out .6s infinite; }
.showcase-sparkle.ss4 { bottom: -13px; right: 7%; animation: ssTwinkle 1.25s ease-in-out .15s infinite; }
@keyframes ssTwinkle {
  0%, 100% { transform: scale(.65) rotate(0deg);  opacity: .5; }
  50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-showcase::before { animation: none; }
  .showcase-sparkle { animation: none; }
}

/* =========================================================================
   Redesign components (2026–2027)
   Shared building blocks used across every page so the site reads as one
   system. Add new page sections from these pieces rather than one-off CSS.
   ========================================================================= */

/* ---- Compact page introduction (informational pages) --------------------
   Inner pages get a short, dense intro — not a full-screen hero. */
.page-intro { padding: clamp(56px, 6vw, 72px) 0; background: var(--renner-blue-50); border-bottom: 1px solid var(--border); }
.page-intro__inner { max-width: 760px; }
.page-intro h1 { margin: 0 0 14px; font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em; color: var(--navy-dark); font-size: clamp(2.375rem, 4vw, 3.25rem); line-height: 1.08; }
.page-intro p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; margin: 0 0 12px; }
.page-intro .btn-row { margin-top: 24px; }
.page-intro--plain { background: #fff; }

/* ---- Button row --------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ---- Section heading rhythm --------------------------------------------- */
.section-head h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em; color: var(--navy-dark); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; margin: 0 0 12px; }
.section-head p { margin: 0; }

/* ---- Two-column split (About intro) ------------------------------------- */
.split { display: grid; grid-template-columns: 47fr 53fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* ---- Photo figure with caption ------------------------------------------ */
.figure-photo { margin: 0; }
.figure-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: block; }
.figure-photo figcaption { margin-top: 14px; }
.figure-photo strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 1.05rem; }
.figure-photo small { color: var(--muted); font-size: .92rem; }

/* ---- Comparison cards (what membership is / is not) --------------------- */
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 820px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.compare-card--yes { border-top: 4px solid var(--renner-success); }
.compare-card--no  { border-top: 4px solid var(--renner-navy-800); }
.compare-card h3 { font-size: 1.2rem; margin: 0 0 18px; color: var(--navy); }
.compare-list { list-style: none; display: grid; gap: 13px; margin: 0; padding: 0; }
.compare-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); line-height: 1.5; }
.compare-list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.compare-card--yes .compare-list svg { color: var(--renner-success); }
.compare-card--no  .compare-list svg { color: var(--renner-navy-800); }
.compare-card__note { margin: 20px 0 0; font-size: .95rem; color: var(--muted); }
.compare-card .compare-list { flex: 1 1 auto; align-content: start; }

/* ---- Impact metrics ------------------------------------------------------
   Values come from `impactMetrics` in assets/js/main.js — the single place
   to enter real numbers. Anything without a value shows "Coming soon". */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1023px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .metric-grid { grid-template-columns: 1fr; } }
.metric { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.metric__value { font-family: var(--font-body); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; color: var(--navy-dark); letter-spacing: -.02em; }
.metric__value.is-pending { font-size: 1.125rem; font-weight: 700; color: var(--muted); }
.metric__label { margin-top: 8px; font-weight: 700; color: var(--ink); }
.metric__note { margin-top: 4px; font-size: .92rem; color: var(--muted); }

/* ---- "What's happening" cards ------------------------------------------- */
.happening-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1023px) { .happening-grid { grid-template-columns: 1fr; } }
.happening { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.happening h3 { font-size: 1.15rem; margin: 12px 0 8px; color: var(--navy); }
.happening p { color: var(--ink-2); margin: 0 0 8px; }
.happening .btn { margin-top: auto; align-self: flex-start; }
.happening__meta { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.happening__meta li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: .96rem; }
.happening__meta svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--navy); }

/* ---- Value pills --------------------------------------------------------- */
.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pill-row li { padding: 9px 18px; border-radius: var(--r-pill); background: var(--renner-blue-50); border: 1px solid var(--border); color: var(--navy); font-weight: 700; font-size: .95rem; }

/* ---- Store choice cards -------------------------------------------------- */
.store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 820px) { .store-grid { grid-template-columns: 1fr; } }
.store-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.store-card h3 { margin: 0 0 10px; color: var(--navy); }
.store-card p { color: var(--ink-2); }
.store-card .btn { margin-top: auto; align-self: flex-start; }

/* ---- Empty states -------------------------------------------------------- */
.empty-state { background: var(--renner-blue-50); border: 1px dashed var(--border); border-radius: var(--r-md); padding: 26px 24px; color: var(--ink-2); }
.empty-state strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 6px; }
.empty-state p { margin: 0; color: var(--muted); }

/* ---- Gallery ------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.gallery-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.gallery-card__ph { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--renner-blue-50); border-bottom: 1px solid var(--border); color: var(--muted); }
.gallery-card__ph strong { display: block; font-family: var(--font-head); color: var(--navy); margin-bottom: 4px; }
.gallery-card__ph small { font-size: .9rem; }
.gallery-card__body { padding: 22px 24px 24px; }
.gallery-card__body h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--navy); }
.gallery-card__body p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* ---- Flagged-for-verification note (editor-facing) ----------------------- */
.verify-note { font-size: .85rem; color: var(--muted); font-style: italic; }

/* ---- Header: room for eight destinations --------------------------------- */
@media (min-width: 1440px) { .nav__links a { padding: 9px 8px; font-size: .95rem; } }


/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.school-contact { display: grid; gap: 14px; font-size: .95rem; color: var(--ink-2); }

/* =========================================================================
   Live fundraising thermometer (Zeffy)
   The bar is a Zeffy iframe, so the raised/goal figures are always real and
   always current — there is nothing to update here by hand. If the donation
   campaign is ever replaced, update the iframe src on donate.html and
   index.html along with the donation form slug.
   ========================================================================= */
.thermo {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--renner-red-600);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  max-width: 780px;
}
.thermo__title { margin: 0 0 8px; font-size: 1.25rem; color: var(--navy); }
.thermo__body { margin: 0 0 20px; color: var(--ink-2); max-width: 60ch; }
/* Fixed 120px box reserves the space up front, so the bar loading never
   shifts the rest of the page (no layout shift). */
/* 104px trims Zeffy's own bottom padding while leaving headroom above the
   amount line — raise it back toward 120px if the widget ever grows. */
.thermo__frame { position: relative; width: 100%; height: 104px; overflow: hidden; }
.thermo__frame iframe { position: absolute; inset: 0; width: 100%; height: 104px; border: 0; }

/* On the navy CTA band the card inverts to stay readable. */
.cta-band .thermo {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
  margin-inline: auto;
}
.cta-band .thermo__title { color: #fff; }
.cta-band .thermo__body { color: rgba(255, 255, 255, .92); }

@media (max-width: 560px) {
  .thermo { padding: 22px 20px; }
}

/* =========================================================================
   About page
   Built from the shared system (.split, .card, .pill-row, .faq, .cta-band).
   Only the pieces below are About-specific.
   ========================================================================= */

/* Two-column intro — copy left, school photo right, both vertically centred. */
.about-hero { padding-block: clamp(40px, 3.4vw, 48px); }
.about-hero__title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-dark);
  /* 38px phone -> ~45px tablet -> 56px large desktop */
  font-size: clamp(2.375rem, 4.4vw, 3.5rem);
  line-height: 1.08;
}
.about-hero__copy .lead { max-width: 600px; margin-bottom: 14px; }

/* Keep the entrance and signage in frame if the box is ever cropped. */
.figure-photo img { object-position: center 42%; }

/* Partnership row: copy beside the recognition card. */
.split--wide { grid-template-columns: 54fr 46fr; align-items: center; }
@media (max-width: 900px) { .split--wide { grid-template-columns: 1fr; } }
.recognition h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--navy); }
.recognition p { margin: 0; }

/* FAQ: heading beside the questions on wide screens, stacked below. */
.faq-layout { display: grid; grid-template-columns: 38fr 62fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 28px; } }

@media (max-width: 767px) {
  .about-hero { padding-block: clamp(40px, 8vw, 48px); }
  /* Full-width, comfortably tappable buttons on narrow screens. */
  .about-hero .btn-row .btn { width: 100%; }
}

/* Four purpose cards are cramped below ~1100px — drop to two columns there.
   Scoped to the About page so shared .grid-4 users are unaffected. */
@media (max-width: 1100px) {
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .purpose-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Photo page-intro (Sponsors)
   A .page-intro on a full-bleed image. The navy scrim keeps the left side
   dark enough for white text while letting the artwork stay vivid on the
   right, the same approach used by the homepage hero.
   ========================================================================= */
.page-intro--photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 420px;
  border-bottom: 0;
  background: var(--renner-navy-950) url("../img/sponsors-hero-handshake.webp") center right / cover no-repeat;
}
.page-intro--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6, 40, 74, .96)  0%,
    rgba(6, 40, 74, .94) 26%,
    rgba(6, 40, 74, .88) 40%,
    rgba(6, 40, 74, .62) 52%,
    rgba(6, 40, 74, .26) 64%,
    rgba(6, 40, 74, 0)   78%);
}
.page-intro--photo .container { position: relative; z-index: 2; width: 100%; }
.page-intro--photo .page-intro__inner { max-width: 560px; }
/* The two labels together run ~8px past the 560px copy column; trimming the
   horizontal padding keeps them on one row without shrinking the text. */
.page-intro--photo .btn--lg { padding-inline: 26px; }
.page-intro--photo h1 { color: #fff; }
.page-intro--photo p  { color: rgba(255, 255, 255, .94); }
.page-intro--photo .eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }

/* The outlined button needs to invert on the dark artwork. */
.page-intro--photo .btn--ghost {
  background: rgba(6, 40, 74, .30);
  border: 2px solid rgba(255, 255, 255, .92);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.page-intro--photo .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
/* The global navy focus ring is invisible on navy — use yellow here. */
.page-intro--photo .btn:focus-visible { outline: 3px solid var(--renner-yellow-400); outline-offset: 3px; box-shadow: none; }

@media (max-width: 900px) {
  .page-intro--photo {
    min-height: 400px;
    background-image: url("../img/sponsors-hero-handshake-sm.webp");
    background-position: 70% center;  /* frames the clasped hands, not just the sleeve */
  }
  /* Copy sits over the artwork once it stacks, so darken vertically too. */
  /* Two stacked layers multiply, so each is kept light — together they still
     clear AA for white text while letting the artwork read. */
  .page-intro--photo::before {
    background:
      linear-gradient(180deg, rgba(6, 40, 74, .44) 0%, rgba(6, 40, 74, .60) 55%, rgba(6, 40, 74, .82) 100%),
      linear-gradient(90deg,  rgba(6, 40, 74, .68) 0%, rgba(6, 40, 74, .14) 100%);
  }
  .page-intro--photo .page-intro__inner { max-width: none; }
}
@media (max-width: 560px) {
  .page-intro--photo .btn-row .btn { width: 100%; }
}