/* Works with, onderaan /connect (27 oktober 2026). Bouwt op dag.css en de tokens van connect.css
   (licht en donker): haarlijnen, geen kaarten. De tabel is ook zonder JavaScript leesbaar;
   connect-apps.js zet het zoekveld en de chips aan. */
.wa .sectie-kop{margin-bottom:clamp(24px,3vw,36px)}
.wa .intro{max-width:46ch}
.wa-adres{display:inline-block;margin-top:6px;font:400 .86rem/1.5 var(--mono);color:var(--dag-ink);overflow-wrap:anywhere}

/* zoeken en filteren */
.wa-zoek[hidden]{display:none}
.wa-zoek{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:12px 20px;align-items:center;margin-bottom:clamp(20px,2.4vw,28px)}
.wa-veld{position:relative;display:block}
.wa-veld svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dag-mist);pointer-events:none}
.wa-veld input{width:100%;min-height:48px;padding:11px 14px 11px 42px;border:1px solid var(--dag-lijn-sterk);border-radius:0;background:var(--wit);color:var(--dag-ink);font:400 1rem/1.4 var(--tekst);-webkit-appearance:none;appearance:none}
.wa-veld input::placeholder{color:var(--dag-mist)}
.wa-veld input:hover{border-color:var(--dag-ink)}
.wa-veld input:focus-visible{outline:2px solid var(--dag-ink);outline-offset:2px;border-color:var(--dag-ink)}
.wa-veld input::-webkit-search-cancel-button{cursor:pointer}
.wa-chips{display:flex;flex-wrap:wrap;gap:8px}
.wa-chips button{min-height:44px;padding:9px 16px;border:1px solid var(--dag-lijn-sterk);border-radius:999px;background:transparent;color:var(--dag-ink);font:500 .9rem/1.3 var(--tekst);cursor:pointer;transition:background .2s var(--gemak),color .2s var(--gemak),border-color .2s var(--gemak)}
.wa-chips button:hover{border-color:var(--dag-ink)}
.wa-chips button[aria-pressed="true"]{background:var(--dag-ink);color:var(--dag);border-color:var(--dag-ink)}

/* de lijst */
.wa-tabel table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.wa-tabel thead th{padding:0 20px 10px 0;text-align:left;font:500 .72rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dag-mist);border-bottom:1px solid var(--dag-lijn-sterk)}
.wa-tabel tbody tr{border-bottom:1px solid var(--dag-lijn)}
.wa-tabel tbody tr[hidden]{display:none}
.wa-tabel tbody :is(th,td){padding:18px 20px 18px 0;vertical-align:top;text-align:left}
.wa-naam{width:24%;font:540 1.08rem/1.3 var(--display);letter-spacing:-.015em}
.wa-soort{display:block;margin-top:4px;font:400 .82rem/1.3 var(--tekst);letter-spacing:0;color:var(--dag-mist)}
.wa-hoe{color:var(--dag-ink);max-width:68ch}
.wa-hoe a,.wa-bron a{text-decoration:underline;text-decoration-color:var(--dag-lijn-sterk)}
.wa-hoe a:hover,.wa-bron a:hover{text-decoration-color:currentColor}
.wa-hoe code{font:400 .84em/1.5 var(--mono);background:var(--wit);border:1px solid var(--dag-lijn);padding:1px 5px;overflow-wrap:anywhere}
.wa-bron{width:16%;padding-right:0!important;font-size:.88rem;color:var(--dag-mist)}
.wa-tabel tbody tr:last-child{border-bottom-color:var(--dag-lijn-sterk)}

.wa-leeg[hidden]{display:none}
.wa-leeg{padding:28px 0;border-bottom:1px solid var(--dag-lijn);display:grid;gap:8px;justify-items:start}
.wa-leeg p{max-width:58ch;color:var(--dag-mist)}
.wa-leeg p:first-child{color:var(--dag-ink);font-size:1.05rem}
.wa-leeg .knop{margin-top:8px}
.wa-noot{margin-top:20px;max-width:72ch;color:var(--dag-mist);font-size:.9rem}

@media (max-width:900px){.wa-zoek{grid-template-columns:1fr}}
/* Telefoon: elke regel een blok, de chips in één schuifbare rij. */
@media (max-width:760px){
  .wa-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--goot) * -1);padding:2px var(--goot) 4px;scrollbar-width:none;scroll-padding-inline:var(--goot)}
  .wa-chips::-webkit-scrollbar{display:none}
  .wa-chips button{flex:none}
  .wa-tabel table,.wa-tabel tbody{display:block}
  .wa-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wa-tabel tbody tr{display:block;padding:18px 0}
  .wa-tabel tbody tr[hidden]{display:none}
  .wa-tabel tbody :is(th,td){display:block;width:auto;padding:0}
  .wa-naam .wa-soort{display:inline;margin:0 0 0 8px}
  .wa-hoe{margin-top:8px}
  .wa-bron{margin-top:8px}
  .wa-bron::before{content:"Source: "}
}