/* The Phonics Fun Studio — shared base styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; }

/* ============================================================
   Warm cream background theme — matches the site's own coral/
   amber/green accent palette (buttons, cards, badges) instead of
   fighting it. Replaces an earlier "PBS Kids" blue/teal theme that
   used !important on every property, silently overriding any
   page's own background styling (incl. index.html's). No
   !important here on purpose, so a page can still override this
   cleanly if it ever needs to. Not `fixed`: letting it scroll with
   the page spreads all the colour stops across the full page
   height instead of pinning mostly-cream to the viewport.
   ============================================================ */
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: #3a2b23;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  background-color: #ffe9cf;
  background-image:
    /* Amber glow top-left */
    radial-gradient(circle at 10% 10%, rgba(255, 194, 51, 0.28) 0%, transparent 30%),
    /* Soft cloud glow top-right */
    radial-gradient(circle at 90% 16%, rgba(255, 255, 255, 0.6) 0%, transparent 26%),
    /* Mint glow bottom */
    radial-gradient(circle at 50% 94%, rgba(86, 184, 112, 0.22) 0%, transparent 40%),
    /* Floating dot texture, layer 1 */
    radial-gradient(rgba(255, 255, 255, 0.5) 3.5px, transparent 4px),
    /* Floating dot texture, layer 2 */
    radial-gradient(rgba(255, 255, 255, 0.3) 2.5px, transparent 3px),
    /* Signature cream -> coral -> sky -> meadow gradient */
    linear-gradient(170deg, #ffe9cf 0%, #ffd9b8 16%, #fdd9e6 38%, #f3d2ef 52%, #d7e9fa 72%, #cdeeda 88%, #d8f2dc 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 54px 54px, 28px 28px, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 14px 14px, 0 0;
}

img { max-width: 100%; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font-family: 'Nunito', sans-serif; }
input:focus { outline: 3px solid #ffc233; }
:focus-visible { outline: 3px solid #ffc233; outline-offset: 2px; }
a { color: #f4573f; text-decoration: none; }
a:hover { color: #d63d2a; }

/* Shared decorative animations (pages may override amplitudes) */
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes drift { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

/* Calm decorative motion only — game feedback still animates */
@media (prefers-reduced-motion: reduce) {
  [style*="floaty"], [style*="drift"] { animation: none !important; }
}

/* ---------- Site footer: identical on every page ----------
   Written into every page by .tools/apply-footer.py, not injected by script,
   so the company identity is in the served HTML and survives JavaScript
   never running. The same rules are inlined by that tool into the pages that
   do not load this stylesheet (the full-screen games), which must not link
   it: it paints a whole-page background that would overwrite a game's own
   look. Edit the template in the tool, then re-run it. */
.pfs-foot{margin:0;padding:0;background:transparent}
.pfs-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:22px 16px 18px;margin:0;font-size:13.5px;font-weight:700;line-height:1.5}
.pfs-foot-links a{color:#5d4a3d;text-decoration:none;padding:6px 2px;display:inline-flex;align-items:center;min-height:32px}
.pfs-foot-links a:hover{color:#c23a26;text-decoration:underline}
/* Follow links (Instagram, TikTok): grown-up pages only, see .tools/apply-footer.py */
.pfs-foot-social{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;padding:0 16px 20px;margin:0}
.pfs-foot-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;background:#FFF6EA;border:1px solid #EADFCF;color:#5d4a3d;text-decoration:none;font-size:13.5px;font-weight:700;line-height:1}
.pfs-foot-social a:hover{color:#c23a26;border-color:#c23a26}
.pfs-foot-social a:focus-visible{outline:3px solid #c23a26;outline-offset:2px}
.pfs-foot-social svg{flex:none;display:block}
.pfs-qtbar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px 16px;background:#FEF3E1;border-top:1px solid #EADFCF;color:#2A2D3E;font-size:14px;font-weight:700}
.pfs-qtbar img{height:40px;width:auto;display:block;max-width:100%}
.pfs-qtbar p{margin:0;max-width:820px;line-height:1.5}
@media (max-width:420px){.pfs-qtbar{font-size:13px;padding:16px 14px}.pfs-qtbar img{height:34px}}
@media print{.pfs-foot{display:none}}
/* The floating chat button is fixed to the bottom right of the screen, so at
   the very end of the page it sits over the company name. Three pages carry
   that button, so the room is made only where it is needed, and only at the
   widths where the centred text actually reaches that far across. */
@media (max-width:620px){body:has(#wa-float) .pfs-qtbar{padding-bottom:86px}}