/* ============================================================
   JuniorNexa — the SHELL.  Loaded LAST, by Include/inc_client_theme_head.php.
   ------------------------------------------------------------
   Its companion is Webroot/css/clients/juniornexa.css, loaded FIRST by
   header-base.php and holding every --jn-* token this file reads.

   Why two files: header-base.php loads the client sheet BEFORE inner-app.css,
   homepage-new.css and redesign-ui.css. That order is right for tokens and wrong
   for components — a bare `.edu-card` there loses to `.edu-card` in
   redesign-ui.css on source order, and the only ways out are a `body ` prefix on
   every selector or !important on every declaration. This file is loaded after
   all of them, so the rules below are ordinary rules at ordinary specificity.

   ── What it draws: the grown-ups room ────────────────────────────────────────
   The design is "Two Doors". A child opens the app onto a room with four
   pictures and one button in it (Views/User/kidsRoom.php, kids-room.css). Every
   OTHER page of the signed-in product — packs, progress, receipts, settings —
   is the room a parent walks into through the key, and this file is what that
   room looks like: paper ground, ink type, one coral accent, and nothing
   shouting.

   Deliberately calm. A parent about to spend ₹149 is not helped by cartoon
   furniture, and the loud half of the brand already has a whole screen of its
   own to live on.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. The faces
   ════════════════════════════════════════════════════════════

   Most of the app reads a token (--ia-font-head, --hn-font-body, --au-font) and
   those are repointed in juniornexa.css. These are the LITERALS that no token
   reaches: redesign-ui.css compiles `.eduui { font-family: 'Source Sans 3' … }`
   straight into the sheet, and Tailwind's own font utilities are built from
   tailwind.config.js at BUILD time, so a custom property cannot touch them.

   Baloo 2 for display, Mulish for running text — the pair the children's exam
   screen has always used. Both are loaded by CLIENT_FONT_LINKS. */

.eduui,
body.edu-body,
body.hn-body,
body.au-body {
  font-family: var(--jn-body);
}

.eduui h1, .eduui h2, .eduui h3, .eduui h4, .eduui h5,
.edu-pagehead-title,
.eduui-card-title,
.edu-greet-title,
.edu-spot-title,
.hn-body h1, .hn-body h2, .hn-body h3,
.au-body h1, .au-body h2 {
  font-family: var(--jn-display);
  letter-spacing: -.005em;
}

/* Baloo sits lower and wider than Source Sans at the same size. Display weights
   below 700 read as soft rather than as a heading, so the scale is pinned here
   rather than inherited from a sheet written for a different face. */
.eduui h1, .edu-pagehead-title { font-weight: 800; }
.eduui h2, .eduui h3, .eduui-card-title { font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   2. The tokens no client stylesheet could reach
   ════════════════════════════════════════════════════════════

   `tw-bg-primary` / `tw-text-primary` are compiled to a LITERAL hex from
   tailwind.config.js at BUILD time, not read from a variable at run time, so no
   amount of custom-property overriding reaches them. Every primary button and
   card heading in the student shell would otherwise still be painted by the
   default theme this tenant replaced — a green-black from the stock teal. */

.eduui-btn-primary {
  background: var(--jn-coral-600);
  color: #ffffff;
}
.eduui-btn-primary:hover {
  background: var(--jn-coral-700);
  color: #ffffff;
}
.tw-text-primary { color: var(--jn-ink-900); }
.tw-bg-primary   { background-color: var(--jn-coral-600); }

/* The secondary CTA. Stock is `status-info` cyan; here it is the violet that
   marks everything belonging to the grown-ups' half of the product. */
.eduui-btn-cta {
  background: var(--jn-violet-100);
  color: var(--jn-violet-700);
  border-color: #DFD3F8;
}
.eduui-btn-cta:hover { background: var(--jn-violet-50); color: var(--jn-violet-700); }

/* ════════════════════════════════════════════════════════════
   3. The grown-ups room: ground, cards, rules
   ════════════════════════════════════════════════════════════ */

body.edu-body {
  background: var(--jn-paper);
  color: var(--jn-ink-900);
}

/* redesign-ui.css draws the card with a cool grey hairline and a blue-grey
   shadow, both keyed to the stock teal theme. On paper they read as dirt. */
body.edu-body .eduui-card,
body.edu-body .edu-prog,
body.edu-body .ia-card {
  background: #ffffff;
  border-color: var(--jn-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(27, 25, 56, .04);
}
body.edu-body .edu-prog-grid,
body.edu-body .edu-band { background: var(--jn-gold-50); }
body.edu-body .edu-prog-week { border-bottom-color: var(--jn-line); }

/* Subject rails. The ladder keeps its meaning — strong / middling / needs work.
   The LOW band is not red here. A four-year-old's weakest format is not a
   failure to flag in alarm colours to their parent; it is the next thing to
   play, so it wears the same coral as the Play button. */
body.edu-body .edu-bar { background: var(--jn-line); }
body.edu-body .edu-bar.is-hi  > span { background: linear-gradient(90deg, var(--jn-grass-500), var(--jn-grass-600)); }
body.edu-body .edu-bar.is-mid > span { background: linear-gradient(90deg, var(--jn-gold-500), var(--jn-gold-550)); }
body.edu-body .edu-bar.is-lo  > span { background: linear-gradient(90deg, var(--jn-coral-400), var(--jn-coral-600)); }

/* The one figure on the page that is meant to be looked at. */
body.edu-body .edu-band-big {
  background: linear-gradient(120deg, var(--jn-ink-900) 0%, var(--jn-ink-600) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.edu-body .edu-band-big small { -webkit-text-fill-color: var(--jn-ink-400); }

/* The sidebar is paper now, so its own edge has to do the work the dark slab
   used to do. */
body.edu-body .edu-sidebar { border-right: 1px solid var(--jn-line); }
body.edu-body .edu-topbar  { background: #ffffff; border-bottom: 1px solid var(--jn-line); }

/* The "UNLOCK EVERYTHING" store card in the rail.

   It stays DARK. Every rule inside it in redesign-ui.css reverses white out of
   the panel — the section label, the three rows, the icon chips, the locked
   state, the badge — so lightening the panel alone leaves eight white-on-pale
   rules behind it, which is exactly what a first pass here did. Repainting it in
   the violet instead keeps all of those correct and earns its loudness: violet
   is the colour of the grown-ups' door throughout this design, and this card is
   the door to the half of the product that costs money.

   The CTA reads --edu-accent-ink for its text, which is the page ink; on a white
   button over violet that is right and is left alone. */
body.edu-body .edu-storecard {
  background: linear-gradient(155deg, var(--jn-violet-700) 0%, var(--jn-violet-600) 58%, var(--jn-violet-500) 100%);
  box-shadow: 0 10px 22px -14px rgba(90, 47, 196, .75);
}

/* The way back into the child's half, drawn above everything else in the rail.

   Coral, and the only coloured row in a menu that is otherwise ink on paper. It is not a
   destination among destinations — it is the way out of this half of the product, and a
   parent looking for it is looking for it in a hurry, usually with a child in the room. */
body.edu-body .edu-navlink-play {
  background: var(--jn-coral-50);
  color: var(--jn-coral-700);
  font-weight: 700;
}
body.edu-body .edu-navlink-play:hover { background: var(--jn-coral-100); color: var(--jn-coral-700); }
body.edu-body .edu-navlink-play > .material-symbols-outlined {
  background: var(--jn-coral-100);
  color: var(--jn-coral-600);
}

/* ════════════════════════════════════════════════════════════
   4. The public catalogue's hero band   (auth-pages.css)
   ════════════════════════════════════════════════════════════

   /examPackages/, /examInfo/ and their listings open on .hn-outer-hero, whose gradient is
   four hardcoded navies with a blue orb and an orange one blurred over it. No token
   reaches any of them, so on this tenant it was the one remaining slab of somebody else's
   brand — and the last adult surface a parent crossed on the way to a shelf of jigsaws.

   Still dark, deliberately. The band is a heading over a page whose content is cream and
   pictures; a light one would leave the page with no structure at all, and every rule
   inside it reverses white out of the ground. Repainted in the ink and the violet this
   design gives the grown-ups' half, with the orbs brought to coral and marigold. White on
   #13112B is 18.1:1 and on #4A26A8 is 9.6:1, so the headline and its sub-line hold at
   both ends of the ramp. */

.hn-outer-hero {
  background: linear-gradient(135deg, #13112B 0%, #241F45 44%, #4A26A8 100%);
}
.hn-outer-hero-orb-1 {
  background: radial-gradient(circle, rgba(233, 87, 59, .34) 0%, transparent 70%);
}
.hn-outer-hero-orb-2 {
  background: radial-gradient(circle, rgba(243, 174, 34, .26) 0%, transparent 70%);
}