/* Kids Kingdom website: shared look for Home, About Us, Videos, Faith Stories and Contact Us.
   Every class starts with "kk-" so it never clashes with the video dashboard styles. */
:root{
  --kk-ink:#3b2412;--kk-muted:#7a5c44;--kk-paper:#fffaf0;--kk-card:#fff;
  --kk-red:#ef4b4b;--kk-orange:#ff8a2a;--kk-yellow:#ffc928;--kk-green:#3fb456;--kk-sky:#3d9be9;--kk-purple:#8a5ad6;--kk-pink:#ef5d9c;
  --kk-shadow:0 10px 26px rgba(150,80,20,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.kk{margin:0;font-family:"Baloo 2","Baloo Thambi 2","Noto Sans Sinhala","Nirmala UI","Microsoft YaHei","Segoe UI",system-ui,sans-serif;color:var(--kk-ink);overflow-x:hidden;
  background-color:var(--kk-paper);
  background-image:radial-gradient(#ffd9a8 1.6px,transparent 1.7px),radial-gradient(#c9e8ff 1.6px,transparent 1.7px);
  background-size:38px 38px;background-position:0 0,19px 19px}
.kk h1,.kk h2,.kk h3{font-family:"Fredoka","Baloo 2",sans-serif;text-wrap:balance}
.kk a{color:inherit}
.kk img{max-width:100%}

/* ---------- floating stationery behind every page ---------- */
.kk-float{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.kk-float span{position:absolute;font-size:38px;opacity:.22;animation:kk-float 7s ease-in-out infinite}
@keyframes kk-float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(8deg)}}
.kk-page{position:relative;z-index:1}

/* ---------- top bar and menu ---------- */
.kk-top{position:sticky;top:0;z-index:50;background:rgba(255,250,240,.94);backdrop-filter:blur(6px);box-shadow:0 3px 0 #ffe2bf}
.kk-top::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:4px;
  background:linear-gradient(90deg,var(--kk-red) 0 14.3%,var(--kk-orange) 0 28.6%,var(--kk-yellow) 0 42.9%,var(--kk-green) 0 57.2%,var(--kk-sky) 0 71.5%,var(--kk-purple) 0 85.8%,var(--kk-pink) 0)}
.kk-bar{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.kk-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.kk-logo .kk-castle{font-size:40px;line-height:1;animation:kk-bob 2.4s ease-in-out infinite}
.kk-logo .kk-word{display:flex;flex-direction:column;line-height:.95;font-family:"Fredoka",sans-serif;font-weight:700}
.kk-logo .kk-word b{font-size:22px;letter-spacing:.3px}
.kk-logo .kk-word b span:nth-child(5n+1){color:var(--kk-red)}.kk-logo .kk-word b span:nth-child(5n+2){color:var(--kk-orange)}
.kk-logo .kk-word b span:nth-child(5n+3){color:var(--kk-green)}.kk-logo .kk-word b span:nth-child(5n+4){color:var(--kk-sky)}.kk-logo .kk-word b span:nth-child(5n){color:var(--kk-purple)}
.kk-logo .kk-word small{font-size:13px;font-weight:600;color:var(--kk-muted);letter-spacing:.5px}
.kk-nav{display:flex;gap:6px;align-items:stretch}
.kk-nav a{position:relative;display:flex;align-items:center;gap:6px;text-decoration:none;font-weight:800;font-size:14.5px;line-height:1.12;padding:7px 12px;border-radius:16px;border:3px solid transparent;transition:transform .15s,background .15s}
.kk-nav a i{font-style:normal;font-size:22px}
.kk-nav a:hover{transform:translateY(-2px) rotate(-1deg)}
.kk-nav a.c1{color:#c23a3a}.kk-nav a.c2{color:#c56a10}.kk-nav a.c3{color:#23864a}.kk-nav a.c4{color:#6a3fc0}.kk-nav a.c5{color:#1f6fb8}
.kk-nav a.c1:hover,.kk-nav a.c1[aria-current]{background:#ffe3e3;border-color:#ffb8b8}
.kk-nav a.c2:hover,.kk-nav a.c2[aria-current]{background:#fff0d6;border-color:#ffd08a}
.kk-nav a.c3:hover,.kk-nav a.c3[aria-current]{background:#e0f7e6;border-color:#a8e2b6}
.kk-nav a.c4:hover,.kk-nav a.c4[aria-current]{background:#efe6ff;border-color:#cbb4f4}
.kk-nav a.c5:hover,.kk-nav a.c5[aria-current]{background:#e2f1ff;border-color:#a9d3fa}
.kk-nav .kk-lock{position:absolute;top:-8px;right:-4px;font-size:10px;font-weight:800;background:var(--kk-yellow);color:#6a4a00;border-radius:999px;padding:0 6px;line-height:1.6}
.kk-nav .kk-pkg{display:block;margin-top:2px;font-size:10.5px;font-weight:800;color:#000;letter-spacing:.04em}
.kk-menu-cb{display:none}
.kk-burger{display:none;cursor:pointer;font-weight:800;font-size:16px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 #f0d0ad}
@media (max-width:980px){
  .kk-bar{flex-wrap:wrap}
  .kk-burger{display:block}
  .kk-nav{display:none;width:100%;flex-direction:column;padding:4px 0 10px}
  .kk-menu-cb:checked ~ .kk-nav{display:flex}
  .kk-nav a{font-size:16px}
  .kk-nav a br{display:none}
  .kk-nav .kk-lock{position:static;margin-left:6px}
}

/* ---------- page heading band ---------- */
.kk-hero{max-width:1200px;margin:0 auto;padding:34px 16px 10px}
.kk-band{position:relative;border-radius:34px;padding:34px 30px;overflow:hidden;box-shadow:var(--kk-shadow);color:#fff}
.kk-band h1{margin:0;font-size:clamp(30px,5vw,54px);line-height:1.05;text-shadow:0 3px 0 rgba(0,0,0,.14)}
.kk-band h1 .ln{display:block}
.kk-band p{margin:12px 0 0;font-size:clamp(16px,2vw,19px);font-weight:600;max-width:640px;line-height:1.45}
.kk-band .kk-sub{display:inline-block;margin-bottom:10px;background:rgba(255,255,255,.25);border-radius:999px;padding:2px 14px;font-weight:800;font-size:14px;letter-spacing:.5px}
.kk-band .kk-deco{position:absolute;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));animation:kk-float 6s ease-in-out infinite}
.kk-band::before,.kk-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.kk-band::before{width:260px;height:260px;right:-60px;top:-90px}.kk-band::after{width:180px;height:180px;left:-50px;bottom:-90px}
.kk-band > *{position:relative;z-index:1}
.kk-band.orange{background:linear-gradient(135deg,#ff9a3d,#ff6f8a)}
.kk-band.green{background:linear-gradient(135deg,#2fb36a,#3d9be9)}
.kk-band.purple{background:linear-gradient(135deg,#7a5ad6,#ef6aa8)}
.kk-band.blue{background:linear-gradient(135deg,#3d9be9,#7a5ad6)}

/* ---------- general sections ---------- */
.kk-sec{max-width:1200px;margin:0 auto;padding:34px 16px}
.kk-sec > h2{margin:0 0 6px;font-size:clamp(26px,3.6vw,38px);color:#b4501a;text-align:center}
.kk-sec > .kk-lead{margin:0 auto 24px;max-width:720px;text-align:center;color:var(--kk-muted);font-size:17px;line-height:1.5}
.kk-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.kk-card{position:relative;background:var(--kk-card);border-radius:26px;padding:22px;box-shadow:var(--kk-shadow);border:3px solid #fff}
.kk-card h3{margin:6px 0 6px;font-size:22px;line-height:1.15}
.kk-card p{margin:0;color:var(--kk-muted);line-height:1.5}
.kk-card .kk-ic{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.kk-tape{position:absolute;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;background:rgba(255,214,90,.75);transform:rotate(-3deg);border-radius:3px}
.kk-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:17px;border-radius:999px;padding:10px 22px;border:0;cursor:pointer;font-family:inherit;transition:transform .15s}
.kk-btn:hover{transform:translateY(-3px)}
.kk-btn.solid{background:#fff;color:#c2541f;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.kk-btn.ghost{background:rgba(255,255,255,.2);color:#fff;border:3px solid #fff}
.kk-btn.go{background:linear-gradient(135deg,#ff8a3d,#ff6f61);color:#fff;box-shadow:0 4px 0 #c2541f}
.kk-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kk-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:15px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 #f0d6bc;text-decoration:none}

/* ---------- crayon divider ---------- */
.kk-crayons{display:flex;justify-content:center;padding:6px 16px 0}
.kk-crayons svg{width:min(460px,100%);height:auto;display:block}
.kk-crayons use{transition:transform .2s}
.kk-crayons svg:hover use:nth-child(odd){transform:translateY(-8px)}
.kk-tagline{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kk-tagline li{font-size:13px;font-weight:700;background:rgba(255,255,255,.24);border-radius:999px;padding:1px 10px;line-height:1.7}
.kk-tagline .zh{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}.kk-tagline .si{font-family:"Noto Sans Sinhala","Iskoola Pota",sans-serif}.kk-tagline .ta{font-family:"Baloo Thambi 2","Nirmala UI",sans-serif}

/* ---------- footer ---------- */
.kk-foot{position:relative;z-index:1;margin-top:30px;background:#3b2a5a;color:#f3eaff;padding:34px 16px 22px;text-align:center}
.kk-foot::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px;
  background:radial-gradient(circle at 10px 20px,#3b2a5a 10px,transparent 11px) 0 0/20px 20px repeat-x}
.kk-foot .kk-flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:14px}
.kk-foot .kk-flinks a{text-decoration:none;font-weight:700;color:#ffe08a}
.kk-foot .kk-flinks a:hover{text-decoration:underline}
.kk-foot .kk-row{font-size:28px;letter-spacing:8px;margin-bottom:10px}
.kk-foot small{display:block;font-size:14px;opacity:.85}

@keyframes kk-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.kk *,.kk-float span{animation:none!important}}

/* ---------- "Back to Main Website" buttons ---------- */
.kk-backbar{max-width:1200px;margin:0 auto;padding:16px 16px 0;display:flex}
.kk-home{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:16px;color:#fff!important;background:linear-gradient(135deg,#ff8a3d,#ef5d9c);border-radius:999px;padding:8px 20px;box-shadow:0 4px 0 #c2541f;transition:transform .15s}
.kk-home:hover{transform:translateY(-3px)}
.kk-home-float{position:fixed;right:18px;bottom:18px;z-index:60;font-size:15px;padding:10px 18px;box-shadow:0 4px 0 #c2541f,0 8px 20px rgba(150,60,20,.3);animation:kk-bob 3s ease-in-out infinite}
@media (max-width:600px){.kk-home-float{right:12px;bottom:12px;font-size:14px;padding:8px 14px}}

/* the castle in the logo: bigger and easier to see */
.kk-logo .kk-castle{font-size:60px;filter:saturate(1.8) contrast(1.2) drop-shadow(0 3px 3px rgba(60,30,90,.45))}
@media (max-width:520px){.kk-logo .kk-castle{font-size:50px}}

/* motto under the logo: small and colourful, every letter wiggles left and right on the spot */
.kk-motto{display:block;margin-top:3px;font:700 10.5px/1.25 "Fredoka","Baloo 2",sans-serif;letter-spacing:.2px;white-space:pre}
.kk-motto i{display:inline-block;font-style:normal;animation:kk-letter .7s ease-in-out infinite alternate}
@keyframes kk-letter{from{transform:translateX(-1.4px)}to{transform:translateX(1.4px)}}
@media (max-width:520px){.kk-motto{font-size:9px}}