/* Kids theme: a playful layer over style.css (rounded font, colourful cards, waves, doodles).
   Loaded after style.css and colors.css, so it only overrides looks, never layout logic. */
:root{
    --kid-yellow:#FFC93C;--kid-pink:#FF6B9D;--kid-blue:#4DA3FF;
    --kid-green:#4CAF50;--kid-purple:#8E7CFF;--kid-orange:#FF9F43;
    --kid-radius:22px;
}

/* Rounded, friendly headings; Baloo 2 also has Devanagari, so Hindi headings match */
h1,h2,h3,h4,.main-nav a,.btn{font-family:'Baloo 2',Outfit,sans-serif}
h1,h2{letter-spacing:0}

/* Faint stars, dots and clouds behind the page */
body{background-color:var(--bg-color);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='.1'%3E%3Cpath stroke='%23FFC93C' d='M40 30l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Cpath stroke='%234DA3FF' d='M170 60c0-9 14-12 18-4 7-6 18 0 15 9 8 1 9 13 0 14h-30c-9 0-11-14-3-19z'/%3E%3Ccircle stroke='%23FF6B9D' cx='210' cy='190' r='7'/%3E%3Cpath stroke='%234CAF50' d='M50 180q10-12 20 0t20 0 20 0'/%3E%3Cpath stroke='%238E7CFF' d='M120 130l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Ccircle stroke='%23FF9F43' cx='110' cy='230' r='4'/%3E%3C/g%3E%3C/svg%3E")}

/* Big home banner and small page banners: brighter colours, a wave at the bottom */
.hero{background:linear-gradient(135deg,#43b649 0%,#2fb5a8 55%,#4DA3FF 100%);padding-bottom:7.5rem;overflow:hidden}
.hero-small{background:linear-gradient(135deg,#43b649 0%,#2fb5a8 55%,#4DA3FF 100%);position:relative;padding-bottom:5.5rem;overflow:hidden}
.hero::after,.hero-small::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero::after{background:#fff}
.hero-small::after{background:var(--bg-color)}
.hero-small{margin-bottom:2rem}
.hero h1,.hero-small h1{text-shadow:0 3px 0 rgba(0,0,0,.12)}
/* floating stars and a balloon in the banners */
.hero-small::before{content:"⭐";position:absolute;left:8%;top:22%;font-size:1.9rem;opacity:.85;animation:kid-float 5s ease-in-out infinite}
.hero .container::before,.hero .container::after{position:absolute;font-size:2.4rem;opacity:.9;animation:kid-float 6s ease-in-out infinite;pointer-events:none}
.hero .container{position:relative}
.hero .container::before{content:"✏️";left:2%;top:-1.5rem}
.hero .container::after{content:"🎈";right:3%;top:2rem;animation-delay:1.5s}
@keyframes kid-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* Section headings on the home page get a crayon squiggle underneath */
.about-app-head h2::after,.categories-section h2::after,.worksheets-section>.container>h2::after,.grades-section h2::after,.section-header h2::after{
    content:"";display:block;width:130px;height:14px;margin:.45rem auto 0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14'%3E%3Cpath d='M3 9 Q 14 1 25 8 T 47 8 T 69 8 T 91 8 T 113 8 T 127 6' fill='none' stroke='%23FFC93C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.section-header h2::after{margin-left:0}

/* Buttons: round and a little "pressable" */
.btn{border-radius:999px}
.btn:active{transform:translateY(2px)}

/* Category cards: each one its own colour, and a little hop on hover */
.category-card{border-radius:var(--kid-radius);border:3px solid var(--kid-yellow);overflow:hidden;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.categories-grid>:nth-child(6n+2) .category-card,.categories-grid>.category-card:nth-child(6n+2){border-color:var(--kid-blue)}
.categories-grid>:nth-child(6n+3) .category-card,.categories-grid>.category-card:nth-child(6n+3){border-color:var(--kid-pink)}
.categories-grid>:nth-child(6n+4) .category-card,.categories-grid>.category-card:nth-child(6n+4){border-color:var(--kid-green)}
.categories-grid>:nth-child(6n+5) .category-card,.categories-grid>.category-card:nth-child(6n+5){border-color:var(--kid-purple)}
.categories-grid>:nth-child(6n) .category-card,.categories-grid>.category-card:nth-child(6n){border-color:var(--kid-orange)}
.category-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 14px 24px -10px rgba(0,0,0,.25)}

/* Worksheet cards: rounder, a coloured edge that changes card to card */
.worksheet-card{border-radius:var(--kid-radius);border:2px solid #ffe7a3;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.worksheets-grid>.worksheet-card:nth-child(5n+2){border-color:#cfe4ff}
.worksheets-grid>.worksheet-card:nth-child(5n+3){border-color:#ffd3e3}
.worksheets-grid>.worksheet-card:nth-child(5n+4){border-color:#cdeccf}
.worksheets-grid>.worksheet-card:nth-child(5n){border-color:#e0dbff}
.worksheet-card:hover{transform:translateY(-6px);box-shadow:0 16px 26px -12px rgba(0,0,0,.28)}
.worksheet-grade{background:#fff3c4;color:#a86b00}

/* Grade cards, home info cards and the category header pick up the same look */
.grade-card,.about-app-card,.use-case-card{border-radius:var(--kid-radius);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.grade-card:hover,.about-app-card:hover,.use-case-card:hover{transform:translateY(-5px)}
.category-header{border-radius:var(--kid-radius);border:2px solid #ffe7a3}
.category-header::before{background:linear-gradient(var(--kid-yellow),var(--kid-pink),var(--kid-blue))}

/* Footer: a wave on top so it does not start with a hard line */
.main-footer{position:relative}
.main-footer::before{content:"";position:absolute;left:0;right:0;top:-39px;height:40px;background:var(--footer-bg);pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 0 300 20 T600 20 T900 20 T1200 20 V40 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 0 300 20 T600 20 T900 20 T1200 20 V40 H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

@media (max-width:768px){
    .hero{padding-bottom:5rem}.hero-small{padding-bottom:4rem}
    .hero::after,.hero-small::after{height:34px}
    .hero .container::before,.hero .container::after,.hero-small::before{font-size:1.5rem}
    .hero .container::before{top:-2.5rem}
}
@media (prefers-reduced-motion:reduce){
    .hero-small::before,.hero .container::before,.hero .container::after{animation:none}
    .category-card,.worksheet-card,.grade-card,.about-app-card,.use-case-card{transition:none}
}

/* Champ the owl (assets/js/kids-mascot.js): bottom-right guide whose eyes follow the mouse */
.champ{position:fixed;right:18px;bottom:18px;z-index:1400;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.champ>*{pointer-events:auto}
.champ-body{background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));animation:champ-bob 3.2s ease-in-out infinite}
.champ-body:focus-visible{outline:3px solid var(--kid-blue);outline-offset:4px;border-radius:50%}
.champ-close{position:absolute;right:-4px;bottom:84px;width:22px;height:22px;border-radius:50%;border:0;background:#fff;color:#64748b;font-size:15px;line-height:22px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);opacity:0;transition:opacity .2s}
.champ:hover .champ-close,.champ-close:focus-visible{opacity:1}
.champ-bubble{max-width:240px;background:#fff;border:3px solid var(--kid-yellow);border-radius:18px 18px 4px 18px;padding:.6rem .85rem;margin:0 30px 8px 0;font:600 .92rem/1.4 'Baloo 2',Inter,sans-serif;color:#2D3436;box-shadow:0 8px 18px -8px rgba(0,0,0,.25);opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom right;transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.champ-talking .champ-bubble{opacity:1;transform:none;pointer-events:auto}
.champ-hop .champ-body{animation:champ-hop .6s cubic-bezier(.34,1.56,.64,1)}
.champ-lids rect{transition:height .08s}
@keyframes champ-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes champ-hop{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-22px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}100%{transform:none}}
.champ-star{position:fixed;z-index:1399;pointer-events:none;font-size:14px;transform:translate(-50%,-50%);animation:champ-star .8s ease-out forwards}
@keyframes champ-star{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,10px) scale(.3) rotate(120deg)}}
@media (max-width:768px){.champ{right:10px;bottom:10px}.champ-body svg{width:66px;height:66px}.champ-close{bottom:58px;opacity:1}.champ-bubble{max-width:190px;font-size:.85rem;margin-right:16px}}
@media print{.champ,.champ-star{display:none!important}}
@media (prefers-reduced-motion:reduce){.champ-body,.champ-hop .champ-body{animation:none}}
/* Desktop: Champ flies around the screen (position set by kids-mascot.js) */
.champ-roam{left:0;top:0;right:auto;bottom:auto;display:block;width:96px;height:96px;will-change:transform}
.champ-roam .champ-bubble{position:absolute;bottom:100%;right:30px;margin:0 0 6px;width:max-content}
.champ-roam.champ-bubble-right .champ-bubble{right:auto;left:30px;border-radius:18px 18px 18px 4px}
.champ-roam.champ-bubble-below .champ-bubble{bottom:auto;top:100%;margin:6px 0 0;border-radius:4px 18px 18px 18px}
.champ-roam .champ-close{bottom:auto;top:-4px;right:-6px}
.champ-flip .champ-body svg{transform:scaleX(-1)}
.champ-flying .champ-body{animation:champ-tilt .5s ease-in-out infinite alternate;pointer-events:none}
.champ-flying .champ-wing-l{transform-origin:26px 74px;animation:champ-flap .18s ease-in-out infinite alternate}
.champ-flying .champ-wing-r{transform-origin:94px 74px;animation:champ-flap-r .18s ease-in-out infinite alternate}
@keyframes champ-tilt{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes champ-flap{from{transform:rotate(0)}to{transform:rotate(35deg)}}
@keyframes champ-flap-r{from{transform:rotate(0)}to{transform:rotate(-35deg)}}
/* Champ sitting on a card or button: legs hang over the edge and swing */
.champ-legs{position:absolute;left:0;top:80px;display:none;pointer-events:none!important}
.champ-sitting .champ-legs{display:block}
.champ-sitting .champ-shadow{display:none}
.champ-sitting .champ-body{animation:none}
.champ-leg{transform-box:fill-box;transform-origin:50% 0}
.champ-sitting .champ-leg-l{animation:champ-swing 1.1s ease-in-out infinite alternate}
.champ-sitting .champ-leg-r{animation:champ-swing 1.1s ease-in-out infinite alternate-reverse}
@keyframes champ-swing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
/* Champ: dizzy/tickle spin and download confetti. Above the header (z 1000), below the phone menu (1500/2000) and the cookie bar */
.champ-spin .champ-body{animation:champ-spin .7s ease-in-out}
@keyframes champ-spin{to{transform:rotate(360deg)}}
.champ-confetti{position:fixed;z-index:1399;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:champ-confetti 1.1s ease-out forwards}
@keyframes champ-confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 160px)) rotate(540deg);opacity:0}}