/*
 * UI-details Paques Biomaterials: hamburger- en sluit-icoon van het mobiele menu, en hover-gevoel van kaartjes.
 * Eén globale definitie voor componenten die op elke pagina staan (uitzondering op "custom CSS per element",
 * gedocumenteerd in docs/build-log.md).
 */

/* Hamburger: twee lijnen (modern), bovenste korter; hover: lijnen gelijk. Font Awesome-icoon van de knop verbergen. */
.pq-header__hamburger .elementor-button { padding: 10px 6px; }
.pq-header__hamburger .elementor-button-icon { display: none; }
.pq-header__hamburger .elementor-button-content-wrapper { position: relative; display: block; width: 30px; height: 20px; }
.pq-header__hamburger .elementor-button-content-wrapper::before,
.pq-header__hamburger .elementor-button-content-wrapper::after {
  content: ""; position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: width .3s ease, transform .3s ease;
}
.pq-header__hamburger .elementor-button-content-wrapper::before { top: 4px; width: 30px; }
.pq-header__hamburger .elementor-button-content-wrapper::after  { top: 14px; width: 20px; }
.pq-header__hamburger .elementor-button:hover .elementor-button-content-wrapper::after { width: 30px; }

/* Sluitknop: kruis van twee lijnen, draait licht bij hover. */
.pq-offcanvas__close .elementor-button { padding: 10px; }
.pq-offcanvas__close .elementor-button-icon { display: none; }
.pq-offcanvas__close .elementor-button-content-wrapper { position: relative; display: block; width: 26px; height: 26px; transition: transform .35s ease; }
.pq-offcanvas__close .elementor-button-content-wrapper::before,
.pq-offcanvas__close .elementor-button-content-wrapper::after {
  content: ""; position: absolute; left: 0; top: 12px; width: 26px; height: 2px; border-radius: 2px; background: currentColor;
}
.pq-offcanvas__close .elementor-button-content-wrapper::before { transform: rotate(45deg); }
.pq-offcanvas__close .elementor-button-content-wrapper::after  { transform: rotate(-45deg); }
.pq-offcanvas__close .elementor-button:hover .elementor-button-content-wrapper { transform: rotate(90deg); }

/* Off-canvas paneel: zachte zoom-in bij openen. Geen translateX: het verborgen paneel telt mee in de
   scrollbreedte en gaf 24px horizontale scroll. */
.e-off-canvas .e-off-canvas__main { transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }
.e-off-canvas[aria-hidden="true"] .e-off-canvas__main { transform: scale(.985); opacity: 0; }

/* Archief-filterknoppen: de actieve knop (pq-listing.js zet .is-active) wordt wit gevuld, zoals in het design. */
.pq-filter .is-active .elementor-button { background-color: #fff; color: var(--e-global-color-primary); border-color: #fff; }

/* Dynamische filterknoppen (shortcode pq_topic_buttons in de site-plugin): zelfde outline-stijl als de oorspronkelijke Button-widgets. */
/* Specificiteit boven de kit-knopstijl (.elementor-kit-6 .elementor-button), anders blijft de groene kit-achtergrond staan. */
.pq-filter .pq-filter__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.pq-filter .pq-filter__list .elementor-button { background-color: transparent; background-image: none; border: 1px solid #fff; color: #fff; padding: 8px 32px; }
.pq-filter .pq-filter__list .elementor-button:hover, .pq-filter .pq-filter__list .is-active .elementor-button { background-color: #fff; border-color: #fff; color: var(--e-global-color-primary); }
.pq-filter .pq-filter--hover-logo_blauw .elementor-button:hover, .pq-filter .pq-filter--hover-logo_blauw .is-active .elementor-button { color: var(--e-global-color-logo_blauw); }
@media (max-width: 767px) { .pq-filter .pq-filter__list { flex-direction: column; align-items: stretch; } .pq-filter .pq-filter__list .elementor-button { display: flex; justify-content: center; } }

/* WPvivid ImgOptim (WebP + <picture>) wikkelt de <img> van JetEngine's Dynamic Image in een <picture> en kopieert de klassen.
   In de flex-link van de widget krimpt die <picture> tot de intrinsieke breedte van de foto (4:3 → 216 px bij 162 px hoog),
   waardoor kaartfoto's niet meer de volle breedte vullen; JetEngine's width:100% staat alleen op de img. */
.pq-card .jet-listing-dynamic-image picture { display: block; width: 100%; flex: 1 1 auto; }
.pq-card .jet-listing-dynamic-image picture > img { width: 100%; }

/* Kaartjes: subtiele lift bij hover (klikbare listing-items). */
.jet-listing-grid__item .pq-card { transition: transform .35s ease, box-shadow .35s ease; }
.jet-listing-grid__item:hover .pq-card { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .10); }
.jet-listing-grid__item .pq-card--news img, .jet-listing-grid__item .pq-card--project img { transition: transform .6s ease; }
.jet-listing-grid__item:hover .pq-card--news img, .jet-listing-grid__item:hover .pq-card--project img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .jet-listing-grid__item .pq-card, .jet-listing-grid__item .pq-card img, .e-off-canvas .e-off-canvas__main, .pq-offcanvas__close .elementor-button-content-wrapper { transition: none; }
}

/* Partnerlogo's: veel aangeleverde logo's hebben een witte achtergrond (jpg of niet-vrijstaande png). Met multiply
   versmelt wit met de grijze band en blijven de logokleuren staan; geen eps/ai van elke partner nodig (Marieke 2026-09-09). */
.pq-partner img, .pq-partner .jet-listing-dynamic-image__img { mix-blend-mode: multiply; }
/* De Swiper-slides hebben een transform en vormen daardoor een eigen stacking context: een blend op de afbeelding ziet dan
   niet de grijze band erachter. Daarom blendt de hele slider met de band. */
.pq-partners .jet-listing-grid, .jet-listing-grid:has(.pq-partner) { mix-blend-mode: multiply; }
/* Marquee: Swiper's ease-out per slide wordt lineair, zodat de logo's in één constant tempo doorlopen (pq-listing.js). */
.pq-partners .swiper-wrapper { transition-timing-function: linear !important; }

/* YouTube-achtergrondvideo's: de speler toont de eerste seconden de videotitel en het kanaal in een balk bovenin. Die
   balk valt buiten beeld door de embed iets groter te schalen dan de band (Elementor centreert hem al met translate);
   de zoom kost ~15 % beeld aan de randen, onzichtbaar bij een achtergrondvideo (Marieke 2026-09-09). */
.elementor .pq-hero .elementor-background-video-embed, .elementor .pq-methods-band .elementor-background-video-embed, .elementor .pq-facts .elementor-background-video-embed, .elementor .pq-timeline--video .elementor-background-video-embed { transform: translate(-50%, -50%) scale(1.3); }