/**
 * global-styles.css — AnythingForMiles.com / NAACC
 * Single source of truth for shared styles across all pages.
 *
 * USAGE: Add to every page <head>:
 *   <link rel="stylesheet" href="/global-styles.css">
 *
 * Page-specific overrides go in a <style> block AFTER this link.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * TABLE OF CONTENTS
 *   1. Design Tokens (CSS variables)
 *   2. Reset
 *   3. Typography
 *   4. Header & Navigation
 *   5. Hamburger Menu (Mobile)
 *   6. Footer
 *   7. Buttons & Links
 *   8. Night Mode
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────────*/
:root {
  /* Brand colors */
  --black:         #0d0d0d;
  --pink:          #DE3F97;
  --orange:        #2B318A;   /* brand blue — used for UI elements */
  --strava:        #FC4C02;

  /* Ride type colors */
  --road-blue:     #2b4a7a;
  --gravel-brown:  #8b5e3c;
  --trail-green:   #3d6e44;

  /* Neutral palette */
  --off-white:     #B4B4BC;
  --cream:         #A6A6AE;
  --muted:         #666;

  /* Semantic surface colors — light mode */
  --bg:            #f2ede4;
  --bg-card:       white;
  --text:          #0d0d0d;
  --text-secondary:#333;
  --border:        rgba(0,0,0,.08);
  --header-bg:     #0d0d0d;

  /* Typography */
  --font-sans:     'Red Hat Text', sans-serif;
  --font-display:  'SohneBreit', 'Bebas Neue', sans-serif;

  /* Accent yellow (promo/callout) */
  --yellow:        #FEC00C;
}

/* ── 2. RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────────────────── */
@font-face {
  font-family: 'SohneBreit';
  src: url('https://static1.squarespace.com/static/6825cd3620ecbb4d7acf2307/t/6838f386def935435efa2be3/1748562822491/S%C3%B6hneBreit-Fett.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  transition: background .3s, color .3s;
}

a { color: var(--pink); text-decoration: none; }
a:hover { opacity: .75; }

/* ── 4. HEADER & NAVIGATION ─────────────────────────────────────────────── */
header {
  background: var(--header-bg);
  border-bottom: 3px solid var(--pink);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.logo-area    { display: flex; flex-direction: column; }
.logo-eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 2px;
}
.logo-main {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  color: white;
  line-height: 1;
  text-decoration: none;
  display: block;
  transition: opacity 0.15s;
}
.logo-main:hover { opacity: 0.75; }
.header-tagline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-sans);
}
.header-nav-desktop { display: flex; align-items: center; gap: 10px; }

/* ── 5. HAMBURGER MENU (MOBILE) ──────────────────────────────────────────── */
.hamburger-btn {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  padding: 8px 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.hamburger-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: white;
  transition: all .2s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--header-bg);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 3px solid var(--pink);
  z-index: 99;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-nav-dropdown.open { display: flex; }
.mobile-nav-dropdown a {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav-dropdown a:last-child { border-bottom: none; }
.mobile-nav-dropdown a:hover  { background: rgba(222,63,151,.1); color: var(--pink); }
.mobile-nav-dropdown a.active { color: var(--pink); background: rgba(222,63,151,.08); }
.mobile-nav-dropdown a .nav-arrow { opacity: .4; font-size: 10px; }

@media (max-width: 768px) {
  .header-inner       { padding: 10px 16px; position: relative; }
  .logo-main          { font-size: 20px; }
  .header-tagline     { display: none; }
  .header-nav-desktop { display: none; }
  .hamburger-btn      { display: flex; }
}

/* ── 6. FOOTER ───────────────────────────────────────────────────────────── */
footer {
  background: var(--black);
  color: rgba(255,255,255,.35);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px 32px;
  font-family: var(--font-sans);
}

/* ── 7. BUTTONS & LINKS ──────────────────────────────────────────────────── */
.btn-pink {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--pink);
  color: white;
  border: none;
  border-radius: 2px;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity .15s;
}
.btn-pink:hover { opacity: .85; color: white; }

.btn-ghost {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 2px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ── 8. NIGHT MODE ───────────────────────────────────────────────────────── */
body.night-mode {
  --bg:             #080e1a;
  --bg-card:        #0d1628;
  --text:           #c8d0e8;
  --text-secondary: #8899bb;
  --border:         rgba(255,255,255,.07);
  --header-bg:      #060b14;
}
body.night-mode .mobile-nav-dropdown {
  background: #060b14;
  border-color: rgba(255,255,255,.05);
}
