/* ==========================================================================
   Privacy Policy — long-form legal text
   ========================================================================== */

/* The measure is constrained on the content, not on .container. Narrowing the
   container instead would re-centre it — .container is `margin-inline: auto` —
   and the body text would drift right while the hero title above stayed on the
   container's left edge. Every other page on the site starts its content at
   that edge, so the column hangs off it here too and only the line length is
   capped. 68ch is the upper end of comfortable for continuous prose; the
   Bulgarian text sets slightly wider than the English at the same count. */
.legal__updated,
.legal__intro,
.legal__section {
  max-width: 68ch;
}

.legal__updated {
  color: var(--brand-brass);
  margin-bottom: var(--space-2);
}

.legal__intro {
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline);
}

.legal__section {
  margin-top: var(--space-6);
}

.legal__heading {
  margin-bottom: var(--space-3);
}

/* The number is decoration, not list semantics — these are <section>s, and a
   screen reader should hear the heading, not "item 3 of 8". */
.legal__number {
  color: var(--brand-brass);
}

.legal__text + .legal__text,
.legal__list + .legal__text,
.legal__text + .legal__list {
  margin-top: var(--space-3);
}

/* base/reset.css strips padding and markers from every classed list via
   `ul[class]`, which is specificity 0-1-1 — a bare `.legal__list` at 0-1-0
   loses to it and the bullets never appear. Qualifying with the tag matches
   that specificity, and this sheet loads after main.css, so it wins the tie.
   Spacing is margin between siblings rather than a flex column with `gap`:
   flex items lose `display: list-item`, which would drop the markers again by
   a different route. */
ul.legal__list {
  padding-left: var(--space-4);
  list-style: disc;
}

.legal__item + .legal__item {
  margin-top: var(--space-2);
}

.legal__item::marker {
  color: var(--brand-brass);
}

/* Legal text is dense with links, and underlining them all would stripe the
   page. Merlot carries the affordance; the underline firms up on interaction. */
.legal__link {
  color: var(--brand-merlot);
  text-decoration-color: var(--color-outline-variant);
  text-underline-offset: 0.2em;
}
.legal__link:hover,
.legal__link:focus-visible {
  text-decoration-color: currentColor;
}