/* ============================================================================
   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);
  font-size: 0.95rem;
  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; }
  .site-kop__zoek { flex: 0 1 20rem; min-width: 0; }
  .zoekbalk--kop { flex: 1 1 auto; min-width: 0; }
}

/* ---------------------------------------------------------------------------
   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; }
}