/* =====================================================================
   Likkle Coders — v15 CLASSIC TYPE (v567)
   ---------------------------------------------------------------------
   ONE typeface pairing for the whole app, loaded last so it wins.

   Why: the layers below disagree about fonts. styles/tokens/v11 say
   Baloo 2 + Quicksand, v7-jamaica says Fraunces + Plus Jakarta Sans —
   and those two were never in the Google Fonts link, so half the app
   silently fell back to Georgia / system-ui. Different sections showed
   different families at different visual sizes. The user called it out
   and asked for one classic, classy look.

   The pairing:
     Display  — "Playfair Display": a classic high-contrast serif for
                headings. Elegant, bookish, timeless.
     Body/UI  — "Lato": a warm humanist sans, extremely readable for
                children, quiet under the serif.

   EASY REVERT: delete this file's <link> in index.html (+ the SHELL
   entry in service-worker.js) and the previous mixed look returns.
   ===================================================================== */

:root {
  /* every font token any layer references, retargeted to the pairing.
     !important because v11-modern declares --f-display/--f-body with
     !important at :root — a later normal declaration loses to that. */
  --f-display:      "Playfair Display", Georgia, "Times New Roman", serif !important;
  --f-body:         "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  --lct-f-display:  "Playfair Display", Georgia, "Times New Roman", serif !important;
  --lct-f-body:     "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  --lct-f-tots:     "Lato", "Segoe UI", system-ui, sans-serif !important;
  --m-font:         "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  --lc-font-display:"Playfair Display", Georgia, serif !important;
  --lc-font-body:   "Lato", "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

/* v11-modern forces body * AND all headings to --m-font with
   !important. Retargeting --m-font handles the body (now Lato), but
   headings need their own later-!important rule with v11's exact
   selector list to take the serif. Same specificity, later file wins. */
/* v11's `body *:not(…)x6 { font-family: var(--m-font) !important }`
   carries class-level specificity from every :not(), so a plain `h1`
   rule loses to it even later with !important. Two :not(#…) guards
   add ID-level weight — nothing outranks these without an inline
   style. The #lc-none id exists nowhere; the selector still matches
   every heading. */
h1:not(#lc-none):not(#lc-none), h2:not(#lc-none):not(#lc-none),
h3:not(#lc-none):not(#lc-none), h4:not(#lc-none):not(#lc-none),
h5:not(#lc-none):not(#lc-none),
[class*="title"]:not(#lc-none):not(#lc-none),
[class*="heading"]:not(#lc-none):not(#lc-none),
.bh-hero2-h:not(#lc-none):not(#lc-none),
.bh-sect-h:not(#lc-none):not(#lc-none) {
  font-family: var(--f-display) !important;
  font-weight: 800 !important;   /* v568: user wants headings a touch bolder */
  letter-spacing: 0;
}

/* Buttons, pills, chips, tabs, forms: one UI voice — the body sans.
   (Also with weight, so nothing inherits Playfair by accident.) */
button, .btn, .pill, .badge, .pep-tab, .tab, input, select, textarea {
  font-family: var(--f-body) !important;
}

/* Code stays mono (unchanged), tracing stays the school-hand font. */

/* =====================================================================
   v568 — HEADING SCALE. User: section and card headings should be
   bigger and a touch bolder, everywhere. Playfair carries weight 800,
   so "slightly bolder" is real, not synthesized. Sizes are clamped so
   phones don't get shouted at. Same :not(#lc-none) guards — several
   layers set their own component sizes and this must win everywhere.
   ===================================================================== */
h2:not(#lc-none):not(#lc-none) {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important;
  font-weight: 800 !important;
}
h3:not(#lc-none):not(#lc-none) {
  font-size: clamp(1.25rem, 2.1vw, 1.5rem) !important;
  font-weight: 800 !important;
}
h4:not(#lc-none):not(#lc-none) {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem) !important;
  font-weight: 800 !important;
}
/* Card title lines that are <strong>, not headings: the Top-3 and
   Check-up cards, and the NSC subject cards' body links. */
.lc-top3-card > strong:not(#lc-none):not(#lc-none) {
  font-family: var(--f-display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  line-height: 1.3;
}
/* Section eyebrow/tab labels (the pill tabs) get a touch more presence
   without changing family — they are UI, not headings. */
.tab:not(#lc-none):not(#lc-none), .pep-tab:not(#lc-none):not(#lc-none) {
  font-weight: 800 !important;
}