/* Phonics Fun Studio — shared "toy brick" brand kit.
   Ported from the approved home-page mockup. Look only: no copy, no behaviour.
   Colour sets expose --b (base) --l (light) --e (edge) to the 3D pieces below. */

.c-coral{--b:#F4573F;--l:#FF9A84;--e:#B53A25}
.c-sun{--b:#FFC93C;--l:#FFE38A;--e:#D99A00}
.c-sky{--b:#3FB8F4;--l:#9BDDFB;--e:#1A86C2}
.c-grass{--b:#4CC264;--l:#9BE3A9;--e:#2A8E40}
.c-grape{--b:#8B6CF0;--l:#C2B1FA;--e:#5B3FC2}
.c-pink{--b:#FF6FAE;--l:#FFB3D3;--e:#C9407F}

/* 3D toy letter block */
.blk{width:74px;height:74px;border-radius:18px;display:flex;align-items:center;justify-content:center;font:800 46px/1 'Baloo 2',sans-serif;color:#FFFFFF;background:linear-gradient(150deg,var(--l),var(--b) 55%);box-shadow:inset 0 -7px 0 rgba(0,0,0,.14),inset 0 5px 0 rgba(255,255,255,.35),0 9px 0 var(--e),0 18px 26px rgba(42,37,34,.22);text-shadow:0 3px 0 var(--e)}

/* 3D numerals */
.n3d{font:800 64px/1 'Baloo 2',sans-serif;color:var(--b);text-shadow:1px 1px 0 var(--e),2px 2px 0 var(--e),3px 3px 0 var(--e),4px 4px 0 var(--e),5px 5px 0 var(--e),6px 6px 0 var(--e),8px 12px 14px rgba(42,37,34,.22);-webkit-text-stroke:2px #FFFFFF;paint-order:stroke fill}
/* Below about 36px the six shadow layers and the 2px stroke collapse into an
   unreadable blob, so small numerals get a lighter version of the same look. */
.n3d-sm{font:800 32px/1 'Baloo 2',sans-serif;color:var(--b);text-shadow:1px 1px 0 var(--e),2px 2px 0 var(--e),3px 5px 6px rgba(42,37,34,.18);-webkit-text-stroke:0;paint-order:stroke fill}

/* glossy 3D ball */
.ball{width:62px;height:62px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 32% 28%,#FFFFFF 0 7%,var(--l) 18%,var(--b) 58%,var(--e) 100%);box-shadow:0 10px 18px rgba(42,37,34,.22)}

/* chunky 3D toy buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;font:800 19px Nunito,system-ui,sans-serif;text-decoration:none;cursor:pointer;border:0;box-sizing:border-box;transition:transform .08s}
.btn:active{transform:translateY(4px)}
.btn-coral{background:#D9472F;color:#FFFFFF;box-shadow:0 6px 0 #9E2F1D,0 12px 18px rgba(158,47,29,.25)}
.btn-coral:hover{background:#C93D26;color:#FFFFFF}
.btn-blue{background:#2F6FC4;color:#FFFFFF;box-shadow:0 6px 0 #1D4A8A,0 12px 18px rgba(29,74,138,.25)}
.btn-blue:hover{background:#2862B0;color:#FFFFFF}
.btn-line{background:#FFFFFF;color:#2A2522;box-shadow:0 6px 0 #E3D3C2,0 10px 16px rgba(42,37,34,.10)}
.btn-line:hover{background:#FFF8F1;color:#2A2522}
.btn-sun{background:#FFC93C;color:#2A2522;box-shadow:0 6px 0 #D99A00,0 12px 18px rgba(217,154,0,.25)}
.btn-sun:hover{background:#FFD45E;color:#2A2522}

/* wavy section edges */
.wave{display:block;width:100%;height:56px}

/* FAQ disclosure row */
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:0;border-bottom:2px dashed #EADFD3;font:800 18px Nunito,system-ui,sans-serif;color:#2A2522;text-align:left;cursor:pointer;min-height:44px}
summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
.faq-plus{display:inline-block;transition:transform .15s}

/* floating decoration — never interactive, never affects layout */
.deco{position:absolute;pointer-events:none;z-index:0}
/* Positioned decoration needs margin beside the content column to live in.
   Below ~1250px there is none, so it would sit behind real text. The confetti
   is exempt: it is a full-bleed texture, not a cut-out sitting in the gutter. */
@media (max-width:1250px){.deco:not(.confetti){display:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
.float{animation:bob 4s ease-in-out infinite}
.float2{animation:bob 5s ease-in-out infinite .8s}
@media (prefers-reduced-motion:reduce){.float,.float2{animation:none}}

.confetti{background-image:radial-gradient(circle,rgba(244,87,63,.55) 0 4px,transparent 5px),radial-gradient(circle,rgba(255,201,60,.7) 0 4px,transparent 5px),radial-gradient(circle,rgba(63,184,244,.55) 0 3px,transparent 4px),radial-gradient(circle,rgba(139,108,240,.5) 0 3px,transparent 4px);background-size:180px 160px,220px 190px,160px 210px,240px 170px;background-position:20px 30px,120px 90px,60px 140px,170px 20px}

.bubble{position:relative;background:#fff;border-radius:20px;padding:10px 16px;font:800 18px 'Baloo 2',Nunito,sans-serif;box-shadow:0 6px 0 rgba(42,37,34,.12)}

/* letter-photo backgrounds — JPEG first, WebP where supported.
   Sized to the full width rather than `cover`: the section is taller than the
   photo's 16:9, and `cover` would zoom in far enough to crop the outer letters
   away, leaving only the middle of the picture. Anchored top, cream below. */
.hero-img{background:url(../decor/letters-2.jpg) center top/100% auto no-repeat,#FEF3E1}
.cta-img{background:url(../decor/letters-1.jpg) center/cover no-repeat,#FEF3E1}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero-img{background:image-set(url(../decor/letters-2.webp) type("image/webp"),url(../decor/letters-2.jpg) type("image/jpeg")) center top/100% auto no-repeat,#FEF3E1}
  .cta-img{background:image-set(url(../decor/letters-1.webp) type("image/webp"),url(../decor/letters-1.jpg) type("image/jpeg")) center/cover no-repeat,#FEF3E1}
}
/* On a phone the letters crowd the centre, so show them as top/bottom bands
   with the copy on clear cream between them. */
@media (max-width:760px){
  .hero-img{background:url(../decor/letters-2.jpg) center top/220% auto no-repeat,url(../decor/letters-2.jpg) center bottom/220% auto no-repeat,#FEF3E1}
  .cta-img{background:url(../decor/letters-1.jpg) center top/220% auto no-repeat,url(../decor/letters-1.jpg) center bottom/220% auto no-repeat,#FEF3E1}
}

/* Below 1400px each section shows its picture small and in the flow, beside
   its own heading, so the art is still there but can never sit on text. Above
   1400px the margin version (.pic) takes over and this one stands down. */
.sec-pic{width:clamp(70px,11vw,110px);height:auto;flex:none;display:block}
@media (min-width:1400px){.sec-pic{display:none}}

/* The large 3D pictures live in the margin beside the 1180px content column,
   so they only appear once that margin actually exists. Below ~1400px there is
   none, and showing them anyway puts artwork directly behind headings and
   buttons — same reasoning as the side rails. */
.pic{display:none}
@media (min-width:1400px){.pic{display:block;width:130px !important;height:auto !important;opacity:.95}}
@media (min-width:1650px){.pic{width:170px !important}}
@media (max-width:720px){
  .hide-sm{display:none !important}
  .blk{width:54px;height:54px;font-size:34px;border-radius:14px}
  .n3d{font-size:52px}
}