/* ==========================================================================
   Little Miami Athletic Booster - Stylesheet
   Brand: Little Miami Panthers green & gold
   ========================================================================== */

:root {
  /* Little Miami Panthers - green & gold */
  --navy: #0c4a2a;        /* primary green */
  --navy-deep: #07331d;   /* deep green */
  --blue: #0f5e36;        /* mid green */
  --sky: #3fae6e;         /* light green accent */
  --gold: #d4af37;
  --gold-soft: #e8c95c;
  --ink: #1b2620;
  --muted: #5b6b60;
  --paper: #ffffff;
  --mist: #f3f8f4;
  --line: #dde8e1;
  --shadow: 0 10px 30px rgba(7, 51, 29, 0.10);
  --shadow-lg: 0 24px 60px rgba(7, 51, 29, 0.18);
  --radius: 14px;
  --maxw: 1180px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}

p { margin: 0 0 1rem; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 84px 0; }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #d4e7d9; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section-head p + p { margin-top: -.35rem; }
.section-head strong { color: var(--navy); letter-spacing: .03em; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 20px rgba(212,175,55,.35); }
.btn--gold:hover { background: var(--gold-soft); color: var(--navy-deep); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { color: var(--navy); }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Secondary action on a LIGHT section - btn--outline and btn--light are both
   built for the navy bands and go invisible here. */
.btn--ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn--ghost:hover { background: var(--mist); border-color: var(--navy); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 51, 29, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand .crest {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  overflow: visible;
}
.brand .crest img {
  width: 44px; height: 44px; object-fit: contain;
  /* White outline tracing the logo's shape (not a box) */
  filter:
    drop-shadow(0.75px 0 0 #fff) drop-shadow(-0.75px 0 0 #fff)
    drop-shadow(0 0.75px 0 #fff) drop-shadow(0 -0.75px 0 #fff)
    drop-shadow(0.5px 0.5px 0 #fff) drop-shadow(-0.5px -0.5px 0 #fff)
    drop-shadow(0.5px -0.5px 0 #fff) drop-shadow(-0.5px 0.5px 0 #fff);
}
.brand .brand-text { line-height: 1.1; }
.brand .brand-text strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: .01em; }
.brand .brand-text span { color: var(--gold-soft); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative;
  color: #cfe6d6;
  font-weight: 600;
  font-size: .96rem;
  padding: 9px 16px;
  border-radius: 8px;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links a.active { color: #fff; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px;
  height: 3px; border-radius: 2px; background: var(--gold);
}
.nav-cta { margin-left: 10px; padding: 10px 20px !important; }

/* .nav-links a is (0,1,1) and outranks .btn--gold (0,1,0), so the nav CTA was
   painted with the pale link colour instead of its own: #cfe6d6 on gold, a
   1.6:1 contrast, while the identical hero button measured 6.66:1. The hover
   rule is (0,2,1) so it needs beating separately or white lands on gold. */
.nav-links .btn--gold { color: var(--navy-deep); }
.nav-links .btn--gold:hover { color: var(--navy-deep); background: var(--gold-soft); }
.nav-links .btn--outline { color: #fff; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; height: 2.5px; width: 24px; background: #fff; border-radius: 2px; transition: .25s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--navy-deep);
}
/* Crossfading background slideshow */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 25%;
  opacity: 0;
  animation: heroFade 21s infinite;
}
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }
@keyframes heroFade {
  0%        { opacity: 0; }
  7%, 31%   { opacity: 1; }
  38%, 100% { opacity: 0; }
}
/* Gradient + glow overlays sit above the photos, below the text */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(7,41,29,.88) 0%, rgba(8,52,30,.64) 45%, rgba(12,74,42,.34) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 80% 20%, rgba(63,174,110,.28), transparent 55%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 720px;
  padding: 110px 0 120px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:first-child { opacity: 1; }
}
.hero .tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 22px;
}
.hero .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero-eyebrow { display: block; color: var(--gold-soft); margin-bottom: 16px; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  margin-bottom: 18px;
}
.hero h1 .accent { color: var(--gold-soft); }
.hero p { font-size: 1.18rem; color: #dcebe1; max-width: 560px; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Page header (interior pages) */
.page-hero {
  color: #fff; text-align: center;
  background: linear-gradient(120deg, var(--navy-deep), var(--blue));
  padding: 96px 0 76px;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 120%, rgba(63,174,110,.32), transparent 50%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); max-width: 760px; margin: 0 auto; }
.page-hero p { color: #cfe6d6; font-size: 1.12rem; max-width: 620px; margin: 0 auto; }

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat .num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; color: var(--gold); line-height: 1; }
.stat .label { font-size: .92rem; color: #b4cdbd; letter-spacing: .03em; margin-top: 8px; }

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Inline SVG icon defaults */
.info-list .ic svg {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.info-list .ic svg { width: 22px; height: 22px; stroke: var(--blue); }
.info-list .ic svg.fill { fill: var(--blue); stroke: none; }

/* Sports by season — clean, cohesive cards */
/* Season line-up — ruled columns of a program sheet, not floating cards. */
.seasons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--navy);
}
.season {
  background: transparent;
  padding: 20px 26px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.season:nth-child(3n) { border-right: 0; }
.season:hover { background: rgba(212,175,55,.06); }
.season__head {
  background: transparent;
  color: var(--navy);
  padding: 0 0 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.season__head h3 { color: var(--navy); margin: 0; font-size: 1.35rem; }
.season__head .count {
  color: var(--gold); font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.season ul { list-style: none; margin: 0; padding: 4px 0 0; }
.season li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 0;
  font-weight: 600; color: var(--navy);
}
.season li:last-child { border-bottom: 0; }
.season li::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold);
}

/* Scoreboard — the stat strip reads like a game board. */
.scoreboard .num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.scoreboard .stat { position: relative; padding: 6px 10px; }
.scoreboard .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,.16);
}

/* Interior page heroes carry a real Panthers photo behind the gradient.
   Paths live here, never in an inline custom property — a relative url() in
   an inline style resolves against the stylesheet, not the page. */
.page-hero--team,
.page-hero--action,
.page-hero--field { background-size: cover; background-position: center 32%; }
.page-hero--team   { background-image: linear-gradient(120deg, rgba(7,51,29,.90), rgba(15,94,54,.78)), url('../images/team.jpg'); }
.page-hero--action { background-image: linear-gradient(120deg, rgba(7,51,29,.90), rgba(15,94,54,.78)), url('../images/action-1.jpg'); }
.page-hero--field  { background-image: linear-gradient(120deg, rgba(7,51,29,.90), rgba(15,94,54,.78)), url('../images/baseball.jpg'); }

/* Visible keyboard focus — the site had none outside form fields. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-header :where(a, button):focus-visible { outline-color: var(--gold-soft); }

/* Photo gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery img { width: 100%; height: 230px; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(7,51,29,.85));
  color: #fff; font-weight: 700; font-size: .92rem; letter-spacing: .02em;
}

/* Image + text split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img, .media-frame {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame {
  min-height: 360px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  position: relative;
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
  overflow: hidden;
}

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  color: var(--navy-deep);
  text-align: center;
  border-radius: var(--radius);
  padding: 56px 32px;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: var(--navy-deep); font-size: clamp(1.8rem, 4vw, 2.5rem); }
.cta-band p { color: #3a3210; max-width: 560px; margin: 0 auto 28px; font-size: 1.08rem; }

/* ==========================================================================
   About-specific
   ========================================================================== */
/* Board roster — ruled cells of a program sheet, not floating cards. */
.board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--navy);
}
.member {
  text-align: left;
  padding: 24px 22px 22px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  transition: background .25s ease;
}
.member:nth-child(3n) { border-right: 0; }
.member:hover { background: rgba(212,175,55,.07); }
.member span {
  display: block;
  color: var(--gold); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
.member h4 { margin: 0; font-size: 1.25rem; color: var(--navy); }

/* ==========================================================================
   Program sheet — this site's section language.
   Uniform rounded-card grids are the biggest "AI-built" tell, so the funding
   list and the enrollment steps are built from the structures of a printed
   game program instead: hairline rules and jersey numerals.
   ========================================================================== */

/* Numbered rows — what your support funds */
.roster { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.rrow {
  position: relative;
  display: grid; grid-template-columns: 74px 1fr; gap: 0 20px;
  padding: 26px 18px 24px;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
/* Gold marker posts down the row on hover — transform only, no layout cost. */
.rrow::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.rrow:hover { background: rgba(212,175,55,.06); }
.rrow:hover::after { transform: scaleY(1); }
.rnum {
  font-size: 2.3rem; font-weight: 900; line-height: .9;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.rbody h3 { margin: 0 0 6px; font-size: 1.2rem; color: var(--navy); }
.rbody p { margin: 0; color: var(--muted); max-width: 64ch; }

/* Six funding rows in a single column ran very long on a wide screen. Two
   columns from 900px halves the height and fills the space the one-column
   list was wasting. Scoped to this list - the rosters on 404, Calendar and
   the Kroger steps are deliberately left alone. */
@media (min-width: 900px) {
  .roster--split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; }
  /* Paired rows share a grid row, so the measure comes from the column, not
     the 64ch default that was written for a full-width row. */
  .roster--split .rbody p { max-width: none; }
}

/* A linked roster heading was indistinguishable from a plain one - same navy,
   no underline - so nothing signalled it was clickable. */
.rbody h3 a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.rbody h3 a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* .rbody p is (0,1,1) and would beat a bare .rlink on margin, so this has to
   carry the parent class to win the tie. */
.rbody .rlink { margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
.rbody .rlink a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .rrow { grid-template-columns: 54px 1fr; padding: 22px 14px 20px; gap: 0 14px; }
  .rnum { font-size: 1.8rem; }
}

/* Board meeting schedule */
.meetings {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.meeting {
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 8px 14px;
  box-shadow: var(--shadow);
}
.meeting .m-month {
  display: block;
  color: var(--muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.meeting .m-day {
  display: block; margin: 4px 0 2px;
  font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--navy);
}
.meeting .m-year { display: block; color: var(--muted); font-size: .78rem; }

/* JS-only states — the no-JS default is every date shown normally */
.meeting.is-past { opacity: .45; }
.meeting.is-next {
  border-color: var(--gold);
  border-top: 4px solid var(--gold);
  padding-top: 13px;
}
.meeting.is-next .m-day { color: var(--navy-deep); }
.meeting .m-next {
  display: block; margin-top: 6px;
  color: var(--gold); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 900px) { .meetings { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .meetings { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 380px) { .meetings { grid-template-columns: repeat(2, 1fr); } }

.timeline { max-width: 760px; margin: 0 auto; }
.timeline .item { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding-bottom: 30px; position: relative; }
.timeline .item::before {
  content: ""; position: absolute; left: 125px; top: 8px; bottom: -8px; width: 2px; background: var(--line);
}
.timeline .item:last-child::before { display: none; }
.timeline .year { font-weight: 900; color: var(--gold); font-size: 1.3rem; text-align: right; }
.timeline .body { padding-left: 26px; position: relative; }
.timeline .body::before {
  content: ""; position: absolute; left: -6px; top: 9px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--navy); border: 3px solid var(--gold);
}
.timeline h4 { margin-bottom: 4px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 7px; color: var(--navy); font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(63,174,110,.28);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-note {
  margin-top: 14px; padding: 14px 16px; border-radius: 10px;
  background: #eaf6ec; color: #1f6b32; border: 1px solid #bfe5c6;
  font-size: .95rem; display: none;
}
.form-note.show { display: block; }
/* Failure state. The base note is styled as a success confirmation, so an error
   shown in that green would read as "sent" - the opposite of what happened. */
.form-note--error {
  background: #fdecec; color: #8c2020; border-color: #f2c2c2;
}

.cf-turnstile-wrap { margin: 4px 0 18px; min-height: 65px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .ic {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--mist); color: var(--blue);
}
.info-list strong { display: block; color: var(--navy); }
.info-list span { color: var(--muted); font-size: .96rem; }

.map-frame {
  border: 0; width: 100%; height: 300px; border-radius: var(--radius);
  box-shadow: var(--shadow); margin-top: 30px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: #a3bdac; padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .04em; margin-bottom: 16px; }
.site-footer a { color: #a3bdac; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-about p { font-size: .95rem; line-height: 1.7; }
.socials { display: flex; gap: 12px; margin-top: 16px; }
.socials a {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #cfe6d6; font-size: .9rem; font-weight: 700;
}
.socials a:hover { background: var(--gold); color: var(--navy-deep); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .86rem; color: #80987f;
}
.footer-bottom .paw { width: 15px; height: 15px; fill: var(--gold-soft); vertical-align: -2px; margin-left: 2px; }
.footer-credit {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center; font-size: .82rem; color: #80987f;
}
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--gold-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Nav collapses earlier than the rest of the layout: with the two action
   buttons the desktop bar needs ~985px + logo, so it gets its own breakpoint
   with real headroom rather than squeaking past the layout one. */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  /* The bars fold into an X while the menu is open. The handler already
     maintains aria-expanded, so the state is read straight off the markup
     rather than tracking a second class. */
  .nav-toggle span { transition: transform .25s ease, opacity .15s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-links {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 6px 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 40px rgba(0,0,0,.30);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .2s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

  /* Plain links become full-width rows separated by hairlines, so the menu
     reads as a list instead of four words floating at random widths. */
  .nav-links a:not(.btn) {
    display: block;
    padding: 16px 2px;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .nav-links a:not(.btn):hover { background: transparent; color: #fff; }
  /* Current page needs to be legible here - the desktop underline is hidden
     on mobile, which previously left no indication at all. */
  .nav-links a:not(.btn).active { color: var(--gold-soft); }
  .nav-links a.active::after { display: none; }

  /* Both buttons go full width and centred. They were inline-flex, so each
     shrink-wrapped to its own label - 123px against 196px, ragged down the
     left edge. */
  .nav-links .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 20px !important;
    font-size: 1rem;
  }
  .nav-cta { margin: 10px 0 0 !important; }
  .nav-cta--sec { margin-top: 20px !important; }
}

@media (max-width: 900px) {
  .grid-3, .grid-2, .board { grid-template-columns: 1fr 1fr; }
  .seasons { grid-template-columns: 1fr; }
  .season, .season:nth-child(3n) { border-right: 0; }
  /* Roster cell dividers have to follow the column count. */
  .member:nth-child(3n) { border-right: 1px solid var(--line); }
  .member:nth-child(2n) { border-right: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .seasons { grid-template-columns: 1fr; }
  .hero-inner { padding: 72px 0 80px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .section { padding: 60px 0; }
  .grid-3, .grid-2, .board, .gallery { grid-template-columns: 1fr; }
  .member:nth-child(3n), .member:nth-child(2n) { border-right: 0; }
  .hero-inner { padding: 54px 0 60px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .timeline .item { grid-template-columns: 70px 1fr; gap: 14px; }
  .timeline .item::before { left: 85px; }
}

/* ==========================================================================
   Kroger Community Rewards
   Base rules first, then this block's own media queries at the very bottom of
   the file, so a phone override can never lose an equal-specificity tie.
   ========================================================================== */

/* The organization code is the one thing a shopper has to carry from this page
   into the Kroger app, so it gets its own plate and tabular numerals. */
.korg {
  max-width: 620px;
  /* Top margin matters now that the plate sits BELOW the steps rather than at
     the top of the section - without it the plate butts straight against the
     last instruction row (0px on a phone). */
  margin: 46px auto 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 28px;
  padding: 26px 30px;
  background: var(--navy);
  border-radius: var(--radius);
  border-left: 5px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.korg-code {
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--gold);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.korg-label {
  display: block;
  color: var(--gold-soft);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.korg-name { color: #fff; font-weight: 700; margin: 0; line-height: 1.4; }
.korg-name span { display: block; color: #cfe6d6; font-weight: 400; font-size: .93rem; }

/* Two enrolment routes, side by side — a shopper only reads the one that
   matches how they shop, so neither is nested inside the other. */
/* Row gap is set separately from the column gap: the subgrid below inherits
   these tracks, and a 52px row gap would push each heading away from its own
   intro line instead of reading as one group. */
.kmethods { display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; row-gap: 14px; align-items: start; }
/* Subgrid keeps the heading, the intro line and the step list on the same
   baselines across both columns even though the intros differ in length.
   Where subgrid is unsupported the declaration is dropped and each column
   just flows on its own, which is the acceptable fallback. */
.kmethods { grid-template-rows: auto auto auto; }
.kmethod { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.kmethod > h3 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 4px;
  font-size: 1.35rem; color: var(--navy);
}
.kmethod > h3 .kway {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--mist);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 11px; white-space: nowrap;
}
.kmethod > p { color: var(--muted); margin: 0 0 22px; }
/* Tighter than the homepage .roster — these are short instructions, not
   funding categories with a paragraph each. */
.kmethod .rrow { padding: 16px 14px 15px; grid-template-columns: 52px 1fr; gap: 0 14px; }
.kmethod .rnum { font-size: 1.5rem; }
.kmethod .rbody p { margin: 0; color: var(--ink); max-width: 46ch; }
.kmethod .rbody p code {
  background: var(--mist); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; font-size: .92em; font-weight: 700; color: var(--navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Good-to-know facts — the questions people actually ask before enrolling. */
/* Centred to sit under the centred section head. Kept at the .section-head
   720px so the two blocks share an edge; the items themselves stay
   left-aligned because each one is a checkmark row, and centring wrapped
   text against a fixed marker reads as broken. */
.kfacts { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.kfacts li {
  position: relative;
  padding: 0 0 18px 40px;
  color: var(--muted);
}
.kfacts li:last-child { padding-bottom: 0; }
.kfacts li strong { color: var(--navy); }
.kfacts li::before {
  content: "";
  position: absolute; left: 6px; top: 8px;
  width: 12px; height: 7px;
  border-left: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transform: rotate(-45deg);
}

/* Homepage teaser for the full page. */


@media (max-width: 900px) {
  /* One column: there is nothing to align across, so the subgrid spans come
     off entirely rather than leaving each method claiming three tracks. */
  .kmethods { grid-template-columns: 1fr; grid-template-rows: none; gap: 44px; }
  .kmethod { display: block; grid-row: auto; }
}
@media (max-width: 560px) {
  /* The code plate stacks so a 5-character code never shares a row with
     two lines of organisation name on a narrow phone. */
  .korg { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px; text-align: left; }
  .kmethod .rrow { grid-template-columns: 42px 1fr; padding: 14px 10px 13px; }
  .kmethod .rnum { font-size: 1.3rem; }
  .kfacts li { padding-left: 34px; }
}

/* ==========================================================================
   Kroger flyer — the club's own handout, shown as written
   ========================================================================== */
.kflyer { max-width: 720px; margin: 0 auto; }
.kflyer figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.kflyer img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kflyer-actions { margin: 28px 0 0; text-align: center; font-size: .95rem; }

@media (max-width: 560px) {
  /* A letter-size page shrunk to a phone is unreadable anyway, so the frame
     gets out of the way and the full-size link does the real work. */
  .kflyer figure { padding: 8px; }
}