/* ==================================================
   PRIVACYBELEID

   Een leespagina, geen landingspagina: smallere regels
   (zo'n 75 tekens), rustiger koppen dan in de rest van
   de site en links die je in lopende tekst ook echt
   herkent als link.
================================================== */

.legal__inner {
  /* smaller dan de gewone container: prettiger leesbaar */
  max-width: 46rem;
}

/*
 * Eén ritmeregel voor de hele pagina. Koppen krijgen
 * daarbovenop extra lucht, zodat de hoofdstukken van
 * elkaar los komen.
 */
.legal__inner > * + * {
  margin-top: var(--content-gap-m);
}

.legal__inner > h2 {
  margin-top: var(--space-xl);
  font-size: var(--h3);
}

.legal__inner > h3 {
  margin-top: var(--space-l);
  font-size: var(--h4);
}

.legal__inner a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal__inner a:hover {
  color: var(--secondary-hover);
}


/* kop van de pagina */

.legal__meta {
  margin-top: var(--content-gap-s);

  color: var(--ink-muted);
  font-size: var(--text-small);
}

.legal__lead {
  margin-top: var(--content-gap-l);

  font-size: calc(var(--text) * 1.1);
  line-height: 1.6;
}


/* adresblok */

.legal__contact {
  padding: var(--content-gap-m) var(--content-gap-l);

  background-color: var(--surface);

  border-radius: var(--radius);

  line-height: 1.9;
}


/* opsommingen */

.legal__list {
  display: grid;
  gap: var(--content-gap-s);

  padding-left: 1.25em;

  font-size: var(--text);
}

.legal__list li::marker {
  color: var(--secondary);
}


/* tabellen: mag schuiven, maar de pagina niet */

.legal__table-wrap {
  overflow-x: auto;
}

.legal__table {
  width: 100%;

  border-collapse: collapse;

  font-size: var(--text-small);
  text-align: left;
}

.legal__table th,
.legal__table td {
  padding: var(--content-gap-s) var(--content-gap-m);

  border-bottom: var(--hairline);

  vertical-align: top;
}

.legal__table thead th {
  background-color: var(--surface);

  font-weight: 600;
}

.legal__table td:first-child {
  font-weight: 600;
}

.legal__table tbody tr:last-child td {
  border-bottom: none;
}


/* ==================================================
   SMAL SCHERM

   Onder de 480px is een tabel met twee kolommen niet
   meer te lezen: de eerste kolom wordt dan een smalle
   sliert. De rijen worden daarom blokjes, met het label
   boven de waarde.
================================================== */

@media (max-width: 30rem) {

  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td {
    display: block;
  }

  .legal__table thead {
    display: none;
  }

  .legal__table tr {
    padding-block: var(--content-gap-s);

    border-bottom: var(--hairline);
  }

  .legal__table tbody tr:last-child {
    border-bottom: none;
  }

  .legal__table td {
    padding: 0;

    border: none;
  }

  .legal__table td:first-child {
    margin-bottom: 0.2em;
  }

}