/* =====================================================================
   SHARED SITE CHROME — loaded on every page by MppLayout.

   The Header and Footer components are shared, but their styling used to be
   re-declared at the top of all 12 page stylesheets. The copies drifted
   (shop.css lost --gold-ink; blog-post.css set a different --tx), and any new
   page that forgot to add a stylesheet rendered the nav and footer unstyled.

   This file is the single source of those rules. It loads BEFORE each page's
   own stylesheet, so a page can still override anything here — and a few
   legitimately do:
     home.css / article.css   --nav2, plus a flex variant of .nl
     shop.css                 flex variant of .nl
     contact.css / checkout.css   --gold-ink
     product.css              --ca-* accent tokens
     freebie-detail.css       --fd-* accent tokens

   Anything genuinely page-specific belongs in the page's own file, not here.
   ===================================================================== */

html { scroll-behavior: smooth; }
body { margin: 0; background: #F5F8FD; }
a { text-decoration: none; }

/* Brand tokens. Scoped to .mppx (the wrapper every page opens with) rather
   than :root so the design-system stylesheet keeps its own variables. */
.mppx {
  --nav: #0B1457;
  --ink: #0C1538;
  --tx: #4C5670;
  --page: #F5F8FD;
  --line: #E4E9F2;
  --gold: #F0C31F;
  --blue: #2563EB;
  --cyan: #38BDF8;
  --purple: #7C3AED;
  --teal: #14B8A6;
}

/* Page container */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: 56px; }
@media (max-width: 980px) { .wrap { padding-inline: 24px; } }

/* Header nav links */
.nl { color: rgba(255,255,255,.82); font: 600 14px/1 var(--font-body); }
.nl:hover { color: #fff; }
.nl.on { color: #fff; position: relative; }
.nl.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; background: var(--gold); border-radius: 3px; }

/* Footer links */
.flink { color: rgba(255,255,255,.6); }
.flink:hover { color: #fff; }

/* ---------------------------------------------------------------------
   Hover underlines.

   The design system sets a blanket `a:hover { text-decoration: underline }`
   (tokens/base.css). That is right for an inline link in a sentence, but wrong
   for the card-style links used all over this site: a single <a> wrapping a
   title, a description and a meta line underlines all three at once, which
   reads as a mistake.

   So: no blanket underline. Card links underline only their heading; links
   inside running prose keep the underline they need.
   This file loads after the design system, so these win.
   --------------------------------------------------------------------- */
@media (hover: hover) and (min-width: 900px) {
  a:hover { text-decoration: none; }

  /* A card link underlines just its title. */
  a:hover :is(h1, h2, h3, h4, h5, .card-title) { text-decoration: underline; }

  /* Running prose: an inline link should still look like a link. */
  p > a:hover,
  li > a:hover,
  .lg-body a:hover,
  .post-body a:hover,
  .fd-prose a:hover,
  .ct-lead a:hover,
  .ok-help a:hover,
  .lg-cta a:hover { text-decoration: underline; }
}

/* ---------------------------------------------------------------------
   Footer Curriculum column: never wrap.

   The column sits beside the 4-line Company column, so a label that wraps
   makes the footer look broken. The Footer.astro guard caps label LENGTH,
   but a character count can only ever be tuned for one column width — at
   1280px "Computer science" fits on one line and at 1000px it did not.
   nowrap removes the width dependency entirely; the length cap stays as a
   second line of defence against a label long enough to overflow.
   --------------------------------------------------------------------- */
.foot-col-link { white-space: nowrap; }