/* ------------------------------------------------------------------ legal pages

   Terms, Privacy, Data Processing, the PAIA Manual and the Legal Notice.
   Deliberately plain: one column of dark text on a white sheet, numbered
   clauses with hanging numbers, as a printed contract would be set. The
   numbers are written into the page, not generated, because the documents
   refer to each other by clause number and must print the same. Built on the
   landing page's top bar and footer. Always light. */

.legal-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.doc {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-card);
  padding: 48px 64px 40px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* The set of documents, as plain links. */
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-bottom: 18px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-hour);
  font-size: 14px;
}
.doc .doc-links a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.doc .doc-links a:hover { color: var(--ink); text-decoration: underline; }
.doc .doc-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.doc h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.doc-meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.doc-intro { margin: 24px 0 0; }
.doc-intro p { margin: 0 0 12px; }

/* Contents. */
.doc-toc {
  margin: 28px 0 8px;
  padding: 18px 22px;
  border: 1px solid var(--rule-hour);
  border-radius: var(--r-inner);
}
.doc .doc-toc h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 8px; }
.doc-toc ol { columns: 2 260px; column-gap: 32px; margin: 0; padding-left: 22px; font-size: 15px; }
.doc-toc li { break-inside: avoid; padding: 1px 0; }
.doc .doc-toc a { color: var(--ink); text-decoration: none; }
.doc .doc-toc a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ clauses */

.doc section { padding-top: 12px; scroll-margin-top: 84px; }
.doc h2 {
  margin: 26px 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}
.doc h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; letter-spacing: 0; }

/* Numbered clauses: the number hangs in the margin, the text lines up. */
.cl { list-style: none; margin: 0; padding: 0; }
.cl > li { position: relative; padding-left: 52px; margin: 0 0 10px; }
.cl > li::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
}
/* Paragraphs within a clause: (a), (b), (c). */
.sub { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: sub; }
.sub > li { position: relative; padding-left: 34px; margin: 0 0 6px; counter-increment: sub; }
.sub > li::before { content: '(' counter(sub, lower-alpha) ')'; position: absolute; left: 0; }
.sub.roman > li::before { content: '(' counter(sub, lower-roman) ')'; }

.doc p { margin: 0 0 10px; }
.doc strong { font-weight: 700; }
/* Clauses the Consumer Protection Act requires to be drawn to attention. */
.doc .conspicuous { font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em; }
.doc dfn { font-style: normal; font-weight: 700; }

.doc a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Plain ruled tables, for the details the law asks to be set out. */
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px; border: 1px solid var(--rule-hour); }
.doc th { width: 34%; font-weight: 700; background: var(--inset); }
.doc thead th { width: auto; }

.doc-end {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-hour);
  font-size: 14px;
  color: var(--ink-soft);
}
.doc-end p { margin: 0 0 4px; }

/* ------------------------------------------------------------------ narrower */

@media (max-width: 700px) {
  .legal-main { padding: 16px 10px 48px; }
  .doc { padding: 28px 20px 24px; font-size: 15.5px; }
  .doc h1 { font-size: 25px; }
  .cl > li { padding-left: 40px; }
  .sub > li { padding-left: 28px; }
  .doc table, .doc tbody, .doc tr, .doc th, .doc td { display: block; width: auto; }
  .doc tr { margin-bottom: 8px; }
  .doc th { border-bottom: 0; }
  .doc thead { display: none; }
}

/* ------------------------------------------------------------------ print */

@media print {
  .topnav, .sitefoot, .doc-links, .doc-toc { display: none; }
  body.landing { background: #fff; }
  .legal-main { padding: 0; max-width: none; }
  .doc { border: none; padding: 0; font-size: 11pt; }
  .doc a { color: inherit; }
  .cl > li { break-inside: avoid; }
}

/* The landing page's top bar without its section links, so the buttons need
   pushing to the right themselves. */
.legal .topnav-inner { justify-content: space-between; }