/* Asbestverwijdering.be — juridische pagina's (/privacy/, /privacyverklaring-eu-2/,
   /imprint/, /disclaimer/, /cookiebeleid-eu-2/) en de 404-pagina.
   Aanvulling op /site/site.css en /site/paginas.css. Maten gemeten op het live
   origineel op 390 / 768 / 1000 / 1366 / 1920 px (Complianz-documentopmaak). */

/* =========================================================================
   1. Raamwerk-aanvullingen
   ========================================================================= */

/* Tweede rij in de juridische paginakop-sectie: het origineel zet daar de
   bovenopvulling op 0, zodat de tekst dicht op de h1 staat. */
.rij.aansluitend { padding-top: 0; }

/* Zwarte paginatitel zonder fotobanner (deze pagina's hebben geen kop-beeld).
   35px/35px met 8px staart = de 43px die de Divi-kopmodule inneemt. */
.juridische-titel {
    margin: 0;
    padding-bottom: 8px;
    font-size: 35px;
    line-height: 35px;
    font-weight: 700;
    color: var(--inkt);
}

/* site.css zet de body op font-weight 300; de browserregel strong{font-weight:bolder}
   levert vanaf 300 slechts 400 op, waardoor vetgedrukte tekst niet vet werd.
   Zolang dat niet in site.css staat, zetten we het hier recht. */
.tekstblok strong, .tekstblok b,
.wettekst strong, .wettekst b { font-weight: 700; }

/* Titelkop binnen een tekstblok (/privacy/: "Privacyverklaring").
   Het woord is op 360-414px breder dan de tekstkolom; met het zachte
   afbreekteken in de HTML breekt hij netjes af i.p.v. buiten de kolom te
   steken (het origineel liet hem daar over de rand lopen). */
.tekstblok .wettitel {
    margin: 0;
    padding-bottom: 10px;
    font-size: 35px;
    line-height: 35px;
    font-weight: 700;
    overflow-wrap: break-word;
}

/* /privacy/ heeft in het origineel een tweede, geneste Divi-sectie binnen de
   rij: opvulling 4% / rij 2% van de óuderbreedte (niet van het venster). */
.binnenvlak { padding: 4% 0; }
.binnenvlak > .baan { padding: 2% 0; }
@media (min-width: 1350px) {
    .binnenvlak { padding: 54px 0; }
    .binnenvlak > .baan { padding: 27px 0; }
}
@media (max-width: 980px) {
    .binnenvlak { padding: 50px 0; }
    .binnenvlak > .baan { padding: 30px 0; }
}

/* =========================================================================
   2. .wettekst — het juridische document (Complianz-documentopmaak)
   ========================================================================= */

.wettekst {
    max-width: 800px;
    font-size: 14px;
    line-height: 19.2px;
}
.wettekst p { margin: 0; padding-bottom: 14px; }
.wettekst > p:last-child { padding-bottom: 0; }
.wettekst h2,
.wettekst h3 {
    margin: 15px 0 10px;
    padding-bottom: 10px;
    font-size: 22px;
    line-height: 22px;
    font-weight: 700;
    text-align: left;
}
.wettekst h4 { margin: 15px 0 5px; font-size: 18px; line-height: 18px; font-weight: 700; }
.wettekst h5 { margin: 10px 0 5px; font-size: 14px; line-height: 14px; font-weight: 700; }
.wettekst ul, .wettekst ol {
    list-style: disc;
    margin: 0 0 15px 15px;
    padding: 0 0 23px 14px;
    line-height: 26px;
}
.wettekst li { line-height: 26px; }
.wettekst a { font-weight: 600; color: #f7a400; text-decoration: underline; }
.wettekst a:hover { color: var(--inkt); }
.wettekst a:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* Pijltje achter een link die in een nieuw tabblad opent (zoals het origineel). */
.wettekst a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px 0 5px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 0h8v8H8V3.4L1.4 10 0 8.6 6.6 2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 0h8v8H8V3.4L1.4 10 0 8.6 6.6 2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Beknopte variant (/imprint/): koppen op tekstgrootte, alinea's dichter op elkaar. */
.wettekst.beknopt h2,
.wettekst.beknopt h3 { font-size: 14px; line-height: 14px; padding-bottom: 5px; margin-bottom: 5px; }
.wettekst.beknopt p { margin-bottom: 7px; }
.wettekst.beknopt > p:last-child { margin-bottom: 0; }

/* =========================================================================
   3. .uitklapper — uitklapbaar blok (Divi/Complianz <details>)
   ========================================================================= */

.uitklapper { background: rgba(239, 239, 239, .25); }
.uitklapper[open] { padding-bottom: 1px; }

.uitklapper-kop {
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
    background: rgba(239, 239, 239, .5);
    cursor: pointer;
    list-style: none;
}
.uitklapper-kop::-webkit-details-marker { display: none; }
.uitklapper-kop:focus-visible { outline: 2px solid var(--inkt); outline-offset: -2px; }

.uitklapper-kop > div {
    display: grid;
    grid-template-columns: 2fr 25px;
    grid-gap: 15px;
    align-items: center;
}
.uitklapper-kop h3 {
    margin: 0;
    padding: 0 5px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    text-align: left;
}
.uitklapper-kop p { margin: 0; padding: 0; font-size: 14px; text-align: right; }

/* Chevron rechts; draait bij openen (FontAwesome chevron-down als masker). */
.uitklapper-kop > div::after {
    content: "";
    width: 18px;
    height: 18px;
    margin: 3px;
    justify-self: end;
    background-color: currentColor;
    transition: transform .5s ease;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.2 0-16.4-3.1-22.6-9.4l-192-192c-12.5-12.5-12.5-32.7 0-45.2s32.7-12.5 45.2 0L224 338.8l169.4-169.4c12.5-12.5 32.7-12.5 45.2 0s12.5 32.7 0 45.2l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / cover no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.2 0-16.4-3.1-22.6-9.4l-192-192c-12.5-12.5-12.5-32.7 0-45.2s32.7-12.5 45.2 0L224 338.8l169.4-169.4c12.5-12.5 32.7-12.5 45.2 0s12.5 32.7 0 45.2l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / cover no-repeat;
}
.uitklapper[open] > .uitklapper-kop > div::after { transform: rotate(180deg); }

/* Variant met doelaanduiding rechts van de naam (/cookiebeleid-eu-2/). De derde
   kolom is 55px = 25px chevron + de 2 x 15px tussenruimte van de kolommen die
   het origineel voor een (verborgen) selectievakje reserveert. */
.uitklapper.met-doel > .uitklapper-kop > div { grid-template-columns: 2fr auto 55px; }

.uitklapper-lijf > * { font-size: 14px; }
.uitklapper-lijf p, .uitklapper-lijf h4, .uitklapper-lijf ul { padding-left: 15px; padding-right: 15px; }
.uitklapper-lijf h4 { margin: 5px 0; font-size: 15px; line-height: 15px; }

/* De twee halve kolommen "Gebruik" en "Delen van gegevens". */
.dienstblok {
    display: inline-block;
    width: calc(50% - 35px);
    vertical-align: top;
    padding-bottom: 15px;
}
.dienstblok p { padding-bottom: 0; }
/* net als het origineel: onder 600px staan de twee helften onder elkaar */
@media (max-width: 600px) { .dienstblok { width: 100%; } }

/* =========================================================================
   4. .cookietabel — welke cookies een dienst plaatst
   ========================================================================= */

.cookietabel {
    width: 100%;
    margin: 0 0 10px;
    border: 1px solid #dadada;
    border-collapse: separate;
    border-spacing: 1px;
    background: #dadada;
    table-layout: fixed;
    font-size: 14px;
    text-align: left;
}
.cookietabel th, .cookietabel td {
    padding: 15px;
    background: var(--wit);
    vertical-align: top;
    font-weight: 300;
    overflow-wrap: break-word;
}

/* Verbetering t.o.v. het origineel: op smalle schermen paste een cookienaam
   als "wpEmojiSettingsSupports" niet in de kolom en werd hij middenin het
   woord afgebroken. Daar laten we de tabel zijn eigen breedte houden en
   binnen dit vlak schuiven; de rest van de pagina blijft staan. */
.tabelvlak { overflow-x: auto; }
@media (max-width: 700px) {
    .cookietabel { width: auto; min-width: 100%; table-layout: auto; }
    .cookietabel th, .cookietabel td { padding: 10px; overflow-wrap: normal; }
}
.cookietabel thead th { background: #f7f7f7; font-size: 14px; line-height: 14px; font-weight: 700; }
.cookietabel caption {
    padding: 15px;
    border: 1px solid #dadada;
    border-bottom: 0;
    background: var(--wit);
    text-align: left;
    font-size: 15px;
    line-height: 15px;
    font-weight: 700;
}

/* =========================================================================
   5. .toestemmingsbeheer — "Beheer uw cookietoestemming" (7.1)
   ========================================================================= */

/* De vier categorieën staan als <details> in de pagina, dus ook zonder
   JavaScript uit te klappen; juridisch.js vult alleen de stand en de knop. */
.toestemmingsbeheer { margin-top: 10px; }
.toestemmingsrij { background: rgba(239, 239, 239, .25); }
.toestemmingsrij + .toestemmingsrij { margin-top: 5px; }
.toestemmingskop {
    display: grid;
    grid-template-columns: 1fr auto 25px;
    grid-gap: 10px;
    align-items: center;
    padding: 5px 10px;
    background: rgba(239, 239, 239, .5);
    cursor: pointer;
    list-style: none;
}
.toestemmingskop::-webkit-details-marker { display: none; }
.toestemmingskop:focus-visible { outline: 2px solid var(--inkt); outline-offset: -2px; }
.toestemmingsnaam { font-size: 14px; line-height: 19.2px; }
.toestemming-altijd { font-size: 12px; line-height: 19.2px; color: #008000; }
.toestemming-stand { font-size: 12px; line-height: 19.2px; color: #6b6b6b; }
.toestemming-stand.aan { color: #008000; }
.toestemming-wijzig { margin-top: 15px; padding-bottom: 0; }

/* Chevron rechts; draait bij openen (zelfde masker als .uitklapper). */
.toestemmingskop::after {
    content: "";
    width: 16px;
    height: 16px;
    justify-self: end;
    background-color: currentColor;
    transition: transform .5s ease;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.2 0-16.4-3.1-22.6-9.4l-192-192c-12.5-12.5-12.5-32.7 0-45.2s32.7-12.5 45.2 0L224 338.8l169.4-169.4c12.5-12.5 32.7-12.5 45.2 0s12.5 32.7 0 45.2l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.2 0-16.4-3.1-22.6-9.4l-192-192c-12.5-12.5-12.5-32.7 0-45.2s32.7-12.5 45.2 0L224 338.8l169.4-169.4c12.5-12.5 32.7-12.5 45.2 0s12.5 32.7 0 45.2l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toestemmingsrij[open] > .toestemmingskop::after { transform: rotate(180deg); }

.toestemmingsuitleg { padding: 10px; font-size: 14px; line-height: 19.2px; }
.toestemmingsuitleg p { padding-bottom: 0; }

/* Knopvariant van .knop-pijl: <button> erft de letter niet vanzelf. */
button.knop-pijl { font-family: inherit; cursor: pointer; }
button.knop-pijl:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* =========================================================================
   6. .gegevensverzoek — AVG-verzoekformulier (/privacyverklaring-eu-2/)
   ========================================================================= */

.gegevensverzoek { margin-top: 10px; }
.gegevensverzoek .formulier-velden { grid-template-columns: 1fr 1fr; }
.gegevensverzoek fieldset { border: 0; }
.gegevensverzoek legend { padding: 0; }
.verzoek-melding {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-left: 4px solid var(--geel);
    background: var(--wit);
    font-size: 14px;
    line-height: 19.2px;
}
.verzoek-melding.mislukt { border-left-color: #c02b0a; color: #c02b0a; }
.gegevensverzoek button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.gegevensverzoek .keuze input:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* =========================================================================
   7. 404 — pagina niet gevonden
   ========================================================================= */

.nietgevonden-tekst { max-width: 800px; }
.nietgevonden-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.nietgevonden-links .knop-pijl:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }