/*
 * Privacyverklaring.
 *
 * Een leespagina, geen verkooppagina: geen foto, een smalle tekstkolom en een
 * inhoudsopgave ernaast. De kop is donker zodat de koptekst van de site er net
 * zo over valt als over een hero; daarom dezelfde ruimte bovenin.
 */

.rix-privacy__kop {
  background: var(--rix-ink);
  color: var(--rix-white);
  padding-block: 130px 48px;
}

.rix-privacy .rix-privacy__kop h1 {
  color: var(--rix-white);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1;
  margin-block: 14px 18px;
}

.rix-privacy__intro {
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  opacity: .9;
}

.rix-privacy__datum {
  margin-block-start: 18px;
  font-size: var(--rix-size-small);
  opacity: .65;
}

.rix-privacy__waarschuwing {
  margin-block-start: 20px;
  padding: 12px 16px;
  max-width: 60ch;
  background: var(--rix-orange);
  color: var(--rix-white);
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-small);
  border-radius: var(--rix-radius-button);
}

/* --- Opzet: inhoud en tekst ------------------------------------------------ */

.rix-privacy__opzet {
  display: grid;
  gap: var(--rix-gap);
  padding-block: 48px var(--rix-section-y-sm);
}

.rix-privacy__inhoud {
  padding: 20px 22px;
  background: var(--rix-surface-soft);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  align-self: start;
}

.rix-privacy__inhoud-kop {
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rix-ink-soft);
  margin-block-end: 10px;
}

.rix-privacy__inhoud ol {
  margin: 0;
  padding-inline-start: 1.25em;
  display: grid;
  gap: 6px;
  font-size: var(--rix-size-small);
}

.rix-privacy__inhoud a {
  color: var(--rix-heading);
  text-decoration: none;
}

.rix-privacy__inhoud a:hover { color: var(--rix-orange-dark); text-decoration: underline; }

/* --- Lopende tekst --------------------------------------------------------- */

.rix-privacy__tekst {
  max-width: 68ch;
  font-size: var(--rix-size-body);
  line-height: 1.65;
  color: var(--rix-text);
}

.rix-privacy__tekst section + section {
  margin-block-start: 44px;
  padding-block-start: 36px;
  border-block-start: 1px solid var(--rix-line);
}

/* Een ankerlink springt anders onder de koptekst. */
.rix-privacy__tekst section { scroll-margin-top: 110px; }

.rix-privacy .rix-privacy__tekst h2 {
  font-size: var(--rix-size-h2);
  max-width: none;
  margin-block-end: 14px;
}

.rix-privacy__tekst p + p,
.rix-privacy__tekst p + ul,
.rix-privacy__tekst ul + p,
.rix-privacy__tekst p + table,
.rix-privacy__tekst dl + p { margin-block-start: 12px; }

.rix-privacy__tekst ul {
  margin: 12px 0 0;
  padding-inline-start: 1.25em;
  display: grid;
  gap: 4px;
}

.rix-privacy__tekst a { color: var(--rix-blue-dark); }

.rix-privacy__gegevens {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 16px 0 0;
}

.rix-privacy__gegevens dt {
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-small);
  color: var(--rix-ink-soft);
}

.rix-privacy__gegevens dd { margin: 0; }

/* Bewaartermijnen: op een telefoon mag de tabel zijwaarts scrollen in plaats
   van de hele pagina te verbreden. */
.rix-privacy__tabel {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rix-size-small);
}

.rix-privacy__tabel th,
.rix-privacy__tabel td {
  text-align: start;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-block-end: 1px solid var(--rix-line);
}

.rix-privacy__tabel th {
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  color: var(--rix-ink-soft);
}

.rix-privacy__tabel td:first-child { min-width: 14ch; }

/* Een open punt moet opvallen: dit mag niet ongemerkt live gaan. */
.rix-privacy__open {
  background: #FFE7CC;
  color: var(--rix-heading);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: .875em;
  white-space: normal;
}

/* De knop voor cookiekeuzes staat op een lichte ondergrond, niet op een foto. */
.rix-privacy .rix-privacy__tekst .rix-home__button--ghost {
  color: var(--rix-heading);
  box-shadow: inset 0 0 0 1px var(--rix-line);
  margin-inline-start: 0;
  margin-block-start: 8px;
  cursor: pointer;
}

.rix-privacy .rix-privacy__tekst .rix-home__button--ghost:hover {
  background: var(--rix-surface-soft);
  box-shadow: inset 0 0 0 1px var(--rix-orange);
}

.rix-privacy a:focus-visible,
.rix-privacy button:focus-visible { outline: var(--rix-focus); outline-offset: 2px; }

@media (min-width: 900px) {
  .rix-privacy__kop { padding-block: 170px 64px; }

  .rix-privacy__opzet {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 64px;
    padding-block: 64px var(--rix-section-y);
  }

  .rix-privacy__inhoud { position: sticky; top: 24px; }
}