/* ============================================================
   Bestand: public_html/assets/shared/css/privacyverklaring.css
   ============================================================

   De opmaak van de privacy- en cookieverklaring (PrivacyVerklaringService, sinds v014.11.473). De tekst staat in
   de artikelopmaak van elk thema; dit blad regelt alleen wat die opmaak niet kent: de inhoudsopgave en de tabellen.
   Kleuren komen uit de tekstkleur van het thema (currentColor), zodat licht en donker vanzelf kloppen. Op een smal
   scherm wordt elke tabelrij een kaartje met het kolomlabel ervoor, zodat niets buiten beeld schuift.
   ============================================================ */

.pv-verklaring {
    --pv-lijn: color-mix(in srgb, currentColor 18%, transparent);
    --pv-vlak: color-mix(in srgb, currentColor 5%, transparent);
    overflow-wrap: anywhere;
}

.pv-verklaring + .pv-verklaring,
.pv-verklaring + .pv-aanvulling {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.pv-verklaring .pv-inleiding {
    opacity: .85;
}

.pv-verklaring .pv-inhoud {
    margin: 1.25rem 0 1.5rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--pv-lijn);
    border-radius: 10px;
    background: var(--pv-vlak);
}

.pv-verklaring .pv-inhoud-kop {
    margin: 0 0 .4rem;
    font-weight: 700;
}

.pv-verklaring .pv-inhoud ol {
    margin: 0;
    padding-left: 1.4rem;
    columns: 2 16rem;
    column-gap: 2rem;
}

.pv-verklaring .pv-inhoud li {
    break-inside: avoid;
    margin: .15rem 0;
}

.pv-verklaring .pv-sectie {
    scroll-margin-top: 90px;
}

.pv-verklaring code {
    font-size: .92em;
    padding: .05em .3em;
    border-radius: 4px;
    background: var(--pv-vlak);
    overflow-wrap: anywhere;
}

.pv-verklaring .pv-tabel {
    margin: .75rem 0 1rem;
    max-width: 100%;
    overflow-x: auto;
}

.pv-verklaring .pv-tabel table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94em;
}

.pv-verklaring .pv-tabel th,
.pv-verklaring .pv-tabel td {
    padding: .5rem .6rem;
    border: 0;
    border-bottom: 1px solid var(--pv-lijn);
    text-align: left;
    vertical-align: top;
}

.pv-verklaring .pv-tabel th {
    font-weight: 700;
    background: var(--pv-vlak);
}

@media (max-width: 640px) {
    .pv-verklaring .pv-inhoud ol {
        columns: 1;
    }

    .pv-verklaring .pv-tabel {
        overflow-x: visible;
    }

    .pv-verklaring .pv-tabel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pv-verklaring .pv-tabel table,
    .pv-verklaring .pv-tabel tbody,
    .pv-verklaring .pv-tabel tr,
    .pv-verklaring .pv-tabel td {
        display: block;
        width: 100%;
    }

    .pv-verklaring .pv-tabel tr {
        margin: 0 0 .6rem;
        padding: .45rem .7rem;
        border: 1px solid var(--pv-lijn);
        border-radius: 10px;
    }

    .pv-verklaring .pv-tabel td {
        padding: .35rem 0;
        border: 0;
    }

    .pv-verklaring .pv-tabel td + td {
        border-top: 1px dashed var(--pv-lijn);
    }

    .pv-verklaring .pv-tabel td::before {
        content: attr(data-label);
        display: block;
        font-size: .82em;
        font-weight: 700;
        opacity: .75;
    }
}