/* ============================================================
   Custom Disc Golf Tee Signs — Foundations
   Type + Color tokens. Import this first.
   Gotham (brand typeface) self-hosted from fonts/. IBM Plex Mono via CDN.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- GOTHAM — brand typeface (self-hosted) ---------- */
@font-face { font-family:'Gotham'; font-weight:100; font-style:normal; font-display:swap; src:url('fonts/Gotham-Thin.otf') format('opentype'); }
@font-face { font-family:'Gotham'; font-weight:100; font-style:italic; font-display:swap; src:url('fonts/Gotham-ThinItalic.otf') format('opentype'); }
@font-face { font-family:'Gotham'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/GothamLight.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:300; font-style:italic; font-display:swap; src:url('fonts/GothamLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/GothamBook.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/GothamBookItalic.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/GothamMedium.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/GothamBold.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/GothamBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Gotham'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Gotham-Black.otf') format('opentype'); }
@font-face { font-family:'Gotham'; font-weight:900; font-style:italic; font-display:swap; src:url('fonts/Gotham-UltraItalic.otf') format('opentype'); }

:root {
  /* ---------- BRAND COLORS (woodland) ---------- */
  --ink:        #1B1610; /* warm bark-black — primary logo ink / text */
  --pine:       #1E472E; /* primary — deep forest green */
  --pine-700:   #163823;
  --pine-900:   #0E2718;
  --fairway:    #3B7748; /* fern — mid green, interactive / links on dark */
  --moss:       #E6ECDB; /* pale sage tint — section wash */

  --bark:       #5E4128; /* wood-post brown — earthy structural accent */
  --bark-700:   #46301D;
  --sage:       #97A47B; /* soft olive — quiet natural accent / tags */

  --flight:     #C0652B; /* accent — trail amber (CTAs, highlights) */
  --flight-600: #A4521F;
  --flight-100: #F2E0CF;

  --sky:        #3E6E7B; /* secondary — muted lake blue, used sparingly */

  /* ---------- NATURAL NEUTRALS (birch → bark, faint green undertone) ---------- */
  --paper:      #F7F4EA; /* default page background — birch cream */
  --sand:       #EBE6D4; /* raised wash / alt section — oat */
  --stone-50:   #F2F0E5;
  --stone-100:  #E7E3D2;
  --stone-200:  #D5D1BD;
  --stone-300:  #BBB89D;
  --stone-400:  #989775;
  --stone-500:  #757359;
  --stone-600:  #565643;
  --stone-700:  #3F3F30;
  --stone-800:  #28281E;
  --white:      #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:         var(--paper);
  --bg-alt:     var(--sand);
  --surface:    var(--white);
  --fg1:        var(--ink);      /* primary text */
  --fg2:        var(--stone-600); /* secondary text */
  --fg3:        var(--stone-400); /* muted / captions */
  --line:       var(--stone-200); /* hairline borders */
  --line-strong:var(--stone-300);

  --primary:    var(--pine);
  --primary-fg: var(--paper);
  --accent:     var(--flight);
  --accent-fg:  var(--white);
  --link:       var(--fairway);

  --success:    #2F7A4D;
  --warning:    #D98E1F;
  --danger:     #C0392B;
  --info:       var(--sky);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Gotham', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-body:    'Gotham', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --text-xs:   0.75rem;   /* 12 — labels, fine print */
  --text-sm:   0.875rem;  /* 14 — captions, meta */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead body */
  --text-xl:   1.375rem;  /* 22 — h4 */
  --text-2xl:  1.75rem;   /* 28 — h3 */
  --text-3xl:  2.25rem;   /* 36 — h2 */
  --text-4xl:  3rem;      /* 48 — h1 */
  --text-5xl:  4rem;      /* 64 — display */
  --text-6xl:  5.5rem;    /* 88 — hero */

  /* ---------- WEIGHTS ---------- */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  500;  /* Gotham steps Medium(500) → Bold(700); no 600 */
  --w-bold:  700;
  --w-black: 800;

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(22,19,15,.06), 0 1px 1px rgba(22,19,15,.04);
  --shadow-md: 0 4px 14px rgba(22,19,15,.08), 0 2px 4px rgba(22,19,15,.05);
  --shadow-lg: 0 18px 44px rgba(22,19,15,.12), 0 6px 14px rgba(22,19,15,.06);

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;
}

/* ============================================================
   SEMANTIC TYPE — apply directly or copy into components
   Display & headings: Gotham, ALL CAPS (brand device). Body: Gotham sentence case.
   Caps headings take slight positive tracking; body stays mixed case.
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--text-6xl);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-4xl);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-med);
  font-size: var(--text-2xl);
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-med);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--fg1);
}

/* The signature brand device: thin, wide-tracked geometric caps.
   Used for eyebrows, section kickers, and sign-style labels. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--fg2);
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--fg2);
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg1);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  font-size: var(--text-sm);
  color: var(--fg3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}


/* ===== site.css ===== */
/* Site-wide chrome for the Custom Disc Golf Tee Signs website (Direction A). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); }
#root { height: 100vh; }
::selection { background: var(--flight); color: #fff; }
img { max-width: 100%; }

/* Quote modal */
.ov { position: fixed; inset: 0; z-index: 300; background: rgba(16,19,12,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: f 180ms ease; overflow: auto; }
.md { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 34px;
  width: 100%; max-width: 580px; position: relative; animation: r 220ms cubic-bezier(.22,.61,.36,1); margin: auto; }
.md h3.mt { font-family: var(--font-display); font-weight: 700; font-size: 26px; text-transform: uppercase;
  letter-spacing: .01em; color: var(--fg1); margin: 0 0 4px; }
.md p.ms { font-family: var(--font-body); color: var(--fg2); margin: 0 0 20px; font-size: 15px; }
.x { position: absolute; top: 16px; right: 16px; background: var(--stone-100); border: none; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg2); }
.x:hover { background: var(--stone-200); }
@keyframes f { from { opacity: 0; } }
@keyframes r { from { opacity: 0; transform: translateY(14px); } }

/* Page banner (inner pages) */
.banner { background: var(--moss); padding: 118px 0 56px; }

/* ============================================================
   RESPONSIVE  —  tablet & mobile
   Inline grid styles are overridden via attribute selectors
   (prefix-matched so browser value normalization can't break them).
   ============================================================ */

.navtog { display: none; }

/* --- Tablet: thin out dense multi-column grids --- */
@media (max-width: 980px) {
  [style*="repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.7fr"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Stack two-column section layouts --- */
@media (max-width: 820px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 0.85fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.25fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 120px"] { grid-template-columns: 1fr !important; }
  /* Alternating course rows stack image-on-top */
  .crow { flex-direction: column !important; gap: 24px !important; }
  .crow > * { width: 100% !important; flex: none !important; }
}

/* --- Mobile nav: hamburger + dropdown --- */
@media (max-width: 940px) {
  .navtog { display: inline-flex !important; align-items: center; }
  header .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); padding: 6px 0 14px; display: none !important;
  }
  header .nav.open { display: flex !important; animation: f 160ms ease; }
  header .nav a { padding: 14px 28px; font-size: 17px !important; color: var(--fg1) !important; }
  header .nav button {
    margin: 12px 28px 2px; width: calc(100% - 56px); justify-content: center;
    background: var(--flight) !important; color: #fff !important;
  }
}

/* --- Phone: collapse remaining grids to 1–2 up, tighten gutters --- */
@media (max-width: 600px) {
  [style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="repeat(2"] { grid-template-columns: 1fr !important; }
  .ctr { padding-left: 18px !important; padding-right: 18px !important; }
}


/* ============================================================
   STATIC DEPLOYMENT OVERRIDES (added for the crawlable build)
   ============================================================ */
html, body { height: auto !important; margin: 0; background: var(--paper); overflow-x: clip; max-width: 100%; }
html { overflow-x: clip; }
/* The old app wrapper scrolled internally; let the page scroll normally. */
#root > div { height: auto !important; overflow: visible !important; }
/* Static lightbox overlay */
.sl-lightbox { position: fixed; inset: 0; background: rgba(15,12,8,.88); display: none; align-items: center; justify-content: center; z-index: 200; padding: 4vw; cursor: zoom-out; }
.sl-lightbox.open { display: flex; }
.sl-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }