/* =========================================================
   Likkle Coders — v13 "Bold Scheme" layer
   ---------------------------------------------------------
   Spreads the lime + purple/pink/cyan home palette through
   the app: accent colours threaded everywhere, plus a
   reusable bold colour BAND for section headers.

   Palette (from v5-bold-home): lime #DDFF00 · purple #6849F0
   · pink #FF6BD0 · cyan #4ED9FF.

   EASY REVERT: delete the <link> for this file in index.html
   and its entry in service-worker.js SHELL.
   ========================================================= */
:root{
  --sch-lime:      var(--bh-lime, #DDFF00);
  --sch-lime-dk:   var(--bh-lime-dk, #B8E600);
  --sch-purple:    var(--bh-purple, #6849F0);
  --sch-purple-dk: var(--bh-purple-dk, #4B2DDB);
  --sch-pink:      var(--bh-pink, #FF6BD0);
  --sch-pink-dk:   var(--bh-pink-dk, #E94CB8);
  --sch-cyan:      var(--bh-cyan, #4ED9FF);
  --sch-cyan-dk:   var(--bh-cyan-dk, #2BC1F2);
  --sch-ink:       var(--bh-ink, #161235);
}

/* =========== ACCENTS, THREADED APP-WIDE =========== */

/* text selection = lime highlight */
::selection{ background: var(--sch-lime); color: var(--sch-ink); }

/* eyebrows / kickers → bold purple→pink gradient (keeps inline-coloured ones) */
.eyebrow{
  background: linear-gradient(90deg, var(--sch-purple), var(--sch-pink)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}
.eyebrow[style*="color"]{ -webkit-text-fill-color: initial; background: none !important; }

/* keyboard focus ring → purple, everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--sch-purple) !important; outline-offset: 2px;
}

/* section-title highlight words (already used on home) — lock to the scheme */
.bh-h-pink,   .section-head .hl-pink   { color: var(--sch-pink)   !important; }
.bh-h-purple, .section-head .hl-purple { color: var(--sch-purple) !important; }
.bh-h-cyan,   .section-head .hl-cyan   { color: var(--sch-cyan-dk) !important; }

/* small decorative dots that can sit in a section head */
.sch-dot{ display:inline-block; width:.6em; height:.6em; border-radius:50%; vertical-align:middle; }
.sch-dot--lime{ background: var(--sch-lime-dk); }
.sch-dot--purple{ background: var(--sch-purple); }
.sch-dot--pink{ background: var(--sch-pink); }
.sch-dot--cyan{ background: var(--sch-cyan-dk); }

/* =========== BOLD SECTION BANDS =========== */
.lc-band{
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 30px 26px !important; margin: 1.6rem auto;
  box-shadow: 0 14px 34px rgba(11,37,69,.16);
}
/* floating shapes echoing the home hero */
.lc-band::before{
  content: ""; position: absolute; right: -40px; top: -50px;
  width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  opacity: .55;
}
.lc-band::after{
  content: "✦"; position: absolute; left: 18px; bottom: 10px;
  font-size: 1.5rem; pointer-events: none; opacity: .7;
}

.lc-band--lime{ background: var(--sch-lime); }
.lc-band--lime::before{ background: radial-gradient(circle at 50% 40%, var(--sch-pink), var(--sch-purple)); }
.lc-band--lime::after{ color: var(--sch-purple); }
.lc-band--lime h2, .lc-band--lime p, .lc-band--lime .eyebrow{
  color: var(--sch-ink) !important; -webkit-text-fill-color: var(--sch-ink) !important; background: none !important;
}
.lc-band--lime .muted{ color: color-mix(in oklab, var(--sch-ink) 72%, transparent) !important; }

.lc-band--purple{ background: linear-gradient(135deg, var(--sch-purple) 0%, var(--sch-purple-dk) 100%); }
.lc-band--purple::before{ background: radial-gradient(circle at 50% 40%, var(--sch-lime), var(--sch-cyan)); }
.lc-band--purple::after{ color: var(--sch-lime); }
.lc-band--purple h2, .lc-band--purple p, .lc-band--purple .eyebrow{
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important;
}
.lc-band--purple .muted{ color: rgba(255,255,255,.82) !important; }
.lc-band--purple .bh-h-cyan{ color: var(--sch-lime) !important; }

.lc-band--cyan{ background: linear-gradient(135deg, var(--sch-cyan) 0%, var(--sch-cyan-dk) 100%); }
.lc-band--cyan::before{ background: radial-gradient(circle at 50% 40%, var(--sch-purple), var(--sch-pink)); }
.lc-band--cyan::after{ color: #fff; }
.lc-band--cyan h2, .lc-band--cyan p, .lc-band--cyan .eyebrow{
  color: var(--sch-ink) !important; -webkit-text-fill-color: var(--sch-ink) !important; background: none !important;
}

/* =========== DASHBOARD CARDS JOIN THE THEME ===========
   v11 flattened the big action cards + fun-activity tiles to white.
   Bring them back to life with the SAME accent-wash + top-border
   language as the Academy cards, each keeping its own colour so the
   home dashboard reads as one vibrant, on-theme family. */
.bh-act--story  { --acc:#F59E0B; }
.bh-act--patois { --acc:#EC4899; }
.bh-act--parish { --acc:#22C55E; }
.bh-act--drag   { --acc:#8B5CF6; }
.bh-act--voice  { --acc:#F97316; }
.bh-act--chess  { --acc:#64748B; }
.bh-act--academy{ --acc:#6366F1; }
.bh-act--arcade { --acc:#10B981; }
.bh-act--play   { --acc:#EC4899; }
.bh-act--bee    { --acc:#F59E0B; }
.bh-mega--foundations{ --acc:#7C3AED; }
.bh-mega--pep        { --acc:#EF4444; }
.bh-mega--junior     { --acc:#2A9DF4; }
.bh-mega--xl         { --acc:#8B5CF6; }

.bh-act, .bh-mega{
  background: linear-gradient(180deg, color-mix(in oklab, var(--acc, #7C3AED) 15%, #fff) 0%, #fff 62%) !important;
  border-top: 5px solid var(--acc, #7C3AED) !important;
}
/* the little icon square/circle gets a soft accent glow to match */
.bh-act-icon{ box-shadow: 0 4px 10px color-mix(in oklab, var(--acc, #7C3AED) 32%, transparent) !important; }
/* filled accent CTA on the big action cards (like the Academy cards) */
.bh-mega-cta{
  background: var(--acc, #7C3AED) !important; color:#fff !important;
  border-radius: 999px !important; padding: 7px 16px !important;
  box-shadow: 0 3px 0 color-mix(in oklab, var(--acc, #7C3AED) 55%, #000) !important;
}

@media (prefers-reduced-motion: reduce){ /* bands are static — nothing to disable */ }