/**
 * Gym Directory USA — Design System
 * Version: 1.1
 * Design Language: Premium Editorial (aligned with home page)
 * Body font: Source Sans Pro  |  Heading font: Source Sans Pro
 * Fonts are loaded via assets/css/fonts.css (Bunny Fonts CDN — privacy-friendly)
 */

/* ============================================================
   1. COLOR TOKENS  (re-tuned to match home page palette)
   ============================================================ */
:root {
  /* Primary Palette */
  --gd-navy:        #0F0F11;   /* Deep dark — hero, dark sections */
  --gd-flame:       #DC2626;   /* Primary red CTA */
  --gd-teal:        #00BFA5;   /* Success / verified / open status */
  --gd-gold:        #C9A84C;   /* Premium / featured accent */
  --gd-off-white:   #F9F8F6;   /* Warm cream page background */

  /* Surface & UI */
  --gd-surface:     #FFFFFF;   /* Cards, modals */
  --gd-border:      #E5E7EB;   /* Subtle separators */
  --gd-muted:       #9CA3AF;   /* Secondary labels, meta info */

  /* Derived / Alpha Variants */
  --gd-navy-80:     rgba(15, 15, 17, 0.80);
  --gd-navy-60:     rgba(15, 15, 17, 0.60);
  --gd-navy-92:     rgba(15, 15, 17, 0.92);
  --gd-flame-15:    rgba(220, 38, 38, 0.15);
  --gd-flame-40:    rgba(220, 38, 38, 0.40);
  --gd-flame-08:    rgba(220, 38, 38, 0.08);
  --gd-teal-15:     rgba(0, 191, 165, 0.15);
  --gd-gold-15:     rgba(201, 168, 76, 0.15);
  --gd-white-15:    rgba(255, 255, 255, 0.15);
  --gd-white-30:    rgba(255, 255, 255, 0.30);
  --gd-white-08:    rgba(255, 255, 255, 0.08);
  --gd-white-10:    rgba(255, 255, 255, 0.10);
  --gd-white-20:    rgba(255, 255, 255, 0.20);

  /* Text Colors */
  --gd-text-primary:   #1C1C1E;
  --gd-text-secondary: #4A5568;
  --gd-text-muted:     #6B7280;
  --gd-text-light:     #9CA3AF;
  --gd-text-on-dark:   #F9F8F6;

  /* Semantic */
  --gd-success: #00BFA5;
  --gd-error:   #DC2626;

  /* ============================================================
     2. TYPOGRAPHY TOKENS
     ============================================================ */
  --gd-font-sans:    'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gd-font-display: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gd-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type Scale — Desktop */
  --gd-display:    clamp(42px, 6vw, 72px);  /* Hero H1 */
  --gd-h1:         clamp(32px, 4vw, 48px);
  --gd-h2:         clamp(26px, 3.5vw, 36px);
  --gd-h3:         clamp(20px, 2.5vw, 24px);
  --gd-body-lg:    clamp(16px, 1.5vw, 18px);
  --gd-body:       16px;
  --gd-small:      13px;
  --gd-label:      11px;

  /* Font Weights */
  --gd-fw-regular:   400;
  --gd-fw-semibold:  600;
  --gd-fw-bold:      700;
  --gd-fw-black:     900;

  /* Letter Spacing */
  --gd-ls-tight:   -2px;
  --gd-ls-snug:    -1px;
  --gd-ls-normal:  0;
  --gd-ls-wide:    0.08em;
  --gd-ls-wider:   0.12em;
  --gd-ls-widest:  0.15em;

  /* Line Height */
  --gd-lh-tight:   1.1;
  --gd-lh-snug:    1.3;
  --gd-lh-normal:  1.5;
  --gd-lh-relaxed: 1.7;

  /* ============================================================
     3. ANIMATION TOKENS
     ============================================================ */
  --anim-fast:   0.15s ease-out;
  --anim-mid:    0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-slow:   0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --anim-reveal: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================================
     4. SPACING TOKENS
     ============================================================ */
  --gd-space-xs:   4px;
  --gd-space-sm:   8px;
  --gd-space-md:   16px;
  --gd-space-lg:   24px;
  --gd-space-xl:   40px;
  --gd-space-2xl:  64px;
  --gd-space-3xl:  96px;

  /* Numbered scale (4px base × n) — used by single.css and components */
  --gd-space-1:   4px;
  --gd-space-2:   8px;
  --gd-space-3:  12px;
  --gd-space-4:  16px;
  --gd-space-5:  20px;
  --gd-space-6:  24px;
  --gd-space-7:  32px;
  --gd-space-8:  40px;
  --gd-space-9:  48px;
  --gd-space-10: 56px;
  --gd-space-11: 64px;
  --gd-space-12: 96px;

  /* Font alias */
  --gd-mono: var(--gd-font-mono);

  /* ============================================================
     5. RADIUS TOKENS
     ============================================================ */
  --gd-radius-sm:   8px;
  --gd-radius-md:   12px;
  --gd-radius-lg:   16px;
  --gd-radius-xl:   20px;
  --gd-radius-pill: 999px;

  /* ============================================================
     6. SHADOW TOKENS
     ============================================================ */
  --gd-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
  --gd-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.10);
  --gd-shadow-lg:   0 24px 48px rgba(0, 0, 0, 0.12);
  --gd-shadow-hero: 0 20px 60px rgba(0, 0, 0, 0.40);
  --gd-shadow-gold: 0 0 24px rgba(201, 168, 76, 0.35);

  /* ============================================================
     7. BREAKPOINTS (reference — use in media queries)
     ============================================================ */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ============================================================
     8. LAYOUT
     ============================================================ */
  --gd-container: 1280px;
  --gd-content:   760px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--gd-font-sans);
  font-size: var(--gd-body);
  font-weight: var(--gd-fw-regular);
  line-height: var(--gd-lh-relaxed);
  color: var(--gd-text-primary);
  background-color: var(--gd-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAPHY — BASE ELEMENTS
   ============================================================ */
.gd-display {
  font-family: var(--gd-font-display);
  font-size: var(--gd-display);
  font-weight: 800;
  letter-spacing: var(--gd-ls-tight);
  line-height: var(--gd-lh-tight);
  color: var(--gd-text-on-dark);
}

.gd-h1 {
  font-family: var(--gd-font-display);
  font-size: var(--gd-h1);
  font-weight: 800;
  letter-spacing: var(--gd-ls-snug);
  line-height: var(--gd-lh-tight);
}

.gd-h2 {
  font-family: var(--gd-font-display);
  font-size: var(--gd-h2);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: var(--gd-lh-snug);
}

.gd-h3 {
  font-size: var(--gd-h3);
  font-weight: var(--gd-fw-semibold);
  line-height: var(--gd-lh-snug);
}

.gd-section-label {
  font-size: var(--gd-label);
  font-weight: var(--gd-fw-semibold);
  letter-spacing: var(--gd-ls-widest);
  text-transform: uppercase;
  color: var(--gd-flame);
  display: block;
  margin-bottom: var(--gd-space-md);
}

.gd-body-lg {
  font-size: var(--gd-body-lg);
  line-height: var(--gd-lh-relaxed);
  color: var(--gd-text-muted);
}

.gd-meta {
  font-size: var(--gd-small);
  color: var(--gd-text-muted);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.gd-container {
  max-width: var(--gd-container);
  margin: 0 auto;
  padding: 0 var(--gd-space-lg);
}

@media (min-width: 768px) {
  .gd-container { padding: 0 var(--gd-space-xl); }
}

.gd-section {
  padding: var(--gd-space-2xl) 0;
}

@media (min-width: 768px) {
  .gd-section { padding: var(--gd-space-3xl) 0; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.gd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gd-space-sm);
  font-family: var(--gd-font-sans);
  font-weight: var(--gd-fw-semibold);
  font-size: var(--gd-body);
  border-radius: var(--gd-radius-sm);
  padding: 0 var(--gd-space-lg);
  height: 48px;
  border: none;
  cursor: pointer;
  transition: all var(--anim-fast);
  white-space: nowrap;
  text-decoration: none;
}

.gd-btn--primary {
  background: var(--gd-flame);
  color: #fff;
}
.gd-btn--primary:hover {
  background: #B91C1C;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.40);
  transform: translateY(-1px);
}
.gd-btn--primary:hover .gd-btn__arrow {
  transform: translateX(3px);
}

.gd-btn--outline {
  background: transparent;
  color: var(--gd-navy);
  border: 1.5px solid var(--gd-navy);
}
.gd-btn--outline:hover {
  background: var(--gd-navy);
  color: #fff;
}

.gd-btn--ghost {
  background: transparent;
  color: var(--gd-flame);
  padding: 0;
  height: auto;
}
.gd-btn--ghost:hover { text-decoration: underline; }

.gd-btn--gold {
  background: var(--gd-gold);
  color: #0F0F11;
  font-weight: var(--gd-fw-bold);
}
.gd-btn--gold:hover {
  background: #B89539;
  box-shadow: var(--gd-shadow-gold);
  transform: translateY(-1px);
}

.gd-btn--sm {
  height: 36px;
  font-size: var(--gd-small);
  padding: 0 var(--gd-space-md);
  border-radius: var(--gd-radius-sm);
}

.gd-btn--lg {
  height: 56px;
  font-size: 18px;
  border-radius: var(--gd-radius-md);
  width: 100%;
  justify-content: center;
}

.gd-btn__arrow {
  transition: transform var(--anim-fast);
}

/* ============================================================
   BADGES & CHIPS
   ============================================================ */
.gd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--gd-label);
  font-weight: var(--gd-fw-semibold);
  letter-spacing: var(--gd-ls-wide);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--gd-radius-pill);
}

.gd-badge--flame {
  background: var(--gd-flame-15);
  border: 1px solid var(--gd-flame-40);
  color: var(--gd-flame);
}

.gd-badge--teal {
  background: var(--gd-teal-15);
  border: 1px solid var(--gd-teal);
  color: var(--gd-teal);
}

.gd-badge--gold {
  background: var(--gd-gold);
  color: var(--gd-navy);
}

.gd-badge--navy {
  background: var(--gd-navy);
  color: var(--gd-text-on-dark);
}

/* Open Now badge with pulse dot */
.gd-badge--open {
  background: var(--gd-teal-15);
  border: 1px solid var(--gd-teal);
  color: var(--gd-teal);
  position: relative;
  padding-left: 20px;
}
.gd-badge--open::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gd-teal);
  animation: gd-pulse 2s infinite;
}

/* Ghost chip (dark bg) */
.gd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--gd-small);
  font-weight: var(--gd-fw-semibold);
  padding: 6px 16px;
  border-radius: var(--gd-radius-pill);
  border: 1px solid var(--gd-border);
  background: var(--gd-surface);
  color: var(--gd-text-primary);
  cursor: pointer;
  transition: all var(--anim-fast);
}
.gd-chip:hover,
.gd-chip.is-active {
  background: var(--gd-navy);
  border-color: var(--gd-navy);
  color: #fff;
}

/* Dark background chip variant */
.gd-chip--dark {
  background: var(--gd-white-15);
  border: 1px solid var(--gd-white-30);
  color: #fff;
}
.gd-chip--dark:hover {
  background: rgba(220,38,38, 0.8);
  border-color: transparent;
  color: #fff;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.gd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gd-label {
  font-size: var(--gd-label);
  font-weight: var(--gd-fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gd-text-primary);
}

.gd-input {
  height: 48px;
  border: 1.5px solid var(--gd-border);
  border-radius: var(--gd-radius-sm);
  padding: 0 var(--gd-space-md);
  font-size: 15px;
  color: var(--gd-text-primary);
  background: var(--gd-surface);
  transition: border-color var(--anim-fast), box-shadow var(--anim-fast);
  outline: none;
}
.gd-input:focus {
  border-color: var(--gd-flame);
  box-shadow: 0 0 0 3px rgba(220,38,38, 0.12);
}
.gd-input.is-error {
  border-color: var(--gd-error);
}
.gd-input.is-success {
  border-color: var(--gd-teal);
}

.gd-textarea {
  min-height: 120px;
  resize: vertical;
  padding: var(--gd-space-md);
  line-height: var(--gd-lh-relaxed);
}

.gd-helper {
  font-size: var(--gd-small);
  color: var(--gd-text-muted);
}
.gd-helper--error { color: var(--gd-error); }
.gd-helper--success { color: var(--gd-teal); }

/* ============================================================
   TIER INDICATORS
   ============================================================ */
.gd-tier { font-size: 11px; font-weight: var(--gd-fw-semibold); padding: 3px 8px; border-radius: 4px; }
.gd-tier--free     { background: #EDF2F7; color: var(--gd-text-muted); }
.gd-tier--claimed  { background: #EBF8FF; color: #2B6CB0; }
.gd-tier--premium  { background: var(--gd-gold); color: var(--gd-navy); }
.gd-tier--featured { background: var(--gd-gold); color: var(--gd-navy); animation: gd-shimmer 2.5s infinite; }

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* Pulse — Open Now dot */
@keyframes gd-pulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%       { opacity: 0.5; transform: translateY(-50%) scale(1.4); }
}

/* Count-up handled via JS — element starts at 0 */

/* Word stagger (applied via JS class) */
@keyframes gd-word-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal from below */
@keyframes gd-reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SVG line draw */
@keyframes gd-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Shimmer (premium badge) */
@keyframes gd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Gold shimmer gradient for premium cards */
.gd-shimmer-gold {
  background: linear-gradient(
    90deg,
    var(--gd-gold) 0%,
    #F0D080 40%,
    var(--gd-gold) 60%,
    #A8872E 100%
  );
  background-size: 200% auto;
  animation: gd-shimmer 2.5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Skeleton shimmer */
@keyframes gd-skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.gd-skeleton {
  background: linear-gradient(
    90deg,
    #E2E4E9 25%,
    #F0F1F3 37%,
    #E2E4E9 63%
  );
  background-size: 800px 100%;
  animation: gd-skeleton 1.4s ease infinite;
  border-radius: var(--gd-radius-sm);
}

/* Stat bar fill (via JS Intersection Observer) */
.gd-stat-bar__fill {
  width: 0;
  transition: width 0.6s ease-out;
}
.gd-stat-bar__fill.is-visible {
  /* Width set inline via JS */
}

/* ============================================================
   SCROLL REVEAL (JS adds .is-visible)
   ============================================================ */
.gd-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--anim-reveal), transform var(--anim-reveal);
}
.gd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.gd-reveal--delay-1 { transition-delay: 0ms; }
.gd-reveal--delay-2 { transition-delay: 150ms; }
.gd-reveal--delay-3 { transition-delay: 300ms; }

/* ============================================================
   DIVIDER
   ============================================================ */
.gd-divider {
  width: 100%;
  height: 1px;
  background: var(--gd-border);
  border: none;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.gd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--gd-small);
  color: var(--gd-text-muted);
}
.gd-breadcrumb a:hover { color: var(--gd-flame); }
.gd-breadcrumb__sep { opacity: 0.5; }

/* ============================================================
   HERO OVERLAY GRADIENT UTILITY
   ============================================================ */
.gd-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(15,15,17, 0.85) 0%,
    rgba(15,15,17, 0.60) 50%,
    rgba(15,15,17, 0.92) 100%
  );
  pointer-events: none;
}