/* Compatibility layer for "/program-detaylar/".
 *
 * The page extends layouts/base.html so the navbar and footer are the site's
 * real components. That means main.css and the Tailwind CDN load alongside this
 * page's own stylesheet, and two of their global rules reshape it:
 *
 *   1. main.css has `* { font-family: Cera, system-ui, sans-serif }`. A
 *      universal selector matches every element *directly*, so nothing inherits
 *      any more — program-detay.css sets the font on `body` and on a handful of
 *      specific selectors and lets the rest cascade, and that cascade is broken.
 *      Load order does not help: this is inheritance being pre-empted, not a
 *      specificity contest.
 *
 *   2. Tailwind Preflight has `h1..h6 { font-size: inherit; font-weight: inherit }`.
 *      program-detay.css sets a size on its headings but never a weight — they
 *      rely on the UA default `bold`, which Preflight removes.
 *
 * So: re-establish inheritance inside .site-shell, then restate the page's own
 * font-family declarations one specificity step higher, and put the heading
 * weight back. Every selector below mirrors one in program-detay.css; if that
 * file gains a font-family rule, add it here too.
 *
 * Scoped to .site-shell throughout, so the navbar and footer outside it keep
 * Cera and Tailwind's resets exactly as on every other page.
 */

/* 1. Undo `* { font-family: Cera }` for the page subtree.
   `inherit` rather than a concrete family on purpose: it rebuilds the
   inheritance chain main.css severed, so an element nested inside one of the
   display-font containers below (e.g. `.word-marquee-item strong` inside
   `.word-marquee-track`) still picks that font up from its parent. Naming a
   family here instead would re-break exactly what we are fixing. */
.site-shell {
  font-family: var(--font-body);
}

.site-shell * {
  font-family: inherit;
}

/* 1b. Tailwind Preflight sets `html { line-height: 1.5 }`; program-detay.css
   never declares a line-height on most elements and was designed against the UA
   default. Unlike the font rule this one arrives purely by inheritance, so
   resetting it once at the top of the subtree restores the original cascade --
   the page's own line-height declarations still win further down. */
.site-shell {
  line-height: normal;
}

/* 2. Restate program-detay.css's display-font selectors above `.site-shell *`. */
.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell h4,
.site-shell h5,
.site-shell h6,
.site-shell .word-marquee-track,
.site-shell .journey-tabs strong,
.site-shell .alumni-copy blockquote,
.site-shell .metric strong {
  font-family: var(--font-display);
}

/* Space Grotesk is used for the numeric labels. */
.site-shell .experience-index,
.site-shell .stage-number span,
.site-shell .eligibility-score strong,
.site-shell .criterion-number {
  font-family: "Space Grotesk", sans-serif;
}

.site-shell .quote-mark {
  font-family: Georgia, serif;
}

/* Phosphor already carries !important in program-detay.css, but keep the icon
   font explicit here so the `.site-shell *` rule above can never win. */
.site-shell .ph {
  font-family: "Phosphor" !important;
}

/* 3. Put back the UA heading weight that Preflight resets to `inherit`.
   program-detay.css sets no font-weight on any heading, so `bold` is what the
   page was designed against. */
.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell h4,
.site-shell h5,
.site-shell h6 {
  font-weight: bold;
}