/* Werkhuizen Lentz - kleine site-brede correcties bovenop de Elementor-CSS.
   Staat als laatste stylesheet in <head> van elke publieke pagina. */

/* Hoofdmenu: subtiele onderlijn bij hover en toetsenbordfocus. */
.elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { position: relative; }
.elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 9px; height: 1px;
  background-color: currentColor !important; transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover::after,
.elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus-visible::after { transform: scaleX(1); }

/* "Scroll down": pijltje in plaats van de lottie-animatie waarvan het bestand ontbrak. */
.wl-scroll-arrow { display: flex; justify-content: center; }
.wl-scroll-arrow svg { display: block; width: 14px; height: 24px; animation: wl-bob 1.8s ease-in-out infinite; }
@keyframes wl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wl-scroll-arrow svg { animation: none; }
}

/* Beheerde realisaties/vacatures: niets tonen zolang het portaal leeg is. */
.wl-cms-collection { width: 100%; }
.wl-cms-collection:empty { display: none; }

/* Achtergrondvideo's pas tonen als ze echt spelen. Speelt een video niet
   (bv. iPhone in energiebesparingsmodus), dan blijft de poster/achtergrond
   staan en toont Safari geen play-knop. */
.elementor-background-video-hosted { opacity: 0; transition: opacity .6s ease; }
.elementor-background-video-hosted.wl-playing { opacity: 1; }
.elementor-background-video-hosted::-webkit-media-controls,
.elementor-background-video-hosted::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* Vacatures: lijstregels die over twee regels lopen kregen line-height 1 en
   plakten tegen elkaar. Ruimere regelafstand, zonder dat korte regels hoger worden. */
.elementor-1085 .e-con-inner > .elementor-widget-icon ~ .elementor-widget-heading .elementor-heading-title,
.elementor-1135 .e-con-inner > .elementor-widget-icon ~ .elementor-widget-heading .elementor-heading-title {
  line-height: 1.35; margin: -0.175em 0;
}
/* ... en het pijltje krimpt niet meer mee, zodat alle tekst op één lijn begint. */
.elementor-1085 .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading),
.elementor-1135 .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) { flex-shrink: 0; }
/* Eén vaste pijlgrootte en tussenruimte voor alle lijstregels (behalve het blauwe blok). */
.elementor-1085 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) .elementor-icon,
.elementor-1135 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) .elementor-icon { font-size: 20px; }
.elementor-1085 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) .elementor-icon svg,
.elementor-1135 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) .elementor-icon svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
  .elementor-1085 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading),
  .elementor-1135 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) { --container-widget-width: 6%; width: 6%; max-width: 6%; }
}
@media (max-width: 767px) {
  .elementor-1085 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading),
  .elementor-1135 .e-con:not(.elementor-element-5fcdcab *) > .e-con-inner > .elementor-widget-icon:has(+ .elementor-widget-heading) { --container-widget-width: 21px; width: 21px; max-width: 21px; }
  .elementor-1085 .e-con:not(.elementor-element-5fcdcab *):has(> .e-con-inner > .elementor-widget-icon + .elementor-widget-heading),
  .elementor-1135 .e-con:not(.elementor-element-5fcdcab *):has(> .e-con-inner > .elementor-widget-icon + .elementor-widget-heading) { --gap: 10px 10px; }
}
/* Frezer: de takenlijst zat 10px meer ingesprongen dan de andere lijsten. */
.elementor-1135 .elementor-element.elementor-element-5403873 { --padding-inline-start: 0px; --padding-inline-end: 0px; padding-left: 0; padding-right: 0; }
/* "spontane sollicitatie" onder de lijsten: zelfde linkerlijn als de pijltjes. */
@media (min-width: 768px) {
  .elementor-1085 .elementor-element.elementor-element-39842b3,
  .elementor-1085 .elementor-element.elementor-element-e1ca95b { margin-left: 4px; }
  .elementor-1085 .elementor-element.elementor-element-eeea2b5,
  .elementor-1135 .elementor-element.elementor-element-7005a68,
  .elementor-1135 .elementor-element.elementor-element-e4b0f2e,
  .elementor-1135 .elementor-element.elementor-element-eeea2b5 { margin-left: 10px; }
}
@media (max-width: 767px) {
  .elementor-1085 .elementor-element.elementor-element-161f5da,
  .elementor-1085 .elementor-element.elementor-element-13f1b8a,
  .elementor-1085 .elementor-element.elementor-element-e41977a,
  .elementor-1135 .elementor-element.elementor-element-38f7a48,
  .elementor-1135 .elementor-element.elementor-element-e36e660,
  .elementor-1135 .elementor-element.elementor-element-74d3e18,
  .elementor-1135 .elementor-element.elementor-element-f70c6b6 { padding-left: 10px; }
}

/* Over ons, fotostrook: geen witte randen links/rechts, en op mobiel foto's
   die volledig in beeld passen in plaats van reuzegrote uitsneden. */
.elementor-723 .elementor-element.elementor-element-92fd78d { --padding-inline-start: 0px; --padding-inline-end: 0px; padding-left: 0; padding-right: 0; }
.elementor-element-7461fe6 .sticky { background: linear-gradient(to top, #F7F4F4 50%, #ffffff 50%); }
@media (max-width: 767px) {
  .elementor-element-7461fe6 .horizontal { width: auto; }
  .elementor-element-7461fe6 .cards { padding: 0 20px; }
  .elementor-element-7461fe6 .sample-card { height: auto; margin-right: 16px; }
  .elementor-element-7461fe6 .sample-card:last-child { margin-right: 0; }
  .elementor-element-7461fe6 .sample-card img { display: block; height: 220px; width: auto; max-width: none; }
}

/* Footer op tabletbreedte: kolommen en contactblok op dezelfde linkerlijn als het logo. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-5563 .elementor-element.elementor-element-2824dff { --justify-content: flex-start; --align-items: flex-start; }
  .elementor-5563 .elementor-element.elementor-element-61bbba5 { --justify-content: flex-start; --padding-inline-start: 10px; }
  .elementor-5563 .elementor-element.elementor-element-e57f7a8 { --padding-inline-start: 10px; }
}

/* Contactformulier: eigen bijlageknop in plaats van de Engelstalige browserknop. */
.wl-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.wl-file { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.wl-file-btn {
  flex: 0 0 auto; display: inline-block; cursor: pointer; padding: 8px 14px;
  border: 1px solid #020101; background: transparent; color: #020101;
  font-family: "Raleway", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: background-color .2s ease, color .2s ease;
}
.wl-file-btn:hover { background: #020101; color: #fff; }
.wl-file-input:focus-visible + .wl-file .wl-file-btn,
.wl-file-btn:focus-visible { outline: 2px solid #1b56b0; outline-offset: 2px; }
.wl-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Raleway", sans-serif; font-size: 13px; color: #555; }
@media (max-width: 767px) { .wl-file { flex-wrap: wrap; gap: 6px 10px; } .wl-file-name { flex-basis: 100%; } }

/* Privacyverklaring: paginatitel in dezelfde stijl als de machinepark-pagina's. */
.wl-page-title { width: 100%; margin: 0 0 40px; text-align: center; }
.wl-page-title .gradient-text {
  margin: 0; font-family: "Raleway", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2;
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--e-global-color-100e2c6) 0%, var(--e-global-color-f38d907) 100%);
}
@media (max-width: 767px) { .wl-page-title { margin: 24px 0 24px; } .wl-page-title .gradient-text { font-size: 30px; } }
