/* An embedded LaTeX document, in the house style.
 *
 * The markup comes from tex4ht via doc/legal, so this file styles somebody
 * else's class names. Two kinds appear:
 *
 *   regulatory-*   ours, emitted by regulatory.4ht. Stable, and safe to hang
 *                  layout on.
 *   indent, noindent, td01, rm-lmr-17x-x-143, ...
 *                  tex4ht's own. The first two are meaningful (paragraph
 *                  indentation); the font-name ones are print artefacts that
 *                  carry no meaning on a screen and are deliberately ignored
 *                  rather than translated -- matching a name like
 *                  `rm-lmr-17x-x-143` would tie this stylesheet to a font size
 *                  in a PDF.
 *
 * No hex values, as everywhere: every colour is a token from the generated
 * tokens.css, so the legal pages went through the same contrast gate as the
 * rest of the site.
 */

.document .wrap { max-width: 52rem; }

.document > .wrap > h1 { margin-bottom: 0.3em; }
.document .lede { margin-bottom: 2rem; }

.document-body {
  /* Slightly narrower measure than the marketing pages. This is long-form text
   * somebody reads top to bottom rather than scans, and the comfortable line
   * length for that is shorter. */
  max-width: 46rem;
  line-height: 1.7;
}

/* -- articles and paragraphs --------------------------------------------- */

.regulatory-article {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.regulatory-article:first-of-type { border-top: 0; margin-top: 1rem; }

.regulatory-article-heading {
  font-size: 1.25rem;
  margin-bottom: 0.6em;
}

/* The number is set apart visually but stays inside the heading, so a screen
 * reader announces "Artikel 3. Doeleinden van de verwerking" as one heading --
 * which is what it is. Colour is not the only cue: it is also bolder. */
.regulatory-article-number {
  color: var(--accent-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.regulatory-para { margin-top: 1.75rem; }

.regulatory-para-heading {
  font-size: 1.05rem;
  margin-bottom: 0.4em;
}
.regulatory-para-number {
  color: var(--accent-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* -- tex4ht's own classes ------------------------------------------------ */

/* TeX indents a paragraph that follows another and does not indent the first.
 * On screen that convention reads as an accident, so paragraphs are separated
 * by space instead -- the same signal, in the idiom of the medium. */
.document-body p.indent,
.document-body p.noindent {
  text-indent: 0;
  margin: 0 0 1em;
}

.document-body ul,
.document-body ol { padding-left: 1.5rem; margin: 0 0 1em; }
.document-body li { margin-bottom: 0.4rem; }

/* The definition lists regulatory's `paras` environment produces: a numbered
 * term followed by its clause. Rendered as a two-column grid so the numbers
 * line up and the text has a straight left edge to read down. */
.document-body dl {
  display: grid;
  grid-template-columns: minmax(2.75rem, auto) 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1em;
}
.document-body dt {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.document-body dd { margin: 0; }

/* Contact details and similar tables. tex4ht emits a real <table>; give it
 * room rather than borders -- these are two-column key/value blocks, not data
 * that needs a grid. */
.document-body table {
  border-collapse: collapse;
  margin: 0 0 1em;
}
.document-body td {
  padding: 0.15rem 1rem 0.15rem 0;
  vertical-align: top;
}

/* A wide table must scroll inside its own box rather than pushing the page
 * sideways; a horizontally scrolling page is unusable on a phone. */
.document-body { overflow-x: auto; }

/* In-document cross-references ("zie artikel 3"). Underlined, because a link
 * distinguished by colour alone is invisible to a reader who does not see the
 * colour. */
.document-body a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Where a clause is linked to, mark it briefly on arrival so the reader can see
 * which one they were sent to -- a numbered clause in a wall of numbered
 * clauses is otherwise hard to find. :target only, so nothing moves unless the
 * visitor followed a link to it. */
.regulatory-article:target,
.regulatory-para:target {
  background: var(--surface);
  outline: 2px solid var(--accent-ink);
  outline-offset: 0.5rem;
  border-radius: 2px;
}

/* -- the definitions article --------------------------------------------- */

/* Terms are words, not numbers, so this list does not get the narrow first
 * column the numbered `paras` lists use. On a phone the two-column grid would
 * squeeze "Onderhoudsovereenkomst" into a sliver, so the term goes above its
 * description instead and the pair is held together by indentation. */
.document-body dl.regulatory-definitions {
  display: block;
  margin: 1.5rem 0;
}

.regulatory-definitions dt {
  font-weight: 650;
  color: var(--brand-ink);
  margin-top: 1rem;
}
.regulatory-definitions dt:first-of-type { margin-top: 0; }

.regulatory-definitions dd {
  margin: 0.2rem 0 0 1.25rem;
  /* A definition is where a reader stops to check a meaning, so it gets a
   * visible edge to return to rather than blending into the running text. */
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
}
.regulatory-definitions dd p { margin: 0; }