/* Zoeken: werking + basisopmaak in de mu-plugin ts3d-zoeken (mu-plugins/ts3d-bricks/zoeken/zoeken.css); hier alleen de Beers-opmaak */
:root {
  --zoek-accent: #7cc6f2;
  --zoek-gloed: rgb(68 172 233 / 45%);
  --zoek-bg: radial-gradient(150% 115% at 100% 0%, #2a5a9a 0%, #12305e 100%);
  --zoek-tekst: #fff;
  --zoek-veld-schaduw: inset 0 2px 2px rgb(255 255 255 / 85%), inset 0 -5px 9px rgb(40 70 140 / 28%), 0 2px 4px rgb(0 0 0 / 35%);   /* bol: licht boven, donkerder onder */
  --zoek-loep-filter: drop-shadow(0 1px 1px rgb(0 30 70 / 30%)) drop-shadow(0 3px 5px rgb(0 30 70 / 18%));
  /* logo links naast de balk + logo in het wit afgesneden in de hoek (standaard van de mu-plugin) */
  --zoek-bol-weergave: flex;
  --zoek-bol-beeld: url("/wp-content/uploads/2026/10/logobeers-3d-v3-150x150.webp");
  --zoek-bol-maat: 56px;
  --zoek-hoek-weergave: block;
  --zoek-hoek-beeld: url("/wp-content/uploads/2026/10/logobeers-3d-v3.webp");
  --zoek-hoek-positie: -110px -96px / 320px auto;
  --zoek-hoek-dekking: .14;
}

/* Venster: ronde hoeken en bolle rand (lichtrand boven, schaduw onder), zoals boekholt */
.zoekVenster {
  --zoek-radius: 25px;
  isolation: isolate;
  box-shadow: 0 2px 3px rgb(0 0 0 / 35%), 0 20px 50px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(124 198 242 / 30%), inset 0 3px 6px rgb(255 255 255 / 14%), inset 0 -8px 18px rgb(0 0 0 / 28%);
}
.zoekBalk input[type="search"] { border-radius: 14px; }
.zoekBalk::before { filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%)); }


/* Knop onder de hamburger (header), iets kleiner, in de kleur van de hamburger */
.zoekOnderHamburger {
  --zoek-knop-size: 40px;
  color: #7884ac;
}
/* desktop: midden onder de hamburger */
@media (min-width: 992px) {
  .zoekOnderHamburger { align-self: flex-end; margin: -6px 22px 0 0; translate: -8px 0; } /* zelfde as als de hamburger (flex-end, 20px marge, -8px) */
}
/* mobiel/tablet: hamburger staat rechtsboven in een rij; loep er recht onder */
@media (max-width: 991px) {
  .zoekOnderHamburger { position: absolute; top: 56px; right: 28px; }
}
/* desktop, menu open: de hamburger schuift 300px mee (Bricks offset-effect) en ligt boven het menupaneel (z 999).
   De loep doet hetzelfde, anders zit hij onder het paneel en is hij niet aan te klikken. De extra loep in het paneel is dan niet nodig. */
@media (min-width: 992px) {
  .zoekOnderHamburger { position: relative; transition: transform 1s cubic-bezier(.25, 0, .25, 1); }
  .brx-body:has(.brxe-offcanvas.brx-open) .zoekOnderHamburger {
    z-index: 1000;
    transform: translateX(300px);
  }
  .brxe-offcanvas .zoekOnderHamburger { display: none; }
}