/* ============================================================
   3K Kidz — Sticker-Book Design System
   Palette drawn straight from the channel logo
   ============================================================ */
:root {
  --sky:       #36B8F4;
  --sky-deep:  #1D8FD6;
  --sunshine:  #FFC527;
  --cherry:    #F23E3E;
  --grape:     #8F46E8;
  --tangerine: #FF8A1E;
  --leaf:      #4CC44C;
  --bubblegum: #FF6FB5;
  --cloud:     #FFF8EC;
  --paper:     #FFFFFF;
  --ink:       #2B2350;
  --ink-soft:  #5A5380;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background-color: var(--cloud);
  color: var(--ink);
  overflow-x: hidden;
  /* soft confetti-dot paper */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(54,184,244,.10) 0 14px, transparent 15px),
    radial-gradient(circle at 78% 9%,  rgba(255,197,39,.14) 0 11px, transparent 12px),
    radial-gradient(circle at 90% 65%, rgba(143,70,232,.08) 0 16px, transparent 17px),
    radial-gradient(circle at 25% 80%, rgba(242,62,62,.07)  0 12px, transparent 13px),
    radial-gradient(circle at 55% 40%, rgba(76,196,76,.07)  0 10px, transparent 11px);
  background-size: 900px 900px;
}

h1, h2, h3, h4, .display-font, .navbar-brand, .btn-kidz {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 800;
}

::selection { background: var(--sunshine); color: var(--ink); }

a { color: var(--sky-deep); }

/* ---------- Rainbow utilities ---------- */
.rainbow-text span:nth-child(6n+1) { color: var(--cherry); }
.rainbow-text span:nth-child(6n+2) { color: var(--tangerine); }
.rainbow-text span:nth-child(6n+3) { color: var(--sunshine); }
.rainbow-text span:nth-child(6n+4) { color: var(--leaf); }
.rainbow-text span:nth-child(6n+5) { color: var(--sky); }
.rainbow-text span:nth-child(6n+6) { color: var(--grape); }

.rainbow-bar {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    var(--cherry), var(--tangerine), var(--sunshine),
    var(--leaf), var(--sky), var(--grape));
}

/* ---------- Navbar ---------- */
.navbar-kidz {
  background: var(--paper);
  border-bottom: 5px solid var(--ink);
  box-shadow: 0 6px 0 rgba(43,35,80,.12);
}
.navbar-kidz .navbar-brand img { height: 56px; }
.navbar-kidz .nav-link {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  border-radius: 99px;
  padding: .4rem 1.05rem !important;
  margin: 0 .15rem;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.navbar-kidz .nav-link:hover { transform: rotate(-2deg) scale(1.06); background: var(--sunshine); }
.navbar-kidz .nav-link.active { background: var(--sky); color: #fff; }
.navbar-toggler { border: 3px solid var(--ink); }

/* ---------- Sticker components (the signature) ---------- */
.sticker {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 8px 8px 0 var(--sky);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sticker:hover { transform: translate(-3px,-3px) rotate(-.5deg); box-shadow: 12px 12px 0 var(--sky); }
.sticker.shadow-cherry    { box-shadow: 8px 8px 0 var(--cherry); }
.sticker.shadow-cherry:hover    { box-shadow: 12px 12px 0 var(--cherry); }
.sticker.shadow-sunshine  { box-shadow: 8px 8px 0 var(--sunshine); }
.sticker.shadow-sunshine:hover  { box-shadow: 12px 12px 0 var(--sunshine); }
.sticker.shadow-grape     { box-shadow: 8px 8px 0 var(--grape); }
.sticker.shadow-grape:hover     { box-shadow: 12px 12px 0 var(--grape); }
.sticker.shadow-leaf      { box-shadow: 8px 8px 0 var(--leaf); }
.sticker.shadow-leaf:hover      { box-shadow: 12px 12px 0 var(--leaf); }
.sticker.shadow-tangerine { box-shadow: 8px 8px 0 var(--tangerine); }
.sticker.shadow-tangerine:hover { box-shadow: 12px 12px 0 var(--tangerine); }

.btn-kidz {
  display: inline-block;
  border: 4px solid var(--ink);
  border-radius: 99px;
  padding: .65rem 1.8rem;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--sunshine);
  box-shadow: 5px 5px 0 var(--ink);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-kidz:hover  { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); color: var(--ink); }
.btn-kidz:active { transform: translate(3px,3px);  box-shadow: 2px 2px 0 var(--ink); }
.btn-kidz.btn-red   { background: var(--cherry); color: #fff; }
.btn-kidz.btn-sky   { background: var(--sky);    color: #fff; }
.btn-kidz.btn-grape { background: var(--grape);  color: #fff; }

.badge-kidz {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  border: 3px solid var(--ink);
  border-radius: 99px;
  padding: .35rem 1rem;
  display: inline-block;
  transform: rotate(-2deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 4.5rem 0 6.5rem;
  background: linear-gradient(180deg, #BDE8FF 0%, var(--cloud) 100%);
  border-bottom: 5px solid var(--ink);
  overflow: hidden;
}
.hero-title { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; letter-spacing: .01em; }
.hero-title span { display: inline-block; animation: bounceLetter 2.6s ease-in-out infinite; }
.hero-title span:nth-child(odd)  { animation-delay: .15s; }
.hero-title span:nth-child(3n)   { animation-delay: .3s; }
@keyframes bounceLetter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
.hero-logo {
  max-width: min(380px, 80%);
  filter: drop-shadow(0 14px 0 rgba(43,35,80,.15));
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-14px) rotate(1.5deg); }
}

/* floating doodles */
.doodle { position: absolute; font-size: 2.2rem; opacity: .9; animation: floaty 5s ease-in-out infinite; pointer-events: none; }
.doodle.d2 { animation-duration: 6.5s; animation-delay: 1s; }
.doodle.d3 { animation-duration: 7.5s; animation-delay: .5s; }

/* rainbow arch at hero base */
.hero-rainbow {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 140%; height: 60px;
  background: linear-gradient(90deg,
    var(--cherry), var(--tangerine), var(--sunshine),
    var(--leaf), var(--sky), var(--grape));
  border-radius: 100% 100% 0 0;
  border-top: 5px solid var(--ink);
}

/* ---------- Video frames ---------- */
.video-sticker video, .video-sticker iframe, .video-sticker img {
  border-radius: 22px;
  display: block;
  width: 100%;
}
.video-sticker { padding: 12px; }

.play-bubble {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cherry);
  border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  box-shadow: 0 6px 0 rgba(43,35,80,.25);
}

/* ---------- Section headers ---------- */
.section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.section-eyebrow {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ---------- Gallery wall ---------- */
.gallery-card { transform: rotate(var(--tilt, 0deg)); }
.gallery-card:hover { transform: rotate(0deg) translateY(-6px); }
.tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 110px; height: 28px;
  background: rgba(255,197,39,.85);
  border: 2px dashed rgba(43,35,80,.35);
  border-radius: 4px;
  z-index: 2;
}

/* ---------- Policy pages ---------- */
.policy-card h2 { font-size: 1.5rem; margin-top: 2rem; }
.policy-card h2:first-of-type { margin-top: 0; }
.policy-card h2 .dot {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--ink); margin-right: .55rem;
}

/* ---------- Footer ---------- */
.footer-kidz {
  background: var(--ink);
  color: #EDEAFB;
  border-top: 5px solid var(--ink);
  margin-top: 5rem;
  position: relative;
}
.footer-kidz a { color: var(--sunshine); text-decoration: none; font-weight: 700; }
.footer-kidz a:hover { color: #fff; text-decoration: underline; }
.footer-kidz .footer-logo { height: 84px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.footer-rainbow { height: 8px;
  background: linear-gradient(90deg, var(--cherry), var(--tangerine), var(--sunshine), var(--leaf), var(--sky), var(--grape));
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Accessibility & motion ---------- */
:focus-visible { outline: 4px solid var(--grape); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
  .hero { padding: 3rem 0 5rem; }
  .sticker { box-shadow: 6px 6px 0 var(--sky); }
}