/* Reading layout + type system for the three Juridisk pages
   (personvernerklæring, brukervilkår, informasjonskapsler). Injected by
   lib/site/legal-render.ts, so it loads on those three routes only.
 *
 * These pages reuse a mirrored Webflow section that was built for short
 * marketing copy, not multi-thousand-word documents. Three things followed
 * from that and are corrected here:
 *   - `.container-large-10.centered` is a centered flex ROW, so the page title
 *     was laid out beside the body column instead of above it, vertically
 *     centered against a column thousands of pixels tall.
 *   - `.h1` paints `--white-100`, invisible on the section's white background.
 *   - `.rte` sizes headings as em multiples of the inherited body size
 *     (2.44/1.95/1.56/1.25/1.125em) and inherits `body`'s 1.3em leading, so
 *     the steps land nowhere on the brand scale and long prose runs dense.
 *
 * So the wrapper markup drops those two classes for `.legal-doc` (see each
 * page's template.json) and this file owns the whole reading layout: one
 * centered measure, one modular scale, and leading that loosens as text gets
 * smaller. Sizes/spacing are tokens on `.legal-doc`; mobile-first, with the
 * desktop step-up rebinding only the token values. Colour and family come
 * from the brand tokens in the Webflow stylesheet's `:root`. */

.legal-doc {
  /* Type scale: ~1.25 per step off the brand mobile paragraph size (16px),
     compressing towards the small end where headings need weight, not size,
     to read as headings. h5 is body-sized by design. */
  --legal-text-size: var(--_sizing---mobile-paragraph-size, 1rem);
  --legal-h5-size: var(--_sizing---mobile-paragraph-size, 1rem);
  --legal-h4-size: 1.125rem;
  --legal-h3-size: 1.25rem;
  --legal-h2-size: 1.5625rem;
  --legal-h1-size: 2rem;

  /* Weight carries rank where size can't: big headings can stay light, small
     ones need the extra weight. The mirrored stylesheet pins `h1`, `h2` and
     `a` with `font-variation-settings`, which wins over `font-weight` on a
     variable font -- every rule below resets it to `normal` so these three
     values are the only thing deciding weight on these pages. */
  --legal-heading-weight: 500;
  --legal-subheading-weight: 600;
  --legal-text-weight: 400;

  /* Leading loosens as text gets smaller: long prose gets air, headings stay
     tight so a two-line heading still reads as one object. */
  --legal-text-leading: 1.65;
  --legal-h5-leading: 1.45;
  --legal-h4-leading: 1.4;
  --legal-h3-leading: 1.3;
  --legal-h2-leading: 1.25;
  --legal-h1-leading: 1.15;

  /* Vertical rhythm, all multiples of the paragraph gap. Space above a heading
     scales with its rank; space below it stays small at every rank, so a
     heading always binds to the text it introduces. */
  --legal-flow-gap: 1.25rem;
  --legal-heading-gap: 0.5rem;
  --legal-h4-space: 1.75rem;
  --legal-h3-space: 2rem;
  --legal-h2-space: 2.5rem;
  --legal-title-space: 2rem;

  /* ~65 characters at the body size -- inside the 50-75 band that keeps the
     eye from losing its place on a document this long. */
  --legal-measure: 44rem;

  width: 100%;
  max-width: var(--legal-measure);
  /* The parent section is a centered flex column, which centres this measure
     in the viewport; `auto` keeps it centred if that ever changes. */
  margin-inline: auto;
  color: var(--dark-100);
  font-family: var(--font);
  /* Prose stays ranged left inside the centred measure: centred body text
     gives every line a different starting edge, which is what makes long
     documents hard to scan. */
  text-align: left;
}

@media screen and (min-width: 768px) {
  .legal-doc {
    --legal-text-size: var(--_sizing---paragraph-size, 1.125rem);
    --legal-h5-size: var(--_sizing---paragraph-size, 1.125rem);
    --legal-h4-size: 1.375rem;
    --legal-h3-size: 1.75rem;
    --legal-h2-size: 2.1875rem;
    --legal-h1-size: 2.75rem;

    --legal-flow-gap: 1.5rem;
    --legal-heading-gap: 0.625rem;
    --legal-h4-space: 2rem;
    --legal-h3-space: 2.5rem;
    --legal-h2-space: 3.25rem;
    --legal-title-space: 3rem;
  }
}

/* ---- page title ---------------------------------------------------------- */

.legal-doc-title {
  margin: 0 0 var(--legal-title-space);
  color: var(--dark-100);
  font-size: var(--legal-h1-size);
  font-variation-settings: normal;
  font-weight: var(--legal-heading-weight);
  line-height: var(--legal-h1-leading);
  letter-spacing: -0.02em;
}

/* ---- document body ------------------------------------------------------- */

/* `.rte` caps itself at 65% of its parent; the measure is this column's job. */
.legal-doc .rte {
  max-width: none;
  font-size: var(--legal-text-size);
  line-height: var(--legal-text-leading);
}

.legal-doc .rte p,
.legal-doc .rte ul,
.legal-doc .rte ol {
  margin: 0 0 var(--legal-flow-gap);
  font-size: var(--legal-text-size);
  font-variation-settings: normal;
  font-weight: var(--legal-text-weight);
  line-height: var(--legal-text-leading);
}

.legal-doc .rte h2,
.legal-doc .rte h3,
.legal-doc .rte h4,
.legal-doc .rte h5 {
  margin-bottom: var(--legal-heading-gap);
  color: var(--dark-100);
  font-variation-settings: normal;
  letter-spacing: -0.01em;
}

.legal-doc .rte h2 {
  margin-top: var(--legal-h2-space);
  font-size: var(--legal-h2-size);
  font-weight: var(--legal-heading-weight);
  line-height: var(--legal-h2-leading);
}

.legal-doc .rte h3 {
  margin-top: var(--legal-h3-space);
  font-size: var(--legal-h3-size);
  font-weight: var(--legal-subheading-weight);
  line-height: var(--legal-h3-leading);
}

.legal-doc .rte h4 {
  margin-top: var(--legal-h4-space);
  font-size: var(--legal-h4-size);
  font-weight: var(--legal-subheading-weight);
  line-height: var(--legal-h4-leading);
}

/* Body-sized, so weight and tracking carry the rank instead. Not reachable
   from the Studio's style list today (blockContent stops at H4) -- defined so
   the scale stays complete if it is added. */
.legal-doc .rte h5 {
  margin-top: var(--legal-h4-space);
  font-size: var(--legal-h5-size);
  font-weight: var(--legal-subheading-weight);
  line-height: var(--legal-h5-leading);
  letter-spacing: 0;
}

/* A heading opening the document shouldn't push itself off the title. */
.legal-doc .rte > :is(h2, h3, h4, h5):first-child {
  margin-top: 0;
}

.legal-doc .rte > :last-child {
  margin-bottom: 0;
}

/* ---- lists --------------------------------------------------------------- */

/* The base stylesheet lays lists out as flex columns with a 6px gap, so item
   spacing is the gap rather than a margin. */
.legal-doc .rte ul,
.legal-doc .rte ol {
  row-gap: 0.5rem;
  padding-left: 1.4em;
}

.legal-doc .rte li {
  font-size: var(--legal-text-size);
  font-variation-settings: normal;
  font-weight: var(--legal-text-weight);
  line-height: var(--legal-text-leading);
}

/* ---- inline -------------------------------------------------------------- */

/* The site's `a` rule bumps links to wght 550, a visible jump against 400
   prose. The underline already marks them, so they read at prose weight. */
.legal-doc .rte a {
  color: var(--dark-100);
  font-variation-settings: normal;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.legal-doc .rte a:hover {
  color: var(--dark-50);
}

.legal-doc .rte a:focus-visible {
  outline: 2px solid var(--dark-100);
  outline-offset: 2px;
}