/* /splash-pads — every free splash pad in Sarnia & Lambton County.
   A practical countywide directory in the Hub's Inter and slate-blue system,
   with a water tint for amenities and the live season status. Scoped under
   .sp; the shared chrome belongs to
   nav-footer.css. */

.sp{
  --ink:#283339; --muted:#57656b; --line:#d4dcdd; --line-soft:#e6ebeb;
  --lake:#315f73; --lake-dark:#23495b; --lake-tint:#eaf0f2;
  --water:#1f6f8b; --water-tint:#dff0f4;
  --sand:#f4f7f9; --sand-deep:#e3eaf0;
  --sun:#356382; --sun-tint:#e6eef3;
  --leaf:#35576b; --leaf-tint:#eaf0f2;
  --serif:"Inter", Arial, sans-serif;
  --sans:"Inter", Arial, sans-serif;
  color:var(--ink); font-family:var(--sans); background:#fbfcfb;
  -webkit-font-smoothing:antialiased;
}
body.sp-body{margin:0;background:#fbfcfb}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp [hidden]{display:none!important}
.sp a{color:inherit}
.sp :focus-visible{outline:2px solid var(--lake);outline-offset:3px}
.sp .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sp-shell{width:100%;max-width:1320px;margin-inline:auto;padding-inline:20px}
@media(min-width:640px){.sp-shell{padding-inline:40px}}
@media(min-width:1024px){.sp-shell{padding-inline:64px}}

.sp-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;font:700 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--lake)}
.sp-title{margin:.7rem 0 0;font:700 clamp(32px,4.2vw,46px)/1.12 var(--serif);letter-spacing:-.035em}
.sp-lede{margin:0;font-size:15px;line-height:1.75;color:var(--muted)}
.sp-body-copy{margin:0;font-size:17px;line-height:1.85;color:rgba(40,51,57,.9)}

/* ---------- Masthead ---------- */
.sp-mast{padding-block:32px 0}
@media(min-width:768px){.sp-mast{padding-block:56px 0}}
.sp-mast .sp-eyebrow a{text-decoration:none}
.sp-h1{margin:1rem 0 0;max-width:17ch;font:700 clamp(2.2rem,5.4vw,4.3rem)/1.04 var(--serif);letter-spacing:-.04em}
.sp-dek{margin:1rem 0 0;max-width:48rem;font:400 clamp(1.05rem,2vw,1.35rem)/1.55 var(--sans);letter-spacing:0;color:var(--muted)}
.sp-byline{display:flex;flex-wrap:wrap;gap:.3rem .75rem;margin:1rem 0 0;font-size:12px;font-weight:600;color:var(--muted)}
@media(max-width:639px){.sp-byline{flex-direction:column;gap:.2rem}.sp-byline [aria-hidden]{display:none}}

.sp-status{position:relative;margin:24px 0 0;padding:14px 16px 14px 38px;background:var(--water-tint);color:var(--lake-dark);border:1px solid #c9e2e8;border-radius:14px;font-size:14px;line-height:1.55}
.sp-status::before{content:"";position:absolute;left:16px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--water)}
.sp-status[data-state="closing"]{background:var(--sun-tint);color:var(--sun)}
.sp-status[data-state="closing"]::before{background:var(--sun)}
.sp-status[data-state="closed"]{background:var(--sand);color:var(--ink)}
.sp-status[data-state="closed"]::before{background:var(--muted)}
.sp-status strong{font-weight:600}

.sp-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.sp-glance div{min-width:0;padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.sp-glance div:nth-child(odd){border-right:1px solid var(--line)}
.sp-glance div:nth-child(even){padding-left:12px}
.sp-glance div:nth-last-child(-n+2){border-bottom:0}
.sp-glance b{display:block;font:700 36px/1 var(--serif);letter-spacing:-.035em}
.sp-glance span{display:block;margin-top:.45rem;font-size:13px;line-height:1.4;color:var(--muted)}
@media(min-width:760px){
  .sp-glance{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp-glance div{display:block;padding:20px 22px 24px;border-bottom:0;border-right:1px solid var(--line)}
  .sp-glance div:nth-child(even){padding-left:22px}
  .sp-glance div:first-child{padding-left:0}
  .sp-glance div:last-child{border-right:0}
  .sp-glance b{display:block;font-size:clamp(44px,5vw,58px)}
  .sp-glance span{display:block;margin-top:.6rem;font-size:13px}
}

/* Two photos: stacked on a phone, side by side from 760px. */
.sp-photos{display:grid;grid-template-columns:1fr;gap:6px;margin-top:32px}
.sp-photos figure{min-width:0;margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--sand)}
.sp-photos figure:last-child{aspect-ratio:16/9}
.sp-photos img{display:block;width:100%;height:100%;object-fit:cover}
/* The Tecumseh photo has thin black bars baked into its top and bottom edges. */
.sp-photos figure:first-child img{transform:scale(1.28);transform-origin:50% 42%}
@media(min-width:760px){
  .sp-photos{grid-template-columns:1.4fr 1fr;gap:8px;margin-top:40px}
  .sp-photos figure{width:100%;aspect-ratio:auto;height:380px}
}
.sp-photos-note{margin:.6rem 0 0;font-size:11px;color:var(--muted)}
.sp-photos-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- Intro ---------- */
.sp-intro{display:grid;gap:32px;padding-block:44px 8px}
@media(min-width:900px){.sp-intro{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:80px;padding-block:64px 16px}}
.sp-intro .sp-body-copy+.sp-body-copy{margin-top:1.4rem}
.sp-pull{margin:1.6rem 0 0;padding:1rem 1.1rem;border-left:4px solid var(--lake);background:var(--lake-tint);font:600 16px/1.6 var(--sans);color:var(--lake-dark)}
.sp-aside{align-self:start;padding:26px;background:var(--sand)}
.sp-aside h2{margin:0}
.sp-aside ul{margin:1rem 0 0;padding:0 0 0 1rem;list-style:none;border-left:1px solid rgba(49,95,115,.4)}
.sp-aside li a{display:flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none}
.sp-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;margin-top:1.2rem;padding:.75rem 1.2rem;background:var(--lake);color:#fff!important;font:500 14px var(--sans);text-decoration:none}
.sp-cta svg{width:16px;height:16px}

/* ---------- Finder ---------- */
.sp-finder{margin-top:32px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-filters{display:flex;gap:8px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.sp-filters::-webkit-scrollbar{display:none}
@media(min-width:900px){.sp-filters{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}}
.sp-filter{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:500 14px var(--sans);cursor:pointer;white-space:nowrap}
/* Pressed: still white, drawn in the accent rather than filled with it. */
.sp-filter[aria-pressed="true"]{background:#e6eef3;border-color:#cfdbe3;color:var(--ink);font-weight:600}
.sp-count{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* ---------- Regions ---------- */
.sp-region{display:grid;gap:22px;padding-block:44px;border-top:1px solid var(--line);scroll-margin-top:96px}
.sp-region:first-of-type{border-top:0}
@media(min-width:980px){.sp-region{grid-template-columns:290px minmax(0,1fr);gap:64px;padding-block:64px}}
.sp-region-intro{align-self:start}
@media(min-width:980px){.sp-region-intro{position:sticky;top:104px}}
.sp-region-intro h2{margin:.7rem 0 0;font:700 clamp(28px,3vw,36px)/1.12 var(--serif);letter-spacing:-.035em}
.sp-region-intro p{margin:.9rem 0 0;font-size:15px;line-height:1.75;color:var(--muted)}
.sp-region-count{display:block;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);font:600 14px/1.5 var(--sans);color:var(--lake)}

.sp-rows{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.sp-row{display:block;padding:24px 0;border-top:1px solid var(--line)}
.sp-row:first-child{border-top-color:var(--ink)}
.sp-row h3{margin:0;font:700 clamp(20px,2.1vw,24px)/1.22 var(--serif);letter-spacing:-.025em}
.sp-addr{margin:.45rem 0 0;font-size:15px;line-height:1.5}
.sp-addr .sp-town{margin-right:.6rem;font:600 10.5px/1.9 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.sp-note{margin:.55rem 0 0;max-width:62ch;font-size:15px;line-height:1.7;color:var(--muted)}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px;margin:.8rem 0 0;padding:0;list-style:none}
.sp-tag{padding:4px 10px;border-radius:6px;background:var(--sand);font-size:12.5px;font-weight:500}
.sp-tag-free{background:var(--leaf-tint);color:var(--leaf)}
.sp-tag-beach,.sp-tag-pool{background:var(--water-tint);color:var(--lake-dark)}
.sp-actions{display:flex;flex-wrap:wrap;gap:0 20px;margin:.5rem 0 0}
.sp-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--lake)!important;font:600 14px var(--sans);text-decoration:none;border-bottom:1px solid transparent}
.sp-link svg{width:14px;height:14px}
.sp-link-quiet{color:var(--muted)!important;font-weight:500}
.sp-empty{margin:0;padding:28px 0;border-top:1px solid var(--ink);font-size:16px;color:var(--muted)}
@media(hover:hover){
  .sp-link:hover{border-color:currentColor}
  .sp-filter:hover{border-color:var(--lake)}
  .sp-aside li a:hover{color:var(--lake)}
}

/* ---------- Sponsors (sponsor-spots.js; hidden until a sponsor exists) ---------- */
.sp-premier{margin-top:24px;padding:16px 20px;background:var(--lake-tint);border:1px solid #cfdbe3;border-radius:16px}
.sp-premier .pb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.sp-premier .pb-label{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sp-community{padding:22px 20px;border-top:1px solid var(--line)}
@media(min-width:640px){.sp-community{padding-inline:40px}}
@media(min-width:1024px){.sp-community{padding-inline:64px}}
.sp-community .csx-head{margin:0 0 12px;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sp-community .csx-join{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:var(--lake);text-decoration:underline;text-underline-offset:3px}

/* ---------- Beaches ---------- */
.sp-beaches{padding-block:56px;background:var(--sand)}
@media(min-width:768px){.sp-beaches{padding-block:80px}}
.sp-section-head{display:grid;gap:14px;margin-bottom:28px}
@media(min-width:900px){.sp-section-head{grid-template-columns:1.3fr 1fr;align-items:end;margin-bottom:36px}.sp-section-head .sp-lede{justify-self:end;max-width:440px}}
.sp-beach-layout{display:grid;gap:24px}
@media(min-width:1000px){.sp-beach-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px;align-items:start}}
.sp-beach-photo{margin:0}
.sp-beach-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sp-beach-photo figcaption{margin-top:.5rem;font-size:11px;color:var(--muted)}
.sp-beach-grid{display:grid;gap:10px;margin:0;padding:0;list-style:none}
@media(min-width:700px){.sp-beach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-beach{padding:22px;background:#fff}
.sp-beach h3{margin:0;font:700 21px/1.2 var(--serif);letter-spacing:-.02em}
.sp-beach p{margin:.6rem 0 0;font-size:15px;line-height:1.7;color:var(--muted)}
.sp-beach a{color:var(--lake);text-decoration:underline;text-underline-offset:3px}
.sp-water{margin-top:14px;padding:18px 20px;background:var(--lake);color:#fff;font-size:15px;line-height:1.7}
.sp-water strong{font-weight:600}
.sp-water a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sp-water-actions{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px}
.sp-water-actions a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- FAQ ---------- */
.sp-faq-wrap{display:grid;gap:32px;padding-block:56px}
@media(min-width:900px){.sp-faq-wrap{grid-template-columns:.8fr 1.4fr;gap:80px;padding-block:80px}}
.sp-faq{border-top:1px solid var(--line)}
.sp-faq:last-child{border-bottom:1px solid var(--line)}
.sp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding-block:1rem;font-size:15px;font-weight:500;line-height:1.45;cursor:pointer;list-style:none}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary svg{flex:none;width:18px;height:18px;transition:transform .25s}
.sp-faq[open] summary svg{transform:rotate(180deg)}
.sp-faq p{margin:0;padding-bottom:1.4rem;max-width:66ch;font-size:15px;line-height:1.8;color:var(--muted)}
.sp-faq p a{color:var(--lake);text-decoration:underline;text-underline-offset:3px}

/* ---------- More ideas + band ---------- */
.sp-more{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--ink)}
@media(min-width:760px){.sp-more{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media(min-width:1100px){.sp-more{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp-more li{border-bottom:1px solid var(--line)}
.sp-more a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;min-height:72px;padding:14px 0;text-decoration:none}
.sp-more-name{font:700 20px/1.2 var(--serif);letter-spacing:-.02em}
.sp-more-meta{grid-row:2;font-size:13px;color:var(--muted)}
.sp-more svg{grid-row:1/3;grid-column:2;width:16px;height:16px;color:var(--lake)}

.sp-band{margin-top:56px;padding-block:48px;background:var(--lake);color:#fff}
@media(min-width:768px){.sp-band{margin-top:80px;padding-block:64px}}
.sp-band .sp-shell{display:flex;flex-direction:column;gap:24px}
@media(min-width:900px){.sp-band .sp-shell{flex-direction:row;justify-content:space-between;align-items:center}}
.sp-band .sp-eyebrow{color:rgba(255,255,255,.82)}
.sp-band h2{margin:.7rem 0 0;font:700 clamp(32px,3.6vw,42px)/1.15 var(--serif);letter-spacing:-.035em}
.sp-band p{margin:.6rem 0 0;max-width:52ch;font-size:15px;line-height:1.7;color:rgba(255,255,255,.88)}
.sp-band-actions{display:flex;flex-wrap:wrap;gap:12px}
.sp-band-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:.75rem 1.4rem;border:1px solid rgba(255,255,255,.7);color:#fff!important;font:500 14px var(--sans);text-decoration:none}
.sp-band-btn-solid{background:#fff;color:var(--lake)!important;border-color:#fff}
.sp-band-btn svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){.sp *{transition:none!important}}