/* ============================================================================
   GUIDO - juridische documenten (Privacy.aspx)
   Vereist theme.css en components.css.

   De inhoud komt als één blok html uit de resx en is niet aan te passen vanuit
   de opmaak. Alles hier werkt daarom op de afstammelingen van .pv-doc: h1, h2,
   p, ul, li, strong en em. Zo blijft de tekst leesbaar zonder dat er iets aan
   het document zelf verandert.
   ============================================================================ */

.pv {
    background: var(--surface-page);
    padding: 14px 16px 34px;
    font-family: var(--font-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

.pv-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-structure);
    text-decoration: none;
    margin-bottom: 14px;
}

.pv-back:hover { text-decoration: underline; }

.pv-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-structure);
    opacity: .7;
    margin: 0;
}

/* ------------------------------------------------------------------ melding */
.pv-notice {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--surface-card);
    border: 1px dashed var(--border-perforation);
    border-radius: var(--radius-card-sm);
    padding: 12px 13px;
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.pv-notice i { color: var(--color-brand); margin-top: 2px; }

/* ------------------------------------------------------------ sprongenlijst
   Het document is lang en bestaat uit twee delen die elk van 1 tot 4
   nummeren, dus zonder overzicht is het op een telefoon zoeken. */
.pv-toc {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    margin: 16px 0 0;
}

.pv-toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-structure);
    opacity: .7;
    margin: 0 0 10px;
}

.pv-toc ul { list-style: none; margin: 0; padding: 0; }

.pv-toc li { margin: 0; }

.pv-toc a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-primary);
    text-decoration: none;
}

.pv-toc a:hover { color: var(--color-brand); }

/* de twee documenttitels zwaarder dan de secties eronder */
.pv-toc-h1 + .pv-toc-h2 { margin-top: 2px; }

.pv-toc-h1 a {
    font-weight: 700;
    color: var(--color-structure);
    border-top: 1px solid var(--border-subtle);
    margin-top: 6px;
    padding-top: 12px;
}

.pv-toc li:first-child a { border-top: 0; margin-top: 0; padding-top: 2px; }

.pv-toc-h2 a { padding-left: 14px; position: relative; color: var(--text-muted); }

.pv-toc-h2 a::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 1px;
    background: var(--border-perforation);
}

/* ================================================================ het document
   Eén leeskolom, want een juridische tekst wordt gelezen en niet gescand.
   Rond de 66 tekens per regel leest het rustigst; op een telefoon bepaalt de
   schermbreedte dat toch al. */
.pv-doc {
    display: block;
    
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-primary);
}

.pv-doc h1 {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--color-structure);
    margin: 0 0 4px;
}

/* De tekst bevat twee documenten op één pagina: Privacy en Disclaimer, elk in
   een eigen omhullende sectie. Vanaf het tweede document een scheiding erboven,
   zodat te zien is dat er een nieuw document begint.

   Deze selectors werken op de directe kinderen en niet op siblings van h1: de
   twee titels zijn geen broers van elkaar, ze zitten elk in hun eigen sectie. */
.pv-doc > section + section {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid var(--border-subtle);
}

/* de secties binnen een document houden hun normale afstand */
.pv-doc > section > section {
    margin-top: 26px;
    padding-top: 0;
    border-top: 0;
}

/* Zelfde lettertype als de documenttitel: het zijn koppen van hetzelfde
   document, dus horen ze bij elkaar. Alleen de maat verschilt. */
.pv-doc h2 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--color-structure);
    margin: 0 0 8px;
}

.pv-doc > section > section:first-of-type { margin-top: 18px; }

.pv-doc p { margin: 0 0 12px; }
.pv-doc p:last-child { margin-bottom: 0; }

.pv-doc ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.pv-doc li { margin-bottom: 6px; }

/* In de tekst staan de nummers 2a, 2b enzovoort als <strong> aan het begin van
   een alinea. Dat blijft vet, maar in de structuurkleur zodat het als
   verwijzing leest en niet als nadruk. */
.pv-doc strong { font-weight: 700; color: var(--color-structure); }

.pv-doc em { font-style: italic; color: var(--text-primary); }

.pv-doc a { color: var(--color-brand); font-weight: 600; }

/* Een sprong uit de lijst mag niet onder de plakkende header verdwijnen. */
.pv-doc h1,
.pv-doc h2 { scroll-margin-top: calc(var(--header-h) + 12px); }

/* --------------------------------------------------------------------- voet */
.pv-foot {
    margin: 32px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (min-width: 700px) {
    .pv {
        max-width: 720px;
        margin: 0 auto;
        padding: 22px 24px 48px;
    }

    .pv-doc { font-size: 15px; }
    .pv-doc h1 { font-size: 32px; }
    .pv-doc h2 { font-size: 17px; }
}