/* ══════════════════════════════════════
   WERKBLADEN
   Gebruikt uitsluitend de bestaande CSS-variabelen (--linnen, --klei,
   --inkt, ...), zodat de licht/donker-knop hier vanzelf ook werkt.
   Nooit hardgecodeerde hex-kleuren gebruiken: dan beweegt dit blok
   niet mee bij het wisselen van thema.
══════════════════════════════════════ */

.wb-kop { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.wb-bovenkop {
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 700; color: var(--klei); margin-bottom: 8px;
}
.wb-kop h1 { margin: 0 0 14px; }
.wb-inleiding { color: var(--inkt-zacht); line-height: 1.65; text-align: left; }
.wb-inleiding p { margin-bottom: 12px; }

/* filterbalk */
.wb-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.wb-filter {
    padding: 7px 16px; border-radius: 999px; text-decoration: none;
    border: 1.5px solid var(--hout-licht); color: var(--inkt);
    font-size: .9rem; transition: border-color .2s, background .2s;
}
.wb-filter:hover { border-color: var(--klei); }
.wb-filter.actief { background: var(--klei); border-color: var(--klei); color: var(--wit-papier); }

/* detailpagina */
.wb-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
.wb-beeld img {
    width: 100%; height: auto; border-radius: 14px;
    border: 1.5px solid var(--hout-licht); background: var(--wit-papier);
}
.wb-beeld-leeg {
    aspect-ratio: 1 / 1.414; display: grid; place-items: center;
    font-size: 4rem; background: var(--linnen); border-radius: 14px;
}
.wb-info h1 { margin: 0 0 12px; }
.wb-intro { font-size: 1.05rem; line-height: 1.6; color: var(--inkt-zacht); margin-bottom: 20px; }

.wb-feiten { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1.5px solid var(--hout-licht); }
.wb-feiten li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 10px 2px; border-bottom: 1.5px solid var(--hout-licht);
}
.wb-feiten span { color: var(--inkt-zacht); font-size: .92rem; }
.wb-feiten strong { text-align: right; }

.wb-download { font-size: 1.05rem; }
.wb-geenaccount { margin-top: 10px; font-size: .86rem; color: var(--inkt-zacht); }

.wb-uitleg { max-width: 760px; margin: 48px auto 0; line-height: 1.7; }
.wb-uitleg h2 { margin: 32px 0 12px; }
.wb-uitleg h3 { margin: 24px 0 8px; }
.wb-uitleg ul, .wb-uitleg ol { padding-left: 22px; margin-bottom: 16px; }
.wb-uitleg li { margin-bottom: 7px; }

.wb-herhaal-download {
    max-width: 760px; margin: 40px auto 0; padding: 24px; text-align: center;
    border: 1.5px solid var(--hout-licht); border-radius: 14px;
}
.wb-herhaal-download p { margin: 0 0 14px; font-weight: 600; }

/* kaartenraster */
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.wb-kaart {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    border: 1.5px solid var(--hout-licht); border-radius: 14px; overflow: hidden;
    background: var(--wit-papier); transition: border-color .2s, transform .2s;
}
.wb-kaart:hover { border-color: var(--klei); transform: translateY(-3px); }
.wb-kaart-beeld { aspect-ratio: 1 / 1.2; display: grid; place-items: center; background: var(--linnen); overflow: hidden; }
.wb-kaart-beeld img { width: 100%; height: 100%; object-fit: cover; }
.wb-kaart-beeld span { font-size: 2.4rem; }
.wb-kaart-tekst { padding: 14px 16px 18px; }
.wb-kaart-tekst h2, .wb-kaart-tekst h3 { font-size: 1.02rem; margin: 0 0 6px; }
.wb-kaart-meta { font-size: .84rem; color: var(--klei); font-weight: 600; margin: 0 0 6px; }
.wb-kaart-tekst p { font-size: .9rem; color: var(--inkt-zacht); margin: 0; line-height: 1.5; }

.wb-paginering { margin-top: 36px; text-align: center; }

@media (max-width: 820px) {
    .wb-detail { grid-template-columns: 1fr; gap: 26px; }
    .wb-beeld { max-width: 420px; margin: 0 auto; }
}

/* ══════════════════════════════════════
   ZOEKBALKEN — leesbare invoertekst
   De zoekvelden hadden wel 'border:none; background:none;' maar geen
   eigen tekstkleur. Daardoor erfden ze de kleur van hun omgeving en
   werd getypte tekst op sommige pagina's onleesbaar. Hier expliciet
   vastgezet, met var() zodat het in de donkere modus mee omschakelt.

   -webkit-text-fill-color staat er los bij: Safari en Chrome laten die
   bij invoervelden winnen van 'color', dus zonder die regel zou de fix
   in die browsers alsnog niet aanslaan.
══════════════════════════════════════ */
.hero-zoek input,
.hero-zoek-wrap input,
.categorie-zoek input,
input[type="search"],
input[type="text"] {
    color: var(--inkt) !important;
    -webkit-text-fill-color: var(--inkt);
    opacity: 1;
}

.hero-zoek input::placeholder,
.hero-zoek-wrap input::placeholder,
.categorie-zoek input::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder {
    color: var(--inkt-zacht);
    -webkit-text-fill-color: var(--inkt-zacht);
    opacity: 0.8;
}

/* Chrome kleurt automatisch ingevulde velden anders in; dit houdt ze leesbaar */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--inkt);
    box-shadow: 0 0 0 1000px var(--wit-papier) inset;
}