/* ── Aanvullingen op site.css: home, zoeken, detail (Fase 1–3) ── */

/* Home */
.hero{margin:24px 0 8px}
.hero-sub{max-width:56ch;color:var(--tx-3);font-size:1.02rem}
.grootzoek{display:flex;gap:10px;margin:22px 0 8px;max-width:720px}
.grootzoek input[type=search]{flex:1;font-size:1.05rem;padding:13px 18px;border-radius:999px}
.grootzoek .knop{padding:12px 22px}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:28px 0}
.tegel{padding:16px 18px}
.tegel b{display:block;font:700 1.5rem/1.15 var(--f-display);color:var(--tx-1);letter-spacing:-.01em}
.tegel span{display:block;margin-top:4px;font:600 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-4)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips small{color:var(--tx-4)}

/* Zoeken */
.zoeken-hero h1{font-size:clamp(24px,3vw,34px)}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:14px 16px;margin:14px 0 20px}
.filters label{display:flex;flex-direction:column;gap:4px;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4)}
.filters input,.filters select{min-width:150px}
/* WP12 (V1): labels/velden in de filterbalk mogen krimpen — een <select> met
   lange opties weigert anders te krimpen en veroorzaakt zijscroll rond 768px. */
.filters label{min-width:0}
.filters input,.filters select{max-width:100%}
.kopregel-resultaten{margin:18px 0 10px;color:var(--tx-2)}
.kopregel-resultaten strong{font:700 1.05rem var(--f-display);color:var(--tx-1)}
.kopregel-resultaten em{color:var(--tx-1);font-style:normal}
.rangschikking{display:block;font-size:12.5px;color:var(--tx-4)}
.zoektijd{float:right;color:var(--tx-4);font-size:12px}
.treffer{padding:18px;margin:12px 0}
.treffer-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.treffer .ecli{font-weight:600;color:var(--tx-1)}
.treffer .ecli:hover{color:var(--accent-2)}
.treffer-meta{margin-top:6px;color:var(--tx-3);font-size:.9rem}
.treffer-snippet{margin:8px 0 6px;color:var(--tx-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.treffer-acties{display:flex;justify-content:flex-end}
.graaflink{font:600 12.5px var(--f-mono);color:var(--tx-3)}
.graaflink:hover{color:var(--accent)}
.leeg{padding:22px}
.tips{margin:8px 0 0;padding-left:18px;color:var(--tx-3)}
.pagina{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0;color:var(--tx-4)}
.zoekfout{padding:18px;border-color:var(--rood);color:var(--rood)}

/* Uitspraakdetail */
.detail-kop{margin-bottom:18px}
.ecli-titel{font-size:24px}
.statusbalk{display:flex;align-items:center;gap:10px;padding:14px;font-size:.95rem;margin:16px 0}
.statusbalk.rood{border-color:var(--rood);background:var(--rood-dim);color:var(--rood)}
.statusbalk.rood a{color:var(--rood);text-decoration:underline}
.statusbalk.groen{border-color:var(--groen);background:var(--groen-dim);color:var(--groen)}
.statusbalk.geel{border-color:var(--oranje);background:var(--oranje-dim);color:var(--oranje)}
.statusbalk.geel a{color:var(--oranje);text-decoration:underline}
.statusbalk .icoon{width:20px;height:20px}
.detail-acties{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.meta-paneel{padding:18px}
.metagrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin:8px 0 0}
.metagrid dt{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-4)}
.metagrid dd{margin:0;color:var(--tx-2)}
.procesketen{list-style:none;margin:0;padding:0}
.proc-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;margin:8px 0;font-size:.92rem}
.proc-links{color:var(--tx-2)}
.gevolg-rood{font-style:normal;color:var(--rood)}
.gevolg-grijs{font-style:normal;color:var(--tx-4)}
.indicatie{padding:18px;border-left:3px solid var(--accent)}
.indicatie p{margin:0;color:var(--tx-2)}
.citatie-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.citlijst{list-style:none;margin:0;padding:10px 16px;max-height:60vh;overflow-y:auto}
.citlijst li{padding:5px 0;border-bottom:1px solid var(--lijn);font-size:.9rem}
.citlijst li:last-child{border-bottom:0}
.citlijst small{color:var(--tx-4);margin-left:6px}
.citlijst .leeg{color:var(--tx-4);border:0}
.volledig{margin-top:8px}
.volledig summary{cursor:pointer;padding:12px 16px;font:600 .9rem var(--f-display);color:var(--tx-1)}
.volledig .tekst{padding:4px 18px 18px;max-height:70vh;overflow-y:auto;max-width:75ch;line-height:1.7;color:var(--tx-2)}
.leegtekst{color:var(--tx-4)}

/* Themaknop */
.themaknop{padding:8px 10px;border-radius:999px;line-height:0}

/* Mobiel */
@media (max-width:760px){
  .kop-in{flex-wrap:wrap;height:auto;min-height:60px;padding:8px 16px;row-gap:2px}
  .menu{order:3;width:100%}
  .metagrid{grid-template-columns:1fr}
  .citatie-kolommen{grid-template-columns:1fr}
  .grootzoek{flex-direction:column}
  .filters input,.filters select{min-width:0;width:100%}
  .filters label{width:100%}
  .zoektijd{float:none;display:block}
}

/* WP12 (V1): tussenbereik 761-1024px — de kop mag nooit overlopen.
   .kop-rechts (thema+Inloggen+staging, ~219px) mag krimpen; onder 946px (merk
   268 + menu 399 + knoppen 219 + gaps/padding ≈ 946) wrapt de kop als
   voorbereiding op het mobiele patroon uit de opdracht (B3). */
.kop-rechts{min-width:0}
@media (max-width:1024px){
  .kop-in{gap:10px}
  .menu a{padding:8px 6px}
}
@media (max-width:945px){
  .kop-in{flex-wrap:wrap;height:auto;min-height:60px;padding:8px 16px;row-gap:2px}
  .kop-rechts{order:2;margin-left:auto}
  .menu{order:3;width:100%}
}

/* WP2: klikbare wetsartikel-chips op de detailpagina (verplaatst uit uitspraak.html door Claude) */
.wet-chip{text-decoration:none}
.wet-chip:hover{border-color:var(--accent);color:var(--accent-2)}