/* ============================================================
   KinOrbit — mockup2 "Fable_5" design skin
   Ports the Fable_5 look & feel onto the Parents (index), Kids and
   Schools pages: full-bleed section rhythm + edge-to-edge section
   transitions, rounded-rect aura buttons, lighter layered + sky-aura
   depth, hover-lift cards with tonal top-accents, and the Fable
   cream/guardian background palette.
   Scoped to `body.fable` so it only affects the pages that opt in.
   Fonts AND font colours are intentionally left untouched — this
   skin never sets font-family, font-size or text `color`, so each
   page keeps its own type + light/dark text exactly as-is.
   (Operators has its own operators.css; the nav pill is global.)
   Load AFTER style.css.
   ============================================================ */

body.fable {
  /* Fable cream surfaces (cooler) + deeper guardian for dark blocks */
  --cream: #FDFCF8;
  --cream-2: #F8F5EE;
  --cream-3: #EFEADC;
  --guardian-d: #060B17;

  /* Depth — Fable's lighter layered shadows */
  --shadow-sm: 0 2px 6px rgba(26,43,72,.08), 0 1px 2px rgba(26,43,72,.04);
  --shadow-md: 0 6px 18px rgba(26,43,72,.10), 0 2px 6px rgba(26,43,72,.06);
  --shadow-lg: 0 16px 40px rgba(26,43,72,.14), 0 6px 16px rgba(26,43,72,.08);

  /* Aura (sky glow) — Fable signature */
  --aura-soft: 0 0 0 1px rgba(119,181,254,.18), 0 8px 32px -8px rgba(119,181,254,.35);
  --aura-medium: 0 0 0 2px rgba(119,181,254,.25), 0 0 24px rgba(119,181,254,.4), 0 12px 48px -12px rgba(26,43,72,.25);
  --aura-amber: 0 0 0 2px rgba(255,191,0,.3), 0 0 24px rgba(255,191,0,.5);

  /* Radii */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Flatten the framed-block layout → full-bleed, edge-to-edge sections.
     .block and .foot both read these vars, so this alone removes the
     gaps + rounded corners between sections. */
  --block-r: 0px;
  --frame: 0px;
}

/* ── Section rhythm: full-bleed, 1200 container ── */
body.fable .block { padding: 96px 24px; }
body.fable .block-inner { max-width: 1200px; }
@media (max-width: 760px) { body.fable .block { padding: 64px 20px; } }

/* ── Buttons: rounded-rect + aura, hover lift ── */
body.fable .btn {
  border-radius: var(--r-md);
  padding: 0 26px;
  height: 52px;
  font-weight: 700;
  font-size: 15.5px;
  border: 1.5px solid transparent;
  transition: transform .22s, box-shadow .22s, background .22s, color .22s;
}
body.fable .btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }
body.fable .btn-amber { box-shadow: 0 10px 30px -10px rgba(255,191,0,.55); }
body.fable .btn-amber:hover { background: #FFDE7A; transform: translateY(-1px); box-shadow: var(--aura-amber); }
body.fable .btn-dark { box-shadow: var(--aura-soft); }
body.fable .btn-dark:hover { background: #1F3460; transform: translateY(-1px); box-shadow: var(--aura-medium); }
body.fable .btn-ghost { border: 1.5px solid rgba(26,43,72,.25); }

/* ── Cards: Fable radius, lighter border, hover-lift, tonal top-accent ── */
body.fable .feat-card,
body.fable .post-card { border-radius: var(--r-lg); }
body.fable .feat-card {
  border-color: var(--cream-3);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid transparent;
  transition: transform .22s, box-shadow .22s;
}
body.fable .feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Fable accent-card top borders, cycled across the grid */
body.fable .feat-grid .feat-card:nth-child(4n+1) { border-top-color: var(--amber); }
body.fable .feat-grid .feat-card:nth-child(4n+2) { border-top-color: var(--sky); }
body.fable .feat-grid .feat-card:nth-child(4n+3) { border-top-color: var(--teal); }
body.fable .feat-grid .feat-card:nth-child(4n)   { border-top-color: var(--sage); }
body.fable .ko-card { border-radius: var(--r-lg); }

/* Media illustrations to Fable radius */
body.fable .split-media .illus { border-radius: var(--r-lg); }

/* ── Forms: Fable field radius + sky-aura focus ── */
body.fable .field input,
body.fable .field textarea,
body.fable .field select { border-radius: var(--r-md); }
body.fable .field input:focus,
body.fable .field textarea:focus,
body.fable .field select:focus {
  outline: none; border-color: var(--sky); box-shadow: var(--aura-soft);
}

/* ── Dark accent sections: Fable deep-guardian radial (keeps its white text) ── */
body.fable .bg-navy {
  background:
    radial-gradient(1100px 700px at 50% -10%, #16264d 0%, transparent 60%),
    linear-gradient(180deg, #0B1426 0%, #060B17 100%);
}

/* ── Reveal roll-in tuned to Fable (fade + shorter rise) ── */
body.fable .reveal { transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
body.fable .reveal.vis { transform: none; }