/* ============================================================
   WEE PLAYGROUND - shared design system
   Used by index.html (events) and birthdays.html.
   Palette is verbatim from the supplied Brand_Colors.pdf.
   Note: the brand sheet lists #E47B2C as RGB 288 123 44 - 288 is
   out of range; the real value is 228 123 44. Hex is authoritative.
   ============================================================ */
:root{
  color-scheme: light;             /* deliberate single look - no auto dark inversion */

  --white:#FFFFFF;
  --marigold:#F19C1E;   /* PANTONE 1375 C */
  --burnt:#E47B2C;      /* PANTONE 158 C  */
  --coral:#ED5766;      /* PANTONE 1785 C */
  --crimson:#DF1243;    /* PANTONE 192 C  */
  --lilac:#D09AC2;      /* PANTONE 680 C  */
  --peri:#817FB6;       /* PANTONE 7675 C */
  --sky:#9DCEDB;        /* PANTONE 551 C  */
  --teal:#22A4AA;       /* PANTONE 7467 C */
  --olive:#ACC351;      /* PANTONE 367 C  */
  --green:#80BB15;      /* PANTONE 368 C  */
  --ink:#21207F;        /* PANTONE 2756 C - wordmark navy */

  --cream:#FFF9F0;
  --cream-2:#FFF1E2;
  --ink-70:rgba(33,32,127,.70);
  --ink-45:rgba(33,32,127,.45);
  --ink-12:rgba(33,32,127,.12);

  --nav-h:72px;          /* sticky nav height - sticky panels park below it */
  --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px;
  --shadow:0 10px 0 var(--ink-12);
  --maxw:1120px;

  --f-head:'Fredoka','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --f-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--cream); font-size:17px; line-height:1.6;
  overflow-x:clip;                  /* blobs bleed off-canvas by design.
                                       clip, not hidden: hidden would make body a
                                       scroll container and kill position:sticky. */
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--f-head); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,7.5vw,4.6rem); font-weight:700}
h2{font-size:clamp(1.9rem,5vw,3.1rem); font-weight:700}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
p{margin:0 0 1rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--crimson); outline-offset:3px; border-radius:6px}

.wrap{width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto}
.section{position:relative; padding:clamp(3.5rem,9vw,7rem) 0}
.center{text-align:center}
.eyebrow{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color:var(--coral); margin-bottom:.7rem;
}
.lede{font-size:clamp(1.05rem,2.3vw,1.25rem); color:var(--ink-70); max-width:56ch}
.center .lede{margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  --btn-bg:var(--marigold); --btn-fg:var(--ink); --btn-edge:#c47b12;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-head); font-weight:600; font-size:1.05rem;
  padding:.95rem 1.9rem; min-height:56px;      /* generous tap target */
  background:var(--btn-bg); color:var(--btn-fg);
  border:none; border-radius:999px; cursor:pointer; text-decoration:none;
  box-shadow:0 5px 0 var(--btn-edge); transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--btn-edge)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:0 5px 0 var(--btn-edge)}
.btn--coral{--btn-bg:var(--coral); --btn-fg:var(--white); --btn-edge:#c93d4c}
.btn--teal{--btn-bg:var(--teal); --btn-fg:var(--white); --btn-edge:#178086}
.btn--ink{--btn-bg:var(--ink); --btn-fg:var(--white); --btn-edge:#15144f}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink); --btn-edge:transparent; box-shadow:inset 0 0 0 2.5px var(--ink-12)}
.btn--ghost:active{transform:none; box-shadow:inset 0 0 0 2.5px var(--ink-12)}
.btn--lg{font-size:1.15rem; padding:1.15rem 2.4rem; min-height:64px}
.btn--block{width:100%}

/* ---------- decorative blobs ------------------------------------------- */
.blob{position:absolute; border-radius:50%; opacity:.5; pointer-events:none; z-index:0}
.blob--a{width:210px;height:210px;background:var(--sky);    top:-60px;   left:-70px}
.blob--b{width:150px;height:150px;background:var(--olive);  bottom:8%;   right:-50px}
.blob--c{width:120px;height:120px;background:var(--lilac);  top:22%;     right:12%}
.blob--d{width:180px;height:180px;background:var(--marigold);bottom:-70px;left:14%}
/* On a phone there is nowhere for the blobs to sit that isn't behind text -
   at .5 they wash out the hero stats. Keep them as atmosphere, not obstacle. */
@media (max-width:600px){ .blob{opacity:.28} }
@media (prefers-reduced-motion:no-preference){
  .float{animation:float 7s ease-in-out infinite}
  .float--slow{animation-duration:11s}
  .float--rev{animation-direction:reverse}
  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%    {transform:translateY(-22px) rotate(6deg)}
  }
}

/* ---------- nav -------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,249,240,.88); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink-12);
}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.nav__logo{height:46px; width:auto}
.nav .btn{padding:.7rem 1.4rem; min-height:48px; font-size:.98rem}

/* Site navigation. Collapses to a horizontally scrollable strip on a phone
   rather than hiding behind a hamburger: four links fit, and a menu you have
   to open is a menu most people never open. */
.nav__links{display:flex; align-items:center; gap:1.4rem}
.nav__links a:not(.btn){
  font-family:var(--f-head); font-weight:600; font-size:1rem;
  text-decoration:none; white-space:nowrap; padding:.4rem 0;
  border-bottom:3px solid transparent;
}
.nav__links a:not(.btn):hover{color:var(--coral)}
.nav__links a[aria-current="page"]{border-bottom-color:var(--coral); color:var(--coral)}
@media (max-width:820px){
  .nav__in{flex-wrap:wrap; gap:.5rem}
  .nav__links{
    order:3; width:100%; gap:1.15rem; overflow-x:auto; padding-bottom:.35rem;
    scrollbar-width:none;
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a:not(.btn){font-size:.92rem}
}
@media (max-width:430px){ .nav__logo{height:38px} .nav .btn{padding:.6rem 1.05rem; font-size:.9rem; min-height:44px} }

/* ---------- hero ------------------------------------------------------- */
.hero{position:relative; padding:clamp(2.5rem,7vw,5rem) 0 clamp(4rem,9vw,6rem); overflow:clip}
.hero__logo{width:min(420px,78vw); margin:0 auto clamp(1.5rem,4vw,2.2rem)}
.hero h1{margin-bottom:1rem}
.hero h1 .hl{position:relative; display:inline-block; color:var(--crimson)}
.hero h1 .hl::after{
  content:''; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.3em;
  background:var(--marigold); opacity:.32; border-radius:999px; z-index:-1;
}
.hero__cta{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}
/* Three equal columns, never wrapping. As a flex row these wrapped 2 + 1 on a
   375px screen, orphaning the last stat off-centre. */
.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,3vw,3rem);
  align-items:start; text-align:center;
  margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:2rem; border-top:2px dashed var(--ink-12);
}
.stat b{
  display:block; font-family:var(--f-head); font-weight:700; line-height:1;
  font-size:clamp(1.3rem,5.5vw,1.9rem);
}
.stat span{
  display:block; color:var(--ink-70); font-weight:600; line-height:1.3;
  font-size:clamp(.72rem,2.5vw,.9rem); margin-top:.3rem; text-wrap:balance;
}

/* ---------- form ------------------------------------------------------- */
.book{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%); position:relative; overflow:clip}
.panel{
  position:relative; z-index:1; background:var(--white); border:3px solid var(--ink);
  border-radius:var(--r-xl); padding:clamp(1.4rem,4vw,2.6rem);
  box-shadow:0 14px 0 var(--ink-12); max-width:660px; margin:2.5rem auto 0;
}
.steps{display:flex; align-items:center; gap:.5rem; justify-content:center; margin-bottom:1.8rem}
.step{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.86rem; color:var(--ink-45)}
.step b{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-12); color:var(--ink-70); font-family:var(--f-head); font-size:.95rem;
}
.step.is-on{color:var(--ink)}
.step.is-on b{background:var(--marigold); color:var(--ink)}
.step.is-done b{background:var(--teal); color:var(--white)}
.step__bar{width:26px; height:3px; border-radius:999px; background:var(--ink-12)}
@media (max-width:520px){ .step span{display:none} .step__bar{width:16px} }

.field{margin-bottom:1.25rem}
.field label{display:block; font-family:var(--f-head); font-weight:600; font-size:1rem; margin-bottom:.45rem}
.field .hint{font-size:.84rem; color:var(--ink-45); font-weight:600; margin-left:.3rem}
.input,select,textarea{
  width:100%; font-family:var(--f-body); font-size:1.02rem; font-weight:600; color:var(--ink);
  padding:.9rem 1.1rem; min-height:54px; background:var(--cream);
  border:2.5px solid var(--ink-12); border-radius:var(--r-sm); transition:border-color .15s, background .15s;
}
.input:focus,select:focus,textarea:focus{border-color:var(--teal); background:var(--white); outline:none}
textarea{min-height:96px; resize:vertical; line-height:1.5}
select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%2321207F' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 1.1rem center; padding-right:2.8rem;
}
.field.is-bad .input,.field.is-bad select{border-color:var(--crimson); background:#FFF4F6}
.err{display:none; color:var(--crimson); font-size:.85rem; font-weight:700; margin-top:.4rem}
.field.is-bad .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}   /* honeypot */

/* kid counter */
.counter{display:flex; align-items:center; gap:.8rem}
.counter button{
  width:54px; height:54px; flex:none; border-radius:50%; border:2.5px solid var(--ink);
  background:var(--white); color:var(--ink); font-size:1.7rem; font-family:var(--f-head);
  line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 0 var(--ink-12);
}
.counter button:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink-12)}
.counter button:disabled{opacity:.35; cursor:not-allowed}
.counter .input{text-align:center; font-family:var(--f-head); font-size:1.35rem; font-weight:600}

/* running total */
.total{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--ink); color:var(--white); border-radius:var(--r-md);
  padding:1.1rem 1.4rem; margin:1.6rem 0;
}
.total__l{font-family:var(--f-head); font-weight:500; font-size:.98rem; opacity:.85}
.total__v{font-family:var(--f-head); font-weight:700; font-size:2rem; line-height:1}
.total__v small{font-size:.9rem; font-weight:500; opacity:.8; margin-left:.3rem}

/* ---------- payment step ----------------------------------------------- */
.paybox{background:var(--cream); border:2.5px dashed var(--ink-12); border-radius:var(--r-md); padding:1.3rem; margin-bottom:1.3rem}
.copyrow{display:flex; align-items:center; gap:.7rem; justify-content:space-between; padding:.75rem 0}
.copyrow + .copyrow{border-top:2px dashed var(--ink-12)}
.copyrow__k{font-size:.85rem; font-weight:700; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em}
.copyrow__v{font-family:var(--f-head); font-weight:600; font-size:1.15rem; word-break:break-all}
.copybtn{
  flex:none; border:2px solid var(--ink-12); background:var(--white); color:var(--ink);
  border-radius:999px; padding:.45rem 1rem; font-weight:700; font-size:.85rem;
  font-family:var(--f-body); cursor:pointer; min-height:40px;
}
.copybtn:hover{border-color:var(--teal)}
.copybtn.is-ok{background:var(--teal); color:var(--white); border-color:var(--teal)}
.note{
  background:#FFF7E8; border-left:5px solid var(--marigold); border-radius:var(--r-sm);
  padding:.9rem 1.1rem; font-size:.93rem; color:var(--ink-70); font-weight:600; margin-bottom:1.3rem;
}
.note b{color:var(--ink)}
.formmsg{display:none; border-radius:var(--r-sm); padding:.9rem 1.1rem; font-weight:700; font-size:.94rem; margin-bottom:1.2rem}
.formmsg.is-err{display:block; background:#FFF4F6; color:var(--crimson); border-left:5px solid var(--crimson)}
.formmsg.is-info{display:block; background:#EAF7F8; color:#14666a; border-left:5px solid var(--teal)}

/* ---------- done ------------------------------------------------------- */
.done{text-align:center; padding:1rem 0}
.done__mark{width:96px; margin:0 auto 1.3rem}
.done .ref{
  display:inline-block; font-family:var(--f-head); font-weight:700; font-size:1.5rem;
  background:var(--cream-2); border-radius:var(--r-sm); padding:.6rem 1.4rem; margin:.4rem 0 1.2rem;
  letter-spacing:.06em;
}

/* ---------- how it works ----------------------------------------------- */
.how{background:var(--ink); color:var(--white)}
.how h2{color:var(--white)}
.how .eyebrow{color:var(--marigold)}
.how .lede{color:rgba(255,255,255,.75)}
.how__grid{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:3rem}
.how__step{background:rgba(255,255,255,.07); border-radius:var(--r-lg); padding:1.8rem; border:2px solid rgba(255,255,255,.14)}
.how__n{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:1.5rem; color:var(--ink);
  background:var(--c,var(--marigold)); margin-bottom:1.1rem;
}
.how__step h3{margin-bottom:.5rem}
.how__step p{color:rgba(255,255,255,.75); font-size:.96rem; margin:0}

/* ---------- info / faq -------------------------------------------------- */
.info__grid{display:grid; gap:2.5rem; grid-template-columns:1fr; margin-top:2.8rem}
@media (min-width:860px){ .info__grid{grid-template-columns:1fr 1fr; gap:3.5rem} }
.faq{border-bottom:2px dashed var(--ink-12); padding:0 0 .3rem}
.faq summary{
  font-family:var(--f-head); font-weight:600; font-size:1.08rem; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.95rem 0; min-height:48px;      /* the summary IS the tap target - pad it, not .faq */
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:1.6rem; color:var(--coral); line-height:1; flex:none}
.faq[open] summary::after{content:'\2013'}
.faq p{margin:.8rem 0 .2rem; color:var(--ink-70); font-size:.96rem}
.contact{background:var(--cream-2); border-radius:var(--r-lg); padding:1.8rem; border:3px solid var(--ink)}
.contact dt{font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-45); margin-top:1.1rem}
.contact dt:first-of-type{margin-top:0}
.contact dd{margin:.25rem 0 0; font-family:var(--f-head); font-weight:500; font-size:1.1rem}
.contact a{text-decoration-color:var(--coral); text-underline-offset:3px}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--ink); color:rgba(255,255,255,.7); padding:3rem 0 2.5rem; text-align:center; font-size:.9rem}
.foot__logo{width:170px; margin:0 auto 1.4rem; filter:brightness(0) invert(1); opacity:.95}
.foot a{color:var(--white); font-weight:700}
.foot__soc{display:flex; gap:1.4rem; justify-content:center; margin:1.2rem 0 1.6rem; font-weight:700}

/* confetti */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:99}
.confetti i{position:absolute; width:11px; height:15px; border-radius:2px; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .confetti i{animation:fall 2.6s ease-in forwards}
  @keyframes fall{
    0%  {opacity:1; transform:translateY(-12vh) rotate(0deg)}
    100%{opacity:0; transform:translateY(102vh) rotate(720deg)}
  }
}
[hidden]{display:none !important}