/*
 * AGYL — Arizona Girls Youth Lacrosse
 * Design system v1.0 — written from scratch, no overrides needed
 *
 * BRAND COLORS
 *   Rose:    #d7657b  (primary accent — buttons, links, highlights)
 *   Cream:   #fbeed0  (header & footer — sampled from the logo artwork)
 *   Olive:   #4b4c30  (nav ink on cream, schedule chips, standings)
 *   Charcoal:#1a1a1a  (hero overlays)
 *   Page bg: #faf8f5
 *
 * TO CHANGE A COLOR: update the CSS variable in :root below.
 * That's it. One place, all changes cascade automatically.
 *
 * SECTIONS
 *   1. Variables & Reset
 *   2. Typography
 *   3. Layout
 *   4. Header & Nav
 *   5. Footer
 *   6. Buttons
 *   7. Hero
 *   8. Cards & Panels
 *   9. Forms
 *  10. Schedule & Standings
 *  11. Team Directory
 *  12. FAQ Accordion
 *  13. Utilities
 *  14. Responsive
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ─────────────────────────────────────────────────────────
   1. VARIABLES & RESET
   ───────────────────────────────────────────────────────── */

:root {
  /* Brand */
  /* Rose. #d7657b is the brand tone but only reaches 3.48:1 against white, so
     it is reserved for fills, dots, pips and borders — never text or button
     labels. --rose-deep is the text-safe tone, --rose-deeper the hover. */
  --rose:         #d7657b;
  --rose-deep:    #b14a5f;
  --rose-deeper:  #9d4053;
  --rose-light:   #f5c4cf;
  --rose-bg:      rgba(215,101,123,0.08);
  /* Hero accent — light enough to clear 3:1 (large-text threshold) over the
     hero scrim; too saturated for AA at body-text size */
  --rose-hero:    #efaebb;
  /* Rim colour for the dark-glass hero pills/buttons (.hero-nav-pill,
     .button-dark, .eyebrow/.section-kicker on dark backgrounds) — used as a
     low-alpha border, not text. */
  --rose-gold:    #f0d0bd;

  --charcoal:     #1a1a1a;
  --charcoal-2:   #242424;

  --olive:        #4b4c30;
  --olive-deep:   #383921;
  --olive-bg:     #f0f0e8;
  --olive-border: #c8c8a8;

  /* Cream — sampled from the logo artwork (#fbeed0) so the mark sits on the
     same field it was drawn on. Used for the header and footer. */
  --cream:        #fbeed0;
  --cream-soft:   #fdf6e4;
  --cream-line:   rgba(75,76,48,0.16);

  /* Hero overlay — one flat black wash, no gradient */
  --hero-scrim:    rgba(0,0,0,0.45);
  --hero-scrim-sm: rgba(0,0,0,0.49);

  /* Surfaces */
  --bg:           #faf8f5;
  --bg-alt:       #f3efe8;
  --surface:      #ffffff;
  --surface-soft: #f7f3ee;
  /* --line is decorative (card edges, table rules). --line-strong is for the
     boundary of an actual control — inputs, chips, tabs — which WCAG 1.4.11
     requires to reach 3:1 against its background. */
  --line:         rgba(28,26,23,0.10);
  --line-strong:  rgba(28,26,23,0.50);

  /* Text */
  --text:         #1c1a17;
  --muted:        #6b6157;
  --soft:         #736b63;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(28,26,23,0.06);
  --shadow:       0 4px 20px rgba(28,26,23,0.08);
  --shadow-lg:    0 8px 40px rgba(28,26,23,0.12);

  /* Spacing & shape */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-lg:    24px;
  --max:          1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

/* ─────────────────────────────────────────────────────────
   2. TYPOGRAPHY
   ───────────────────────────────────────────────────────── */

.display {
  font-size: clamp(2.8rem, 8vw, 5.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: white;
  max-width: 13ch;
}
.display em { color: var(--rose-hero); font-style: normal; }

h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 700; }

.section-heading { max-width: 16ch; }
.section-heading--plain { max-width: 20ch; }
.lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
  color: rgba(232,240,250,.92);
  max-width: 60ch;
}
.copy { max-width: 64ch; }
.copy > * + * { margin-top: 1rem; }
.copy p { color: var(--muted); line-height: 1.75; }

.section-kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .88rem;
  border-radius: 999px;
  background: var(--rose-bg);
  border: 1px solid rgba(215,101,123,0.22);
  color: var(--rose-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
/* On dark backgrounds — dark warm-glass fill with a rose-gold rim, so the
   pill stays legible on its own regardless of how bright the photo behind
   it is (a translucent white fill faded out once the hero scrim was
   lightened). Rim alpha is tuned to clear 3:1 non-text contrast (1.4.11)
   against the busiest new hero photo; fill/text clears body-text AA with
   wide margin, see TODO.md's standing constraint. */
.hero-home .eyebrow,
.hero-home .section-kicker,
.page-hero .eyebrow,
.page-hero .section-kicker,
.section-dark .eyebrow,
.section-dark .section-kicker {
  background: rgba(20,16,14,.42);
  border-color: rgba(240,208,189,.65);
  color: rgba(255,255,255,.92);
}

/* ─────────────────────────────────────────────────────────
   3. LAYOUT
   ───────────────────────────────────────────────────────── */

.container {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}
section { padding: clamp(64px, 8vw, 100px) 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--charcoal); color: white; }

/* Stacks */
.stack-xl > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 1.1rem; }
.stack-md > * + * { margin-top: .85rem; }

/* Grids */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; align-items: start; }
.split-balanced { align-items: center; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.leadership-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }

/* Section header patterns */
.section-header-clean {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,420px);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.section-header-clean--action { align-items: center; }
.section-header-copy { color: var(--muted); line-height: 1.72; }
.section-block > * + * { margin-top: 2rem; }

.subpage-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.subpage-links a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .82rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff;
  color: var(--text); font-weight: 700;
}
.subpage-links a:hover { background: var(--surface-soft); }

.inline-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.inline-chip {
  display: inline-block;
  padding: .62rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 1rem;
  color: var(--text);
}

.checklist { list-style: none; display: grid; gap: .6rem; }
.checklist li { padding-left: 1.2rem; position: relative; color: var(--muted); line-height: 1.6; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--rose-deep); font-weight: 700; }

.note { font-size: .84rem; color: var(--soft); }

/* ─────────────────────────────────────────────────────────
   4. HEADER & NAV
   ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
}
.header-inner {
  min-height: var(--header-h, 164px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  transition: min-height .22s ease;
}
.brand { padding: .4rem 0; }
.brand img {
  height: var(--logo-h, 144px);
  width: auto;
  max-width: 300px;
  object-fit: contain;
  display: block;
  transition: height .22s ease;
}
/* Shrink once the page scrolls so the larger mark doesn't cost viewport height */
.site-header[data-scrolled] {
  --header-h: 104px;
  --logo-h:   84px;
  box-shadow: 0 2px 16px rgba(75,76,48,.10);
}
@media (max-width: 1040px) {
  .site-header { --header-h: 112px; --logo-h: 92px; }
  .site-header[data-scrolled] { --header-h: 88px; --logo-h: 70px; }
}
.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
}
.desktop-nav > a,
.nav-group summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--olive);
  padding: .65rem .9rem;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background .15s, color .15s;
}
.desktop-nav > a:hover,
.desktop-nav > a.active,
.nav-group summary:hover,
.nav-group[open] summary {
  background: rgba(75,76,48,.10);
  color: var(--olive-deep);
}
.desktop-nav > a.active,
.nav-group summary.active { color: var(--rose-deep); }
.nav-group { position: relative; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  display: grid;
  gap: .15rem;
  padding: .5rem;
  background: var(--cream-soft);
  border: 1px solid var(--cream-line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(75,76,48,.18);
  z-index: 10;
}
.nav-dropdown a {
  color: var(--olive);
  padding: .65rem .75rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.nav-dropdown a:hover { background: rgba(75,76,48,.10); color: var(--olive-deep); }
.header-actions { display: flex; align-items: center; gap: .75rem; justify-content: flex-end; }

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--cream-line);
  background: rgba(75,76,48,.06);
  color: var(--olive);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--olive); border-radius: 2px; }
.mobile-menu { background: var(--cream-soft); border-top: 1px solid var(--cream-line); }
.mobile-menu-inner { display: grid; gap: .2rem; padding: 1rem 0 1.25rem; }
.mobile-menu a,
.mobile-group summary {
  color: var(--olive);
  font-weight: 600;
  padding: .85rem 0;
  display: block;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  transition: color .12s;
}
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-menu a:hover,
.mobile-group summary:hover { color: var(--rose-deep); }
.mobile-subnav { padding-left: 1rem; display: grid; gap: .15rem; }
.mobile-subnav a { color: var(--muted); font-weight: 500; padding: .5rem 0; font-size: .88rem; }
.mobile-cta { margin-top: .75rem; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 200;
  background: white; padding: .5rem 1rem;
  border-radius: 8px; color: var(--text);
}

/* ─────────────────────────────────────────────────────────
   5. FOOTER
   ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--cream);
  color: var(--muted);
  border-top: 1px solid var(--cream-line);
  padding-top: 4rem;
}
.footer-brand-block { display: flex; flex-direction: column; gap: .75rem; }
.footer-brand img {
  height: 104px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}
.footer-tagline { font-weight: 600; color: var(--olive-deep); }
.footer-badge {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; color: var(--soft);
  letter-spacing: .06em; text-transform: uppercase;
  margin-top: .5rem;
}
.footer-badge-dot { color: var(--rose); }
.footer-title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1rem;
}
.footer-links { display: grid; gap: .55rem; }
.footer-links a { color: var(--muted); font-size: .9rem; transition: color .15s; }
.footer-links a:hover { color: var(--rose-deep); }
.footer-divider { border: none; border-top: 1px solid var(--cream-line); margin-top: 3rem; }
.footer-bottom {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0;
  font-size: .8rem;
  color: var(--soft);
}
.footer-bottom a { color: var(--muted); transition: color .15s; }
.footer-bottom a:hover { color: var(--rose-deep); }
.footer-legal {
  padding-top: 1rem; margin-top: 2rem;
  border-top: 1px solid var(--cream-line);
  color: var(--soft);
  font-size: .82rem;
}

/* ─────────────────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  border: none;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button-primary {
  padding: .85rem 1.6rem;
  background: var(--rose-deep);
  color: white;
  box-shadow: 0 4px 16px rgba(215,101,123,.28);
}
.button-primary:hover {
  background: var(--rose-deeper);
  box-shadow: 0 6px 24px rgba(215,101,123,.38);
}
.button-outline {
  padding: .82rem 1.55rem;
  background: white;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
}
.button-outline:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.button-dark {
  padding: .82rem 1.55rem;
  /* Same dark warm-glass + rose-gold rim as the hero pills, so it doesn't
     look like a leftover from the old translucent-white treatment */
  background: rgba(20,16,14,.42);
  border: 1.5px solid rgba(240,208,189,.65);
  color: rgba(255,255,255,.92);
}
.button-dark:hover { background: rgba(20,16,14,.58); }
.button-ghost {
  padding: .82rem 1.55rem;
  background: transparent;
  color: var(--rose-deep);
  border: 1.5px solid rgba(177,74,95,.55);
}
.button-ghost:hover { background: var(--rose-bg); }
.button-sm {
  padding: .6rem 1.15rem;
  font-size: .84rem;
}
.actions, .section-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ─────────────────────────────────────────────────────────
   7. HERO
   ───────────────────────────────────────────────────────── */

.hero-home,
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  /* Contains .page-hero-inner's z-index:2 locally. Without this, the hero
     section doesn't establish its own stacking context, so the inner
     content's z-index leaks out and can out-stack the sticky header's
     dropdown menu (z-index:100) despite the header's much higher value —
     the header's context never gets a chance to bound it. */
  z-index: 0;
}
.hero-home { min-height: min(82svh, 800px); }
.page-hero { min-height: 46svh; }

/* Background image */
.hero-bg,
.page-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source crops are 2000x1150 (1.74:1); the rendered hero box is commonly
     ~2.2:1 on typical desktop viewports, so object-fit:cover crops ~20% MORE
     off the image than the source file shows. Default center positioning
     splits that evenly top/bottom, which cuts through heads positioned near
     the top of a source crop. Biasing toward the top preserves faces/heads
     at the cost of some foreground (grass/feet) instead. */
  object-position: center 15%;
}
/* Flat black overlay on bg images — one even wash, no gradient, so the
   photograph reads the same across the whole frame */
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-scrim);
}
.page-hero-shade {
  position: absolute; inset: 0;
  background: var(--hero-scrim);
}
/* Narrow screens: copy spans the full width over the busiest part of the
   photo, so the wash goes a step heavier */
@media (max-width: 760px) {
  .hero-home::before,
  .page-hero-shade { background: var(--hero-scrim-sm); }
}
.hero-home-inner,
.page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 8rem 0 4rem;
}
.hero-copy { max-width: 820px; }
.page-hero h1 {
  color: white;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  max-width: 14ch;
  margin-bottom: .75rem;
}
.page-hero .lead { margin-top: .5rem; }

/* Hero nav pills */
.hero-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
}
.hero-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .52rem 1rem;
  border-radius: 999px;
  /* Dark warm-glass fill + rose-gold rim, same treatment as the eyebrow/
     kicker pills — stays legible independent of hero photo brightness */
  border: 1px solid rgba(240,208,189,.65);
  background: rgba(20,16,14,.42);
  color: rgba(255,255,255,.92);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.hero-nav-pill svg { flex-shrink: 0; opacity: .7; transition: opacity .15s; }
.hero-nav-pill:hover {
  background: rgba(215,101,123,.2);
  border-color: rgba(215,101,123,.45);
  color: white;
}
.hero-nav-pill:hover svg { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   8. CARDS & PANELS
   ───────────────────────────────────────────────────────── */

.metric,
.info-panel,
.result-shell,
.leadership-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.55rem;
  box-shadow: none;
}
.metric h3,
.info-panel h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: .6rem; }
.metric p,
.info-panel p { color: var(--muted); line-height: 1.72; }
.info-panel strong { display: block; font-weight: 700; margin-bottom: .35rem; }
.info-panel a { color: var(--rose-deep); font-weight: 600; }
.info-panel a:hover { color: var(--rose); }
.info-panel .button-outline { border: 0; padding: .78rem 1rem; }

.leadership-card { display: flex; flex-direction: column; gap: .7rem; }
.leadership-card h3 { font-size: 1.35rem; letter-spacing: -.03em; margin: 0; }
.leadership-email { color: var(--rose-deep); font-weight: 700; display: block; margin-top: auto; padding-top: .3rem; }
.leadership-role { color: var(--muted); font-weight: 700; }

/* Bylaws */
.bylaws-stack { display: grid; gap: .85rem; }
.bylaw-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rose);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.bylaw-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .65rem; }
.bylaw-num { font-size: 1.05rem; font-weight: 800; color: var(--rose-deep); flex-shrink: 0; }
.bylaw-head h3 { margin: 0; font-size: 1.05rem; }
.bylaw-summary { color: var(--muted); line-height: 1.72; font-size: .95rem; margin: 0 0 .85rem; }
.bylaw-rules { list-style: none; display: grid; gap: .4rem; }
.bylaw-rules li {
  font-size: .88rem; color: var(--muted); line-height: 1.6;
  padding-left: 1.1rem; position: relative;
}
.bylaw-rules li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--rose-deep); font-size: .75rem; top: 3px;
}

/* Rule table */
.rule-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.rule-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  color: var(--muted);
  line-height: 1.5;
  font-size: .92rem;
}
.rule-row:last-child { border-bottom: none; }
.rule-row strong { color: var(--text); font-weight: 700; }

/* Age table */
.age-table .rule-row { align-items: start; }

/* Feature visual */
.feature-visual {
  min-height: 360px;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Season highlights */
.season-complete-notice {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem 1.1rem; margin-bottom: 1.25rem;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm); font-size: .9rem;
}
.season-complete-notice > span { font-size: 1.1rem; flex-shrink: 0; }
.season-complete-notice strong { display: block; color: #15803d; font-weight: 700; margin-bottom: .1rem; }

.week-status-past {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .48rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--soft);
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  vertical-align: middle;
  border: 1px solid var(--line);
}

/* ─────────────────────────────────────────────────────────
   9. FORMS
   ───────────────────────────────────────────────────────── */

.contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.contact-form-inner { display: grid; gap: 1.1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

label {
  display: grid;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}
.label-text { display: inline; }
.req { color: var(--rose-deep); font-weight: 700; margin-left: .12rem; }
.form-required-note {
  display: flex; align-items: center; gap: .2rem;
  font-size: .78rem; color: var(--soft); margin-top: .25rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text);
  font-size: .92rem;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rose-deep);
  box-shadow: 0 0 0 3px rgba(177,74,95,.30);
}
textarea { min-height: 130px; resize: vertical; }
select { cursor: pointer; }
::placeholder { color: var(--soft); }

.form-status {
  padding: .85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; line-height: 1.5;
}
.form-status--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.form-status--error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.form-actions { margin-top: .25rem; }

/* ─────────────────────────────────────────────────────────
   10. SCHEDULE & STANDINGS
   ───────────────────────────────────────────────────────── */

.league-sched-section { padding: clamp(48px, 6vw, 80px) 0; }
.schedule-wrap { position: relative; }

/* Filter bar */
.sched-filters {
  display: flex; flex-direction: column; gap: .7rem;
  margin-bottom: 1.5rem; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sched-filter-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sched-filter-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
  white-space: nowrap; min-width: 56px;
}
.sched-filter-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.sched-tab {
  padding: .38rem .8rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--muted); font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.sched-tab:hover { background: var(--bg-alt); color: var(--text); }
.sched-tab--active { background: var(--charcoal); color: white; border-color: var(--charcoal); font-weight: 700; }
.sched-tab--past { color: var(--soft); background: var(--surface-soft); }

/* Day panel */
.sched-day-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 2px solid var(--line);
}
.sched-day--hidden { display: none; }
.sched-day-week {
  display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-deep); margin-bottom: .15rem;
}
.sched-day-date { font-size: 1.2rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.sched-day-venue { font-size: .85rem; color: var(--muted); margin-top: .15rem; }

/* Grid-based schedule rows */
.sched-list {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.sched-list-header,
.sched-row {
  display: grid;
  grid-template-columns: 64px 110px 1fr 200px;
  align-items: center;
  gap: 0 1rem;
}
.sched-list-header {
  background: var(--surface-soft); border-bottom: 2px solid var(--line);
  padding: .58rem 1rem;
}
.sched-list-header span {
  font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
}
.sl-field-head { text-align: right; }
.sched-row {
  padding: .72rem 1rem;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.sched-row:last-child { border-bottom: none; }
.sched-row:hover { background: var(--surface-soft); }

.sl-div { display: flex; align-items: center; }
.div-chip {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--olive-bg); color: var(--olive); border: 1px solid var(--olive-border);
}
.sl-time { display: flex; flex-direction: column; gap: .08rem; }
.sl-time strong { font-size: .88rem; color: var(--text); font-weight: 700; }
.sl-arrive { font-size: .73rem; color: var(--muted); }
.sl-matchup { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.sl-home { font-weight: 700; color: var(--text); font-size: .9rem; }
.sl-vs { font-size: .66rem; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }
.sl-away { color: var(--muted); font-size: .9rem; }
.sl-field { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.sl-field-link { font-size: .82rem; color: var(--rose-deep); font-weight: 600; white-space: nowrap; }
.sl-field-link:hover { color: var(--rose-deeper); text-decoration: underline; }
.field-link { color: var(--rose-deep); font-weight: 600; }
.field-link:hover { color: var(--rose-deeper); text-decoration: underline; }
.field-warn { cursor: help; }
.game-note { font-size: .72rem; color: var(--soft); font-style: italic; }
.sched-msg { color: var(--muted); padding: 1.5rem 0; font-size: .95rem; }

/* Mobile cards */
.sched-cards { display: none; flex-direction: column; gap: .55rem; }
.sched-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.scard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.scard-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.scard-time { font-size: .88rem; font-weight: 700; color: var(--text); }
.scard-arrive { font-size: .75rem; color: var(--muted); }
.scard-matchup { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.scard-home { font-weight: 800; color: var(--text); font-size: .95rem; }
.scard-vs { font-size: .68rem; font-weight: 700; color: var(--soft); text-transform: uppercase; }
.scard-away { color: var(--muted); font-size: .95rem; }
.scard-field { font-size: .8rem; }
.scard-note { font-size: .75rem; color: var(--soft); font-style: italic; padding-top: .25rem; border-top: 1px solid var(--line); }

/* Standings */
.standings-wrap { display: grid; gap: .6rem; margin-bottom: 1.75rem; }
.standings-wrap:last-child { margin-bottom: 0; }
.standings-div-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rose-deep);
}
.standings-table-shell {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.standings-table { width: 100%; border-collapse: collapse; font-size: .9rem; table-layout: fixed; }
.standings-table thead tr { background: var(--surface-soft); border-bottom: 2px solid var(--line); }
.standings-table th {
  padding: .62rem 1rem; text-align: left;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft); white-space: nowrap;
}
.standings-table td { padding: .72rem 1rem; border-bottom: 1px solid var(--line); }
.standings-table tbody tr:last-child td { border-bottom: none; }
.standings-table tbody tr:hover td { background: var(--surface-soft); }
.row-leader td { background: rgba(215,101,123,.05); }

.th-rank { text-align: center; }
.th-team { text-align: left; }
.th-num { text-align: center; }
.th-pts { color: var(--olive); }

.td-rank { text-align: center; }
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose-deeper));
  color: white; font-size: .7rem; font-weight: 800;
}
.rank-num { color: var(--soft); font-size: .85rem; }
.td-team { font-weight: 700; color: var(--text); }
.td-team-inner { display: inline-flex; align-items: center; gap: .5rem; }
.leader-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); flex-shrink: 0; }
.td-num { text-align: center; color: var(--text); }
.td-muted { color: var(--muted); text-align: center; }
.td-pts { color: var(--olive); font-weight: 700; text-align: center; }
.td-pos { color: #15803d; font-weight: 700; text-align: center; }
.td-neg { color: #b91c1c; text-align: center; }

.standings-cards { display: none; flex-direction: column; gap: .45rem; }
.stand-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.stand-card--leader { background: rgba(215,101,123,.05); border-color: rgba(215,101,123,.2); }
.stand-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.stand-team { font-weight: 700; color: var(--text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-stats { display: flex; gap: .8rem; align-items: center; flex-shrink: 0; }
.stand-stat { display: flex; flex-direction: column; align-items: center; gap: .08rem; }
.stand-stat span { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.stand-stat strong { font-size: .9rem; color: var(--text); }
.stand-stat--pts strong { color: var(--olive); font-weight: 700; }
.stand-stat--pos strong { color: #15803d; }
.stand-stat--neg strong { color: #b91c1c; }

.hsp-complete { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.hsp-complete p { color: var(--muted); margin-top: .5rem; }

/* ─────────────────────────────────────────────────────────
   11. TEAM DIRECTORY
   ───────────────────────────────────────────────────────── */

/* --team-color is set inline per-card in TeamCard.astro (team.color), not a :root variable */
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--team-color);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem 1.35rem;
  display: grid;
  gap: .9rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s;
}
.team-card:hover { box-shadow: var(--shadow); border-color: rgba(215,101,123,.2); }
.team-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 .2rem; }
.team-card p { color: var(--muted); line-height: 1.72; margin: 0; }
.team-card .button-outline { border: 0; padding: .78rem 1rem; }
.team-logo {
  width: 64px; height: 64px; border-radius: 18px;
  object-fit: cover; box-shadow: 0 8px 20px rgba(10,16,32,.12);
}
.team-brandline { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; margin-bottom: 0; }
.team-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .65rem; }
.team-actions { margin-top: 1rem; }
.directory-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; margin-bottom: 2rem; gap: 1rem;
}
.directory-cta-wrap { display: flex; justify-content: flex-end; }
.team-directory-inline { display: grid; gap: 2rem; }

/* Finder */
.team-finder {
  display: grid;
  gap: 1.1rem;
  padding: 1.6rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.team-finder-compact { padding: 0; background: transparent; border: 0; border-radius: 0; }
.team-finder-inline { padding: 0; background: transparent; border: 0; box-shadow: none; }
.team-finder-inline .team-finder-form { padding: 0 1.2rem 1.2rem; border: 0; background: transparent; }
.team-finder-inline + .team-grid { margin-top: .5rem; }
.team-finder-head { margin-bottom: 1.25rem; }
.team-finder-title { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.team-finder-intro { color: var(--muted); font-size: .88rem; }
.team-finder-form { display: grid; gap: .65rem; }
.team-finder-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.finder-empty { color: var(--soft); font-size: .88rem; padding: .75rem 0; }
.finder-match { font-size: .82rem; color: var(--muted); }
.finder-results { font-size: .82rem; color: var(--muted); padding-top: .5rem; }

.finder-accordion {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.finder-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.finder-accordion summary::-webkit-details-marker { display: none; }
.finder-accordion summary::after {
  content: '+';
  font-size: 1.2rem;
  line-height: 1;
  color: var(--soft);
}
.finder-accordion[open] summary::after { content: '−'; }
.finder-accordion .team-finder-form {
  padding: 0 1.2rem 1.2rem;
  margin-top: 0;
}
.finder-grid { display: grid; gap: 2rem; }
.finder-grid-parents { grid-template-columns: 1fr 1fr; }
.finder-inline { display: grid; gap: 1rem; }
.choice-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.choice-row button {
  padding: .8rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 1rem;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.choice-row button:hover,
.choice-row button.is-active {
  background: var(--rose-deep); border-color: var(--rose-deep); color: white;
}
.result-shell {
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(215,101,123,.12), rgba(75,76,48,.08));
}
.finder-grid-parents .result-shell { max-width: 540px; }

/* Resource cards */
.resources-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.resource-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.faq-stack { display: grid; gap: .5rem; }

/* ─────────────────────────────────────────────────────────
   12. FAQ ACCORDION
   ───────────────────────────────────────────────────────── */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background .12s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-soft); }
.faq-item summary span { flex: 1; }
.faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--soft);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-body { padding: 0 1.25rem 1.1rem; }
.faq-body p { color: var(--muted); line-height: 1.75; font-size: .93rem; }

/* ─────────────────────────────────────────────────────────
   13. UTILITIES
   ───────────────────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.boundary-map { width: 100%; border-radius: var(--radius); }

/* Contact aside */
.contact-aside { display: grid; gap: 1rem; }
.contact-aside-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 0; }
.contact-aside-title-wrap { margin-bottom: 0; }

/* Homepage schedule preview */
.hsp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hsp-title { margin: .2rem 0 .3rem; }
.hsp-venue { font-size: .88rem; color: var(--rose-deep); font-weight: 600; }
.hsp-venue:hover { color: var(--rose-deeper); text-decoration: underline; }
.hsp-cta { align-self: center; white-space: nowrap; }
.hsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--line); gap: 1px;
}
.hsp-div-block { background: var(--surface); display: flex; flex-direction: column; }
.hsp-div-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem;
  background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.hsp-div-name { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); }
.hsp-div-count { font-size: .7rem; color: var(--soft); }
.hsp-game { display: flex; flex-direction: column; gap: .16rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); }
.hsp-game:last-child { border-bottom: none; }
.hsp-game-time { font-size: .73rem; font-weight: 700; color: var(--muted); }
.hsp-game-teams { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .86rem; }
.hsp-home { font-weight: 700; color: var(--text); }
.hsp-vs { font-size: .66rem; color: var(--soft); text-transform: uppercase; font-weight: 700; }
.hsp-away { color: var(--muted); }
.hsp-field { font-size: .74rem; color: var(--rose-deep); text-decoration: none; }
.hsp-field:hover { text-decoration: underline; }
.hsp-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; font-size: .82rem; color: var(--soft); }
.hsp-footer a { color: var(--rose-deep); font-weight: 700; }
.hsp-footer a:hover { color: var(--rose-deeper); }

/* ─────────────────────────────────────────────────────────
   14. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-header-clean { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .finder-grid-parents { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sched-list { display: none; }
  .sched-cards { display: flex; }
  .two-col { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .resources-cards { grid-template-columns: 1fr; }
  .hsp-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .leadership-grid { grid-template-columns: 1fr; }
  .standings-table-shell { display: none; }
  .standings-cards { display: flex; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .hsp-grid { grid-template-columns: 1fr; }
}