/* Stijl 2026 voor zoeken.navondo.nl (docs/stijl-2026.md): een laag over de opmaak van de pagina's, geladen ná thema.css.
   Wit, zachte vlakken zonder randen, grote ronde hoeken, pillen, koppen bijna zwart. Verandert alleen het uiterlijk. */

body{background:var(--surface)}
h1,h2,h3{color:var(--kop)}
h1{letter-spacing:-.055em}
.eyebrow{text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600}

/* Kop als zwevende pil */
.nav{margin-top:16px;height:auto;min-height:64px;padding:10px 10px 10px 22px;border-radius:999px;background:color-mix(in srgb,var(--vlak) 92%,transparent);backdrop-filter:blur(12px)}
.nav-links{font-weight:600;font-size:.9rem}
.nav-links a:last-child{border-radius:999px}
.intro{border-top:0}

/* Zoekbalk als pil */
.searchbar{border:0;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 14px 34px rgba(15,26,30,.12);background:var(--vlak-2)}
.searchbar button,.filter-button,.view-button{border-radius:999px;padding:12px 20px}
.understood .chip{border-radius:999px}

/* Filters en lijsten als vlak */
.filters{border:0;border-radius:24px;background:var(--vlak)}
.filter select,.filter input:not([type=checkbox]){border-radius:12px;border-color:transparent;background:var(--vlak-2)}
.view-toggle,.om-me-heen{border-radius:999px;border-color:transparent;background:var(--vlak)}
.view-toggle button{border-radius:999px}
.pager button{border-radius:999px}

/* Woningkaarten: zonder rand, foto met ronde hoeken */
.card{border:0;border-radius:24px;background:var(--vlak)}
.card:hover{box-shadow:var(--shadow-hover)}
.cards.list .card{border-radius:24px}
.card .status{border-radius:999px}
.map{border:0;border-radius:24px}
.open-huis{border:0;border-radius:24px}
.result-head h2{letter-spacing:-.04em}

/* Woningpagina */
.gallery{border-radius:24px;overflow:hidden}
.summary{border-bottom:0}
.contact-card,.feature-card{border:0;border-radius:24px;background:var(--vlak);box-shadow:none}
.key-facts span{border-radius:999px;background:var(--vlak)}
.fit-box{border:0;border-radius:18px;background:var(--vlak)}
.extra-note{border-radius:18px;border-left:0;background:var(--vlak)}
.icon-button{border-color:transparent;background:var(--vlak)}
.request-fields input,.request-fields textarea{border-radius:12px}

/* Voet */
.site-footer{border-top:1px solid var(--line)}

/* Tekstkleuren (stijl 2026): vier op licht. Koppen bijna zwart (--kop), lopende tekst neutraal donkergrijs (--text), bijtekst grijs
   (--muted), accent koper (--copper-text) voor labels en links met een pijl. html:root wint van thema.css. */
html:root{--text:#3d4548;--muted:#6b7377}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]){--text:#c9d0d3;--muted:#98a3a7}}
html:root[data-theme=dark]{--text:#c9d0d3;--muted:#98a3a7}
body .button.secondary{color:var(--kop);box-shadow:inset 0 0 0 1.5px var(--kop);background-image:linear-gradient(var(--kop),var(--kop))}
body .button.secondary:hover{color:var(--surface)}

/* Blauwgroen (--ink) alleen nog voor het beeldmerk: tekst, links, knoppen en de letters van het logo bijna zwart; labels neutraal donkergrijs. */
html:root{--ink:#0f1a1e;--label:#3d4548}
@media (prefers-color-scheme:dark){html:root:not([data-theme=light]){--ink:#eef3f4;--label:#c9d0d3}}
html:root[data-theme=dark]{--ink:#eef3f4;--label:#c9d0d3}
.brand,.brand-lockup{color:var(--kop)}

/* Matchmeter op de tegels (besluit 2026-10-09: geen percentage): één vakje per gekozen voorkeur. */
.card-match{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.card-match .card-niveau{margin:0}
.match-meter{display:inline-flex;gap:3px}
.match-meter i{width:16px;height:9px;border-radius:3px;background:var(--line)}
.match-meter i.ja{background:var(--green)}
.match-meter i.onbekend{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
/* Snelwensen onder de zoekbalk */
.snelwens{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.snelwens span{color:var(--text);font-size:.92rem;font-weight:600;margin-right:4px}
.snelwens button{border:0;border-radius:999px;padding:8px 14px;background:var(--vlak);color:var(--kop);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.snelwens button:hover{background:var(--kop);color:var(--surface)}