/* ==========================================================================
   Booth Kings — juridische pagina's (algemene voorwaarden, privacyverklaring)

   Alleen ingeladen door algemene-voorwaarden.html en privacy-statement.html,
   zodat de cache-bust van main.css (?v=N op 47 pagina's) hier buiten schot
   blijft. Bouwt voort op de tokens uit main.css.

   Uitgangspunt: dit zijn lange leesdocumenten, geen marketingpagina's. Dus een
   smalle regelbreedte (~70 tekens), rustige verticale ritmiek en koppen die
   duidelijk bij hun tekst horen.
   ========================================================================== */

/* De kaart is net zo breed als de rest van de site (.container, 1200px). De
   lópende tekst blijft daarbinnen op leesbreedte — een regel van 130 tekens
   leest niet, en dit document is 21 artikelen lang. Vandaar: brede kaart,
   gecentreerde tekstkolom. */
.legal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 60px 64px 56px;
  font-size: 1.0625rem;

  /* Eén gecentreerde kolom van leesbreedte. Via grid en niet via margin-inline:
     auto op de kinderen, want die zetten verderop hun eigen margin-shorthand en
     zouden de centrering stilletjes overschrijven. */
  display: grid;
  grid-template-columns: minmax(0, 940px);
  justify-content: center;
}

.legal p,
.legal li {
  color: var(--text-muted);
  line-height: 1.8;
}

.legal p { margin: 0 0 1.15em; }
.legal p:last-child { margin-bottom: 0; }

.legal strong { color: var(--text); font-weight: 600; }

.legal a:not(.btn) {
  color: var(--brand-light);
  text-underline-offset: 3px;
}

/* --- documentkop: versie, inleiding, download -------------------------- */

.terms__head {
  padding-bottom: 34px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.terms__meta {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  margin: 0 0 1.4em;
}

.terms__intro { font-size: 1.09rem; }

.terms__actions { margin: 26px 0 0; }

/* --- inhoudsopgave ------------------------------------------------------ */

.terms__toc {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 34px;
  margin: 34px 0 8px;
}

.terms__toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}

.terms__toc ol {
  margin: 0;
  padding-left: 1.6em;
  columns: 2;
  column-gap: 44px;
  font-size: 0.97rem;
}

.terms__toc li {
  margin: 0 0 11px;
  break-inside: avoid;
  color: var(--text-faint);
  line-height: 1.5;
}

.terms__toc li::marker { color: var(--text-faint); }

/* main.css onderstreept links in lopende tekst (WCAG 1.4.1: niet op kleur
   leunen). Een inhoudsopgave is navigatie — élk item is een link, dus er valt
   niets te verwarren — en 21 onderstreepte regels leest als een muur. Vandaar
   deze even zware selector; onderstreping komt terug bij hover en focus. */
.legal nav.terms__toc li > a[href]:not(.btn):not([class*="btn"]):not(.nav__dropdown-link) {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.terms__toc a:hover,
.terms__toc a:focus-visible {
  color: var(--brand-light);
  text-decoration: underline;
}

/* --- artikelkoppen ------------------------------------------------------ */

.terms__title {
  display: flex;
  gap: 0.45em;
  align-items: baseline;
  margin: 3.4rem 0 1.15rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
  font-size: 1.28rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
  scroll-margin-top: 104px;   /* sticky nav niet over de kop bij een #anker */
}

.terms__num {
  flex: none;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* Eerste kop hoeft geen scheidingslijn: de documentkop staat er al boven. */
.terms__title:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 2.6rem;
}

.terms__subtitle {
  margin: 2em 0 0.7em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* --- opsommingen -------------------------------------------------------- */

.terms__list {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
  list-style: disc;    /* main.css zet ul { list-style: none } globaal */
}

.terms__list li { margin-bottom: 0.75em; }
.terms__list li:last-child { margin-bottom: 0; }
.terms__list li::marker { color: var(--brand); }

/* Twee lijsten onder elkaar (zoals bij de locatie-eisen) horen als één blok
   te lezen, niet als twee losse lijstjes. */
.terms__list + .terms__list { margin-top: -0.35em; }

/* --- uitgelicht kader --------------------------------------------------- */

.terms__note {
  border-left: 3px solid var(--brand);
  background: rgba(255, 186, 0, 0.07);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 1.6em 0;
  color: var(--text) !important;
  font-weight: 500;
}

/* --- tabellen (annuleringsstaffel, bewaartermijnen) --------------------- */

.terms__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3em 0 1.5em;
  font-size: 0.97rem;
}

.terms__table th,
.terms__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text-muted);
  line-height: 1.55;
}

.terms__table thead th {
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: 9px;
}

.terms__table tbody th { font-weight: 400; }
.terms__table tbody tr:last-child th,
.terms__table tbody tr:last-child td { border-bottom: 0; }

/* Cijferkolom (annuleringsstaffel): rechts uitgelijnd en nadrukkelijk. */
.terms__table--figures td {
  text-align: right;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

/* --- mobiel ------------------------------------------------------------- */

@media (max-width: 720px) {
  .legal {
    padding: 30px 22px 26px;
    border-radius: 20px;
    font-size: 1rem;
  }

  .terms__head { padding-bottom: 26px; }
  .terms__intro { font-size: 1.02rem; }

  .terms__toc {
    padding: 22px 20px;
    margin: 26px 0 4px;
  }
  .terms__toc ol { columns: 1; padding-left: 1.5em; }

  .terms__title {
    margin: 2.6rem 0 1rem;
    padding-top: 1.7rem;
    font-size: 1.14rem;
    scroll-margin-top: 84px;
  }
  .terms__title:first-of-type { margin-top: 2rem; }

  .terms__table { font-size: 0.92rem; }
  .terms__table th,
  .terms__table td { padding: 10px 8px; }
  .terms__note { padding: 15px 17px; }
}