/* ============================================================
   Volta Sports & Social Club - shared styles for content pages
   (padel, pickleball, FAQ, about, updates)
   ============================================================ */
:root{
  --paper:#FFFFFF; --paper-warm:#FAF7F1; --ink:#0B0B0B; --charcoal:#16181D;
  --muted:#5B6470; --cobalt:#0052CC; --cobalt-deep:#00337F; --cobalt-bright:#3D8BFF;
  --green:#7CB342; --lime:#D2F362; --line:#E6EAF0; --tint:#F4F7FC;
  --pad:clamp(22px,5vw,60px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--pad)}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(11,11,11,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:14px var(--pad)}
.logo{display:inline-flex;align-items:center;gap:.08em;font-family:'Marcellus',serif;font-size:26px;line-height:1;color:#fff;letter-spacing:.06em;text-decoration:none}
.logo .logo-img{height:25px;width:auto;display:block}
.site-foot .logo .logo-img{height:23px}
@media(max-width:640px){ .logo .logo-img{height:21px} }
.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{color:#cfd4dc;text-decoration:none;font-size:14px;font-weight:500}
.site-nav a:hover{color:#fff}
.head-cta{background:var(--cobalt);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 18px;border-radius:100px;white-space:nowrap}
.head-cta:hover{background:var(--cobalt-deep)}
.m-burger{display:none}
.nav-join{display:none}
@media(max-width:820px){
  .m-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:6px;cursor:pointer;margin-left:auto;-webkit-tap-highlight-color:transparent}
  .m-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  .head-cta{display:none}
  .site-nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#0B0B0B;border-bottom:1px solid rgba(255,255,255,.1);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .m-nav-toggle:checked ~ .site-nav{max-height:84vh}
  .site-nav a{padding:15px var(--pad);border-top:1px solid rgba(255,255,255,.07);font-size:16px;color:#e6e9ee;font-weight:500}
  .site-nav a:first-child{border-top:0}
  .nav-join{display:block;color:#fff;font-weight:700}
  .m-nav-toggle:checked ~ .m-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .m-nav-toggle:checked ~ .m-burger span:nth-child(2){opacity:0}
  .m-nav-toggle:checked ~ .m-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- subpage hero ---- */
.subhero{background:#0B0B0B;color:#fff;padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,84px);position:relative;overflow:hidden}
.subhero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 0%,rgba(61,139,255,.14),transparent 70%);pointer-events:none}
.subhero .inner{position:relative;z-index:1}
.crumbs{font-size:13px;color:#8a919b;margin-bottom:22px;letter-spacing:.02em}
.crumbs a{color:#aeb4bd;text-decoration:none}
.crumbs a:hover{color:#fff}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.subhero h1{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(34px,6vw,76px);line-height:1.04;max-width:16ch;letter-spacing:.01em}
.subhero h1 .b{color:var(--cobalt-bright)}
.subhero .sub{margin-top:22px;max-width:620px;color:#c2c8d0;font-size:clamp(16px,1.6vw,19px);line-height:1.7}
.subhero .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- buttons ---- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;padding:15px 26px;border-radius:100px;transition:transform .12s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--ink);color:#fff}

/* ---- content sections ---- */
.section{padding:clamp(54px,7vw,96px) 0}
.section.tint{background:var(--tint)}
.section.warm{background:var(--paper-warm)}
.section.dark{background:#0B0B0B;color:#fff}
.kicker{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);font-weight:700;margin-bottom:16px}
.section.dark .kicker{color:var(--lime)}
.h2{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(28px,4.4vw,52px);line-height:1.1;letter-spacing:.01em;margin-bottom:18px;max-width:20ch}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:var(--muted);max-width:68ch}
.section.dark .lead{color:#c2c8d0}
.prose p{font-size:16.5px;line-height:1.8;color:var(--muted);margin-bottom:18px;max-width:70ch}
.prose h3{font-family:'Marcellus',serif;font-weight:400;font-size:26px;margin:34px 0 12px}
.prose strong{color:var(--ink);font-weight:600}

/* ---- feature grid / cards ---- */
.grid{display:grid;gap:18px;margin-top:40px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px}
.section.tint .card{background:#fff}
.card h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.6}
.card .big{font-family:'Marcellus',serif;font-size:46px;color:var(--cobalt);line-height:1;margin-bottom:8px}
.card.green .big{color:var(--green)}

/* ---- stat / drive row ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.stat-row .s{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:22px 16px}
.section.dark .stat-row .s{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.stat-row .n{font-family:'Marcellus',serif;font-size:clamp(24px,3vw,34px);color:var(--cobalt-bright);line-height:1;margin-bottom:5px}
.stat-row .l{font-size:12.5px;color:var(--muted)}
.section.dark .stat-row .l{color:#aeb4bd}

/* ---- towns ---- */
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.towns span{font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 16px}
.section.dark .towns span{color:#e6e9ee;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* ---- FAQ accordion ---- */
.faq{max-width:820px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:17.5px;padding:18px 40px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;color:var(--cobalt);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:var(--muted);font-size:16px;line-height:1.75;max-width:70ch}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(135deg,#0b1626,#10243f);color:#fff;text-align:center;padding:clamp(50px,7vw,88px) 0}
.cta-band h2{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(28px,4.4vw,52px);margin-bottom:14px}
.cta-band p{color:#c2c8d0;max-width:54ch;margin:0 auto 28px;font-size:17px;line-height:1.7}

/* ---- footer ---- */
.site-foot{background:#08090C;color:#8a919b;padding:54px var(--pad);font-size:13px}
.site-foot .ft-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center;border-bottom:1px solid #1a1d23;padding-bottom:26px;margin-bottom:22px}
.site-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.site-foot nav a{color:#aeb4bd;text-decoration:none}
.site-foot nav a:hover{color:#fff}
.site-foot .area{max-width:900px;border-bottom:1px solid #1a1d23;padding-bottom:24px;margin-bottom:22px}
.site-foot .area h3{font-family:'Marcellus',serif;font-weight:400;color:#e8ecf2;font-size:clamp(17px,2.2vw,22px);line-height:1.35;margin-bottom:10px}
.site-foot .area p{color:#8a919b;line-height:1.75}
.site-foot .ft-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-foot .status{color:var(--lime);letter-spacing:.04em}

@media(max-width:820px){
  .grid.c3,.grid.c4{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .grid.c3,.grid.c4{grid-template-columns:1fr}
}