/* ==========================================================================
   GolfSimCanada.site — Main CSS Foundation
   SSOT Reference: 08-design-system.md & 13-build-flow.md §1.1
   Principle: Mobile-first typography-first dark editorial ecom design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Google Fonts Import
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   2. Design Tokens (:root)
   -------------------------------------------------------------------------- */
:root {
  /* Color System — Layered Dark */
  --color-bg-base:       #0A0F0D;   /* Deepest — page background */
  --color-bg-surface:    #111714;   /* Cards, panels */
  --color-bg-elevated:   #192118;   /* Hover state, dropdowns */
  --color-bg-overlay:    #1E2A22;   /* Modals, tooltips */

  /* Primary — Deep Forest Green */
  --color-primary:       #1B5E3A;   /* Main brand green */
  --color-primary-light: #2D8A57;   /* Hover / active */
  --color-primary-muted: rgba(27, 94, 58, 0.2); /* Badges, tags */

  /* Accent — Electric Gold */
  --color-accent:        #C9A84C;   /* Primary accent — CTAs, badges */
  --color-accent-bright: #E8C56A;   /* Hover state on accent */
  --color-accent-muted:  rgba(201, 168, 76, 0.133); /* Subtle highlight */

  /* Text */
  --color-text-primary:  #F0EDE6;   /* Warm white — main body */
  --color-text-secondary:#A89F8C;   /* Muted — meta, labels, dates */
  --color-text-tertiary: #6B6358;   /* Disabled, placeholders */
  --color-text-inverse:  #0A0F0D;   /* On light/gold backgrounds */

  /* Semantic */
  --color-success:       #2D8A57;
  --color-warning:       #C9A84C;
  --color-error:         #C0392B;
  --color-info:          #2980B9;

  /* Borders */
  --color-border:        #2A3530;   /* Subtle — card borders */
  --color-border-strong: #3D4F45;   /* Dividers */
  --color-border-accent: rgba(201, 168, 76, 0.267); /* Gold focus */

  /* Canada Flag Accent */
  --color-canada-red:    #D52B1E;

  /* Typography Stacks */
  --font-editorial: 'Playfair Display', 'Georgia', serif;
  --font-ui:        'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale — Mobile First Clamped */
  --text-display-2xl: clamp(56px, 8vw, 96px);
  --text-display-xl:  clamp(48px, 6vw, 72px);
  --text-display-lg:  clamp(40px, 5vw, 60px);

  --text-h1:  clamp(36px, 4.5vw, 52px);
  --text-h2:  clamp(28px, 3.5vw, 42px);
  --text-h3:  clamp(22px, 2.5vw, 32px);
  --text-h4:  clamp(18px, 2vw, 24px);

  --text-body-xl: 22px;    /* Lead paragraph / intro */
  --text-body-lg: 20px;    /* Standard body text — MINIMUM 20px per guardrails */
  --text-body-md: 18px;    /* Secondary body, list items */

  --text-label:   16px;    /* Buttons, nav items, tags */
  --text-small:   14px;    /* Meta, dates, fine print — MINIMUM UI label */
  --text-xs:      12px;    /* Legal footnotes ONLY */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --leading-loose:  1.85;

  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* Spacing System (4px base) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* Vertical Rhythm */
  --section-gap:     var(--space-20);   /* Mobile default: 80px */
  --section-gap-lg:  var(--space-24);   /* Mobile hero: 96px */
  --content-gap:     var(--space-8);
  --card-gap:        var(--space-6);

  /* Layout Containers */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 800px;
  --container-xs:     640px;

  --grid-columns: 12;
  --grid-gap:     var(--space-6);

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.7);

  --shadow-gold:  0 0 24px rgba(201,168,76,0.15), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-green: 0 0 24px rgba(27,94,58,0.3), 0 4px 16px rgba(0,0,0,0.5);

  /* Animation */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
  :root {
    --section-gap:    var(--space-32);   /* 128px desktop */
    --section-gap-lg: var(--space-40);   /* 160px desktop */
    --content-gap:    var(--space-16);   /* 64px desktop */
  }
}

/* --------------------------------------------------------------------------
   3. Minimal Modern Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);       /* 20px — NEVER below this */
  line-height: var(--leading-relaxed);  /* 1.7 */
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Push page content up on mobile so sticky bottom nav does not obscure footer */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

main#main-content {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF; /* Pure white for max contrast on dark */
  overflow-wrap: break-word;
}

h1 {
  font-family: var(--font-editorial);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--space-6);
}

h2 {
  font-family: var(--font-editorial);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

h4 {
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

p {
  margin-bottom: var(--space-6);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover, a:focus-visible {
  color: var(--color-accent-bright);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

li {
  margin-bottom: var(--space-2);
  font-size: var(--text-body-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
}

/* --------------------------------------------------------------------------
   4. Utility Classes
   -------------------------------------------------------------------------- */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-xs {
  width: 100%;
  max-width: var(--container-xs);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-gold { color: var(--color-accent); }
.text-secondary { color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   5. Editorial Prose Styles (.prose)
   -------------------------------------------------------------------------- */
.prose {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-primary);
}

.prose .lead {
  font-size: var(--text-body-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  font-weight: var(--weight-medium);
}

.prose blockquote {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-surface);
  padding: var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-8) 0;
  font-style: italic;
}

.prose blockquote p {
  margin-bottom: 0;
  color: var(--color-text-primary);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-elevated);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.prose pre {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   6. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #FFF;
    color: #000;
    font-size: 12pt;
  }

  .nav, .site-footer, .mobile-bottom-nav, .cookie-banner, .btn {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }
}