/*
 * De zoekbalk op de homepage.
 *
 * Overgenomen uit de mockup docs/mockups/zoekbalk-homepage.html in de
 * ndhr-dashboard-repo. De maten, kleuren en vormen zijn daaruit één-op-één
 * overgenomen; wat hier anders is, is aangepast om op een aanraakscherm te
 * blijven werken en staat als comment bij de regel.
 *
 * Alles staat onder .ndhr-zoekbalk en gebruikt eigen variabelen, zodat het
 * component er hetzelfde uitziet los van wat YOOtheme eromheen doet. Het
 * lettertype is Plus Jakarta Sans, dat de site zelf al laadt.
 */

.ndhr-zoekbalk {
  --nz-wit: #fff;
  --nz-tekst: hsl(22 30% 18%);
  --nz-grijs: hsl(26 15% 45%);
  --nz-rand: hsl(36 30% 88%);
  --nz-zacht: hsl(36 30% 96%);
  --nz-oranje: hsl(22 80% 54%);            /* #E8722A, het huisoranje */
  --nz-diep: #9a430c;                       /* 6,6:1 op wit; wit op oranje haalt maar 3,1:1 */
  --nz-vlak: hsl(22 80% 54% / .1);
  --nz-schaduw: 0 6px 20px rgb(0 0 0 / .07);
  --nz-schaduw-diep: 0 16px 40px rgb(0 0 0 / .13);
  --nz-radius: 16px;

  /* Het script zet deze op basis van visualViewport, zodat het toetsenbord op
     een telefoon de suggesties niet afdekt. De waarde hier is de terugval. */
  --nz-uitklap-hoogte: 60vh;

  position: relative;
  max-width: 620px;
  /* Gecentreerd in het vlak eromheen. Alleen het blok — de inhoud van het veld
     blijft links, want een plaatshouder die midden in het veld begint en naar
     links springt zodra je typt, staat onrustig. */
  margin-left: auto;
  margin-right: auto;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: var(--nz-tekst);
  text-align: left;
}

.ndhr-zoekbalk *,
.ndhr-zoekbalk *::before,
.ndhr-zoekbalk *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- het veld */

.ndhr-zoekbalk__veld {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  padding: 8px 8px 8px 20px;
  background: var(--nz-wit);
  border: 1px solid var(--nz-rand);
  border-radius: 999px;
  box-shadow: var(--nz-schaduw);
  cursor: text;
}

.ndhr-zoekbalk.is-open .ndhr-zoekbalk__veld,
.ndhr-zoekbalk__veld:focus-within {
  border-color: var(--nz-oranje);
  box-shadow: 0 6px 24px hsl(22 80% 54% / .22);
}

/* Met chips erin is een pilvorm niet meer te doen: bij twee regels wordt de
   bovenste hoek anders een halve cirkel om de eerste chip heen. */
.ndhr-zoekbalk.heeft-chips .ndhr-zoekbalk__veld {
  border-radius: 28px;
}

.ndhr-zoekbalk__invoer {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  /* 16px is geen smaakkwestie: onder die maat zoomt Safari op iOS in zodra het
     veld focus krijgt, en dan staat de pagina scheef en is de uitklap weg. */
  font-size: 16px;
  line-height: 1.4;
  min-height: 42px;
}

.ndhr-zoekbalk__invoer::placeholder { color: var(--nz-grijs); opacity: 1; }

.ndhr-zoekbalk__knop {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;                 /* 44px is de ondergrens voor een aanraakdoel */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--nz-oranje);
  color: var(--nz-wit);        /* een icoon, geen tekst: 3:1 volstaat */
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ndhr-zoekbalk__knop svg { width: 19px; height: 19px; }
.ndhr-zoekbalk__knop:active { transform: scale(.94); }

/* -------------------------------------------------------------- de chips */

.ndhr-zoekbalk__chips {
  display: contents;           /* chips staan in de flexrij van het veld zelf */
}

.ndhr-zoekbalk__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 7px 6px 11px;
  background: var(--nz-vlak);
  border: 1px solid hsl(22 80% 54% / .35);
  border-radius: 999px;
  color: var(--nz-diep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.ndhr-zoekbalk__chip > span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ndhr-zoekbalk__chip svg { width: 14px; height: 14px; flex: none; }

.ndhr-zoekbalk__straal,
.ndhr-zoekbalk__weg {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ndhr-zoekbalk__straal {
  min-height: 28px;
  padding: 2px 10px;
  background: var(--nz-wit);
  border: 1px solid hsl(22 80% 54% / .35);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ndhr-zoekbalk__weg {
  width: 28px;                 /* groter dan het mockup-bolletje: met een vinger
                                  mist 18px te vaak en wist je per ongeluk niets */
  height: 28px;
  border-radius: 999px;
  background: hsl(22 80% 54% / .18);
}

.ndhr-zoekbalk__weg svg { width: 11px; height: 11px; stroke-width: 3; }

/* ------------------------------------------------------------- de uitklap */

.ndhr-zoekbalk__uitklap {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: var(--nz-uitklap-hoogte);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* anders scrollt de pagina mee zodra de lijst op is */
  touch-action: pan-y;          /* verticaal vegen blijft scrollen, ook met een
                                   pointerdown-handler op de knoppen erin */
  background: var(--nz-wit);
  border: 1px solid var(--nz-rand);
  border-radius: var(--nz-radius);
  box-shadow: var(--nz-schaduw-diep);
}

.ndhr-zoekbalk__uitklap[hidden] { display: none; }

.ndhr-zoekbalk__groep { border-top: 1px solid var(--nz-rand); padding: 6px 0 8px; }
.ndhr-zoekbalk__groep:first-child { border-top: 0; }

.ndhr-zoekbalk__groepkop {
  padding: 10px 18px 4px;
  color: var(--nz-grijs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ndhr-zoekbalk__rij {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 48px;            /* aanraakdoel; in de mockup mocht dit kleiner */
  padding: 9px 18px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Alleen waar een muis is. Op een aanraakscherm blijft :hover anders hangen op
   de laatst aangeraakte regel, en lijkt er iets geselecteerd te zijn. */
@media (hover: hover) and (pointer: fine) {
  .ndhr-zoekbalk__rij:hover { background: hsl(22 80% 54% / .07); }
}

.ndhr-zoekbalk__rij:active,
.ndhr-zoekbalk__rij.is-actief { background: hsl(22 80% 54% / .1); }
.ndhr-zoekbalk__rij:focus-visible { outline: 2px solid var(--nz-oranje); outline-offset: -2px; }

.ndhr-zoekbalk__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--nz-vlak);
  color: var(--nz-oranje);
}

.ndhr-zoekbalk__ico svg { width: 16px; height: 16px; }

.ndhr-zoekbalk__tekst { min-width: 0; flex: 1; }

.ndhr-zoekbalk__titel {
  /* Zonder block staan titel en onderregel achter elkaar op één regel. Dat
     viel niet op zolang de tekst toevallig afbrak op de juiste plek; bij een
     kortere onderregel plakte hij tegen de titel aan. */
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ndhr-zoekbalk__titel b { font-weight: 800; color: var(--nz-diep); }

.ndhr-zoekbalk__onder {
  display: block;
  color: var(--nz-grijs);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* --------------------------------------------------------------- de pills */

.ndhr-zoekbalk__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 18px 12px;
}

.ndhr-zoekbalk__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  background: var(--nz-wit);
  border: 1px solid var(--nz-rand);
  border-radius: 999px;
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ndhr-zoekbalk__pill svg { width: 14px; height: 14px; color: var(--nz-grijs); }
.ndhr-zoekbalk__pill:active { background: var(--nz-zacht); }

@media (hover: hover) and (pointer: fine) {
  .ndhr-zoekbalk__pill:hover { border-color: var(--nz-oranje); color: var(--nz-diep); }
}

.ndhr-zoekbalk__pill--nadruk {
  background: var(--nz-vlak);
  border-color: var(--nz-oranje);
  color: var(--nz-diep);
  font-weight: 800;
}

.ndhr-zoekbalk__pill--nadruk svg { color: var(--nz-diep); }

/* ---------------------------------------------------------------- de voet */

.ndhr-zoekbalk__voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--nz-rand);
  color: var(--nz-grijs);
  font-size: 13.5px;
  font-weight: 500;
}

.ndhr-zoekbalk__toets {
  padding: 1px 7px;
  border: 1px solid var(--nz-rand);
  border-radius: 6px;
  background: var(--nz-zacht);
  font-size: 12px;
  font-weight: 800;
}

/* De toetsenhint slaat nergens op zonder toetsenbord. */
@media (hover: none) and (pointer: coarse) {
  .ndhr-zoekbalk__voet--toets { display: none; }
}

/* ---------------------------------------------------------- de straalkeuze */

.ndhr-zoekbalk__straalmenu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 10px);
  /* Zelfde randen als de uitklap: allebei hangen ze onder hetzelfde veld, dus
     allebei op de rand daarvan. Ingesprongen onder de chip beginnen — zoals in
     de mockup — leest als een los kaartje dat ergens anders bij hoort. */
  left: 0;
  right: 0;
  padding: 8px;
  background: var(--nz-wit);
  border: 1px solid var(--nz-rand);
  border-radius: var(--nz-radius);
  box-shadow: var(--nz-schaduw-diep);
}

.ndhr-zoekbalk__straalmenu[hidden] { display: none; }

.ndhr-zoekbalk__straalkop {
  padding: 5px 10px 7px;
  color: var(--nz-grijs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ndhr-zoekbalk__straaloptie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--nz-tekst);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ndhr-zoekbalk__straaloptie[aria-checked="true"] {
  background: var(--nz-vlak);
  color: var(--nz-diep);
  box-shadow: inset 0 0 0 1px var(--nz-oranje);
}

@media (hover: hover) and (pointer: fine) {
  .ndhr-zoekbalk__straaloptie:hover { background: hsl(22 80% 54% / .08); }
}

/* ------------------------------------------------------------------ smal */

@media (max-width: 640px) {
  .ndhr-zoekbalk__veld { padding-left: 16px; min-height: 54px; }
  .ndhr-zoekbalk__uitklap,
  .ndhr-zoekbalk__straalmenu { border-radius: 14px; }
  /* 4 + 10 = 14px, zodat "5 km" op dezelfde lijn staat als de suggestierijen. */
  .ndhr-zoekbalk__straalmenu { padding: 8px 4px; }
  .ndhr-zoekbalk__rij { padding: 10px 14px; }
  .ndhr-zoekbalk__groepkop,
  .ndhr-zoekbalk__pills,
  .ndhr-zoekbalk__voet { padding-left: 14px; padding-right: 14px; }
  .ndhr-zoekbalk__chip { font-size: 13.5px; }
}

/* Wie beweging uitzet, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  .ndhr-zoekbalk__knop:active,
  .ndhr-zoekbalk__rij:active { transform: none; }
}

/* Het aantal woningen achter elke straal. Komt na het openen binnen, dus de
   regel moet ook zonder getal goed staan. */
.ndhr-zoekbalk__straalaantal {
  color: var(--nz-grijs);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ndhr-zoekbalk__straaloptie[aria-checked="true"] .ndhr-zoekbalk__straalaantal {
  color: var(--nz-diep);
  opacity: .8;
}