/* =====================================================
   Swim With Charlotte — public styles
   Colours, radii, fonts and logo sizes come from
   CSS variables set by the admin (see includes/site.php)
   ===================================================== */
:root{
  --blue:#0077b6;--blue2:#0096c7;--blue3:#00b4d8;--blue4:#90e0ef;
  --dark:#03045e;--white:#fff;--cream:#f0f7ff;--border:#dde8f5;--text:#1a1a2e;
  --muted:#6b7a99;--green:#2d9e5f;--red:#d62828;
  --r:12px;--btn-r:25px;--logo-nav:44px;--logo-hero:120px;--logo-radius:50%;
  --font:'Nunito',sans-serif;--font-h:var(--font);--font-brand:var(--font);--font-btn:var(--font)
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--text);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- NAV ---------- */
nav{background:var(--dark);padding:0 24px;display:flex;align-items:center;justify-content:space-between;min-height:66px;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.3)}
nav.sticky{position:sticky;top:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:var(--logo-nav);height:var(--logo-nav);border-radius:var(--logo-radius);object-fit:cover}
.brand-text{font-size:18px;font-weight:800;color:var(--white);font-family:var(--font-brand)}
.brand-text span{color:var(--blue3)}
.nav-r{display:flex;gap:20px;align-items:center}
.nav-r a{font-size:13px;font-weight:600;color:#7a8ab0;letter-spacing:.3px;transition:.2s;text-decoration:none}
.nav-r a:hover,.nav-r a.on{color:var(--blue3)}
.nav-r .soc{display:flex;align-items:center;color:#7a8ab0}
.nav-r .soc:hover{color:var(--blue3)}
.nav-toggle{display:none;background:none;border:none;color:#7a8ab0;font-size:24px;cursor:pointer}

/* centred header variant */
nav.nav-center{flex-direction:column;justify-content:center;padding:16px 24px;gap:10px}
nav.nav-center .brand{flex-direction:column;gap:8px;text-align:center}
nav.nav-center .brand-text{font-size:22px}
nav.nav-center .nav-r{justify-content:center;flex-wrap:wrap}
nav.nav-center .nav-toggle{position:absolute;top:14px;right:20px}

@media(max-width:860px){
  .nav-toggle{display:block}
  nav{flex-wrap:wrap;position:relative}
  .nav-r{position:absolute;top:100%;left:0;right:0;background:var(--dark);flex-direction:column;align-items:flex-start;gap:0;padding:0 24px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;z-index:99}
  .nav-r.open{max-height:460px;padding:12px 24px 20px}
  .nav-r a{padding:10px 0;font-size:15px}
  nav.nav-center .nav-r{align-items:center}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--btn-r);font-size:14px;font-weight:800;cursor:pointer;transition:.2s;border:none;text-decoration:none;font-family:var(--font-btn)}
.btn-wave{background:var(--white);color:var(--blue)}
.btn-wave:hover{background:#e8f4ff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.35)}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.12)}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue2);transform:translateY(-2px)}
.full-btn{width:100%}
.center-cta{text-align:center;margin-top:30px}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(135deg,var(--dark) 0%,var(--blue) 60%,var(--blue2) 100%);padding:76px 24px 88px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:var(--cream);clip-path:ellipse(55% 100% at 50% 100%)}
.hero>*{position:relative;z-index:1}
.hero-left{text-align:left;max-width:1100px;margin:0 auto}
.hero-left .hero-badges,.hero-left .hero-btns,.hero-left .hero-stats{justify-content:flex-start}
.hero-left p{margin-left:0}
.hero-logo{width:var(--logo-hero);height:var(--logo-hero);border-radius:var(--logo-radius);object-fit:cover;margin:0 auto 20px;box-shadow:0 8px 30px rgba(0,0,0,.28);border:3px solid rgba(255,255,255,.25)}
.hero-left .hero-logo{margin-left:0}
.hero-logo.small{width:calc(var(--logo-hero) * .6);height:calc(var(--logo-hero) * .6)}
.hero-tag{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:20px}
.hero h1{font-size:clamp(32px,6vw,60px);font-weight:900;color:var(--white);line-height:1.12;margin-bottom:16px;font-family:var(--font-h)}
.hero h1 .hl{color:var(--blue4)}
.hero p{font-size:16px;color:rgba(255,255,255,.8);max-width:580px;margin:0 auto 30px;line-height:1.8}
.hero-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.88);padding:7px 16px;border-radius:20px;font-size:12px;font-weight:700}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.hs{text-align:center}
.hs-val{font-size:28px;font-weight:900;color:var(--white);font-family:var(--font-h)}
.hs-label{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;text-transform:uppercase;letter-spacing:1px}

/* ---------- PAGE HEAD ---------- */
.page-head{background:linear-gradient(135deg,var(--dark) 0%,var(--blue) 100%);padding:52px 24px 58px;text-align:center}
.page-head h1{font-size:clamp(28px,5vw,44px);font-weight:900;color:#fff;margin-bottom:10px;font-family:var(--font-h)}
.page-head p{font-size:15px;color:rgba(255,255,255,.75);max-width:600px;margin:0 auto}

/* ---------- STRIP ---------- */
.wave-strip{background:var(--dark);padding:36px 24px;text-align:center}
.wave-strip p{font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.62);max-width:720px;margin:0 auto;line-height:1.9;font-style:italic}
.wave-strip .hl{color:var(--blue3);font-style:normal;font-weight:700}

/* ---------- SECTIONS ---------- */
.sec{padding:72px 24px;background:var(--cream)}
.sec-inner{max-width:1100px;margin:0 auto}
.sec-tag{font-size:10px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--blue2);margin-bottom:10px}
.sec-title{font-size:clamp(26px,4vw,40px);font-weight:900;color:var(--dark);margin-bottom:8px;font-family:var(--font-h)}
.sec-sub{font-size:14px;color:var(--muted);margin-bottom:40px}
.sec-note{margin-top:26px;font-size:14px;color:var(--muted)}
.sec-note .lnk{color:var(--blue);font-weight:800}
.sec-white{background:#fff}

/* ---------- LESSONS ---------- */
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.lc{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px;transition:.2s;position:relative;overflow:hidden}
.lc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue3))}
.lc:hover{box-shadow:0 8px 32px rgba(0,119,182,.12);transform:translateY(-2px)}
.lc-cat{font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue2);margin-bottom:6px}
.lc-name{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:6px;font-family:var(--font-h)}
.lc-age{display:inline-block;background:var(--cream);color:var(--blue);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px}
.lc-desc{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:14px}
.lc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:12px}
.lc-price{font-size:20px;font-weight:900;color:var(--dark)}
.lc-dur{font-size:12px;color:var(--muted)}

/* ---------- GROUPS ---------- */
.grp{background:linear-gradient(135deg,var(--dark) 0%,var(--blue) 100%);padding:56px 24px}
.grp-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.grp-tag{font-size:10px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.grp-title{font-size:clamp(24px,3.5vw,36px);font-weight:900;color:#fff;margin-bottom:14px;line-height:1.2;font-family:var(--font-h)}
.grp-text{font-size:15px;color:rgba(255,255,255,.78);line-height:1.8}
.grp-text .w{color:#fff;font-weight:800}
.grp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grp-tile{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:20px;text-align:center}
.gt-val{font-size:28px;font-weight:900;color:var(--blue4);font-family:var(--font-h)}
.gt-lbl{font-size:11px;color:rgba(255,255,255,.62);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:4px}

/* ---------- TEAM ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.itc{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:30px;text-align:center;transition:.2s}
.itc:hover{box-shadow:0 8px 32px rgba(0,119,182,.1);transform:translateY(-2px)}
.itc-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue3));display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#fff;margin:0 auto 14px}
.itc-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.itc-name{font-size:20px;font-weight:900;color:var(--dark);margin-bottom:4px;font-family:var(--font-h)}
.itc-role{font-size:12px;font-weight:700;color:var(--blue2);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.itc-bio{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:10px}
.qual-badge{display:inline-block;background:var(--cream);color:var(--blue);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin:2px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px}
.faq-q{font-size:14px;font-weight:800;color:var(--dark);margin-bottom:6px;font-family:var(--font-h)}
.faq-a{font-size:13px;color:var(--muted);line-height:1.7}

/* ---------- GALLERY ---------- */
.gal-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.gal-filter{padding:8px 18px;border-radius:22px;font-size:12px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--muted);transition:.2s;font-family:var(--font-btn)}
.gal-filter:hover{border-color:var(--blue3);color:var(--blue)}
.gal-filter.on{background:var(--blue);border-color:var(--blue);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gal-item{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--cream);border:1px solid var(--border)}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gal-item:hover img,.gal-item:hover video{transform:scale(1.06)}
.gal-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(3,4,94,.85),rgba(3,4,94,0) 55%);opacity:0;transition:.25s;display:flex;align-items:flex-end;padding:14px}
.gal-item:hover .gal-overlay{opacity:1}
.gal-cap{color:#fff;font-size:12px;font-weight:700;line-height:1.5}
.gal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;pointer-events:none}
.gal-play::after{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.gal-badge{position:absolute;top:10px;left:10px;background:rgba(3,4,94,.75);color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:20px}
.gal-empty{background:var(--cream);border:2px dashed var(--border);border-radius:var(--r);padding:48px 24px;text-align:center;color:var(--muted);font-size:14px;grid-column:1/-1}
.gal-skel{aspect-ratio:1;border-radius:var(--r);background:linear-gradient(90deg,#e8f2fd 25%,#f4f9ff 50%,#e8f2fd 75%);background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;background:rgba(3,4,20,.94);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb-media{max-width:min(1100px,92vw);max-height:78vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#cfe6ff;font-size:14px;font-weight:600;padding:0 60px}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--blue3);border-color:var(--blue3);color:var(--dark)}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
label{font-size:11px;font-weight:800;color:var(--muted);display:block;margin-bottom:5px;letter-spacing:.5px;text-transform:uppercase}
input,textarea,select{width:100%;padding:12px 14px;background:#fbfdff;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:14px;font-family:var(--font);transition:.2s;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--blue3);background:#fff}
textarea{resize:vertical;min-height:110px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:14px;padding:12px 16px;border-radius:9px;font-size:13px;font-weight:700;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(45,158,95,.1);color:var(--green);border:1px solid rgba(45,158,95,.3)}
.form-msg.bad{background:rgba(214,40,40,.08);color:var(--red);border:1px solid rgba(214,40,40,.25)}
.info-card{background:linear-gradient(135deg,var(--dark),var(--blue));border-radius:var(--r);padding:30px;color:#fff}
.info-card h3{font-size:20px;font-weight:900;margin-bottom:14px;font-family:var(--font-h)}
.info-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.info-row:last-of-type{border:none}
.info-ico{font-size:18px;line-height:1.4}
.info-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:800}
.info-val{font-size:14px;font-weight:700;color:#fff;line-height:1.6}
.info-val a{color:var(--blue4);text-decoration:none}
.info-soc{display:flex;gap:12px;align-items:center}
.info-soc .soc{color:var(--blue4)}
.map-btn{margin-top:18px}

/* ---------- FOOTER ---------- */
footer{background:var(--dark);color:#3a5a7a;padding:48px 24px 28px}
.ft-inner{max-width:1100px;margin:0 auto}
.ft-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-brand{font-size:20px;font-weight:900;color:var(--white);font-family:var(--font-brand)}
.ft-brand span{color:var(--blue3)}
.ft-tag{font-size:11px;color:#5a7a99;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.ft-contact{font-size:13px;color:#5a7a99;margin-top:10px;line-height:2;font-weight:600}
.ft-contact a{color:#5a7a99;text-decoration:none}
.ft-contact a:hover{color:var(--blue3)}
.ft-soc{display:flex;gap:14px;margin-top:12px}
.ft-soc .soc{color:#3a5a7a;display:flex}
.ft-soc .soc:hover{color:var(--blue3)}
.ft-links{display:flex;flex-direction:column;gap:8px}
.ft-links a{font-size:13px;color:#5a7a99;transition:.2s;text-decoration:none;font-weight:600}
.ft-links a:hover{color:var(--blue3)}
.ft-hours strong{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#5a7a99;display:block;margin-bottom:8px;font-weight:800}
.ft-hours span{font-size:13px;color:#5a7a99;line-height:2;display:block;font-weight:600}
.ft-hours .note{color:#3a5a7a}
.ft-copy{font-size:12px;color:#2a4a6a;text-align:center;font-weight:600}

@media(max-width:820px){
  .grp-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .sec{padding:56px 20px}
  .lb-prev{left:8px}.lb-next{right:8px}.lb-cap{padding:0 16px;bottom:14px}
}