/* =============================================================================
   base.css — reset + global typography
   -----------------------------------------------------------------------------
   Encodes PHR's firm typographic rules (§2.07 of the guidelines):
   left-justified prose, no underlines, sentence case, generous spacing.
   ============================================================================ */

/* --- Minimal modern reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--top-chrome-height); /* keep anchored sections clear of the sticky top chrome */

  /* RESPONSIVE TYPE — Part 1 of 3: fluid root font size.
     -------------------------------------------------------------------------
     Every size in the site is expressed in `rem` (via the --fs-* / --space-*
     tokens). By scaling the root font-size itself we move ALL of them together
     with one knob, so the relative proportions between headings, body, labels
     and spacing stay locked at every viewport width — only the absolute size
     changes. This is the cheapest, highest-leverage half of the strategy.

     Why clamp(min, preferred, max):
       • the `rem` terms (0.9375rem floor, 1.0625rem ceiling) are anchored to the
         user's OWN default size, so browser zoom / accessibility font settings
         are still respected and amplified, never overridden.
       • the `0.28vw` term is the fluid part: it nudges the size up on wide
         screens and down on narrow ones, between the 15px floor and 17px ceiling.
     Keep this GENTLE — heading/section clamps below (h1, h2) add their own vw
     response on top, so an aggressive root scale would double-amplify them.
     Companion pieces: container-query card type (components.css) and the JS
     fit-to-box safety net (nav.js). */
  font-size: clamp(0.9375rem, 0.86rem + 0.28vw, 1.0625rem);
}

/* Respect users who ask for less motion (accessibility + brand calmness). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-serif);          /* body copy is serif (Georgia)     */
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* --- Headings: sans (Frutiger→Arial), tight, flush left ------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-align: left;                         /* RULE: headlines flush left too   */
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.75rem, 4.5vw, var(--fs-2xl)); /* 28px → 44px across viewport widths */
  text-wrap: pretty;  /* override balance — lets lines fill the full column width */
}
h2 { font-size: clamp(1.25rem, 3vw, var(--fs-xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); text-transform: none; }

/* --- Paragraphs & reading measure ----------------------------------------- */
p { max-width: var(--measure); }
p + p { margin-top: var(--space-3); }       /* RULE: a full line between paras   */

/* Prose is left-justified: full justified measure with the final line left. */
p,
li,
dd,
figcaption,
blockquote,
cite {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: auto;
}

/* --- Emphasis: italic/bold only, NEVER underline -------------------------- */
em     { font-style: italic; }
strong { font-weight: 700; }

/* --- Links: color-coded, underline only on hover (not by default) --------- */
a {
  color: var(--phr-red);
  text-decoration: none;
}
a:hover { text-decoration: underline; }     /* hover affordance, not permanent  */

/* --- Lists: round filled hanging bullets (§2.07) -------------------------- */
ul { list-style: none; padding: 0; max-width: var(--measure); }
ul li {
  position: relative;
  padding-left: 1.25em;                      /* room for the hanging bullet      */
  margin-top: var(--space-2);
}
ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 0.4em; height: 0.4em;
  background: var(--phr-red);                /* round, filled                    */
  border-radius: 50%;
}

/* --- Visible keyboard focus everywhere (accessibility) -------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* --- Utility: visually hide but keep for screen readers ------------------- */
.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;
}