/* Water Polo for Life — play.waterpolo.ca. Phone-first, no build step. */
:root{
  --red:#d52b1e; --red-d:#a91f15; --red-50:#fdecea;
  --navy:#0e2240; --navy-2:#1b3560; --navy-50:#e9eef6;
  --water:#e6f3f7; --water-d:#0f6b85;
  --sand:#fbf7f2; --card:#ffffff; --line:#e8e1d8; --line-2:#d9d1c6;
  --ink:#16202e; --ink-2:#3d4757; --muted:#5d6676;
  --ok:#17794a; --ok-50:#e5f4ec; --warn:#8a5a00; --warn-50:#fdf3dc;
  --r:14px; --r-sm:10px; --shadow:0 1px 2px rgba(14,34,64,.06),0 6px 20px rgba(14,34,64,.06);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow Condensed","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--sand);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--navy-2)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-lucide]{width:18px;height:18px;stroke-width:2;flex:none}


/* header */
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:1000}
.top .wrap{display:flex;align-items:center;gap:12px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}
.brand img{height:40px;width:auto}
.brand .t{font-family:var(--display);font-weight:700;font-size:21px;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.brand .t small{display:block;font-family:var(--font);text-transform:none;font-weight:500;font-size:11.5px;opacity:.75;letter-spacing:0;margin-top:3px}
.top nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top nav a.lnk{color:#fff;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:500;font-size:15px;display:none}
.top nav a.lnk:hover{background:rgba(255,255,255,.1)}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;color:#fff;padding:5px 10px;font-size:13px;font-weight:600;cursor:pointer}
.lang button.on{background:#fff;color:var(--navy)}
@media(min-width:820px){.top nav a.lnk{display:inline-block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:600;border:2px solid transparent;cursor:pointer;text-decoration:none;font-size:15.5px;line-height:1.1;min-height:46px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line-2)}.btn-ghost:hover{border-color:var(--navy)}
.btn-white{background:#fff;color:var(--navy)}
.btn-sm{padding:8px 14px;min-height:38px;font-size:14px}
.btn-block{width:100%}

/* hero */
.hero{position:relative;color:#fff;background:var(--navy) url(../img/hero.jpg) 62% 30%/cover no-repeat;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,34,64,.55) 0%,rgba(14,34,64,.78) 55%,rgba(14,34,64,.95) 100%)}
.hero .wrap{position:relative;padding-top:40px;padding-bottom:28px}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ffd7d3}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(44px,12vw,92px);line-height:.92;margin:10px 0 12px;letter-spacing:.005em}
.hero h1 span{color:#ff5a4c;display:block}
.hero p.lead{font-size:18px;max-width:560px;margin:0 0 20px;color:#e9eef6}
.photo-credit{position:absolute;right:10px;bottom:8px;font-size:11px;opacity:.7}

.search-card{background:#fff;color:var(--ink);border-radius:18px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);max-width:720px}
.search-row{display:flex;flex-direction:column;gap:10px}
.field{position:relative;flex:1}
.field [data-lucide]{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.field input{width:100%;border:2px solid var(--line-2);border-radius:999px;padding:13px 16px 13px 44px;font-size:17px;min-height:52px}
.field input:focus{outline:none;border-color:var(--navy)}
.privacy-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:10px 4px 2px}
.privacy-note [data-lucide]{width:16px;height:16px;margin-top:2px;color:var(--ok)}
.q{margin-top:14px}
.q h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:8px 13px;font-size:14.5px;font-weight:500;cursor:pointer;color:var(--ink);display:inline-flex;gap:6px;align-items:center;min-height:40px}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
@media(min-width:640px){.search-row{flex-direction:row}.search-card{padding:22px}}

/* sections */
section.band{padding:44px 0}
section.band.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band.water{background:var(--water)}
h2.sec{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,7vw,48px);line-height:1;margin:0 0 6px;color:var(--navy)}
p.sub{color:var(--muted);margin:0 0 24px;font-size:17px;max-width:640px}
.grid{display:grid;gap:16px}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px}

/* what is water polo */
.wp-fig{border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#bfe4ef 0%,#5fb3cc 45%,#1d7f9d 100%);position:relative;aspect-ratio:16/10}
.wp-fig svg{position:absolute;inset:0;width:100%;height:100%}
.ph{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:600;padding:4px 8px;border-radius:6px;letter-spacing:.03em}
.facts{display:grid;gap:10px;margin-top:4px}
.fact{display:flex;gap:12px;align-items:flex-start}
.fact .ic{width:40px;height:40px;border-radius:12px;background:var(--red-50);color:var(--red);display:grid;place-items:center;flex:none}
.fact b{display:block;font-size:16px}
.fact span{color:var(--muted);font-size:15px}
.why .card{padding:20px}
.why .ic{width:44px;height:44px;border-radius:12px;background:var(--navy-50);color:var(--navy);display:grid;place-items:center;margin-bottom:10px}
.why h3{margin:0 0 4px;font-size:18px}
.why p{margin:0;color:var(--muted);font-size:15px}
.ages{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.age{flex:0 0 200px;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.age .img{height:120px;position:relative;background:linear-gradient(135deg,var(--navy-2),var(--water-d))}
.age .img.r{background:linear-gradient(135deg,var(--red),#f07a52)}
.age .img .ph{font-size:10.5px}
.age .img .big{position:absolute;right:12px;bottom:6px;font-family:var(--display);font-weight:800;font-size:44px;color:rgba(255,255,255,.9);line-height:1}
.age .b{padding:12px 14px}
.age b{display:block}
.age span{font-size:14px;color:var(--muted)}

.cta-band{background:var(--red);color:#fff;border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.cta-band h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:36px;line-height:1;margin:0}
.cta-band p{margin:0;opacity:.92}
@media(min-width:720px){.cta-band{flex-direction:row;align-items:center;justify-content:space-between;padding:32px 36px}}


footer.site{background:var(--navy);color:#cdd6e4;padding:30px 0 40px;font-size:14px}
footer.site a{color:#fff}
footer.site .row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* results */
.res-head{background:#fff;border-bottom:1px solid var(--line);padding:14px 0}
.res-head .search-row{flex-direction:row}
.res-head .field input{min-height:46px;padding-top:10px;padding-bottom:10px;font-size:16px}
.res-filters{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.res-filters .chip{flex:none;min-height:36px;padding:6px 12px;font-size:14px}
.res-layout{display:flex;flex-direction:column}
#map{height:260px;background:#dfe9ee;z-index:1}
.res-list{padding:14px 16px 40px}
.res-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:14px;color:var(--muted)}
@media(min-width:960px){
  .res-layout{flex-direction:row-reverse;height:calc(100vh - 62px - 136px)}
  #map{height:auto;flex:1;position:sticky;top:0}
  .res-list{width:520px;overflow-y:auto;padding:16px 20px 40px}
}
.club{padding:16px;margin-bottom:12px}
.club .hd{display:flex;gap:12px;align-items:flex-start}
.logo{width:52px;height:52px;border-radius:12px;background:var(--navy-50);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:17px;flex:none;overflow:hidden;border:1px solid var(--line)}
.logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}
.club h3{margin:0;font-size:17.5px;line-height:1.25}
.club h3 a{color:var(--ink);text-decoration:none}
.club h3 a:hover{text-decoration:underline}
.club .loc{font-size:14px;color:var(--muted);display:flex;gap:4px 10px;flex-wrap:wrap;margin-top:2px}
.dist{font-weight:700;color:var(--navy)}
.approx{font-size:12px;color:var(--muted);font-style:italic}
.offers{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tag{font-size:13px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--navy-50);color:var(--navy)}
.tag.match{background:var(--navy);color:#fff}
.tag.g{background:var(--red-50);color:var(--red-d)}
.tag.g.match{background:var(--red);color:#fff}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;border-radius:8px;padding:4px 8px;border:1px solid var(--line-2);color:var(--ink-2);background:#fff}
.badge [data-lucide]{width:14px;height:14px}
.badge.try{border-color:#f3b9b2;color:var(--red-d);background:var(--red-50)}
.badge.ad{border-color:#b9d8e2;color:var(--water-d);background:var(--water)}
.club .act{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.club .act .btn{flex:1 1 130px;white-space:nowrap;padding:8px 12px}
.girls{flex-basis:100%;display:flex;gap:5px;align-items:center;font-size:13px;font-weight:600;color:var(--red-d);margin-top:2px}.girls [data-lucide]{width:14px;height:14px}
.club.dim{opacity:.72}
.divider{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:22px 0 10px}
.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);display:grid;place-items:center}
.pin span{transform:rotate(45deg);color:#fff;font-size:12px;font-weight:800}
.pin.me{background:var(--navy);border-radius:50%;width:20px;height:20px}
.leaflet-popup-content{font-family:var(--font);font-size:14px}
.empty{padding:30px;text-align:center;color:var(--muted)}

/* club detail */
.club-hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 60%,#2b5c8f 100%);color:#fff;padding:26px 0 22px;position:relative;overflow:hidden}
.club-hero .logo{width:72px;height:72px;font-size:24px;border:0}
.club-hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,7vw,48px);line-height:1;margin:0}
.club-hero .loc{color:#d6dfeb;margin-top:6px}
.back{color:#fff;opacity:.85;text-decoration:none;font-size:14px;display:inline-flex;gap:4px;align-items:center;margin-bottom:14px}
.detail{display:grid;gap:16px;padding:20px 0 50px}
@media(min-width:960px){.detail{grid-template-columns:1fr 400px;align-items:start}.detail .side{position:sticky;top:80px}}
.detail h2{font-size:19px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.prog{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.prog:first-of-type{border-top:0}
.prog b{display:block}
.prog span{font-size:14px;color:var(--muted)}
form .row2{display:grid;gap:12px}
@media(min-width:520px){form .row2{grid-template-columns:1fr 1fr}}
label.f{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:5px;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 12px;font-size:16px;font-weight:400;background:#fff}
label.f textarea{min-height:76px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:10px 0;line-height:1.45}
.consent input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--navy)}
.consent.minor{background:var(--warn-50);border-radius:10px;padding:10px;border:1px solid #f0d9a3}
.fine{font-size:12.5px;color:var(--muted);margin-top:10px}
.done{background:var(--ok-50);border:1px solid #bfe3cf;border-radius:12px;padding:16px;color:#0d4f30}

/* map fallback when tiles are blocked */
#map.nomap{background:repeating-linear-gradient(45deg,#e9f1f4 0 14px,#e1ebef 14px 28px)!important;position:relative}
#map.nomap .leaflet-tile-pane{display:none}
#map.nomap::after{content:attr(data-fallback);position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:1000;background:rgba(255,255,255,.92);border:1px solid var(--line-2);color:var(--ink-2);font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}

/* ---- live site additions ---- */
.skip{position:absolute;left:-9999px;top:8px;z-index:2000;background:#fff;color:var(--navy);padding:8px 14px;border-radius:8px;font-weight:600}
.skip:focus{left:12px}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.top nav a.lnk.on{background:rgba(255,255,255,.14)}
.note{border:1px solid var(--line-2);background:#fff;border-radius:var(--r-sm);padding:12px 14px;color:var(--ink-2);font-size:14.5px}
.note b{display:block;margin-bottom:2px;color:var(--ink)}
.note.warn{background:var(--warn-50);border-color:#f0d9a3;color:#5b3d00}
.note.err{background:var(--red-50);border-color:#f3b9b2;color:var(--red-d)}
.loading{display:flex;gap:10px;align-items:center;justify-content:center;padding:40px 16px;color:var(--muted)}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--navy);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
.hero .count{display:inline-flex;gap:8px;align-items:center;margin:0 0 16px;font-size:15px;color:#ffd7d3;font-weight:600}
.hero .count [data-lucide]{width:16px;height:16px}
.search-msg{margin:10px 4px 0;font-size:14px;color:var(--red-d);font-weight:600}
.search-msg:empty{display:none}
.res-head .search-msg{margin:8px 0 0}
.prov-h{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;color:var(--navy);margin:24px 0 8px}
.prov-h:first-of-type{margin-top:6px}
.badge.try{border-color:#f3b9b2;color:var(--red-d);background:var(--red-50)}
.tag .gb{font-weight:700;opacity:.8;margin-left:4px;font-size:11.5px;letter-spacing:.02em}
.ramp-url{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px;word-break:break-all}
.how{font-size:13px;color:var(--muted);margin:8px 0 0}
.how summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.how p{margin:6px 0 0}
.prog .who{font-size:14px;color:var(--muted)}
.prog .g{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--navy-50);color:var(--navy)}
.pill.f{background:var(--red-50);color:var(--red-d)}
footer.site .src{font-size:12.5px;opacity:.8;margin-top:12px;flex-basis:100%}
footer.site .row>div{min-width:0}
.leaflet-container a{color:var(--navy-2)}
.leaflet-control-attribution{font-size:11px}
main:focus{outline:none}
.brand .t{min-width:0}
.brand .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}