/* DataGrip · privacyverklaring
   Een rustige leespagina: een donkere kop met een colofon, daaronder het hele stuk op het
   warm witte vlak (.licht), met een inhoudsopgave die meeloopt: breed als kolom links,
   smal als een balk onder de kop die je openklapt. Opsommingen van "begrip, toelichting"
   staan als rijen, de subverwerkers en de bewaartermijnen als tabellen die op de telefoon
   onder elkaar vallen in plaats van te gaan schuiven.
   Alles hier draagt het voorvoegsel privacy-. */

/* ===== Paginakop met colofon =====
   De gewone paginakop uit pagina.css: de maten van de h1, de lede en de lucht eromheen komen daarvandaan.
   Het lange woord in de kop past daarmee tot 320 pixels op een regel; past het ergens niet,
   dan breekt het op het zachte afbreekstreepje in de HTML. */

.privacy-colofon { margin-top: clamp(26px, 3.6vw, 48px); border-top: 1px solid var(--line-mid); }
.privacy-colofon > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; padding: 10px 0 11px; border-bottom: 1px solid var(--line-mid); }
.privacy-colofon > div:last-child { border-bottom: 0; padding-bottom: 0; }
.privacy-colofon dt { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.privacy-colofon dd { font-weight: 600; line-height: 1.4; color: var(--bright); text-align: right; }
.privacy-colofon a { color: var(--bright); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 hover alleen bij een muis */ @media (hover: hover) and (pointer: fine) { .privacy-colofon a:hover { color: var(--teal); } }
@media (min-width: 760px) {
  .privacy-colofon { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: clamp(36px, 6vw, 96px); padding-top: 16px; }
  .privacy-colofon > div { display: block; padding: 0; border: 0; }
  .privacy-colofon dd { margin-top: 2px; text-align: left; }
}

/* ===== Het stuk zelf, op warm wit ===== */
.privacy-vel { padding-bottom: var(--sec); }
.privacy-indeling { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ----- inhoudsopgave, smal: een lijst boven het stuk (zonder script) of een balk die meeloopt (met script) ----- */
.privacy-inhoud { margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); background: #f0ede6; border-bottom: 1px solid var(--line-mid); }
.privacy-aan .privacy-inhoud { position: sticky; top: var(--kop-h); z-index: 20; }
.privacy-inhoud summary { display: flex; align-items: center; gap: 12px; min-height: 52px; list-style: none; cursor: pointer; font-size: .9375rem; line-height: 1.3; }
.privacy-inhoud summary::-webkit-details-marker { display: none; }
.privacy-inhoud-kop { flex: none; font-weight: 650; color: var(--bright); }
.privacy-inhoud-nu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.privacy-inhoud .plusje { margin-left: auto; }
.privacy-inhoud details[open] .plusje::after { transform: none; }
.privacy-inhoud details[open] .privacy-inhoud-nu { visibility: hidden; }
.privacy-inhoud ol { border-top: 1px solid var(--line-mid); padding-bottom: 8px; }
.privacy-inhoud li + li { border-top: 1px solid var(--line); }
.privacy-inhoud a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--bright); text-decoration: none; hyphens: manual; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .privacy-inhoud a:hover { color: var(--teal); } }
.privacy-inhoud a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--teal); padding-left: 14px; font-weight: 650; }
@media (min-width: 560px) and (max-width: 999px) {
  .privacy-inhoud ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 56px); }
  .privacy-inhoud li:nth-child(2) { border-top: 0; }
}

.privacy-tekst { min-width: 0; padding-top: clamp(30px, 5vw, 48px); }

@media (min-width: 1000px) {
  /* ----- breed: een kolom links die meeloopt ----- */
  .privacy-vel { padding-top: clamp(48px, 5.6vw, 84px); }
  /* het raster van elke pagina met een zijkolom (pagina.css): de tekst begint op 1440 op x 448, net als de vragen en de artikelen */
  .privacy-indeling { grid-template-columns: var(--zij) minmax(0, 1fr); column-gap: var(--zij-gat); align-items: start; }
  .privacy-inhoud, .privacy-aan .privacy-inhoud { position: sticky; top: calc(var(--kop-h) + 36px); z-index: auto; margin: 0; padding: 0; background: none; border: 0; }
  .privacy-inhoud summary { min-height: 0; margin-bottom: 12px; cursor: default; pointer-events: none; font-size: .875rem; }
  .privacy-inhoud-kop { font-weight: 600; color: var(--muted); }
  .privacy-inhoud-nu, .privacy-inhoud .plusje { display: none; }
  .privacy-inhoud ol { padding: 0; border-top: 0; border-left: 1.5px solid var(--line-mid); }
  .privacy-inhoud li + li { border-top: 0; }
  .privacy-inhoud a { min-height: 0; margin-left: -1.5px; padding: 7px 0 7px 18px; border-left: 3px solid transparent; font-weight: 400; color: var(--text); }
  /* R8:B02 */ @media (hover: hover) and (pointer: fine) { .privacy-inhoud a:hover { color: var(--bright); } }
  .privacy-inhoud a[aria-current="true"] { box-shadow: none; padding-left: 18px; border-left-color: var(--teal); color: var(--bright); font-weight: 600; }
  .privacy-tekst { padding-top: 0; }
}

/* ----- de onderdelen: een haarlijn en lucht ertussen, de kop is het anker -----
   Een onderdeel is hooguit 44em breed (748 pixels): zo breed mogen de tabellen en de rijen zijn.
   Lopende tekst is smaller, hooguit 40em (680 pixels, ongeveer 75 tekens per regel). */
.privacy-deel { max-width: 44em; scroll-margin-top: calc(var(--anker) + 8px); }
.privacy-deel > p, .privacy-deel > ul, .privacy-deel > h2 { max-width: var(--lees); }
/* de sprong naar een onderdeel: vrij onder de kop (var(--anker), zie basis.css) en, op smal met script, onder de balk (60) */
.privacy-aan .privacy-deel { scroll-margin-top: calc(var(--anker) + 60px); }
@media (min-width: 1000px) { .privacy-deel, .privacy-aan .privacy-deel { scroll-margin-top: calc(var(--anker) + 12px); } }
/* de balk zit zelf vast onder de kop: krijgt hij de focus, dan hoeft de pagina niet te schuiven */
.privacy-aan .privacy-inhoud summary { scroll-margin-top: 0; }
.privacy-deel + .privacy-deel { margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(28px, 3.8vw, 44px); border-top: 1px solid var(--line-mid); }
.privacy-deel h2 { hyphens: manual; overflow-wrap: break-word; }
.privacy-deel > h2 + * { margin-top: .7em; }
.privacy-adres { line-height: 1.75; }

/* rijen: het begrip links, de toelichting rechts */
.privacy-rijen { border-top: 1px solid var(--line-mid); }
.privacy-rijen > div { padding: 12px 0 13px; border-bottom: 1px solid var(--line-mid); }
.privacy-rijen dt { font-weight: 650; letter-spacing: -0.008em; line-height: 1.4; color: var(--bright); }
.privacy-rijen dd { margin: 2px 0 0; line-height: 1.55; }

/* tabellen: op smal valt elke rij onder elkaar, het begrip als kopje boven de tekst */
.prose .privacy-tabel { display: block; font-size: inherit; line-height: 1.55; border-top: 1px solid var(--line-mid); }
.privacy-tabel tbody { display: block; }
.prose .privacy-tabel th, .prose .privacy-tabel td { display: block; padding: 0; border: 0; }
.privacy-tabel thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.privacy-tabel tbody tr { display: block; padding: 12px 0 13px; border-bottom: 1px solid var(--line-mid); }
.prose .privacy-tabel tbody th { font-weight: 650; letter-spacing: -0.008em; line-height: 1.4; color: var(--bright); }
.prose .privacy-tabel td { margin-top: 2px; }

/* sluit een onderdeel af met rijen of een tabel, dan is de lijn van het volgende onderdeel de afsluiting */
.privacy-deel > .privacy-rijen:last-child > div:last-child,
.privacy-deel > .privacy-tabel:last-child tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 640px) {
  .privacy-rijen > div { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); column-gap: 28px; align-items: baseline; padding: 14px 0 15px; }
  .privacy-rijen dd { margin: 0; }

  .prose .privacy-tabel { display: table; }
  .privacy-tabel thead { position: static; display: table-header-group; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .privacy-tabel tbody { display: table-row-group; }
  .privacy-tabel tbody tr, .privacy-tabel thead tr { display: table-row; padding: 0; border: 0; }
  .prose .privacy-tabel th, .prose .privacy-tabel td { display: table-cell; padding: 14px 0 15px; border-bottom: 1px solid var(--line-mid); vertical-align: baseline; }
  .prose .privacy-tabel thead th { padding: 9px 0 9px; font-size: .875rem; font-weight: 600; color: var(--muted); }
  /* even breed als het begrip in de rijen erboven (13,5em en 28 tussenruimte): de toelichtingen beginnen op één lijn */
  .prose .privacy-tabel tbody th { width: calc(13.5em + 28px); padding-right: 28px; }
  .prose .privacy-tabel td { margin: 0; }
  .privacy-deel > .privacy-tabel:last-child tbody tr:last-child th,
  .privacy-deel > .privacy-tabel:last-child tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
}

@media print {
  .kop, .afsluiter, .voet, .privacy-inhoud, .skip-link { display: none; }
}

/* de woorden "Cookie-instellingen" in de tekst zijn, als het script draait, de knop zelf */
.privacy-cookieknop { padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--bright); cursor: pointer; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 */ @media (hover: hover) and (pointer: fine) { .privacy-cookieknop:hover { color: var(--teal); } }

/* ══════════ Ronde 8 · privacy (team 3) ══════════ */

/* R8:A17 de inhoudsopgave precies zoals die van de artikelen (p-blog.css, zelfde merkteken): label 13 px, 600, gedempt;
   24 px eronder de lijst; elk item 16 px naast een lijn van 2 px; het actieve item een teal streep van dezelfde dikte.
   Was: lijn van 1,5 op de lijst, actieve streep van 3, items 18 px ernaast. */
@media (min-width: 1000px) {
  .privacy-inhoud summary { margin-bottom: 24px; font-size: .8125rem; line-height: 1.3; }
  .privacy-inhoud-kop { font-weight: 600; }
  .privacy-inhoud ol { border-left: 0; }
  .privacy-inhoud a { margin-left: 0; padding: 7px 0 7px 16px; border-left: 2px solid var(--line-mid); }
  .privacy-inhoud a[aria-current="true"] { padding-left: 16px; border-left-color: var(--teal); }
}

/* R8:D12 het e-mailadres in het colofon is een raakvlak van 44 pixels, de regel wordt er niet hoger van */
.privacy-colofon a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* R8:D16 op een telefoon staat in het colofon alleen "Laatste update": DataGrip, KVK en e-mail staan direct eronder
   in het eerste hoofdstuk. Vanaf 760, waar het colofon naast de kop staat, blijft het zoals het is. */
@media (max-width: 759px) {
  .privacy-colofon > div:not(:last-child) { display: none; }
}