/*
 * SpainReady layout primitives — Stage 3.
 *
 * Structural only. No colour, elevation, or motion values appear here,
 * per the Stage 3 constraint against resolving pending token categories.
 * References only the resolved token categories: spacing, radius (where
 * structurally required), z-index (for sticky/overlay layering), and the
 * reading-column width — all from config/tokens/tokens.generated.css.
 *
 * Each primitive below is used by at least two of the five approved
 * layouts, or is required to enforce one approved structural rule
 * (see each primitive's comment for which).
 */

@import url("../../config/tokens/tokens.generated.css");

/* ---------------------------------------------------------------------
 * Base page typography/colour (Stage 7.5 Visual Parity)
 * Legacy equivalent: index.html `body{font-family:'Inter',sans-serif;
 * background:var(--cream);color:var(--ink);font-size:15px;line-height:1.65}`
 * Applied here (not per-component) since it is a whole-page default,
 * the same layer that owns .sr-page-container et al.
 * ------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family-body);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: var(--font-body-size);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  color: var(--color-text-primary);
}

a {
  color: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * visually-hidden
 * Used by: Home (promotional corner label) and, since the Final
 * Production QA & Corrections Sprint, the generic Roadmap Content page
 * (see roadmap-content-page.js's buildSection -- a Section heading that
 * wraps exactly one Step of the identical title stays in the DOM, kept
 * visually hidden rather than removed, so the h1->h2->h3 document
 * outline never skips a level while the on-screen duplicate text is
 * gone). Moved here (was previously duplicated only in home-page.css)
 * because it is now a genuinely cross-page utility, not a Home-only one.
 * Standard "clip, don't display:none" technique -- stays in the
 * accessibility tree and the heading outline, invisible on screen.
 * ------------------------------------------------------------------- */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
 * inline-link
 * Used by: FAQ (components/faq/faq.js) and Callout (via
 * roadmap-content-page.js's buildAnnotationCallout), wherever a word or
 * two inside an existing sentence becomes a real external link (Final
 * QA Follow-up Sprint -- see components/shared/linked-text.js). Placed
 * here, not in either component's own stylesheet, because it is a
 * genuinely cross-component utility -- same reasoning as
 * .sr-visually-hidden above. Deliberately understated (underline +
 * primary colour, no background/weight change) since it sits mid-
 * sentence in running text, not styled as a standalone CTA.
 * ------------------------------------------------------------------- */
.sr-inline-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sr-inline-link:hover,
.sr-inline-link:focus-visible {
  color: var(--color-primary-hover);
}

/* ---------------------------------------------------------------------
 * page-container
 * Used by: all five layouts.
 * Enforces: no horizontal overflow; consistent outer gutter at every
 * breakpoint (Golden UI Reference §1 — minimum 24px tablet / 16px mobile).
 * ------------------------------------------------------------------- */
.sr-page-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--space-m);
  padding-right: var(--space-m);
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .sr-page-container {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
}

/* ---------------------------------------------------------------------
 * main-content-wrapper
 * Used by: all five layouts.
 * Enforces: exactly one <main> landmark per rendered page — this
 * primitive IS that landmark's structural wrapper, so every layout
 * gets it from one shared definition rather than five separate ones.
 * ------------------------------------------------------------------- */
.sr-main-content-wrapper {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * full-width-section
 * Used by: Root Shell (any full-bleed section), Public Roadmap Layout
 * (Hero), Member Roadmap Layout (Hero), Dashboard Layout (dashboard
 * header). Full-bleed background, inner content still respects the
 * page container gutter.
 * ------------------------------------------------------------------- */
.sr-full-width-section {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  background: var(--color-surface); /* legacy: Hero/white-sec sit on white against a cream page body */
}

/* ---------------------------------------------------------------------
 * reading-column
 * Used by: Public Roadmap Layout, Member Roadmap Layout.
 * Enforces: the 760–820px constrained reading width (Golden UI
 * Reference §1) at laptop/desktop; full width at mobile/tablet.
 * Explicitly NOT used by Dashboard Layout (per Stage 3 requirement:
 * "do not reuse the roadmap reading-column structure").
 * ------------------------------------------------------------------- */
.sr-reading-column {
  width: 100%;
  max-width: var(--reading-column-max);
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * section-stack
 * Used by: Public Roadmap Layout, Member Roadmap Layout, Dashboard
 * Layout — any layout that stacks multiple regions vertically with a
 * consistent rhythm (Golden UI Reference §1: XL gap between distinct
 * blocks, XXL/XXXL around Hero-level and CTA-level regions).
 * ------------------------------------------------------------------- */
.sr-section-stack > * + * {
  margin-top: var(--space-xl);
}

.sr-section-stack[data-stack-gap="xxl"] > * + * {
  margin-top: var(--space-xxl);
}

/* ---------------------------------------------------------------------
 * split-column-region
 * Used by: Member App Shell (sidebar + main content), Member Roadmap
 * Layout (Table of Contents rail + reading column).
 * Structural only — the actual rail/main split happens at laptop and
 * above; below that, children stack (mobile/tablet collapse to single
 * column, per Golden UI Reference §6).
 * ------------------------------------------------------------------- */
.sr-split-column-region {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .sr-split-column-region {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }
  .sr-split-column-region > [data-region="rail"] {
    flex: 0 0 260px;
  }
  .sr-split-column-region > [data-region="main"] {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------
 * sticky-rail-region
 * Used by: Member Roadmap Layout (desktop ToC rail, Progress Header),
 * Member App Shell (sidebar).
 * Structural positioning + approved z-index layer only — no visual
 * treatment (background/shadow) applied here.
 * ------------------------------------------------------------------- */
.sr-sticky-rail-region {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  align-self: flex-start;
}

/* ---------------------------------------------------------------------
 * overlay-host / toast-host
 * Used by: Member App Shell (dashboard + member roadmap contexts share
 * one shell) for the mobile Table of Contents overlay and toast
 * confirmations. Structural host only — no open/close behaviour, no
 * focus trapping (explicitly out of scope for Stage 3).
 * ------------------------------------------------------------------- */
.sr-overlay-host {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none; /* Stage 3: structural host only, no open/close logic yet */
}

.sr-toast-host {
  position: fixed;
  bottom: var(--space-l);
  right: var(--space-l);
  z-index: var(--z-toast);
}

/* ---------------------------------------------------------------------
 * Structural mobile guarantee: no primitive above may introduce
 * horizontal scroll at any breakpoint.
 * ------------------------------------------------------------------- */
.sr-page-container,
.sr-main-content-wrapper,
.sr-full-width-section,
.sr-reading-column,
.sr-split-column-region {
  max-width: 100vw;
}