/* ==========================================================================
   Learning Hub shell — THE shared layer between the two halves of the Hub
   ==========================================================================

   The Hub is served by two different builds: the React app at /learning-hub/
   (Vite, _hub/) and the statically built Roadmaps page at
   /learning-hub/roadmaps/ (Eleventy, src/roadmaps.njk). Moving between them is
   a full page load, so anything that differs by a pixel reads as "different
   website" rather than "different section".

   This file owns everything both halves share: the offset under the fixed
   global nav, the content width and gutters, the local Subjects/Roadmaps
   navigation, and the page hero. Neither side may restate these values.

   It is loaded twice, deliberately, because the two builds are independent:
     - the React app imports it in _hub/src/main.tsx (so it also works in vite dev)
     - the Eleventy page links /styles/hub-shell.css from src/roadmaps.njk
   Same file on disk either way, so the two cannot drift.

   Colours are declared here rather than referenced from either side's palette
   (--ink… on the site, --color-… in the app) so that a change to one palette
   cannot silently move only half of the Hub. The values are identical in both.
*/

:root {
  /* Space reserved for the fixed global nav. Both halves render the same nav
     markup, so both reserve the same height. */
  --hub-nav-height: 72px;
  --hub-max-width: 880px;
  --hub-gutter: 24px;
  /* Distance from the nav down to the local Subjects/Roadmaps row, and from
     that row down to the page title. */
  --hub-local-nav-top: 24px;
  --hub-hero-top: 40px;
  --hub-page-bottom: 96px;

  --hub-ink: #f4f1ea;
  --hub-ink-dim: #a3b0af;
  --hub-line-strong: rgba(244, 241, 234, 0.18);
  --hub-accent: #e76f51;
}

/* The <main> of any Hub page. Clears the fixed global nav. */
.hub-shell {
  padding-top: var(--hub-nav-height);
}

/* Local navigation between Hub sections, distinct from the global portfolio
   nav fixed above it: in flow, smaller, and scrolling away with the page.
   Rendered by _hub/src/components/HubNav.tsx and
   src/_includes/partials/hub-nav.njk — different implementations, one style. */
.hub-local-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--hub-max-width);
  margin: 0 auto;
  padding: var(--hub-local-nav-top) var(--hub-gutter) 0;
}
.hub-local-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--hub-line-strong);
  border-radius: 999px;
  color: var(--hub-ink-dim);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.hub-local-link:hover,
.hub-local-link.is-active {
  color: var(--hub-ink);
  border-color: var(--hub-ink);
}

/* The content column of a Hub page, below the local nav. `.page` is the React
   app's name for it and `.hub-page` the static page's; they are one rule so the
   content origin cannot differ between them. Everything inside sits in this
   column — the hero included, which is why the hero itself carries no width or
   gutter of its own. */
.hub-page,
.page {
  max-width: var(--hub-max-width);
  margin: 0 auto;
  padding: var(--hub-hero-top) var(--hub-gutter) var(--hub-page-bottom);
}

/* Page hero: eyebrow, title, standfirst. Same scale on both halves — a
   site-sized display heading here is what made Roadmaps feel like a different
   product. */
.hub-hero {
  margin: 0 0 32px;
}
.hub-hero__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--hub-accent);
}
.hub-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(38px, 6vw, 60px);
  margin: 0 0 14px;
}
.hub-hero__tagline {
  color: var(--hub-ink-dim);
  font-size: 17px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
}

/* Both halves step at the same widths, because both read these tokens. A
   breakpoint that exists on only one side is exactly how the local navigation
   ended up in two different places. */
@media (max-width: 640px) {
  :root {
    --hub-gutter: 20px;
    --hub-hero-top: 32px;
    --hub-page-bottom: 64px;
  }
  .hub-hero__eyebrow {
    font-size: 12px;
  }
  .hub-hero h1 {
    font-size: 28px;
  }
  .hub-hero__tagline {
    font-size: 15px;
  }
}
@media (max-width: 380px) {
  :root {
    --hub-gutter: 16px;
  }
}