/* PLAY SCHOOL THEME v3 - FUN & KID-FRIENDLY. Loads after style.css and the CMS theme block */
:root{--navy:#8B6CF6;--navy-dark:#4B3A9E;--gold:#FFD23F;--maroon:#FF6FA5;--ivory:#FFF9E8;
--ink:#3B2F6B;--ink-soft:#6E6699;--line:#FFE9B8;--surface-2:#FFF3D1;
--pink:#FF6FA5;--orange:#FF9F43;--sun:#FFD23F;--green:#4CD6A0;--blue:#4DB8FF;--grape:#8B6CF6;--mint:#4CD6A0;--sky:#4DB8FF;
--p-pink:#FFE0EC;--p-sun:#FFF2BD;--p-mint:#D9F7EA;--p-sky:#D9F0FF;--p-lav:#EAE3FF;--p-peach:#FFE6D1;
--radius:30px;--radius-lg:42px;
--shadow-sm:0 4px 0 rgba(59,47,107,.08);--shadow-md:0 6px 0 rgba(59,47,107,.08),0 18px 34px rgba(139,108,246,.14);--shadow-lg:0 8px 0 rgba(59,47,107,.08),0 30px 60px rgba(139,108,246,.22);
--pop:cubic-bezier(.34,1.56,.64,1)}
body,h1,h2,h3,h4,.brand{font-family:'Nunito',system-ui,sans-serif}
h1,h2,h3,h4,.brand,.btn,.eyebrow,.kicker,.letter{font-family:'Fredoka','Nunito',sans-serif}
h1,h2,h3,h4{font-weight:600;color:var(--ink)}
body{font-size:17px;line-height:1.7;color:var(--ink);background-color:var(--ivory);
background-image:radial-gradient(#FF6FA5 2px,transparent 2.5px),radial-gradient(#4DB8FF 2px,transparent 2.5px),radial-gradient(#FFD23F 2.5px,transparent 3px),radial-gradient(#4CD6A0 2px,transparent 2.5px);
background-size:120px 120px;background-position:0 0,60px 30px,30px 80px,90px 100px}
body::before{content:"";position:fixed;inset:0;background:rgba(255,249,232,.82);z-index:-1}
p{color:var(--ink-soft)}
.topbar{background:linear-gradient(90deg,#8B6CF6,#FF6FA5,#FF9F43)}
.topbar a.tb-cta{background:#fff;color:var(--pink);border-radius:999px;padding:4px 16px;font-weight:800;animation:bounce 2.2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.marquee-bar{background:#FFF2BD;border:0}.marquee-bar .marquee-tag{background:var(--pink);color:#fff;border-radius:999px;font-weight:800}
/* NAV: candy buttons + bunting */
.navbar{position:sticky;top:0;z-index:80;background:#fff;border:0;box-shadow:0 4px 0 rgba(59,47,107,.06)}
.navbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;z-index:2;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24'%3E%3Cpath d='M0 0h240' stroke='%23c9b8f5' stroke-width='3'/%3E%3Cpath d='M4 0h40l-20 22z' fill='%23FF6FA5'/%3E%3Cpath d='M52 0h40L72 22z' fill='%23FFD23F'/%3E%3Cpath d='M100 0h40l-20 22z' fill='%234CD6A0'/%3E%3Cpath d='M148 0h40l-20 22z' fill='%234DB8FF'/%3E%3Cpath d='M196 0h40l-20 22z' fill='%238B6CF6'/%3E%3C/svg%3E") repeat-x top/240px 24px}
.brand{font-weight:700;color:var(--ink)}.brand small{color:var(--pink);font-weight:700}
.brand img{transition:transform .5s var(--pop)}.brand:hover img{transform:rotate(-8deg) scale(1.1)}
nav.menu>ul{gap:8px}
nav.menu>ul>li:nth-child(6n+1){--mc:#FF6FA5}nav.menu>ul>li:nth-child(6n+2){--mc:#FF9F43}nav.menu>ul>li:nth-child(6n+3){--mc:#4CD6A0}
nav.menu>ul>li:nth-child(6n+4){--mc:#4DB8FF}nav.menu>ul>li:nth-child(6n+5){--mc:#8B6CF6}nav.menu>ul>li:nth-child(6n){--mc:#FFB300}
nav.menu>ul>li>a{background:var(--mc,var(--pink));color:#fff;border-radius:999px;font-weight:700;padding:9px 18px;box-shadow:0 4px 0 color-mix(in srgb,var(--mc,#FF6FA5) 62%,#000);transition:transform .3s var(--pop),box-shadow .2s;display:inline-flex;align-items:center;gap:6px}
nav.menu>ul>li>a:hover{transform:translateY(-4px) rotate(-3deg) scale(1.06);box-shadow:0 8px 0 color-mix(in srgb,var(--mc,#FF6FA5) 62%,#000);background:var(--mc);color:#fff}
nav.menu>ul>li>a:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--mc) 62%,#000)}
.ne{display:inline-block;font-size:1.1em;transition:transform .4s var(--pop)}nav.menu a:hover .ne{transform:rotate(20deg) scale(1.3)}
nav.menu ul ul{border:4px solid var(--mc,var(--sun));border-radius:26px;background:#fff;box-shadow:var(--shadow-lg);padding:8px;margin-top:6px}
nav.menu ul ul li a{border-radius:16px;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:center}nav.menu ul ul li a:hover{background:var(--p-sun);color:var(--ink)}
.menu-toggle{background:var(--pink);border-radius:16px;box-shadow:0 4px 0 #c9457b}.menu-toggle span{background:#fff}
/* BUTTONS */
.btn{border-radius:999px;font-weight:600;padding:14px 32px;border:0;font-size:1.05rem;transition:transform .3s var(--pop),box-shadow .2s;box-shadow:0 6px 0 rgba(59,47,107,.2)}
.btn:hover{transform:translateY(-4px) scale(1.06) rotate(-1.5deg);box-shadow:0 10px 0 rgba(59,47,107,.2)}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(59,47,107,.2)}
.btn-gold{background:#FFD23F;color:var(--ink)}.btn-pink{background:var(--pink);color:#fff}.btn-outline{background:#fff;color:var(--grape);border:0}
/* HERO */
.hero{height:640px;border-radius:0 0 70px 70px;margin-bottom:24px}
.hero .slide::after{background:linear-gradient(100deg,rgba(139,108,246,.82) 0%,rgba(255,111,165,.45) 50%,rgba(255,210,63,.08) 100%)}
.hero .slide-text h2{color:#fff;font-weight:700;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.08;text-shadow:0 4px 0 rgba(59,47,107,.25)}
.hero .slide-text p{color:#fff;font-size:1.15rem;font-weight:600}
.hero .slide-text .eyebrow{background:#FFD23F;color:var(--ink);border-radius:999px;font-weight:600;transform:rotate(-2deg)}
.hero-fallback{width:100%;height:100%;background:radial-gradient(circle at 78% 22%,#FFD23Faa,transparent 38%),linear-gradient(135deg,#8B6CF6,#FF6FA5 65%,#FF9F43)}
.hero-dots button{border-radius:999px}.hero-dots button.active{width:30px;background:#FFD23F}
.balloon{position:absolute;z-index:6;border:0;background:none;font-size:3.2rem;cursor:pointer;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 10px 8px rgba(0,0,0,.15));transition:transform .2s}
.balloon:hover{transform:scale(1.2)}.balloon.pop{animation:pop .5s forwards}
@keyframes float{50%{transform:translateY(-26px) rotate(8deg)}}@keyframes pop{to{transform:scale(2.2);opacity:0}}
.cloud{position:absolute;z-index:2;font-size:4.5rem;opacity:.9;animation:drift 45s linear infinite;pointer-events:none}.cloud.c2{animation-duration:70s;font-size:3rem;opacity:.7}
@keyframes drift{to{transform:translateX(130vw)}}
.mascot{position:absolute;z-index:6;right:4%;bottom:-6px;font-size:7rem;line-height:1;animation:bob 3s ease-in-out infinite;transform-origin:bottom;filter:drop-shadow(0 8px 6px rgba(0,0,0,.2))}
.mascot .say{position:absolute;right:70%;top:-14px;white-space:nowrap;background:#fff;color:var(--ink);font:600 .95rem 'Fredoka';padding:8px 16px;border-radius:20px;box-shadow:var(--shadow-md);animation:bounce 2s infinite}
.mascot .say::after{content:"";position:absolute;right:-6px;bottom:6px;border:8px solid transparent;border-left-color:#fff}
@keyframes bob{50%{transform:rotate(4deg) translateY(-8px)}}
.wave{display:block;width:100%;height:60px;margin-top:-1px}
/* SECTIONS */
.section{padding:88px 0;position:relative}.section-alt{background:linear-gradient(180deg,#FFF1C9,#FFE9F0)}
.section-head h2,.sec-title{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700;background:linear-gradient(90deg,#FF6FA5,#FF9F43,#4CD6A0,#4DB8FF,#8B6CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head h2::before{content:"★";display:inline-block;margin-right:12px;color:var(--sun);-webkit-text-fill-color:var(--sun);animation:spin 6s linear infinite;background:none;width:auto;height:auto}
@keyframes spin{to{transform:rotate(360deg)}}
.sec-center{text-align:center;max-width:700px;margin:0 auto 48px}
.kicker{display:inline-block;background:var(--k,#FFE0EC);color:var(--ink);padding:6px 20px;border-radius:999px;font-weight:600;font-size:.85rem;letter-spacing:.1em;transform:rotate(-2deg);box-shadow:var(--shadow-sm);margin-bottom:10px}
/* CARDS (sticker style) */
.card{border:4px solid #fff;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-md);overflow:hidden;transition:transform .4s var(--pop),box-shadow .3s}
.grid>.card:nth-child(odd),.grid .card:nth-child(3n+1){transform:rotate(-.8deg)}.grid>.card:nth-child(even),.grid .card:nth-child(3n+2){transform:rotate(.8deg)}
.card:hover{transform:translateY(-10px) rotate(-1.5deg) scale(1.02)!important;box-shadow:var(--shadow-lg)}
.card .meta{color:var(--pink);font-weight:800}.read-more-link{color:var(--grape);font-weight:800}
.list-strip li{border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}.date-badge{background:var(--pink);color:#fff;border-radius:18px}
.quick-links{gap:18px}
.quick-links a{border:4px solid #fff;border-radius:var(--radius);background:var(--c);color:var(--ink);font-weight:800;box-shadow:var(--shadow-md);transition:transform .35s var(--pop)}
.quick-links a:nth-child(6n+1){--c:var(--p-sun)}.quick-links a:nth-child(6n+2){--c:var(--p-mint)}.quick-links a:nth-child(6n+3){--c:var(--p-sky)}
.quick-links a:nth-child(6n+4){--c:var(--p-pink)}.quick-links a:nth-child(6n+5){--c:var(--p-lav)}.quick-links a:nth-child(6n){--c:var(--p-peach)}
.quick-links a:hover{transform:translateY(-10px) rotate(3deg) scale(1.06)}.ql-icon{font-size:2.2rem;display:block;animation:bounce 2.6s infinite}
/* PROGRAMS etc */
.prog-grid,.feat-grid,.testi-grid,.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.prog{background:#fff;border-radius:var(--radius-lg);padding:34px 24px;text-align:center;border:5px solid var(--c);box-shadow:var(--shadow-md);transition:transform .4s var(--pop)}
.prog:nth-child(odd){transform:rotate(-1.5deg)}.prog:nth-child(even){transform:rotate(1.5deg)}
.prog:hover{transform:translateY(-12px) rotate(0) scale(1.04)}
.prog .emo{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:3rem;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12);animation:bob 3.5s ease-in-out infinite}
.prog h3{color:var(--c);font-size:1.6rem;margin:.2em 0}.prog .age{background:var(--ivory);padding:3px 16px;border-radius:999px;font-weight:800;font-size:.85rem;display:inline-block}
.prog p{font-size:.95rem;margin:12px 0 0}
.feat{display:flex;gap:16px;background:#fff;padding:22px;border-radius:var(--radius);box-shadow:var(--shadow-md);border:4px solid #fff;transition:transform .35s var(--pop)}
.feat:hover{transform:scale(1.05) rotate(-1deg)}.feat .ic{flex:none;width:62px;height:62px;border-radius:22px;background:var(--c);display:grid;place-items:center;font-size:1.9rem;transform:rotate(-8deg)}
.feat h4{margin:0 0 4px}.feat p{margin:0;font-size:.93rem}
.routine{max-width:760px;margin:0 auto;padding-left:38px!important;border-left:6px dotted var(--blue)}
.routine li{list-style:none;position:relative;background:#fff;margin:0 0 18px;padding:16px 22px;border-radius:24px;box-shadow:var(--shadow-md);display:flex;gap:16px;align-items:center;transition:transform .3s var(--pop)}
.routine li:hover{transform:translateX(10px) rotate(-1deg)}
.routine li::before{content:"";position:absolute;left:-50px;top:50%;width:22px;height:22px;border-radius:50%;background:var(--c);border:5px solid #fff;box-shadow:var(--shadow-sm);transform:translateY(-50%)}
.routine b{min-width:86px;color:var(--c);font-family:'Fredoka'}
.step{background:#fff;border-radius:var(--radius-lg);padding:42px 22px 28px;text-align:center;box-shadow:var(--shadow-md);position:relative;margin-top:22px;border:4px solid #fff;transition:transform .35s var(--pop)}.step:hover{transform:translateY(-8px) rotate(1.5deg)}
.step .num{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--c);color:#fff;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font:600 1.3rem 'Fredoka';border:5px solid #fff;box-shadow:var(--shadow-sm)}
.testi{background:#fff;border-radius:var(--radius-lg);padding:32px 26px;box-shadow:var(--shadow-md);position:relative;border:4px solid #fff}
.testi:nth-child(1){background:var(--p-pink)}.testi:nth-child(2){background:var(--p-sky)}.testi:nth-child(3){background:var(--p-mint)}
.testi::before{content:"❤";position:absolute;top:10px;right:20px;font-size:1.8rem;color:var(--pink);animation:bounce 1.6s infinite}.testi p{color:var(--ink)}.testi .who{margin-top:12px;font-weight:800;color:var(--grape)}
.faq details{background:#fff;border-radius:26px;margin-bottom:14px;box-shadow:var(--shadow-md);overflow:hidden;border:4px solid #fff}
.faq summary{cursor:pointer;padding:18px 24px;font:600 1.08rem 'Fredoka';list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:1.4rem;transition:transform .4s var(--pop)}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--green)}.faq details p{margin:0;padding:0 24px 20px}
/* PLAY CORNER */
.play-corner{background:linear-gradient(180deg,#D9F0FF,#EAE3FF)}
.letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:16px;max-width:820px;margin:0 auto}
.letter{aspect-ratio:1;border:0;border-radius:28px;background:var(--c);color:#fff;font-size:2.8rem;font-weight:700;cursor:pointer;box-shadow:0 8px 0 color-mix(in srgb,var(--c) 60%,#000);transition:transform .25s var(--pop),box-shadow .15s}
.letter:hover{transform:translateY(-6px) rotate(-5deg) scale(1.08)}.letter:active{transform:translateY(6px);box-shadow:0 1px 0 #0003}
.letter-say{max-width:520px;margin:28px auto 0;background:#fff;border-radius:999px;padding:16px 26px;text-align:center;font:600 1.5rem 'Fredoka';color:var(--ink);box-shadow:var(--shadow-md)}.letter-say.go{animation:pop2 .5s var(--pop)}
@keyframes pop2{from{transform:scale(.6) rotate(-6deg)}}
/* STATS, CTA, FOOTER */
.stats{background:linear-gradient(135deg,#8B6CF6,#FF6FA5);color:#fff;border-radius:70px 70px 0 0}.stats b,.stat-item b{color:#FFD23F;font-family:'Fredoka'}.stats span{color:#fff}
.cta-visit{background:linear-gradient(125deg,#FF6FA5,#FF9F43 55%,#FFD23F);border-radius:var(--radius-lg);padding:58px 30px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-visit::before{content:"🎈🎉⭐🌈🎈";position:absolute;inset:8px 0 auto;font-size:2rem;letter-spacing:34px;opacity:.5;white-space:nowrap}
.cta-visit h2,.cta-visit p{position:relative;color:#fff;-webkit-text-fill-color:#fff}.cta-visit h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:20px 0 8px}.cta-visit .btn{position:relative;margin:12px 6px 0}
.foot-cta{background:linear-gradient(125deg,#FF6FA5,#FF9F43);border-radius:var(--radius-lg);max-width:1100px;margin:0 auto;transform:translateY(46px);box-shadow:var(--shadow-lg)}.foot-cta h3,.foot-cta p{color:#fff}
footer{background:#3B2F6B;padding-top:90px;border-top:8px dotted #FFD23F}footer p,footer a{color:rgba(255,255,255,.82)}footer h4{color:#FFD23F}footer a:hover{color:#FFD23F}
.social{display:flex;gap:10px;margin-top:14px}.social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:transform .35s var(--pop)}.social a:hover{background:#FFD23F;color:var(--ink);transform:translateY(-5px) rotate(10deg)}
.page-banner{background:radial-gradient(circle at 85% 20%,rgba(255,210,63,.5),transparent 40%),linear-gradient(135deg,#8B6CF6,#FF6FA5);border-radius:0 0 60px 60px;padding:72px 0}.page-banner h1{color:#fff;font-weight:700}
.form-control{border-radius:20px;border:3px solid var(--line);background:#fff;padding:13px 16px}.form-control:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 5px rgba(77,184,255,.2)}
.btt{position:fixed;left:18px;bottom:22px;width:52px;height:52px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 5px 0 #28a77a;opacity:0;pointer-events:none;transition:.3s var(--pop);z-index:90}.btt.show{opacity:1;pointer-events:auto}.btt:hover{transform:translateY(-5px)}
.wa-float{animation:float 4s ease-in-out infinite}
.confetti{position:fixed;z-index:9999;pointer-events:none;font-size:1.6rem;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
::-webkit-scrollbar-thumb{background:var(--pink);border-radius:99px}
@media(max-width:720px){.hero{height:540px;border-radius:0 0 40px 40px}.section{padding:56px 0}.mascot{font-size:4.5rem}.mascot .say{display:none}.balloon{font-size:2.4rem}.routine li{flex-direction:column;align-items:flex-start;gap:2px}.foot-cta{transform:none;border-radius:0}nav.menu{background:#fff}nav.menu>ul>li>a{display:flex;justify-content:flex-start;margin-bottom:6px}.grid>.card{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}