/* wet.css — WP2 "pagina per wetsartikel" (Aether #408).
   Gebruikt uitsluitend de tokens uit tokens.css + klassen uit site.css/detail.css. */

.wet-melding{margin:14px auto 0;max-width:640px;color:var(--oranje);font:500 .95rem var(--f-body)}

/* ── overzicht /wet ─────────────────────────────────────────────────── */
.wet-lijst{display:flex;flex-direction:column;gap:10px;max-width:860px;margin:26px auto;padding:0 20px}
.wet-rij{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;flex-wrap:wrap}
.wet-rij:hover{border-color:var(--accent)}
.wet-naam{display:flex;flex-direction:column;gap:2px;min-width:200px}
.wet-naam b{font:700 1.02rem var(--f-display);color:var(--tx-1)}
.wet-volledig{font:400 .85rem var(--f-body);color:var(--tx-3)}
.wet-aantallen{display:flex;gap:8px;flex-wrap:wrap}

/* ── wetpagina /wet/<slug> ──────────────────────────────────────────── */
.wet-filterpaneel{max-width:860px;margin:0 auto 18px;padding:10px 14px}
.wet-filterpaneel input{width:100%;background:var(--bg-1);border:1px solid var(--lijn);border-radius:999px;
  padding:9px 16px;color:var(--tx-1);font:.95rem var(--f-body);outline:none}
.wet-filterpaneel input:focus{border-color:var(--accent)}
.wet-groep{max-width:860px;margin:0 auto 26px;padding:0 20px}
.wet-groep h2{font:600 .95rem var(--f-display);letter-spacing:.02em;color:var(--tx-2);margin:0 0 10px}
.wet-artikelen{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.wet-artikel{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;text-decoration:none}
.wet-artikel:hover{border-color:var(--accent)}
.wet-artikelnummer{color:var(--tx-1);font-size:.9rem}
.wet-meer{grid-column:1/-1}
.wet-meer summary{display:inline-flex;cursor:pointer;list-style:none}
.wet-meer summary::-webkit-details-marker{display:none}
.wet-meer .wet-artikelen{margin-top:8px}

/* ── artikelpagina /wet/<slug>/<artikel> ────────────────────────────── */
.wet-zoekklein{display:flex;gap:8px;max-width:640px;margin:18px auto 0;width:100%}
.wet-zoekklein input{flex:1;min-width:0;background:var(--bg-1);border:1px solid var(--lijn);border-radius:999px;
  padding:9px 16px;color:var(--tx-1);font:.95rem var(--f-body);outline:none}
.wet-zoekklein input:focus{border-color:var(--accent)}
.wet-besturing{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.wet-lidchips{display:flex;gap:8px;flex-wrap:wrap}
.wet-lidchips .chip{text-decoration:none}
.wet-lidchips .chip.actief{color:var(--accent-tx);background:var(--accent);border-color:var(--accent)}
.wet-sort{display:flex;gap:8px}
.wet-sort .knop.actief{border-color:var(--accent);color:var(--accent-2)}
.wet-officieel{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;vertical-align:middle}
.wet-officieel:hover{color:var(--accent-2)}

/* wet-hint boven zoekresultaten in zoeken.html */
a.paneel.wet-hint{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto 16px;padding:13px 18px;
  text-decoration:none;color:var(--tx-1);font:500 .97rem var(--f-body);flex-wrap:wrap}
a.paneel.wet-hint:hover{border-color:var(--accent)}
.wet-hint .wet-hint-art{font:700 .97rem var(--f-display);color:var(--accent)}
@media (max-width:640px){
  .wet-rij{flex-direction:column;align-items:flex-start}
  .wet-besturing{flex-direction:column;align-items:flex-start}
}