/* Privacy- en cookieverklaring, in de opzet van de verklaring op nedbase.nl:
   beige kop over de hele schermbreedte, daaronder per onderdeel de kop links
   en de tekst rechts. */

.legal-hero {
  position: relative;
  padding: 220px var(--gutter-text) var(--spacing-96);
  background: var(--nb-beige);
}

.legal-hero__content {
  max-width: 1080px;
}

/* Ingetogen dot-link i.p.v. een pill-knop, zodat de aandacht bij de titel blijft. */
.legal-hero__preferences {
  margin-bottom: var(--spacing-24);
}

.legal-hero__preferences:hover {
  color: var(--nb-salmon);
}

.legal-hero__title {
  margin: 0 0 var(--spacing-40);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-60);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--nb-salmon);
}

/* Body L uit het design system (CLAUDE.md §2.3). */
.legal-hero__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-22);
  line-height: 32px;
  letter-spacing: var(--letter-spacing-body);
  color: var(--nb-ink);
}

.legal-hero__intro p {
  margin: 0 0 var(--spacing-20);
}

.legal-hero__intro a,
.legal-page a {
  color: var(--nb-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-hero__intro a:hover,
.legal-page a:hover {
  color: var(--nb-salmon);
}

.legal-hero__updated {
  margin: var(--spacing-28) 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-15);
  letter-spacing: var(--letter-spacing-body);
  color: var(--nb-border-25);
}

.legal-page {
  max-width: var(--width-card);
  margin: 0 auto;
  padding: var(--spacing-40) var(--gutter-text) var(--spacing-120);
}

.legal-page__back {
  margin-bottom: var(--spacing-60);
}

.legal-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--spacing-60);
}

.legal-section + .legal-section {
  margin-top: var(--spacing-96);
}

.legal-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-28);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--nb-salmon);
}

.legal-section__body {
  max-width: 780px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-18);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-body);
  color: var(--nb-ink);
}

.legal-section__body h3 {
  margin: var(--spacing-32) 0 var(--spacing-8);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-20);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
}

.legal-section__body p,
.legal-section__body ul {
  margin: 0 0 var(--spacing-20);
}

.legal-section__body > :last-child {
  margin-bottom: 0;
}

.legal-section__body ul {
  padding: 0;
  list-style: none;
}

.legal-section__body li {
  position: relative;
  margin-bottom: var(--spacing-10);
  padding-left: var(--spacing-32);
}

/* De coral punt als lijst-marker (CLAUDE.md §2.8). */
.legal-section__body li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nb-salmon);
}

.legal-section__body strong {
  font-weight: 600;
}

/* Footer op elke pagina, met het linkje naar de verklaring. */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-24);
  max-width: var(--width-card);
  margin: 0 auto;
  padding: var(--spacing-24) var(--spacing-60) var(--spacing-40);
  border-top: var(--border-width) solid var(--nb-border);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-14);
  letter-spacing: var(--letter-spacing-body);
  color: var(--nb-border-25);
}

.site-footer__copy {
  margin: 0;
}

.site-footer__link {
  color: var(--nb-border-25);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__link:hover {
  color: var(--nb-salmon);
}

@media (max-width: 900px) {
  .legal-hero {
    padding: 160px var(--spacing-60) var(--spacing-60);
  }

  .legal-page {
    padding: var(--spacing-40) var(--spacing-60) var(--spacing-96);
  }

  .legal-section {
    grid-template-columns: 1fr;
    gap: var(--spacing-20);
  }

  .legal-section + .legal-section {
    margin-top: var(--spacing-60);
  }
}

@media (max-width: 600px) {
  .legal-hero {
    padding: 120px var(--spacing-20) var(--spacing-48);
  }

  .legal-hero__title {
    margin-bottom: var(--spacing-24);
    font-size: var(--font-size-36);
  }

  .legal-hero__intro {
    font-size: var(--font-size-18);
    line-height: var(--line-height-relaxed);
  }

  .legal-page {
    padding: var(--spacing-24) var(--spacing-20) var(--spacing-60);
  }

  .legal-page__back {
    margin-bottom: var(--spacing-40);
  }

  .legal-section + .legal-section {
    margin-top: var(--spacing-48);
  }

  .legal-section__title {
    font-size: var(--font-size-24);
  }

  .legal-section__body {
    font-size: var(--font-size-16);
  }

  .site-footer {
    padding: var(--spacing-20) var(--spacing-20) var(--spacing-32);
  }
}