/**
 * Opmaak van de gegenereerde tool-lijsten.
 *
 * Volgt de huidige site: per tool de naam als kop, daaronder een regel met
 * "Enter search term:", een invoerveld en een blauwe knop, en een dunne streep
 * als scheiding. Categorieen die op de huidige site een uitklaplijst met een
 * Visit-knop zijn, blijven dat.
 */

.dwt-lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dwt-tool {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.dwt-tool + .dwt-tool {
    margin-top: 18px;
}

.dwt-tool__kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-bottom: 10px;
}

.dwt-tool__titel {
    color: var(--heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
}

a.dwt-tool__titel {
    text-decoration: none;
}

a.dwt-tool__titel:hover,
a.dwt-tool__titel:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

/* ------------------------------------------------------------ zoekregel */

.dwt-zoek,
.dwt-keuzelijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Het etiket stond op 90px, waardoor "Enter search term:" op twee regels brak
   en het veld ernaast scheef kwam te staan. Nu net zo breed als de langste
   tekst, en niet breder. */
.dwt-zoek__etiket {
    flex: 0 0 auto;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Het veld stond op een vaste 200px in een kolom van 1180px, dus er bleef een
   halve pagina leeg naast een zoekvak waar amper een zin in past. Het groeit nu
   mee, met een plafond: een invoerveld van negenhonderd pixels voor één
   zoekterm leest ook niet prettig, want je oog moet dan te ver terug. */
.dwt-zoek__veld {
    flex: 1 1 320px;
    max-width: 560px;
}

.dwt-zoek__knop,
.dwt-keuzelijst__knop {
    min-width: 84px;
    font-weight: 700;
}

/* Op de huidige site staat er ruimte tussen het veld en de knop. */
.dwt-zoek__knop {
    margin-left: 60px;
}

.dwt-keuzelijst__keuze {
    flex: 1 1 320px;
    max-width: 560px;
    min-width: 0;
}

.dwt-keuzelijst__veld {
    flex: 0 1 200px;
}

/* ------------------------------------------------------------ multizoek */

.dwt-multizoek__uitleg {
    margin-bottom: 12px;
}

.dwt-multizoek__aantal {
    color: var(--text-dim);
    font-size: 12px;
}

/* Zonder JavaScript staan de formulieren verborgen en komen er links voor in
   de plaats (#71). [hidden] moet het winnen van de display hierboven. */
.dwt-zoek[hidden],
.dwt-keuzelijst[hidden],
.dwt-multizoek[hidden] {
    display: none;
}

.dwt-tool__start {
    display: inline-block;
    margin-top: 6px;
}

.dwt-multizoek__melding:not(:empty) {
    margin: 12px 0 0;
    color: var(--text-dim);
}

/* --------------------------------------------------------- bereikbaarheid */

/**
 * Bereikbaarheid als verhouding, niet als bolletje. Op het dark web valt een
 * site regelmatig even weg; een enkele meting als groen of rood tonen
 * suggereert een zekerheid die er niet is.
 */
.dwt-status {
    font-size: 12px;
    white-space: nowrap;
}

.dwt-status[data-stand="goed"]         { color: var(--success); }
.dwt-status[data-stand="wisselend"]    { color: var(--amber); }
.dwt-status[data-stand="onbereikbaar"] { color: var(--danger); }
.dwt-status[data-stand="onbekend"]     { color: var(--text-dim); }

/* ----------------------------------------------------------------- rest */

.dwt-melding {
    color: var(--text-dim);
    font-style: italic;
}

.dwt-categorie__omschrijving {
    margin-bottom: 25px;
}

@media (max-width: 700px) {
    .dwt-tool__titel {
        font-size: 20px;
    }

    .dwt-zoek__etiket {
        width: 100%;
    }

    .dwt-zoek__veld,
    .dwt-keuzelijst__keuze,
    .dwt-keuzelijst__veld {
        flex: 1 1 100%;
    }

    .dwt-zoek__knop {
        margin-left: 0;
    }
}

/* --- Documenten, videos en het woordenboek (#21, #22, #23, #31) --------- */

/* Een document klapt open op de pagina zelf. De insluiting wordt pas dan
   opgehaald; zeven PDF's tegelijk is 8,8 MB voor niets. */
.dwt-document {
    border-bottom: 1px solid var(--border);
}

.dwt-document summary {
    padding: 11px 0 11px 24px;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.dwt-document summary::-webkit-details-marker { display: none; }

.dwt-document summary::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
    transition: transform .18s var(--ease);
}

.dwt-document[open] summary::before { transform: rotate(45deg); margin-top: -2px; }

.dwt-document summary:hover { color: var(--accent); }

.dwt-document__vak { padding-bottom: 14px; }

.dwt-document__lijst {
    width: 100%;
    height: 70vh;
    min-height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.dwt-bron { color: var(--text-dim); font-size: 14px; margin-top: -6px; }

/* Vaste beeldverhouding, zodat de pagina niet verspringt zodra het beeld laadt. */
.dwt-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 10px 0 22px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.dwt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* De miniatuur met de afspeelknop. Zolang hier niet op geklikt is, is er geen
   enkel verzoek naar Google gegaan. */
.dwt-video__start {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

.dwt-video__start img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .78;
    transition: opacity .18s var(--ease);
}

.dwt-video__start:hover img { opacity: 1; }

.dwt-video__knop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
    transition: background .18s var(--ease), transform .18s var(--ease);
}

.dwt-video__knop::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 23px;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}

.dwt-video__start:hover .dwt-video__knop { background: var(--accent); transform: scale(1.06); }

/* Boven de knop en niet als voetnoot onderin: dit is de mededeling die de
   plaats inneemt van een toestemmingsbalk, dus hij hoort gelezen te worden
   voordat iemand klikt. */
.dwt-video__uitleg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 13px 16px;
    background: rgba(11, 10, 16, .9);
    border-bottom: 1px solid var(--border-2);
    color: var(--heading);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

/* Het woordenboek is lang; de kop blijft staan bij het scrollen. */
.dwt-woordenboek {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.dwt-woordenboek th,
.dwt-woordenboek td {
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.dwt-woordenboek thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    z-index: 1;
}

.dwt-woordenboek tbody th {
    width: 30%;
    font-weight: 600;
    padding-right: 20px;
}

@media (max-width: 620px) {
    .dwt-woordenboek tbody th, .dwt-woordenboek tbody td { display: block; width: auto; }
    .dwt-woordenboek tbody th { border-bottom: 0; padding-bottom: 2px; }
}

/* --- Toestemming voor meten -------------------------------------------- */

.dwt-toestemming {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border-2);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .38);
}

.dwt-toestemming__inhoud { max-width: 74ch; }

.dwt-toestemming__kop {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--heading);
}

.dwt-toestemming__tekst {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.dwt-toestemming__knoppen { display: flex; gap: 10px; flex-shrink: 0; }

@media (max-width: 620px) {
    .dwt-toestemming { padding: 14px 16px; }
    .dwt-toestemming__knoppen { width: 100%; }
    .dwt-toestemming__knoppen .dwt-knop { flex: 1; }
}

/* Zwevend knopje linksonder om de cookiekeuze te herzien. Links, want de knop
   "terug naar boven" staat rechts en die gebruik je vaker. */
.dwt-koekje {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .34);
    transition: color .18s var(--ease), border-color .18s var(--ease),
                transform .18s var(--ease);
}

.dwt-koekje svg { width: 22px; height: 22px; }

.dwt-koekje:hover,
.dwt-koekje:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 620px) {
    .dwt-koekje { left: 12px; bottom: 12px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .dwt-koekje { transition: none; }
    .dwt-koekje:hover { transform: none; }
}

/* De omschrijving van een tool, onder de titel in de lijstweergave. Kleiner en
   gedempt: het is toelichting bij de naam en niet de naam zelf. */
.dwt-tool__omschrijving {
    margin: 2px 0 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.45;
}