/* ==========================================================================
   Juridische pagina's (templates/template-juridisch.php)
   ========================================================================== */

.legal {
  padding-block: var(--section-mobile);
  background: var(--bg);
  color: var(--fg-1);
}

.legal__grid {
  display: grid;
  gap: var(--space-12);
}

.legal__label {
  margin-bottom: var(--space-4);
  color: var(--fg-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

/* Documentmenu: huidige pagina met petrol stip. -------------------------- */

.legal__docs-list {
  padding: 0;
  border-top: var(--border-width) solid var(--border);
  list-style: none;
}

.legal__docs-list a {
  position: relative;
  display: block;
  padding-block: var(--space-3);
  padding-right: var(--space-6);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--fg-body);
  font-size: var(--fs-small);
  text-decoration: none;
}

.legal__docs-list a:hover {
  color: var(--accent);
}

.legal__docs-list [aria-current="page"] {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}

.legal__docs-list [aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-1);
  width: 5px; /* kleine stip, ontwerp */
  height: 5px;
  margin-top: -2.5px;
  border-radius: var(--radius-round);
  background: var(--accent);
}

/* Inhoudsopgave: alleen vanaf 1024px. ------------------------------------ */

.legal__toc {
  display: none;
}

.legal__toc-list {
  padding: 0;
  counter-reset: legal-toc;
  list-style: none;
}

.legal__toc-list li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  padding-block: var(--space-1);
  font-size: var(--fs-ui);
  counter-increment: legal-toc;
}

.legal__toc-list li::before {
  content: counter(legal-toc, decimal-leading-zero);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  line-height: 1.9;
}

.legal__toc-list a {
  color: var(--fg-body);
  text-decoration: none;
}

.legal__toc-list a:hover {
  color: var(--accent);
}

/* Tekstkolom: gewone blokken uit de editor. ------------------------------- */

.legal__content {
  max-width: 68ch;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--fg-1);
  counter-reset: legal-article;
  color: var(--fg-body);
  line-height: var(--lh-relaxed);
}

.legal__content > * + * {
  margin-top: var(--space-4);
}

/* Artikel: nummer in petrol vóór de kop, lijn erboven (behalve de eerste). */
.legal__content h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: var(--border-width) solid var(--border);
  color: var(--fg-1);
  font-size: var(--fs-card);
  line-height: var(--lh-snug);
  counter-increment: legal-article;
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.legal__content h2::before {
  content: counter(legal-article, decimal-leading-zero);
  flex: none;
  color: var(--accent);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}

.legal__content > h2:first-child {
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: 0;
}

.legal__content h3 {
  margin-top: var(--space-6);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: var(--fs-body);
}

.legal__content p {
  max-width: none;
}

.legal__content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__content strong {
  color: var(--fg-1);
}

/* Lijsten met korte streepjes. */
.legal__content ul {
  padding: 0;
  list-style: none;
}

.legal__content ul li {
  position: relative;
  padding-left: var(--space-5);
}

.legal__content ul li + li {
  margin-top: var(--space-2);
}

.legal__content ul li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: var(--space-2);
  height: var(--border-width);
  background: var(--fg-1);
}

.legal__content ol {
  padding-left: var(--space-5);
}

/* Definities: term op eigen regel, omschrijving eronder. */
.legal__content dl {
  margin-top: var(--space-4);
}

.legal__content dt {
  margin-top: var(--space-4);
  color: var(--fg-1);
  font-family: var(--font-display);
}

.legal__content dt:first-child {
  margin-top: 0;
}

.legal__content dd {
  margin: 0;
}

/* Contactkader: extra CSS-class "legal-box" in de editor. */
.legal__content .legal-box {
  padding: var(--space-5) var(--space-6);
  background: var(--bg-warm);
}

@media (min-width: 48em) {
  .legal {
    padding-block: var(--section-m);
  }
}

@media (min-width: 64em) {
  .legal__grid {
    grid-template-columns: 18.75rem minmax(0, 1fr); /* 300px, ontwerp */
    align-items: start;
    gap: var(--gap-split);
  }

  .legal__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }

  .legal__toc {
    display: block;
    margin-top: var(--space-10);
  }
}