/*
  High‑Energy Purple Fitness Theme — CSS
  Version: 1.0 (2025‑09‑26)

  Purpose: A single, production‑ready theme optimized around a purple core color,
  derived from the "High‑Energy Community" pattern. Focuses on instant booking,
  bold CTAs, and energetic micro‑interactions while meeting a11y/comfort best practices.

  Usage:
  - Include this CSS file once. The theme is global (no body class required).
  - Components: nav, hero, booking bar, buttons, cards, pricing, testimonial, stats,
    provider cards, location list, alerts, forms, footer, utilities, micro‑interactions.
  - Respect user settings: prefers-reduced-motion, color-scheme.
*/

/* === Base Reset (modern, minimal) === */
*,*::before,*::after{box-sizing:border-box}
html{font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";line-height:1.5;-webkit-text-size-adjust:100%;tab-size:2}
body{margin:0;color:var(--text);background:var(--surface);accent-color:var(--accent);}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-color:color-mix(in oklab, var(--link) 60%, transparent);text-underline-offset:2px}
a:hover{color:color-mix(in oklab, var(--link) 92%, white 8%)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* === Design Tokens (High‑Energy Purple) === */
:root{
  /* Surfaces & text */
  --surface:#0b0b10;          /* page background (near-black, cool) */
  --elev:#141522;             /* elevated cards */
  --overlay:linear-gradient(180deg, rgba(11,11,16,.18), rgba(11,11,16,.62));
  --text:#f6f7fb;             /* body text on dark */
  --muted:#c9d2e3;            /* secondary text */
  --heading:#ffffff;          /* headings */

  /* Core palette (orange‑first) */
  --accent:#ff6b35;           /* primary brand (orange) - changed from purple */
  --accent-strong:#e55a2b;    /* pressed/active (darker orange) */
  --accent-2:#ff8c66;         /* lighter orange (secondary) */
  --accent-contrast:#1a0b35;  /* deep bg tint for ribbons */
  --link:#ffb399;             /* light orange for readable links */

  /* Status */
  --success:#22c55e;          /* green‑500 */
  --warning:#f59e0b;          /* amber‑500 */
  --danger:#ef4444;           /* red‑500 */

  /* Radii / shadows */
  --radius-xs:.375rem; --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.25rem; --radius-2xl:1.75rem;
  --shadow-sm:0 1px 2px rgba(0,0,0,.18);
  --shadow-md:0 10px 24px rgba(0,0,0,.28);
  --shadow-lg:0 18px 48px rgba(0,0,0,.38);
  --ring:0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
  --focus:#e9d5ff;            /* soft lavender focus ring */

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-28:7rem; --space-40:10rem;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --size-xs:.78rem; --size-sm:.875rem; --size-base:1rem; --size-lg:1.125rem; --size-xl:1.25rem; --size-2xl:1.5rem; --size-3xl:1.875rem; --size-4xl:2.25rem; --size-5xl:3rem; --size-6xl:3.75rem;
  --lh-tight:1.15; --lh-snug:1.2; --lh-normal:1.5;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms; --dur-2:240ms; --dur-3:360ms; --dur-4:700ms;

  /* Imagery */
  --img-radius: var(--radius-2xl);
  --img-shadow: var(--shadow-lg);

  color-scheme: dark;
}

/* === Typography helpers === */
.h1{font-size:clamp(var(--size-4xl),5vw,var(--size-6xl));line-height:var(--lh-tight);letter-spacing:-.02em;margin:0 0 var(--space-6)}
.h2{font-size:clamp(var(--size-3xl),3.8vw,var(--size-5xl));line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 0 var(--space-5)}
.h3{font-size:clamp(var(--size-2xl),2.4vw,var(--size-4xl));line-height:var(--lh-snug);margin:0 0 var(--space-4)}
.lead{font-size:clamp(1.0625rem,1.2vw,1.25rem);color:var(--muted);max-width:72ch}
.small{font-size:var(--size-sm);color:var(--muted)}

/* === Layout primitives === */
.container{width:min(1120px, 100% - 2*var(--space-6));margin-inline:auto}
.stack>*+*{margin-top:var(--space-6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.grid{display:grid;gap:var(--space-6)}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@container (max-width:800px){.grid.cols-3{grid-template-columns:1fr}}
.section{padding:var(--space-20) 0}

/* === Components === */
/* Buttons */
.btn{--_bg:var(--accent);--_fg:#fff;--_bd:transparent;display:inline-flex;align-items:center;gap:.6em;padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--_bd);background:var(--_bg);color:var(--_fg);font-weight:700;letter-spacing:.01em;box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 65%, transparent);transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(255,107,53,.45)}
.btn:active{transform:translateY(0);background:var(--accent-strong)}
.btn--subtle{--_bg:color-mix(in oklab, var(--accent) 18%, transparent);--_fg:var(--heading)}
.btn--outline{--_bg:transparent;--_fg:var(--heading);--_bd:color-mix(in oklab, var(--heading) 16%, transparent)}
.btn--danger{--_bg:var(--danger)}
.btn--ghost{--_bg:transparent;--_fg:var(--heading);border-color:transparent}

/* Pulsing energy effect (accent color - ORANGE brand color) */
.btn.is-pulsing{animation:pulse var(--dur-4) ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,53,.55)}70%{box-shadow:0 0 0 18px rgba(255,107,53,0)}100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}}

/* Card */
.card{background:linear-gradient(180deg, color-mix(in oklab, #1a1b2a 92%, transparent), color-mix(in oklab, #131425 100%, transparent));color:var(--text);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-6);border:1px solid rgba(255,255,255,.05)}
.card--soft{background:color-mix(in oklab, var(--elev) 80%, var(--surface) 20%)}

/* Hero */
.hero{position:relative;border-radius:var(--radius-2xl);overflow:hidden}
.hero__media{position:absolute;inset:0;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.hero__overlay{position:absolute;inset:0;background:var(--overlay)}
.hero__content{position:relative;z-index:1;padding:clamp(var(--space-12),8vw,var(--space-28));color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.hero--center .hero__content{display:grid;place-items:center;text-align:center}

/* Nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(10px);background:color-mix(in oklab, var(--surface) 75%, transparent);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.nav__cta .btn{padding:.6rem .95rem}

/* Sticky booking bar (for classes / appointments) */
.booking-bar{position:sticky;bottom:0;z-index:40;background:color-mix(in oklab, var(--elev) 92%, var(--surface) 8%);border-top:1px solid rgba(255,255,255,.08);padding:.75rem}
.booking-bar .cluster{justify-content:space-between}
.input, select, textarea{width:100%;padding:.75rem 1rem;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.14);background:color-mix(in oklab, #0e0f18 92%, transparent);color:var(--text)}
.label{font-weight:700;color:var(--heading);font-size:var(--size-sm)}

/* Pricing table */
.pricing{display:grid;gap:var(--space-6)}
@media (min-width:880px){.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{background:var(--elev);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);display:grid;gap:var(--space-4);border:1px solid rgba(255,255,255,.06)}
.plan--featured{outline:var(--ring);transform:translateY(-2px)}
.price{font-size:var(--size-4xl);font-weight:800}

/* Testimonial */
.testimonial{display:grid;gap:var(--space-4);background:var(--elev);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.06)}
.testimonial__quote{font-size:1.125rem;font-weight:700}
.testimonial__meta{color:var(--muted)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);text-align:center}
.stat{background:var(--elev);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.06)}
.stat .num{font-size:clamp(2rem,6vw,3rem);font-weight:800}
.stat .label{color:var(--muted)}

/* Location finder */
.loc-list{display:grid;gap:var(--space-6)}
@media (min-width:900px){.loc-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.loc{background:var(--elev);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.06)}
.loc__media{height:180px;object-fit:cover}
.loc__body{padding:var(--space-5)}

/* Team / provider card */
.provider{display:grid;gap:var(--space-3);background:var(--elev);padding:var(--space-5);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.06)}
.provider__avatar{width:88px;height:88px;border-radius:999px;box-shadow:var(--img-shadow)}
.provider__tags{display:flex;flex-wrap:wrap;gap:.375rem}
.tag{background:color-mix(in oklab, var(--accent) 22%, transparent);color:#fff;padding:.25rem .55rem;border-radius:999px;font-size:var(--size-xs);border:1px solid rgba(255,107,53,.38)}

/* Alerts (insurance accepted, risk‑free trial, etc.) */
.alert{padding:var(--space-4);border-radius:var(--radius-lg);display:flex;gap:.75rem;align-items:flex-start}
.alert--success{background:color-mix(in oklab, var(--success) 12%, var(--surface));border:1px solid color-mix(in oklab, var(--success) 35%, transparent)}
.alert--warning{background:color-mix(in oklab, var(--warning) 12%, var(--surface));border:1px solid color-mix(in oklab, var(--warning) 35%, transparent)}
.alert--danger{background:color-mix(in oklab, var(--danger) 12%, var(--surface));border:1px solid color-mix(in oklab, var(--danger) 35%, transparent)}

/* Forms (appt / free class) */
.form{display:grid;gap:var(--space-4)}
.form .row{display:grid;gap:var(--space-4)}
@media (min-width:720px){.form .row{grid-template-columns:1fr 1fr}}
.form .help{color:var(--muted);font-size:var(--size-sm)}

/* Footer */
.footer{margin-top:var(--space-20);padding:var(--space-12) 0;background:color-mix(in oklab, var(--elev) 90%, var(--surface) 10%);border-top:1px solid rgba(255,255,255,.06)}
.footer .cols{display:grid;gap:var(--space-8)}
@media (min-width:960px){.footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Media treatments */
.img-rounded{border-radius:var(--img-radius);box-shadow:var(--img-shadow)}
.img-grain::after{content:"";position:absolute;inset:0;background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.04%22/%3E%3C/svg%3E');mix-blend-mode:overlay;pointer-events:none}

/* Micro‑interactions */
.lift{transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease)}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fade-in{opacity:0;transform:translateY(8px);animation:fadeUp var(--dur-3) var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* CTA ribbons (purple gradient energy) */
.ribbon{display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;border-radius:var(--radius-lg);background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 40%, transparent), color-mix(in oklab, var(--accent-2) 40%, transparent));border:1px solid rgba(255,255,255,.08)}

/* Class grid (fitness) */
.class-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--space-4)}
.class{background:var(--elev);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.06);display:grid;gap:.35rem}
.class .time{font-weight:800}
.class .coach{color:var(--muted)}
.class .status{margin-left:auto}

/* Insurance / features table (if needed) */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:var(--size-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:.25rem .75rem}
.table td{background:var(--elev);padding:.9rem .75rem;border:1px solid rgba(255,255,255,.06)}
.table tr td:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
.table tr td:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}

/* Newsletter */
.news{display:flex;gap:.75rem;background:var(--elev);padding:.75rem;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.06)}
.news input{flex:1}

/* Utilities */
.center{text-align:center}
.mt-8{margin-top:var(--space-8)}
.mt-12{margin-top:var(--space-12)}
.pb-0{padding-bottom:0}
.br-xl{border-radius:var(--radius-xl)}
.hidden{display:none}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ================================================
   MOBILE RESPONSIVE FIXES
   Added: 2025-12-07 (Mobile Visual Testing)
   Peer Reviewed: Gemini 3 Pro, GPT 5.1
   ================================================ */

/* Mobile-first responsive breakpoints */
@media (max-width: 767px) {
  /* Container padding for mobile */
  .container {
    width: 100%;
    padding-inline: var(--space-4);
  }
  
  /* Stats grid - stack on mobile */
  .stats {
    grid-template-columns: 1fr;
  }
  
  /* Class grid - stack on mobile */
  .class-grid {
    grid-template-columns: 1fr;
  }
  
  /* Footer columns - stack on mobile */
  .footer .cols {
    grid-template-columns: 1fr;
  }
  
  /* Location list - stack on mobile */
  .loc-list {
    grid-template-columns: 1fr;
  }
  
  /* Pricing - stack on mobile */
  .pricing {
    grid-template-columns: 1fr;
  }
  
  /* Form rows - stack on mobile */
  .form .row {
    grid-template-columns: 1fr;
  }
  
  /* Section padding reduced on mobile */
  .section {
    padding: var(--space-12) 0;
  }
  
  /* Hero content padding reduced */
  .hero__content {
    padding: var(--space-8);
  }
  
  /* Cluster (button groups) stack on mobile */
  .cluster {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  
  /* Buttons full width on mobile */
  .cluster .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .class-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Example structure (not required; provided for quick start)

<nav class="nav">
  <div class="container cluster nav__cta">
    <strong>Studio</strong>
    <a class="btn is-pulsing">Book a class</a>
  </div>
</nav>

<section class="container section">
  <div class="hero">
    <img class="hero__media" src="hero.jpg" alt=""/>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <h1 class="h1">Stronger together</h1>
      <p class="lead">Science‑backed intervals. Supportive community.</p>
      <a class="btn">Try a free class</a>
    </div>
  </div>
</section>

*/

/* End of file */