/* =========================================================
   TS3D ZOEKEN — knop + venster + gloed (werking: zoeken.js, index: ../../ts3d-zoeken.php)

   Per site alleen variabelen overschrijven (bv. op :root in de theme-CSS):
     --zoek-accent         accentkleur: paginanaam, onderstreping, focus, gloed (#8fcf9f)
     --zoek-gloed          kleur van de gloed op de gevonden passage
     --zoek-bg             achtergrond venster
     --zoek-tekst          tekstkleur venster
     --zoek-radius         hoekrondig venster
     --zoek-veld-bg        achtergrond zoekveld (mag meerdere lagen: korrel, verloop)
     --zoek-veld-tekst     tekstkleur zoekveld
     --zoek-veld-schaduw   box-shadow zoekveld
     --zoek-sluit-bg       kleur/materiaal sluitkruis
     --zoek-sluit-filter   filter sluitkruis
     --zoek-knop-size      klikvlak van de knop (56px)
     --zoek-loep-size      loep in het klikvlak (66%)
     --zoek-loep-bg        kleur/materiaal loep (currentcolor)
     --zoek-loep-filter    filter loep (rafelrand/schaduw; valt buiten het masker, wordt niet afgeknipt)
     --zoek-venster-schaduw box-shadow van het venster (inclusief bolle binnenschaduw)
   STANDAARD VOOR NIEUWE SITES (zoals boekholt): logobol links naast de balk + logo in het wit afgesneden in de hoek:
     --zoek-bol-weergave: flex;  --zoek-bol-beeld: url("/wp-content/uploads/…/bol.svg");  (--zoek-bol-maat: 52px)
     --zoek-hoek-weergave: block;  --zoek-hoek-beeld: url("/wp-content/uploads/…/logo.svg");  (--zoek-hoek-positie: -120px -86px / 300px auto;  --zoek-hoek-dekking: .2)
   Plus --zoek-radius: 25px en een bolle --zoek-veld-schaduw (licht boven, donker onder). Per site uit te zetten: weergave weglaten.
   ========================================================= */

/* Knop: alleen de loep; klikvlak blijft volledig klikbaar */
.zoekKnop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--zoek-knop-size, 56px);
  height: var(--zoek-knop-size, 56px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: scale .42s cubic-bezier(.22, 1, .36, 1), translate .42s cubic-bezier(.22, 1, .36, 1);
}

/* Filter op de wrapper, masker op ::before: rafelrand en schaduw worden niet afgeknipt */
.zoekLoep {
  width: var(--zoek-loep-size, 66%);
  aspect-ratio: 1;
  filter: var(--zoek-loep-filter, drop-shadow(0 2px 2px rgb(0 0 0 / 30%)) drop-shadow(0 4px 6px rgb(0 0 0 / 18%)));
  will-change: transform; /* eigen laag: filter niet hertekenen bij hover/tik */
}

.zoekLoep::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--zoek-loep-bg, currentcolor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Indrukken: hover zakt licht in, klik drukt door (geen scale-up); filter blijft gelijk (Safari-flits) */
@media (hover: hover) {
  .zoekKnop:hover { translate: 0 2px; }
}

.zoekKnop:active {
  translate: 0 7px;
  scale: .98;
  transition-duration: .12s;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1);
}

.zoekKnop:focus-visible {
  outline: 3px solid var(--zoek-accent, #8fcf9f);
  outline-offset: 3px;
}

/* Venster */
.zoekVenster {
  width: min(720px, calc(100% - 32px));
  max-height: min(80svh, 760px);
  margin: 10svh auto auto;
  padding: var(--space-l, 32px);
  border: 0;
  border-radius: var(--zoek-radius, 18px);
  color: var(--zoek-tekst, #f2f1ed);
  background: var(--zoek-bg, radial-gradient(150% 115% at 100% 0%, rgb(36 36 36) 0%, rgb(33 33 33) 50%, rgb(26 28 27) 100%));
  box-shadow: var(--zoek-venster-schaduw, 0 2px 3px rgb(0 0 0 / 35%), 0 20px 50px rgb(0 0 0 / 45%));
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  gap: var(--space-s, 16px);
}

.zoekVenster[open] {
  display: flex;
}

.zoekVenster::backdrop {
  background: rgb(10 12 11 / 60%);
  backdrop-filter: blur(4px);
}

.zoekBalk {
  display: flex;
  align-items: center;
  gap: var(--space-s, 16px);
}

.zoekBalk input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  color: var(--zoek-veld-tekst, rgb(34 32 28));
  background: var(--zoek-veld-bg, #f6f5f2);
  box-shadow: var(--zoek-veld-schaduw, inset 0 3px 6px rgb(0 0 0 / 22%), inset 0 -2px 3px rgb(255 255 255 / 60%));
  -webkit-appearance: none;
  appearance: none;
}

.zoekBalk input[type="search"]::placeholder { color: var(--zoek-veld-tekst, rgb(34 32 28)); opacity: .55; }
.zoekBalk input[type="search"]:focus-visible { outline: 3px solid var(--zoek-accent, #8fcf9f); outline-offset: 2px; }

.zoekSluit {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.zoekSluit span {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(50% - 2px);
  height: 4px;
  border-radius: 3px;
  background: var(--zoek-sluit-bg, #f2f1ed);
  filter: var(--zoek-sluit-filter, drop-shadow(0 1px 1px rgb(0 0 0 / 35%)));
  rotate: 45deg;
}

.zoekSluit span + span { rotate: -45deg; }
.zoekSluit:focus-visible { outline: 3px solid var(--zoek-accent, #8fcf9f); outline-offset: 2px; border-radius: 8px; }

.zoekStatus {
  margin: 0;
  opacity: .65;
}

.zoekStatus:empty { display: none; }

.zoekLijst {
  margin: 0;
  padding: 0 4px 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zoekLijst a {
  display: grid;
  gap: 4px;
  padding: var(--space-s, 16px) var(--space-m, 24px);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s;
}

.zoekLijst li + li a { margin-top: 2px; }

.zoekLijst a:hover,
.zoekLijst a:focus-visible {
  background: rgb(255 255 255 / 7%);
  outline: none;
}

.zoekPagina {
  color: var(--zoek-accent, #8fcf9f);
  font-weight: 700;
}

.zoekTekst {
  opacity: .85;
}

.zoekTekst mark {
  color: inherit;
  background: none;
  text-decoration: underline 3px var(--zoek-accent, #8fcf9f);
  text-underline-offset: 3px;
}

/* Gevonden passage op de pagina: gloed die langzaam wegtrekt */
.zoekGevonden {
  border-radius: 6px;
  animation: zoekGloed 4s ease-out;
}

@keyframes zoekGloed {
  0%, 45% {
    background-color: color-mix(in srgb, var(--zoek-gloed, var(--zoek-accent, #8fcf9f)) 45%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--zoek-gloed, var(--zoek-accent, #8fcf9f)) 45%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 8px transparent;
  }
}

@media (max-width: 767px) {
  .zoekVenster {
    margin-top: 16px;
    max-height: calc(100svh - 32px);
    padding: var(--space-m, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoekKnop { transition: none; }
  .zoekKnop:hover, .zoekKnop:active { translate: none; scale: none; }
  .zoekGevonden { animation-duration: .01s; outline: 3px solid var(--zoek-accent, #8fcf9f); outline-offset: 6px; }
}

/* Logobol naast de balk en logo in de hoek: uit tot een site de variabelen zet (zie bovenin) */
.zoekBalk::before {
  content: "";
  display: var(--zoek-bol-weergave, none);
  flex: none;
  width: var(--zoek-bol-maat, 52px);
  aspect-ratio: 1;
  background: var(--zoek-bol-beeld, none) center / contain no-repeat;
}

.zoekVenster::before {
  content: "";
  display: var(--zoek-hoek-weergave, none);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #fff;
  opacity: var(--zoek-hoek-dekking, .2);
  -webkit-mask: var(--zoek-hoek-beeld, none) var(--zoek-hoek-positie, -120px -86px / 300px auto) no-repeat;
          mask: var(--zoek-hoek-beeld, none) var(--zoek-hoek-positie, -120px -86px / 300px auto) no-repeat;
}