/*
  kids-mode.css
  ─────────────────────────────────────────────────────────
  .bm-kids-hero has NO mode class — it is ALWAYS visible.

  .bm-kids-only   → hidden by default, shown in kids mode
  .bm-parent-only → shown by default, hidden in kids mode
  ─────────────────────────────────────────────────────────
*/

/* Default (parent mode / before JS) */
.bm-kids-only  { display: none !important; }
.bm-parent-only { display: block; }
.bm-kids-flex  { display: none !important; }

/* Kids mode */
body.bm-kids-mode .bm-kids-only   { display: block !important; }
body.bm-kids-mode .bm-kids-flex   { display: flex !important; }
body.bm-kids-mode .bm-parent-only { display: none !important; }

/* Footer */
body.bm-kids-mode .bm-footer-kids { display: flex !important; }
body.bm-kids-mode .bm-footer      { display: none !important; }

/* Nav toggle states */
body.bm-parent-mode #bmParentBtn { background: var(--blue-light) !important; color: var(--blue) !important; }
body.bm-parent-mode #bmKidsBtn   { background: transparent !important;       color: var(--ink-muted) !important; }
body.bm-kids-mode   #bmKidsBtn   { background: var(--purple-light) !important; color: var(--purple-dark) !important; }
body.bm-kids-mode   #bmParentBtn { background: transparent !important;        color: var(--ink-muted) !important; }

/* Kids mode — minor tweaks */
body.bm-kids-mode .bm-s-ages { display: none !important; }
body.bm-kids-mode #bm-quiz-section .bm-section-header > p { display: none !important; }
body.bm-kids-mode .bm-nav-brand-tag { display: none !important; }
body.bm-kids-mode { overflow-x: hidden; }
body.bm-kids-mode .bm-section--alt { background: var(--bg); }