/*
* Documentpagina's: Scientific endorsement, Privacy policy, Terms & conditions.
* Opbouw: een donkere kop (rij .fm-doc-kop) en een leeskolom (rij .fm-doc) met één tekstblok:
*
* Desktop: tekst links (720px), inhoudsopgave rechts (296px) en vast bij het scrollen. Tablet en gsm: inhoudsopgave bovenaan.
* Invulvelden voor Are: [...], opvallend gemarkeerd tot ze vervangen zijn.
*/
/* ---------- kop ---------- */
body .fm-doc-kop .wpb_text_column { max-width: 860px; }
body .fm-doc-kop p.fm-eyebrow { color: var(--fm-tan); margin: 0 0 16px; }
body .fm-doc-kop h1.fm-doc-titel {
margin: 0;
font-weight: 300; font-size: 64px; line-height: 70px; letter-spacing: -1.6px;
color: var(--fm-egg);
}
body .fm-doc-kop p.fm-doc-intro { margin: 24px 0 0; max-width: 720px; }
body .fm-doc-kop p.fm-doc-datum { margin: 24px 0 0; font-size: 14px; line-height: 22px; color: var(--fm-egg-60); }
/* ---------- raster ---------- */
.fm-doc-raster {
display: grid;
grid-template-columns: minmax(0, 720px) 296px;
justify-content: space-between;
column-gap: 64px;
align-items: start;
}
.fm-doc-body { grid-column: 1; grid-row: 1; min-width: 0; }
.fm-doc-inhoud {
grid-column: 2; grid-row: 1;
position: sticky; top: calc(var(--fm-header-h) + 32px);
padding: 24px 28px;
border: 1px solid var(--fm-choc-14); border-radius: 16px;
background: var(--fm-creme);
}
body .fm-doc p.fm-doc-inhoud-kop {
margin: 0 0 12px;
font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
color: var(--fm-choc-55);
}
/* de nummers staan binnen de lijst, niet in de padding van de kaart (anders plakte "10." tegen de rand) */
body .fm-doc .fm-doc-inhoud ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 26px; }
body .fm-doc .fm-doc-inhoud li { margin: 0; padding: 0; font-size: 15px; line-height: 22px; }
body .fm-doc .fm-doc-inhoud a { color: var(--fm-choc-74); text-decoration: none; transition: color .2s ease; }
body .fm-doc .fm-doc-inhoud a:hover,
body .fm-doc .fm-doc-inhoud a:focus-visible { color: var(--fm-burnt); }
/* ---------- lopende tekst ---------- */
body .fm-doc .fm-doc-body h2 {
margin: 56px 0 16px;
font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: -.4px;
color: var(--fm-chocolate);
}
body .fm-doc .fm-doc-body > h2:first-child { margin-top: 0; }
body .fm-doc .fm-doc-body h3 {
margin: 32px 0 8px;
font-weight: 500; font-size: 19px; line-height: 28px;
color: var(--fm-chocolate);
}
body .fm-doc .fm-doc-body p,
body .fm-doc .fm-doc-body li { font-size: 17px; line-height: 28px; color: var(--fm-choc-74); }
body .fm-doc .fm-doc-body p { margin: 0 0 16px; }
body .fm-doc .fm-doc-body ul,
body .fm-doc .fm-doc-body ol { margin: 0 0 16px; padding-left: 24px; }
body .fm-doc .fm-doc-body ul { list-style: disc; }
body .fm-doc .fm-doc-body ol { list-style: decimal; }
body .fm-doc .fm-doc-body li { margin: 0 0 6px; padding-left: 4px; }
body .fm-doc .fm-doc-body li::marker { color: var(--fm-burnt); }
body .fm-doc .fm-doc-body a { color: var(--fm-burnt); text-decoration: underline; text-underline-offset: 3px; }
body .fm-doc .fm-doc-body a:hover { color: var(--fm-chocolate); }
body .fm-doc .fm-doc-body strong { font-weight: 500; color: var(--fm-chocolate); }
/* vet in een link houdt de linkkleur; een lange URL of een lang e-mailadres breekt af op een smalle gsm */
body .fm-doc .fm-doc-body a strong { color: inherit; }
body .fm-doc .fm-doc-body { overflow-wrap: break-word; }
body .fm-doc .fm-doc-body blockquote {
margin: 0 0 16px; padding: 4px 0 4px 20px;
border-left: 2px solid var(--fm-burnt);
font-style: italic;
}
body .fm-doc .fm-doc-body blockquote p { color: var(--fm-chocolate); }
/* tabel: schuift horizontaal op smalle schermen */
body .fm-doc .fm-doc-tabel {
margin: 8px 0 24px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--fm-choc-14); border-radius: 12px;
}
body .fm-doc .fm-doc-tabel table { width: 100%; min-width: 560px; margin: 0; border: 0; border-collapse: collapse; }
body .fm-doc .fm-doc-tabel th,
body .fm-doc .fm-doc-tabel td {
padding: 12px 16px;
border: 0; border-bottom: 1px solid var(--fm-choc-14);
text-align: left; vertical-align: top;
font-size: 15px; line-height: 22px; color: var(--fm-choc-74);
background: transparent;
}
body .fm-doc .fm-doc-tabel th { font-weight: 500; color: var(--fm-chocolate); background: var(--fm-zand); }
body .fm-doc .fm-doc-tabel tr:last-child td { border-bottom: 0; }
/* notitie voor wie de pagina invult (weghalen vóór de livegang) */
body .fm-doc .fm-doc-noot {
margin: 0 0 48px; padding: 20px 24px;
border: 1px dashed var(--fm-burnt); border-radius: 16px;
background: rgba(234, 177, 99, .12);
}
body .fm-doc .fm-doc-noot p { font-size: 15px; line-height: 24px; margin: 0 0 8px; color: var(--fm-chocolate); }
body .fm-doc .fm-doc-noot p:last-child { margin-bottom: 0; }
/* invulveld */
.fm-invullen {
padding: 1px 4px;
border-radius: 4px;
outline: 1px dashed rgba(215, 101, 37, .6); outline-offset: -1px;
background: rgba(234, 177, 99, .32);
color: var(--fm-chocolate);
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fm-donker .fm-invullen { background: rgba(234, 177, 99, .22); color: var(--fm-egg); }
/* ---------- tablet en gsm ---------- */
@media (max-width: 999px) {
body .wpb_row.fm.fm-doc-kop.fm-donker { padding-top: 72px !important; padding-bottom: 64px !important; }
body .fm-doc-kop h1.fm-doc-titel { font-size: 48px; line-height: 54px; letter-spacing: -1.2px; }
.fm-doc-raster { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.fm-doc-inhoud { grid-column: 1; grid-row: 1; position: static; }
.fm-doc-body { grid-row: 2; }
}
@media (max-width: 690px) {
body .wpb_row.fm.fm-doc-kop.fm-donker { padding-top: 56px !important; padding-bottom: 48px !important; }
body .fm-doc-kop h1.fm-doc-titel { font-size: 38px; line-height: 44px; letter-spacing: -.8px; }
body .fm-doc .fm-doc-body h2 { margin-top: 44px; font-size: 24px; line-height: 32px; }
body .fm-doc .fm-doc-body p,
body .fm-doc .fm-doc-body li { font-size: 16px; line-height: 26.4px; }
.fm-doc-inhoud { padding: 20px 24px; }
body .fm-doc .fm-doc-inhoud li { font-size: 15px; line-height: 22px; }
body .fm-doc .fm-doc-noot { margin-bottom: 40px; padding: 16px 20px; }
}
/* ---------- touch en kleinere schermen: bediening (geen ander uitzicht) ---------- */
/* inhoudsopgave onder 1000px inklapbaar en dicht bij het laden: js/90-documenten.js maakt van de kop een knop.
Open ziet ze eruit zoals voorheen; vanaf 1000px (sticky, altijd open) verandert er niets. */
@media (max-width: 999px) {
body .fm-doc button.fm-doc-inhoud-knop {
-webkit-appearance: none; appearance: none;
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
width: 100%; margin: 0; padding: 0;
border: 0; border-radius: 4px !important; /* Salient zet 4px op knoppen; hier alleen voor de focusring */
background: transparent; box-shadow: none;
font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit;
cursor: pointer;
}
/* raakvlak: dicht de hele kaart, open de kopstrook tot 6px eronder (de eerste link begint 7px lager) */
body .fm-doc button.fm-doc-inhoud-knop::before { content: ""; position: absolute; inset: -24px -28px -6px; }
body .fm-doc .fm-doc-inhoud:not(.is-open) button.fm-doc-inhoud-knop::before { bottom: -24px; }
body .fm-doc button.fm-doc-inhoud-knop::after {
content: ""; flex: none; width: 20px; height: 20px;
background: url('../../svg/chevron.svg') center / 20px 20px no-repeat;
transition: transform .2s ease;
}
body .fm-doc button.fm-doc-inhoud-knop[aria-expanded="true"]::after { transform: rotate(180deg); }
body .fm-doc button.fm-doc-inhoud-knop:focus { outline: none; }
body .fm-doc button.fm-doc-inhoud-knop:focus-visible { outline: 2px solid var(--fm-burnt); outline-offset: 4px; }
/* dicht vanaf de eerste weergave (Salient haalt no-js weg in een inline script bovenaan de body); zonder JS blijft ze open */
html:not(.no-js) body .fm-doc .fm-doc-inhoud:not(.is-open) p.fm-doc-inhoud-kop { margin-bottom: 0; }
html:not(.no-js) body .fm-doc .fm-doc-inhoud:not(.is-open) ol { display: none; }
}
@media (max-width: 690px) {
/* op gsm is de padding van de kaart 20px boven en onder, 24px opzij */
body .fm-doc button.fm-doc-inhoud-knop::before { inset: -20px -24px -6px; }
body .fm-doc .fm-doc-inhoud:not(.is-open) button.fm-doc-inhoud-knop::before { bottom: -20px; }
}
/* links in de inhoudsopgave op touch en onder 1000px: volle breedte en 32px hoog, zonder verschuiving
(padding met evenveel negatieve marge; de items staan 10px uit elkaar, dus de raakvlakken overlappen niet) */
@media (max-width: 999px), (pointer: coarse) {
body .fm-doc .fm-doc-inhoud li > a { display: block; margin: -5px 0; padding: 5px 0; }
}
/* vaste inhoudsopgave nooit hoger dan het scherm: die van terms is 734px hoog vanaf top 109, dus op lage schermen
(iPad liggend, laptops van 768 of 800 hoog) vielen de laatste items weg. Pas onder 880px, hogere schermen blijven gelijk. */
@media (min-width: 1000px) and (max-height: 879px) {
.fm-doc-inhoud {
box-sizing: border-box;
max-height: calc(100vh - var(--fm-header-h) - 64px);
max-height: calc(100svh - var(--fm-header-h) - 64px);
overflow-y: auto;
}
}
/* tabel op gsm als blokken per rij: de kolomkop staat als label boven elke waarde (data-label uit js/90-documenten.js) */
@media (max-width: 690px) {
body .fm-doc .fm-doc-tabel.is-gestapeld { position: relative; overflow: hidden; }
body .fm-doc .fm-doc-tabel.is-gestapeld table,
body .fm-doc .fm-doc-tabel.is-gestapeld tbody,
body .fm-doc .fm-doc-tabel.is-gestapeld tr,
body .fm-doc .fm-doc-tabel.is-gestapeld td { display: block; width: auto; min-width: 0; }
body .fm-doc .fm-doc-tabel.is-gestapeld thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .fm-doc .fm-doc-tabel.is-gestapeld tr { border-bottom: 1px solid var(--fm-choc-14); }
body .fm-doc .fm-doc-tabel.is-gestapeld tr:last-child { border-bottom: 0; }
body .fm-doc .fm-doc-tabel.is-gestapeld td { padding: 0 16px 12px; border-bottom: 0; }
body .fm-doc .fm-doc-tabel.is-gestapeld td:first-child { margin-bottom: 12px; padding-top: 12px; font-weight: 500; color: var(--fm-chocolate); background: var(--fm-zand); }
body .fm-doc .fm-doc-tabel.is-gestapeld td:not(:first-child)::before { content: attr(data-label); display: block; font-weight: 500; color: var(--fm-chocolate); }
}