/* ══════════════════════════════════════════════════════════════════
   css/page-hero-light.css — the rest of the site, lit to match
   S.MONK · 9 November 2026
   ------------------------------------------------------------------
   Ravi, after choosing the light homepage hero: "this one page should
   not look odd as other pages are dark background."

   Every page except the homepage draws its hero from the same five
   templates in css/page-hero.css — A content, B tool, C course,
   D sales, E auth — all of them navy with white text. This file is
   the light version of all five. Nothing in page-hero.css is touched:
   every rule here only adds a `body.smk-light-heroes` in front, so
   with the setting off not one of them applies and the navy heroes
   come back exactly as they were.

   Where the colours come from:
     white text          → --c-ink-900   (headings, values)
     white at 72%        → --c-ink-600   (body copy)
     white at 55%        → --c-ink-500   (labels, meta)
     a white-ish panel   → #fff + --c-ink-200 border + a real shadow
     white hairlines     → --c-ink-100
     the cyan accent     → --c-teal-700  (the bright cyan is unreadable
                                          on cream: 2.2:1)
     --ph-orange-2       → --orange-ink  (the same swap, done once at
                                          the top so every accent, tick
                                          and icon follows)

   Tokens only. No new colours.
   ══════════════════════════════════════════════════════════════════ */

/* ── The shell ──────────────────────────────────────────────────────
   The same gradient the homepage hero uses, so a visitor moving from
   the homepage to any other page does not feel the floor change. ── */
body.smk-light-heroes .page-hero {
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--c-orange-50) 0%, transparent 62%),
    linear-gradient(180deg, var(--c-surface-warm) 0%, #fff 72%);
  border-bottom: 1px solid var(--c-ink-100);
  color: var(--c-ink-900);

  /* One swap that reaches every accent in all five templates: the
     headline accent, the stat numbers, the module ticks, the price
     caption and the auth bullets. #F97316 on cream is 3.0:1, which is
     fine for a 50px number and not fine for a 12px uppercase label. */
  --ph-orange-2: var(--orange-ink);
}

/* The faint grid, and the hero photograph the header paints at 13%,
   both live on ::before. On navy they read as texture. On cream the
   photograph greys the whole hero and the grid disappears, so neither
   earns its place — the homepage hero has neither either.
   public-header.php also stops emitting the photo and its preload
   while this is on, so nothing is downloaded to be hidden. */
body.smk-light-heroes .page-hero::before { display: none !important; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
body.smk-light-heroes .ph-crumb         { color: var(--c-ink-500); }
body.smk-light-heroes .ph-crumb a       { color: var(--c-ink-700); }
body.smk-light-heroes .ph-crumb a:hover { color: var(--c-ink-900); }

/* ── Pills ──────────────────────────────────────────────────────── */
body.smk-light-heroes .ph-pill {
  background: var(--c-teal-50);
  border-color: var(--c-teal-100);
  color: var(--c-teal-700);
}
body.smk-light-heroes .ph-pill--orange {
  background: var(--c-orange-50);
  border-color: var(--c-orange-300);
  color: var(--orange-ink);
}
body.smk-light-heroes .ph-pill--green {
  background: rgba(21,128,61,0.08);
  border-color: rgba(21,128,61,0.28);
  color: #15803D;
}

/* ── Headline, sub, stats ───────────────────────────────────────── */
body.smk-light-heroes .ph-h1       { color: var(--c-ink-900); }
body.smk-light-heroes .ph-sub      { color: var(--c-ink-600); }
body.smk-light-heroes .ph-stat-num { color: var(--c-ink-900); }
body.smk-light-heroes .ph-stat-lbl { color: var(--c-ink-500); }

/* ── Chips. Selected is navy-on-white, the same as the course filter
      on the homepage, so "chosen" looks the same everywhere. ────── */
body.smk-light-heroes .ph-chip {
  background: #fff;
  border-color: var(--c-ink-200);
  color: var(--c-ink-700);
  box-shadow: var(--shadow-sm);
}
body.smk-light-heroes .ph-chip:hover {
  background: #fff;
  border-color: var(--c-ink-400);
  color: var(--c-ink-900);
}
body.smk-light-heroes .ph-chip--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── Buttons. The filled one is already navy-on-orange (8.3:1) and
      stays exactly as it is; only the outlined one has to change. ── */
body.smk-light-heroes .ph-btn--ghost {
  color: var(--c-ink-800);
  border-color: var(--c-ink-300);
  background: transparent;
}
body.smk-light-heroes .ph-btn--ghost:hover {
  border-color: var(--navy);
  background: var(--c-ink-50);
}

/* ── B · the search box ─────────────────────────────────────────── */
body.smk-light-heroes .ph-search {
  background: #fff;
  border-color: var(--c-ink-200);
  box-shadow: var(--shadow-sm);
}
body.smk-light-heroes .ph-search:focus-within {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
body.smk-light-heroes .ph-search__icon  { color: var(--c-ink-400); }
body.smk-light-heroes .ph-search__input { color: var(--c-ink-900); }
body.smk-light-heroes .ph-search__input::placeholder { color: var(--c-ink-400); }

/* ── B · the three values under the search ──────────────────────── */
body.smk-light-heroes .ph-value-strip { border-top-color: var(--c-ink-100); }
body.smk-light-heroes .ph-value__icon {
  background: var(--c-teal-50);
  color: var(--c-teal-700);
}
body.smk-light-heroes .ph-value__title { color: var(--c-ink-900); }
body.smk-light-heroes .ph-value__body  { color: var(--c-ink-600); }

/* ── C · the course hero ────────────────────────────────────────── */
body.smk-light-heroes .ph-course-code {
  background: var(--c-teal-50);
  border-color: var(--c-teal-100);
  color: var(--c-teal-700);
}
body.smk-light-heroes .ph-course-tag { color: var(--c-ink-600); }
body.smk-light-heroes .ph-course-facts {
  border-top-color: var(--c-ink-100);
  border-bottom-color: var(--c-ink-100);
}
body.smk-light-heroes .ph-course-fact-lbl    { color: var(--c-ink-500); }
body.smk-light-heroes .ph-course-fact-val    { color: var(--c-ink-900); }
body.smk-light-heroes .ph-course-modules-head{ color: var(--c-ink-500); }
body.smk-light-heroes .ph-course-module      { color: var(--c-ink-700); }

/* ── C · the sticky buy card. A frosted panel over navy becomes a
      plain white card with a real shadow; the blur has nothing left
      to blur and only costs a repaint on scroll. ───────────────── */
body.smk-light-heroes .ph-buy-card {
  background: #fff;
  border-color: var(--c-ink-200);
  box-shadow: 0 18px 44px rgba(11,29,63,0.12);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body.smk-light-heroes .ph-buy-card__price      { color: var(--c-ink-900); }
body.smk-light-heroes .ph-buy-card__price-sub  { color: var(--orange-ink); }
body.smk-light-heroes .ph-buy-card__list       { border-top-color: var(--c-ink-100); }
body.smk-light-heroes .ph-buy-card__list li    { color: var(--c-ink-700); }
body.smk-light-heroes .ph-buy-card__ghost {
  color: var(--c-ink-800);
  border-color: var(--c-ink-300);
}
body.smk-light-heroes .ph-buy-card__ghost:hover { border-color: var(--navy); }
body.smk-light-heroes .ph-buy-card__trust {
  border-top-color: var(--c-ink-100);
  color: var(--c-ink-500);
}

/* ── D · the preview panel ──────────────────────────────────────── */
body.smk-light-heroes .ph-preview {
  background: #fff;
  border-color: var(--c-ink-200);
  box-shadow: 0 18px 44px rgba(11,29,63,0.12);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body.smk-light-heroes .ph-preview__head  { color: var(--c-ink-500); }
body.smk-light-heroes .ph-preview__count {
  background: var(--c-teal-50);
  color: var(--c-teal-700);
}
body.smk-light-heroes .ph-preview-row         { border-top-color: var(--c-ink-100); }
body.smk-light-heroes .ph-preview-row__title  { color: var(--c-ink-900); }
body.smk-light-heroes .ph-preview-row__meta   { color: var(--c-ink-500); }
body.smk-light-heroes .ph-preview-row__badge {
  background: var(--c-orange-50);
  color: var(--orange-ink);
}
body.smk-light-heroes .ph-preview-row__badge--green {
  background: rgba(21,128,61,0.10);
  color: #15803D;
}
body.smk-light-heroes .ph-preview-row__badge--cyan {
  background: var(--c-teal-50);
  color: var(--c-teal-700);
}

/* ── E · the auth hero ──────────────────────────────────────────── */
body.smk-light-heroes .ph-auth-bullets li { color: var(--c-ink-700); }
/* The form card was white on navy and needed a heavy shadow to lift
   off it. On cream that shadow reads as a smudge. */
body.smk-light-heroes .ph-form-card {
  border: 1px solid var(--c-ink-200);
  box-shadow: 0 18px 44px rgba(11,29,63,0.12);
}

/* ── A · the pill was being stretched ──────────────────────────────
   .ph--content lays its inner column out with flex, so an inline-flex
   pill was stretched the full width of the hero. On navy its 12%
   cyan fill was faint enough to hide it; on cream it reads as a bar
   across the page. Scoped to the light heroes so the navy fallback
   keeps the behaviour it has today. ───────────────────────────── */
body.smk-light-heroes .page-hero.ph--content .ph-pill { align-self: flex-start; }


/* ── The simplest heroes ────────────────────────────────────────────
   account-delete, account-export, apply-for-job, guardian-approve and
   guardian-consent write a bare <h1> and <p> inside .page-hero and
   rely on it being white. The heading inherits the shell's new ink;
   the paragraph wants to be a shade softer than the heading. ──── */
body.smk-light-heroes .page-hero h1          { color: var(--c-ink-900); }
body.smk-light-heroes .page-hero > .wrap > p { color: var(--c-ink-600); }


/* ── 403, 404 and 500 ───────────────────────────────────────────────
   The giant figure carries its colour as an inline style, which no
   stylesheet can outrank without !important — hence the !important,
   used here and nowhere else in this file. The pages keep their
   inline colour so the navy heroes are untouched; these only take
   over while the light heroes are on.
     cyan #4DC4F4 on cream is 2.2:1, under the 3:1 a figure that size
     still has to meet.
   ──────────────────────────────────────────────────────────────── */
body.smk-light-heroes .ph-bignum--cyan   { color: var(--c-teal-600) !important; }
body.smk-light-heroes .ph-bignum--orange { color: var(--orange-ink) !important; }
body.smk-light-heroes .ph-bignum--red    { color: #B91C1C !important; }


/* ══════════════════════════════════════════════════════════════════
   about.php — the one page with a hero all of its own
   ------------------------------------------------------------------
   It predates the five templates and uses its own .hero-* family
   (style.css), so none of the rules above reach it. Same colour map,
   applied by hand.
   ══════════════════════════════════════════════════════════════════ */
body.smk-light-heroes .page-hero .hero-eyebrow { color: var(--c-teal-700); }
body.smk-light-heroes .page-hero .hero-h1      { color: var(--c-ink-900); }
body.smk-light-heroes .page-hero .hero-h1 .acc { color: var(--orange-ink); }
body.smk-light-heroes .page-hero .hero-sub     { color: var(--c-ink-600); }

body.smk-light-heroes .page-hero .hstat {
  background: #fff;
  border-color: var(--c-ink-200);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body.smk-light-heroes .page-hero .hstat-n    { color: var(--c-ink-900); }
body.smk-light-heroes .page-hero .hstat-n em { color: var(--c-teal-700); }
body.smk-light-heroes .page-hero .hstat-l    { color: var(--c-ink-500); }

body.smk-light-heroes .page-hero .btn-hero-g {
  color: var(--c-ink-800);
  border-color: var(--c-ink-300);
}
body.smk-light-heroes .page-hero .btn-hero-g:hover {
  border-color: var(--navy);
  color: var(--c-ink-900);
}
/* .btn-hero-o is already navy on orange and needs nothing. */

body.smk-light-heroes .ph-preview-row__icon { color: var(--c-teal-600); }