/*
 * Golf The Bay — seasonal skin. CURRENT SEASON: FALL (shipped 2026-10-06).
 * ------------------------------------------------------------------------
 * One file, linked on every public page right after fonts.css (static pages
 * and the SSR templates in api/). It only re-tints: the brand greens stay, the
 * paper warms up, gold becomes copper, and the homepage fairways turn to
 * foliage. To retire the season, empty this file (keep the comment) and bump
 * the ?v= on its links — no page needs editing.
 *
 * Selectors use `html:root` / `html body …` so they win over each page's own
 * inline :root and component rules regardless of load order.
 * Copper #a8501a is ≥4.5:1 on every surface it sits on (white, card, paper).
 */

html:root {
  /* Shared app tokens (design-tokens.css) */
  --bg: #f3ebdd;
  --bg-paper: #f8f0e3;
  --card-bg: #fffbf4;
  --border: #c99b6d;
  --border-light: #e2cfb6;
  --gold: #a8501a;

  /* SSR page tokens (hubs, report, regions, cities) */
  --line: #e6d8c2;

  /* Homepage map palette */
  --paper: #f2e6d3;
  --paper-dark: #e6d4b8;

  --fall-amber: #d98a2b;
  --fall-copper: #a8501a;
  --fall-rust: #9c3d1e;
  --fall-olive: #7d8a3a;
  --fall-gold: #b8901c;
  --fall-trim: linear-gradient(90deg, #9c3d1e, #d98a2b 50%, #9c3d1e);
}

/* Amber trim under every header: app pages and SSR banners. */
html body .site-header {
  border-bottom: 4px solid transparent;
  border-image: var(--fall-trim) 1;
}
html body .site-banner { border-bottom: 4px solid var(--fall-amber); }
html body .topnav { border-bottom-color: var(--border-light); }

/* Tee-time hour bars on /app pick up the copper edge. */
html body .time-slot-header { border-bottom-color: var(--fall-copper); }

/* Homepage: link bar gets the trim; fairways read as autumn foliage. Colour
   only — never touch pointer-events, size or position on the map. */
html body .seo-footer { border-top: 3px solid var(--fall-amber); }
/* Foliage follows the land, not the marker order: each region turns its own
   way and most of every region stays green (heritage first). Coast + fog belt
   (SF, Marin, Monterey) stays evergreen with a little olive; the oak hills of
   the East/South Bay go amber and copper; wine country turns vineyard gold and
   red; Sacramento (city of trees) goes rust; Tahoe's aspens go gold. Markers
   carry data-region (index.html). Colour only — never touch pointer-events,
   size or position on the map. */
html body .fairway[data-region="San Francisco"]:nth-child(4n + 1),
html body .fairway[data-region="North Bay"]:nth-child(4n + 1),
html body .fairway[data-region="Monterey"]:nth-child(4n + 1),
html body .fairway[data-region="Central Coast"]:nth-child(5n + 4) { background: var(--fall-olive); box-shadow: 0 0 8px rgba(125, 138, 58, 0.45); }

html body .fairway[data-region="East Bay"]:nth-child(3n + 1),
html body .fairway[data-region="South Bay"]:nth-child(7n + 5),
html body .fairway[data-region="Sonoma"]:nth-child(3n + 1),
html body .fairway[data-region="Sacramento"]:nth-child(5n + 3),
html body .fairway[data-region="Central Coast"]:nth-child(3n + 1) { background: var(--fall-amber); box-shadow: 0 0 8px rgba(217, 138, 43, 0.45); }

html body .fairway[data-region="South Bay"]:nth-child(3n + 1),
html body .fairway[data-region="East Bay"]:nth-child(7n + 2) { background: var(--fall-copper); box-shadow: 0 0 8px rgba(168, 80, 26, 0.45); }

html body .fairway[data-region="Napa"]:nth-child(3n + 1),
html body .fairway[data-region="Central Valley"]:nth-child(2n + 1),
html body .fairway[data-region="Lake Tahoe"]:nth-child(2n + 1) { background: var(--fall-gold); box-shadow: 0 0 8px rgba(184, 144, 28, 0.45); }

html body .fairway[data-region="Sacramento"]:nth-child(3n + 1),
html body .fairway[data-region="Napa"]:nth-child(5n + 2),
html body .fairway[data-region="Sonoma"]:nth-child(5n + 2) { background: var(--fall-rust); box-shadow: 0 0 8px rgba(156, 61, 30, 0.45); }

/* Keep the hover highlight (must follow the rules above: same specificity). */
html body .fairway[data-region]:hover, html body .fairway:hover { background: var(--fairway-light); }