/*
Theme Name: Puddle Jumpers Exact Scaffold
Theme URI: https://puddlejumpers.ca
Author: Jason Frans
Description: Reference-matched layout scaffold (NO illustration assets; placeholders only). Emulates the exact composition: top nav + CTA, hero copy + primary button, welcome band with 3 feature cards, logo/social band, footer line.
Version: 0.4
Text Domain: puddlejumpers-exact
*/

:root{
  /* Reference-ish palette */
  --sky-top:#2f79ad;
  --sky:#4f9fd6;
  --sky-lite:#79c4f0;

  --white:#ffffff;
  --ink:#0f172a;
  --ink-soft:rgba(15,23,42,.78);

  --max:1024px;
  --gutter:18px;

  --stroke:rgba(0,0,0,.12);
  --shadow:rgba(2,8,23,.10);

  --orange:#f59e0b;
  --green:#22c55e;
  --purple:#a855f7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#eaf4ff;
}

/* ======= TOP STRIP (exact-ish height like ref) ======= */
.topbar{
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 70%, var(--sky-lite) 100%);
  padding:14px var(--gutter) 6px;
  position:relative;
}

.topbar .row{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.primary-nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:26px;
}
.primary-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:18px;
  text-shadow:0 2px 0 rgba(0,0,0,.12);
}

.cta-pill{
  background:linear-gradient(180deg,#fbbf24 0%, #f59e0b 100%);
  color:#1f2937;
  border-radius:999px;
  padding:10px 16px;
  font-weight:1000;
  font-size:14px;
  letter-spacing:.4px;
  text-decoration:none;
  border:2px solid rgba(0,0,0,.18);
  box-shadow:0 6px 0 rgba(0,0,0,.10);
  text-transform:uppercase;
  white-space:nowrap;
}

/* Wave under topbar (thin white curve like ref) */
.top-wave{
  width:100%;
  height:26px; /* thin, not a fat stripe */
  display:block;
  color:rgba(255,255,255,.92);
}
.top-wave svg{width:100%; height:100%; display:block}

/* ======= HERO SCENE PLACEHOLDER (keeps exact composition) ======= */
.hero-scene{
  position:relative;
  padding:0 var(--gutter);
  margin-top:-2px;
}
.scene{
  max-width:1365px; /* match ref image width for composition */
  margin:0 auto;
  border-radius:0;
  min-height:980px;  /* keeps the “tall poster” feel like ref */
  background:
    radial-gradient(900px 420px at 50% 16%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #98d7ff 0%, #c9ecff 30%, #bfe7b8 62%, #88d390 100%);
  position:relative;
  overflow:hidden;
}

/* soft “paper” vignette to mimic illustrated frame */
.scene:before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1400px 700px at 50% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
  pointer-events:none;
}

/* Bottom “rocks + water” hint (placeholder, not an image) */
.scene:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:220px;
  background:
    linear-gradient(180deg, rgba(120,190,235,0) 0%, rgba(120,190,235,.55) 42%, rgba(255,255,255,.85) 100%),
    radial-gradient(120px 40px at 10% 78%, rgba(120,90,60,.35), rgba(120,90,60,0) 70%),
    radial-gradient(160px 50px at 28% 84%, rgba(120,90,60,.30), rgba(120,90,60,0) 72%),
    radial-gradient(150px 50px at 78% 86%, rgba(120,90,60,.28), rgba(120,90,60,0) 72%);
  pointer-events:none;
}

/* HERO COPY: centered and scaled like the poster */
.hero-copy{
  position:absolute;
  left:50%;
  top:16%;
  transform:translateX(-50%);
  width:min(820px, calc(100% - 2*var(--gutter)));
  text-align:center;
  padding:0 10px;
}

.hero-copy .line1{
  font-weight:1000;
  font-size:44px;
  letter-spacing:-.6px;
  margin:0 0 6px;
  color:#1f3b6b;
  text-shadow:0 2px 0 rgba(255,255,255,.35);
}

/* Placeholder for colorful “LOVE TO LEARN & PLAY” block */
.hero-copy .line2{
  font-weight:1000;
  font-size:64px;
  line-height:1.0;
  letter-spacing:-.6px;
  margin:0 0 20px;
  background:linear-gradient(90deg,#22c55e 0%, #f59e0b 40%, #f97316 65%, #a855f7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

/* Main button centered */
.hero-copy .hero-btn{
  display:inline-block;
  background:linear-gradient(180deg,#fb923c 0%, #f97316 100%);
  color:#fff;
  font-weight:1000;
  border-radius:999px;
  padding:16px 30px;
  text-decoration:none;
  border:3px solid rgba(0,0,0,.14);
  box-shadow:0 10px 0 rgba(0,0,0,.10);
  font-size:22px;
}

/* ======= WELCOME BAND (the big white “river” panel) ======= */
.welcome-wrap{
  position:relative;
  margin-top:-260px; /* pulls band into the scene like ref */
  padding:0 var(--gutter);
  z-index:3;
}

.welcome-panel{
  max-width:1365px;
  margin:0 auto;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(2,8,23,.08);
  box-shadow:0 16px 52px rgba(2,8,23,.14);
  overflow:hidden;
}

/* top water wave inside welcome band */
.band-wave{
  height:56px;
  color:rgba(255,255,255,.95);
}
.band-wave svg{width:100%; height:100%; display:block}

.welcome-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:26px var(--gutter) 16px;
  text-align:center;
}

.welcome-inner h2{
  margin:0 0 18px;
  font-size:42px;
  font-weight:1000;
  color:#1f3b6b;
}

/* 3 cards row like ref */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  padding:0 var(--gutter) 24px;
  max-width:var(--max);
  margin:0 auto;
}

.feature-card{
  border-radius:18px;
  border:2px solid rgba(0,0,0,.14);
  box-shadow:0 10px 0 rgba(0,0,0,.09);
  overflow:hidden;
  position:relative;
  min-height:240px;
}

.feature-card.orange{background:linear-gradient(180deg, rgba(245,158,11,.38) 0%, rgba(245,158,11,.12) 100%);}
.feature-card.green{background:linear-gradient(180deg, rgba(34,197,94,.34) 0%, rgba(34,197,94,.10) 100%);}
.feature-card.purple{background:linear-gradient(180deg, rgba(168,85,247,.30) 0%, rgba(168,85,247,.10) 100%);}

.feature-card .hdr{
  padding:14px 14px 10px;
  font-size:20px;
  font-weight:1000;
  color:#0b1220;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* image placeholder region in each card */
.feature-card .ph{
  margin:0 14px 12px;
  height:120px;
  border-radius:14px;
  border:2px dashed rgba(2,8,23,.22);
  background:rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  letter-spacing:.4px;
  color:rgba(2,8,23,.55);
}

/* Button area like ref */
.feature-card .btnrow{
  padding:0 14px 16px;
  display:flex;
  justify-content:center;
}
.feature-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:2px solid rgba(2,8,23,.14);
  text-decoration:none;
  font-weight:1000;
  color:#0f172a;
}

/* ======= LOGO BAND (blue water band) ======= */
.logo-band{
  max-width:1365px;
  margin:0 auto;
  padding:18px var(--gutter) 0;
  position:relative;
}

.logo-row{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:16px 0 22px;
}

.logo-ph{
  width:330px;
  height:120px;
  border-radius:18px;
  border:2px dashed rgba(2,8,23,.24);
  background:rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  color:rgba(2,8,23,.55);
}

.social{
  display:flex;
  gap:10px;
}
.social a{
  width:46px; height:46px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0f172a;
  background:rgba(255,255,255,.70);
  border:2px solid rgba(2,8,23,.14);
  font-weight:1000;
}

/* ======= FOOTER LINE (small, like ref) ======= */
.site-footer{
  padding:14px var(--gutter) 18px;
  text-align:center;
  color:rgba(255,255,255,.92);
  background:linear-gradient(180deg, #5aa6da 0%, #3e84b6 100%);
  font-weight:800;
}

/* Responsiveness without breaking composition */
@media (max-width: 980px){
  .primary-nav ul{gap:14px; flex-wrap:wrap; justify-content:center}
  .hero-copy .line1{font-size:34px}
  .hero-copy .line2{font-size:46px}
  .scene{min-height:780px}
  .welcome-wrap{margin-top:-220px}
  .welcome-inner h2{font-size:34px}
  .cards{grid-template-columns:1fr}
  .logo-row{flex-direction:column; align-items:flex-start}
}