/* ---------------------------------------------------------------------------
 * Zoeken — de balk in de kop en het resultaatscherm (docs/zoeken-plan.md §4.3)
 *
 * Twee maten van dezelfde balk: smal in de topbalk, breed op het scherm zelf.
 * Geen eigen kleuren: alles komt uit de tokens, zodat de nachtvariant meeloopt.
 * ------------------------------------------------------------------------- */

.nms-zoek__balk { display: flex; align-items: center; gap: var(--nms-gap-10); }

/* De balk in de topbalk. Die valt buiten .nms-shell__main en krijgt de
   generieke veldstijl dus niet; vandaar dat hij hem hier zelf draagt. */
.nms-zoek__veld {
  width: 14rem;
  height: var(--nms-knop-h);
  padding: 0 var(--nms-veld-pad-x) 0 calc(var(--nms-veld-pad-x) * 2 + var(--nms-mark-size));
  font-family: var(--font-core);
  font-size: var(--nms-text-13);
  color: var(--text-body);
  background: var(--surface-card)
    url("../icons/search.svg") no-repeat left var(--nms-veld-pad-x) center / var(--nms-mark-size);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  border-radius: var(--radius-input);
  transition: var(--transition-interactive);
}
.nms-zoek__veld:focus { border-color: var(--text-link); outline: none; }
.nms-zoek__veld::placeholder { color: var(--text-muted); }

/* De balk op het zoekscherm zelf: het veld neemt de ruimte, de knop niet. */
.nms-zoek__balk--groot { margin-bottom: var(--space-4); }
.nms-zoek__balk--groot .nms-veld { flex: 1 1 auto; }
.nms-zoek__balk--groot .nms-knop { flex: none; }

/* --- Filters ------------------------------------------------------------- */
.nms-zoek__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.nms-zoek__filterrij { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nms-gap-2); }
.nms-zoek__filterkop {
  min-width: 4.5rem;
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--nms-tracking-knop);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nms-zoek__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--nms-veld-h-sm);
  padding: 0 var(--nms-cell-pad-x);
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  background: var(--surface-card);
  border: var(--nms-hairline-w) solid var(--border-hairline);
  border-radius: var(--radius-input);
}
.nms-zoek__filter:hover { border-color: var(--text-link); }
.nms-zoek__filter span { font-variant-numeric: var(--nms-numeric); color: var(--text-muted); }
/* Dezelfde tokens als de primaire knop, zodat de gekozen filter in beide
   thema's contrast houdt -- navy hard neerzetten maakt hem 's nachts
   onzichtbaar op zijn eigen achtergrond. */
.nms-zoek__filter--actief {
  color: var(--action-fg);
  background: var(--action-bg);
  border-color: var(--action-bg);
}
.nms-zoek__filter--actief span { color: inherit; opacity: .75; }

/* --- Treffers ------------------------------------------------------------ */
.nms-zoek__lijst { list-style: none; margin: 0; padding: 0; }
.nms-zoek__treffer { padding: var(--space-3) 0; border-top: var(--nms-hairline-w) solid var(--border-hairline); }
.nms-zoek__treffer:first-child { border-top: 0; padding-top: 0; }

.nms-zoek__titel {
  font-size: var(--nms-text-15, 15px);
  font-weight: var(--weight-semibold);
  /* --text-link en niet --nimo-navy: in de nachtvariant is navy geen inkt maar
     de achtergrond, en dan staat de titel onzichtbaar op zijn eigen vlak. */
  color: var(--text-link);
  text-decoration: none;
}
.nms-zoek__titel:hover { color: var(--text-link-hover); text-decoration: underline; }

.nms-zoek__fragment {
  margin: var(--space-1) 0 0;
  font-size: var(--nms-text-13);
  line-height: var(--leading-body);
  color: var(--text-body);
}
/* De gevonden woorden. Geen geel vlak: het merk heeft geen accentkleur, dus
   draagt de nadruk hier vorm in plaats van kleur. */
.nms-zoek__fragment mark {
  background: var(--nms-markering-bg, var(--nimo-blauwtint));
  color: var(--nms-markering-fg, var(--nimo-navy));
  font-weight: var(--weight-semibold);
}
/* In de nachtvariant draait het vlak om: blauwtint is daar de inkt. */
[data-theme="night"] .nms-zoek__fragment mark {
  background: var(--nimo-blauwtint);
  color: var(--nimo-navy);
}

.nms-zoek__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nms-gap-10);
  margin: var(--space-2) 0 0;
  font-size: var(--nms-text-11);
  color: var(--text-muted);
}
.nms-zoek__soort {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--nms-tracking-knop);
  text-transform: uppercase;
  color: var(--text-link);
}

/* --- Voettekst ----------------------------------------------------------- */
/* Staat onder elk resultaat, ook onder een leeg resultaat. Zie §4.3: nul
   treffers mag nooit als vaststelling gelden. */
.nms-zoek__voet {
  margin: var(--space-3) 0 0;
  font-size: var(--nms-text-11);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

/* Een treffer die niet meer geldt: vervangen, vervallen, inactief of
   gearchiveerd. Hij blijft vindbaar -- je zoekt soms juist het oude stuk --
   maar hij zegt het, boven het fragment en niet klein achteraan. */
.nms-zoek__verlopen {
  margin: var(--space-1) 0 0;
  font-size: var(--nms-text-11);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--nms-tracking-knop);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nms-zoek__treffer--verlopen .nms-zoek__titel { text-decoration: line-through; }
.nms-zoek__treffer--verlopen .nms-zoek__fragment { color: var(--text-muted); }

/* "Toon meer" staat in de voetregel, naast het aantal: daar is de plek waar de
   vraag opkomt ("staat hier alles?"), en niet onderaan als losse knop. */
.nms-zoek__meer {
  font-weight: var(--weight-semibold);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: var(--nms-gap-2);
}
.nms-zoek__meer:hover { color: var(--text-link-hover); }