/* ============================================================================
   zoeken.css — zoekbalk in de kop, typ-suggesties en de zoekresultatenpagina.
   EIGENDOM VAN DE ZOEK-AGENT. Tokens komen uit stijl.css (fundament).

   Dit bestand staat in de head van views/layout.ejs en wordt dus op ELKE
   pagina geladen, omdat de zoekbalk overal in de kop staat. Alles wat alleen
   bij de zoekpagina hoort staat daarom achter een eigen .zoek-*-klasse.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Zoekbalk in de kop
   ------------------------------------------------------------------------ */

.site-kop__zoek {
  display: flex;
  align-items: center;
  position: static; /* het uitklappaneel hangt aan .site-kop, niet hieraan */
}

/* Het vinkje dat op mobiel de balk uitklapt: onzichtbaar maar wél focusbaar,
   zodat je hem met Tab + spatie kunt bedienen. */
.zoek-schakelaar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 2,75rem = 44px: het kleinste aanraakvlak dat WCAG 2.5.5 nog goedkeurt.
   Op een telefoon is dit vergrootglas de énige ingang naar het zoeken, dus
   hier valt niets af te dingen. */
.zoek-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--kleur-navy);
  cursor: pointer;
}
.zoek-knop:hover { background: var(--kleur-zwembad); }
.zoek-schakelaar:focus-visible + .zoek-knop {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 2px;
}

/* De balk zelf */
.zoekbalk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.zoekbalk__veld {
  position: relative; /* anker voor de suggestielijst */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.zoekbalk__icoon {
  position: absolute;
  left: 0.7rem;
  color: var(--kleur-navy);
  opacity: 0.55;
  pointer-events: none;
}
.zoekbalk__invoer {
  width: 100%;
  min-width: 0; /* mag meekrimpen in een krappe kop */
  padding: 0.5rem 0.9rem 0.5rem 2.25rem;
  /* 0,5 alfa navy op wit = #88929E: contrast 3,2:1 met de witte kop. Onder
     die waarde haalt de rand van een invoerveld WCAG 1.4.11 niet en verdwijnt
     de zoekbalk voor wie minder contrast ziet. */
  border: 2px solid rgba(16, 36, 62, 0.5);
  border-radius: var(--radius-knop);
  background: var(--kleur-wit);
  color: var(--kleur-navy);
  /* Precies 1rem en geen haar kleiner: iOS Safari zoomt de hele pagina in
     zodra een tekstveld onder de 16 px focus krijgt, en zoomt daarna niet
     vanzelf terug. Deze balk staat op elke pagina, dus dat zou overal bijten. */
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
/* Placeholdertekst is gewone tekst voor WCAG 1.4.3: 0,55 alfa gaf 3,7:1 en
   zakte daarmee onder AA. 0,65 alfa (#647182) haalt 5,0:1. */
.zoekbalk__invoer::placeholder { color: rgba(16, 36, 62, 0.65); }
.zoekbalk__invoer:focus-visible {
  outline: none;
  border-color: var(--kleur-aqua);
  box-shadow: 0 0 0 3px rgba(14, 124, 138, 0.2);
}
/* Het kruisje van type="search" in WebKit weghalen: het botst met de
   suggestielijst en de pill-vorm. */
.zoekbalk__invoer::-webkit-search-decoration,
.zoekbalk__invoer::-webkit-search-cancel-button { -webkit-appearance: none; }

.zoekbalk__knop {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Ronde icoonknop in de kop */
.zoekbalk__knop--icoon {
  /* 44px aanraakvlak, net als de vergrootglasknop (WCAG 2.5.5). */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--kleur-oranje);
  border-radius: 50%;
  background: var(--kleur-oranje);
  color: var(--kleur-navy);
}
.zoekbalk__knop--icoon:hover { box-shadow: 0 4px 12px rgba(255, 114, 0, 0.35); }
.zoekbalk__knop--icoon:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 2px;
}

/* ----- Compact: alleen het vergrootglas, de balk klapt eronder uit ---------
   Tot 1080px zou een volwaardige balk het menu verdringen (vijf menu-items,
   logo en winkelwagen staan er al). Daaronder tonen we dus alleen het icoon en
   klapt de balk uit als een PANEEL onder de kop: absoluut gepositioneerd ten
   opzichte van de sticky .site-kop, zodat de kop zelf nooit verspringt. */
@media (max-width: 1079px) {
  .zoekbalk--kop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 0.75rem 1rem;
    background: var(--kleur-wit);
    border-bottom: 1px solid rgba(16, 36, 62, 0.08);
    box-shadow: 0 8px 18px rgba(16, 36, 62, 0.10);
  }
  .zoek-schakelaar:checked ~ .zoekbalk--kop { display: flex; }
}

@media (max-width: 899px) {
  /* Onder 900px staat het menu op een eigen regel en heeft de winkelwagen een
     auto-marge. Zoekknop en winkelwagen horen dan als paar rechts te staan;
     anders verdeelt flex de vrije ruimte over twee auto-marges en zweeft het
     vergrootglas in het midden. */
  .site-kop__zoek { margin-left: auto; }
  .site-kop__binnen .site-kop__wagen { margin-left: 0; }
}

/* ----- Breed: balk altijd zichtbaar, knop weg ------------------------------ */
@media (min-width: 1080px) {
  .zoek-knop { display: none; }
  /* 13rem en niet 20rem. Bij een venster van 1080 px is de container 1048 px
     breed, en logo, menu en winkelwagen vragen daar samen al ruim 800 px. Met
     een balk van 20rem brak de kop in twee regels, wat pas boven ongeveer
     1160 px vanzelf overging. Nu past hij overal. */
  .site-kop__zoek { flex: 0 1 13rem; min-width: 0; }
  .zoekbalk--kop { flex: 1 1 auto; min-width: 0; }
}

/* Vanaf de volle containerbreedte is er wél ruimte voor de brede balk. */
@media (min-width: 1200px) {
  .site-kop__zoek { flex-basis: 20rem; }
}

/* ---------------------------------------------------------------------------
   2. Typ-suggesties (opgebouwd door public/js/zoek-suggesties.js)
   ------------------------------------------------------------------------ */

.zoek-suggesties {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--kleur-wit);
  border: 1px solid rgba(16, 36, 62, 0.12);
  border-radius: 14px;
  box-shadow: var(--schaduw-kaart-zweef);
  max-height: min(70vh, 26rem);
  overflow-y: auto;
}
.zoek-suggesties[hidden] { display: none; }

.zoek-suggestie {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--kleur-navy);
  text-decoration: none;
}
.zoek-suggestie:hover { background: var(--kleur-zwembad); }
/* De pijltjestoetsen verplaatsen de markering met aria-activedescendant; de
   focus zelf blijft in het invoerveld staan, dus de browser tekent hier géén
   focusring. Die moeten wij dus zelf zetten — en zwembad-aqua op wit is met
   1,2:1 veel te zwak om als enige aanwijzing te dienen. Met de aqua rand
   erbij (4,9:1) zie je ook zonder kleurwaarneming welke regel aan de beurt is. */
.zoek-suggestie--actief {
  background: var(--kleur-zwembad);
  outline: 2px solid var(--kleur-aqua);
  outline-offset: -2px;
}

/* Vast kadertje met de foto CONTAIN erin: nooit bijsnijden, ook niet bij
   staande foto's. */
.zoek-suggestie__kader {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kleur-zwembad);
  border-radius: 8px;
  overflow: hidden;
}
.zoek-suggestie__foto {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.zoek-suggestie__tekst { min-width: 0; flex: 1 1 auto; }
.zoek-suggestie__naam {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.zoek-suggestie__regel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.zoek-suggestie__prijs { font-weight: 700; }
.zoek-suggestie__voorraad { color: var(--kleur-groen); font-weight: 700; }
.zoek-suggestie__voorraad--uit { color: var(--kleur-navy); opacity: 0.65; font-weight: 400; }

/* Laatste regel: "Alle resultaten voor ..." */
.zoek-suggestie--alles {
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--kleur-aqua);
  border-top: 1px solid rgba(16, 36, 62, 0.1);
  border-radius: 0 0 10px 10px;
  margin-top: 0.2rem;
  padding-block: 0.6rem;
}

/* ---------------------------------------------------------------------------
   3. Zoekresultatenpagina
   ------------------------------------------------------------------------ */

.zoek-kop { padding-bottom: 0.75rem; }
.zoek-kop__telling {
  margin-bottom: 0.9rem;
  font-size: 0.98rem;
}
.zoek-kop__leverbaar { color: var(--kleur-groen); font-weight: 700; }

/* Het formulier op de pagina zelf is groter dan dat in de kop. */
.zoekbalk--pagina { max-width: 34rem; }
.zoekbalk--pagina .zoekbalk__invoer { padding-block: 0.65rem; font-size: 1rem; }
.zoekbalk--pagina .zoekbalk__knop { padding: 0.65rem 1.4rem; }

.zoek-resultaten { padding-bottom: var(--sectie-ruimte); }
.zoek-volgorde {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.75;
}
/* De sorteerkeuze duwt zichzelf al naar rechts; deze regel hoort ervóór. */
.collectie__balk .zoek-volgorde { order: -1; }

.zoek-raster { margin-top: 0.5rem; }

/* Tussenkop boven de uitverkochte treffers: rustig, niet alarmerend. */
.zoek-groepkop {
  margin: 2.25rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(16, 36, 62, 0.12);
}
.zoek-groepkop__titel {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}
.zoek-groepkop__uitleg {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* De productkaart zelf (.pkaart) staat in shop.css — dezelfde kaart als op de
   home en de collectiepagina, dus hier staat er geen eigen variant meer. */

/* ----- Lege staat ---------------------------------------------------------- */
.zoek-leeg { padding-bottom: var(--sectie-ruimte); }
.zoek-leeg__regel { max-width: 40rem; }
.zoek-bedoelde {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.zoek-bedoelde__link { font-weight: 700; }
.zoek-bedoelde__aantal { opacity: 0.7; font-size: 0.9rem; }

.zoek-blok { margin-bottom: 1.75rem; }
.zoek-blok__titel {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.zoek-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.zoek-chip {
  display: inline-flex;
  align-items: center;
  /* Ruim genoeg voor een duim: 0,55rem + 2px rand + 1,35 regelhoogte ~ 44px. */
  padding: 0.55rem 0.95rem;
  border: 2px solid rgba(16, 36, 62, 0.45);
  border-radius: var(--radius-knop);
  background: var(--kleur-wit);
  color: var(--kleur-navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.zoek-chip:hover { border-color: var(--kleur-aqua); background: var(--kleur-zwembad); }
/* Zonder deze regel kreeg de bezoeker met het toetsenbord alleen de standaard
   browserring — die valt op zwembad-aqua nauwelijks op. Zelfde ring als bij de
   filterchips op de collectiepagina. */
.zoek-chip:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 2px;
}
.zoek-chip--collectie { background: var(--kleur-zwembad); }
.zoek-leeg__hulp { font-size: 0.95rem; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .zoek-suggestie, .zoek-chip { transition: none; }
}