/* =========================================================================
   BAR BONAMY — juridische pagina's (algemene voorwaarden + privacyverklaring)
   Gedeeld door /algemene-voorwaarden/ en /privacy/.

   Bewust géén data-reveal op de lopende tekst: juridische tekst moet ook
   leesbaar zijn als JavaScript niet werkt. Alleen de paginakop gebruikt het,
   net als op de andere pagina's.
   ========================================================================= */

.legal {
  padding: 0 var(--sp-md) var(--sp-2xl);
}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Intro-blok boven de artikelen ---------- */
.legal__intro {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--c-cream-soft);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-hairline);
}
.legal__updated {
  display: block;
  margin-top: var(--sp-sm);
  font-size: var(--fs-small);
  color: var(--c-text-dim);
}

/* ---------- Bedrijfsgegevens ---------- */
.legal__company {
  margin: var(--sp-md) 0 0;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-bg-700);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-cream-soft);
}
.legal__company dt {
  display: inline;
  color: var(--c-text-dim);
}
.legal__company dt::after { content: ' '; }
.legal__company dd {
  display: inline;
  margin: 0;
}
.legal__company dd::after {
  content: '';
  display: block;
}

/* ---------- Artikelen ---------- */
.legal__article {
  margin-top: var(--sp-lg);
  /* ruimte onder de vaste header bij het springen vanuit de inhoudsopgave */
  scroll-margin-top: 100px;
}
.legal__article h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--c-cream);
  margin-bottom: var(--sp-xs);
}
.legal__article h3 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-cream);
  margin: var(--sp-sm) 0 var(--sp-2xs);
}
.legal__article p,
.legal__article li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-cream-soft);
}
.legal__article p + p { margin-top: var(--sp-xs); }
.legal__article ul,
.legal__article ol {
  margin: var(--sp-xs) 0 0;
  padding-left: 1.3em;
}
.legal__article li + li { margin-top: var(--sp-2xs); }
.legal__article li::marker { color: var(--c-accent); }
.legal__article a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal__article strong { color: var(--c-cream); }

/* ---------- Opvallend kader (bijv. annuleringsstaffel) ---------- */
.legal__callout {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-bg-700);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal__callout ul { margin: 0; padding-left: 1.1em; }

/* ---------- Inhoudsopgave ---------- */
.legal__toc {
  margin-top: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-bg-700);
  border-radius: var(--radius-sm);
}
.legal__toc p {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-xs);
}
.legal__toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: var(--sp-md);
}
.legal__toc li {
  font-size: var(--fs-small);
  line-height: 1.9;
  break-inside: avoid;
}
.legal__toc a {
  color: var(--c-cream-soft);
  text-decoration: none;
}
.legal__toc a:hover { color: var(--c-accent); }

@media (max-width: 720px) {
  .legal { padding: 0 var(--sp-sm) var(--sp-xl); }
  .legal__article { margin-top: var(--sp-md); }
  .legal__company { padding: var(--sp-sm); }
  .legal__toc ol { columns: 1; }
}