/*
 * Zoekbalk op de onderrand van de bewegende kop van Home (Henrik 11-11-2026). De html komt uit functions.php, het gedrag uit
 * zoekbalk.js. Maten uit de proef, op het oog gekozen:
 * - Desktop: 780 breed, 56 hoog, hoeken 28 (een zuivere pil; open houdt de kaart dezelfde bovenhoeken). Het midden van de balk ligt
 *   precies op de onderkant van de banner (top: 100% - 28). Rand en schaduw als de banner (ring #bad6ec, 0 22 40 -20).
 * - Invoer 17 px (= tekst), placeholder #7a8ba0 (blauwgrijs, 3,5:1), weg bij focus. Schakelaar en pillen 14 px. Een muisklik op de
 *   schakelaar laat de focus in het veld (anders flitste de placeholder bij indrukken, Henrik 11-11).
 * - "Werkt met …" (.werkt-met) staat in de banner onder de knop, optisch midden tussen knop en balk: knop → hoofdletters 35 en
 *   basislijn → balk 35, gelijk aan zin → knop. Daarom margin-top 29 en de banner onderaan 56 (was 64). Kleur #6b7d93 (3,6:1 op de
 *   banner, bewust: een bijschrift).
 * - Telefoon: de balk staat onder "Werkt met", voor de illustratie, over de volle breedte; de schakelaar komt pas bij openen.
 */
.werkt-met{font-size:14px;color:var(--bijschrift)}
.werkt-met strong{color:inherit}
.is-style-bewegende-kop .werkt-met{margin-block-start:29px}

.is-style-bewegende-kop:has(>.zoekbalk){position:relative;z-index:3}
.is-style-bewegende-kop>.zoekbalk{margin:0}
.zoekbalk{font-size:17px}
.zoekbalk form{margin:0;background:var(--wp--preset--color--base);border-radius:28px;box-shadow:0 0 0 1px var(--ring),0 22px 40px -20px rgba(70,85,110,.36);overflow:hidden}
/* Open: onderhoeken 16 = hoek van de rijen (8) + ruimte (8), concentrisch (Henrik 12-11: rijen 8 i.p.v. 12, "8/16 is mooi"; was
   20 = 12 + 8 op 11-11). Is het paneel tijdens het zoeken nog dicht (.stil), dan blijft de balk een zuivere pil. */
.zoekbalk.open form{border-radius:28px 28px 16px 16px}
.zoekbalk.open.stil form{border-radius:28px}
.zoek-rij{display:flex;align-items:center;gap:6px;padding:0 6px;height:56px;box-sizing:border-box}
/* Spoor en vergrootglas (Henrik 11-11, mix-en-match): een andere rol, dus een andere tint, uit dezelfde blauwe familie (OKLCH h 247).
   Spoor = ondergrond van de keuze, licht #ebf2f9 (L .959, een derde van loep-oud #eef4fa naar merk licht); vergrootglas = knop, in rust
   tonaal #e0ecf7 (L .937), bij typen vol merkblauw met wit icoon ("nadruk volgt gereedheid"; naast de rode knop blijft hij in rust licht). */
.zoek-voor{position:relative;isolation:isolate;display:flex;gap:2px;padding:3px;background:var(--spoor);border-radius:999px;flex:none}
.zoek-voor button{border:0;background:none;border-radius:999px;padding:7px 13px;font:inherit;font-size:14px;font-weight:600;line-height:1.5;color:var(--wp--preset--color--inkt);cursor:pointer;transition:color .25s}
.zoek-voor button[aria-pressed=true]{color:var(--wp--preset--color--merk)}
/* Het witte vlak glijdt (Henrik 11-11, 250 ms): één vlak achter de knoppen, plek en breedte uit zoekbalk.js (--x, --w). Zonder script
   (geen .glijdt) krijgt de gekozen knop zelf het vlak. */
.zoek-voor:not(.glijdt) button[aria-pressed=true],.zoek-voor.glijdt::before{background:var(--wp--preset--color--base);box-shadow:0 1px 3px rgba(9,74,130,.18)}
.zoek-voor.glijdt::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--w);transform:translateX(var(--x));border-radius:999px;transition:transform .25s cubic-bezier(.2,.8,.2,1),width .25s cubic-bezier(.2,.8,.2,1)}
.zoek-voor.zonder::before{transition:none}
@media (prefers-reduced-motion:reduce){.zoek-voor.glijdt::before,.zoek-voor button{transition:none}}
.zoekbalk input{flex:1;min-width:0;height:44px;border:0;outline:0;background:none;padding:0 10px;font:inherit;font-size:17px;color:var(--wp--preset--color--inkt)}
.zoekbalk input::placeholder{color:var(--placeholder);opacity:1}
.zoekbalk input:focus::placeholder{color:transparent}
.zoekbalk input::-webkit-search-cancel-button{-webkit-appearance:none}
.zoek-loep{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--knop-tonaal);color:var(--wp--preset--color--merk);cursor:pointer;transition:background-color .25s,color .25s}
.zoek-loep:hover{background:var(--knop-tonaal-hover);color:var(--wp--preset--color--merk-tekst)}
.zoekbalk:has(input:not(:placeholder-shown)) .zoek-loep{background:var(--wp--preset--color--merk);color:var(--wp--preset--color--base)}
.zoekbalk:has(input:not(:placeholder-shown)) .zoek-loep:hover{background:var(--wp--preset--color--merk-tekst);color:var(--wp--preset--color--base)}
@media (prefers-reduced-motion:reduce){.zoek-loep{transition:none}}
.zoek-loep svg{width:19px;height:19px}
/* Zoeken (Henrik 12-11, variant C): de loep zelf zegt dat hij bezig is, in plaats van een leeg paneel. Pas na 150 ms, zodat een snel
   antwoord geen flits geeft (vertraagde lader). De ring is 18 = het icoon, 2 dik, wit op merk; zonder beweging staat hij stil. */
.zoek-loep{position:relative}
.zoekbalk.zoekt .zoek-loep svg{animation:zoek-weg .15s .15s both}
.zoekbalk.zoekt .zoek-loep::after{content:"";position:absolute;inset:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--wp--preset--color--base);animation:zoek-draai .7s linear infinite,zoek-in .15s .15s both}
@keyframes zoek-weg{to{opacity:0}}
@keyframes zoek-in{from{opacity:0}}
@keyframes zoek-draai{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.zoekbalk.zoekt .zoek-loep::after{animation:zoek-in .15s .15s both}}
.zoek-paneel{border-top:1px solid var(--wp--preset--color--lijn)}
/* Pillen: boven en onder 16 (Henrik 12-11; was 14/16). Eronder een ingesprongen lijn in het lichtere #e3e8ee (variant C): de lijn
   tussen invoer en paneel loopt van rand tot rand in lijn, deze hoort bij de pillen en geeft de scrollende lijst een vaste grens. Geen
   pillen (eenvoudige balk, of alles weggefilterd): dan ook geen tweede lijn, nooit twee lijnen op elkaar. */
.zoek-pillen{position:relative;display:flex;flex-wrap:wrap;gap:6px;padding:16px}
.zoek-pillen::after{content:"";position:absolute;left:16px;right:16px;bottom:0;border-top:1px solid var(--lijn-kopbalk)}
/* Alleen pillen, nog geen pagina's eronder: geen lijn onderaan het paneel. */
.zoek-pillen:has(~.zoek-paginas[hidden])::after{display:none}
.zoek-pillen a{display:inline-block;padding:4px 10px;border:1px solid var(--wp--preset--color--lijn);border-radius:999px;background:var(--wp--preset--color--base);font-size:14px;line-height:1.5;color:var(--wp--preset--color--inkt);text-decoration:none}
.zoek-pillen a[hidden]{display:none}
/* .actief = de ene markering van muis én pijltjes (zoekbalk.js), dus geen aparte :hover: anders konden er twee items tegelijk oplichten. */
.zoek-pillen a.actief{border-color:var(--wp--preset--color--merk-tekst);color:var(--wp--preset--color--merk-tekst)}
.zoek-paginas{list-style:none;margin:0;padding:6px 8px 8px}
.zoek-paginas a{display:flex;align-items:baseline;gap:16px;padding:9px 14px;border-radius:8px;font-size:16px;color:var(--wp--preset--color--inkt);text-decoration:none}
/* De vorige resultaten tijdens het zoeken: gedimd en niet aanklikbaar. Dimmen met een korte aanloop; terug is meteen (de nieuwe staan er). */
.zoek-paginas.oud{opacity:.45;pointer-events:none;transition:opacity .15s .1s}
.zoek-paginas a.actief{background:var(--hover-licht);color:var(--wp--preset--color--merk-tekst)}
.zoek-paginas span{margin-left:auto;font-size:13px;color:var(--wp--preset--color--zacht);white-space:nowrap}
.zoek-leeg{margin:0;padding:14px 22px 16px;font-size:15px;color:var(--wp--preset--color--zacht)}
/* Alle resultaten in een lijst die zelf scrolt (Henrik 12-11, overal gelijk): hoogstens 6,5 rij, de halve rij zegt dat er meer is. */
.zoek-paginas{max-height:270px;overflow-y:auto;overscroll-behavior:contain}

@media (min-width:782px){
	.is-style-bewegende-kop:has(>.zoekbalk){padding-bottom:56px}
	.is-style-bewegende-kop>.zoekbalk{position:absolute;left:50%;top:calc(100% - 28px);transform:translateX(-50%);width:780px;max-width:calc(100% - 48px)}
}
@media (max-width:781px){
	.is-style-bewegende-kop>.zoekbalk{order:1;width:100%;margin-top:28px}
	.is-style-bewegende-kop>.zoekbalk{margin:28px 0 0}
	.zoek-rij{flex-wrap:wrap;height:auto;min-height:56px;padding:6px}
	.zoek-voor{display:none}
	.zoekbalk.open .zoek-voor{display:flex;order:5;flex:1 1 100%;margin-top:4px}
	.zoekbalk.open .zoek-voor button{flex:1}
	.zoek-pillen{padding:14px}
	.zoek-pillen::after{left:14px;right:14px}
}

/* Eenvoudige balk (404 en zoekresultaten, Henrik 12-11): zelfde pil en gedrag, zonder schakelaar en pillen. Tekst begint 24 van de
   rand (zoals de placeholder op Home na de schakelaar ruimte krijgt). Het paneel valt over de inhoud eronder, net als op Home, zodat
   de tegels niet verspringen: de plek houdt 56, het formulier ligt erboven. */
.zoekbalk--eenvoudig{position:relative;z-index:5;height:56px}
.zoekbalk--eenvoudig form{position:absolute;inset:0 0 auto 0}
.zoekbalk--eenvoudig input{padding-left:18px}
@media (max-width:781px){
	.zoekbalk--eenvoudig .zoek-rij{flex-wrap:nowrap;height:56px;padding:0 6px}
}