/* VR HERO – definitieve overlay (correcte manier) */
.vr-hero{
  position: relative;
  overflow: hidden;
}

.vr-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.75) 0%,
    rgba(255,255,255,0.60) 40%,
    rgba(255,255,255,0.25) 70%,
    rgba(255,255,255,0.00) 100%
  );
  z-index:1;
  pointer-events:none;
}

.vr-hero > .e-con-inner{
  position: relative;
  z-index:2;
}

.vr-hero h1,
.vr-hero h2,
.vr-hero h3,
.vr-hero p{
  color:#1A3B3E;
}
.vr-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.90) 0%,
    rgba(255,255,255,0.80) 38%,
    rgba(255,255,255,0.45) 68%,
    rgba(255,255,255,0.10) 100%
  );
  z-index:1;
  pointer-events:none;
}
.vr-hero-copy{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 18px 20px;
  border-radius: 12px;
}

.vr-hero-copy{
  background: rgba(255,255,255,0.72);
}
.vr-hero h1{
  font-weight: 600;
}
.vr-hero .elementor-button{
  background:#4fae72;
}
/* =========================================
   Vesters Recruitment – Menu/Header styling
   ========================================= */

/* 0) Basis: header altijd boven content */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* 1) Primary header bar: glass look */
.ast-primary-header-bar,
.main-header-bar{
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(26,59,62,0.10) !important;
  box-shadow: none !important;
}

/* 2) Maak header iets compacter (netter) */
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container{
  min-height: 76px;
}

/* 3) Menu links: kleur + spacing + ronde hover */
.ast-builder-menu-1 .menu-item > a,
.main-header-menu > li > a{
  color: #1A3B3E !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  padding: 10px 14px !important;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* 4) Hover: zachte pill + accent groen */
.ast-builder-menu-1 .menu-item > a:hover,
.main-header-menu > li > a:hover{
  background: rgba(91,183,122,0.16) !important;
  color: #1A3B3E !important;
  transform: translateY(-1px);
}

/* 5) Actieve menu-item (huidige pagina) */
.ast-builder-menu-1 .current-menu-item > a,
.main-header-menu > .current-menu-item > a{
  background: rgba(91,183,122,0.22) !important;
  color: #1A3B3E !important;
}

/* 6) Submenu: modern wit kaartje */
.ast-builder-menu-1 .sub-menu,
.main-header-menu .sub-menu{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(26,59,62,0.10) !important;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* submenu links */
.ast-builder-menu-1 .sub-menu .menu-item > a,
.main-header-menu .sub-menu .menu-item > a{
  color: #1A3B3E !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border-radius: 10px;
}

/* submenu hover */
.ast-builder-menu-1 .sub-menu .menu-item > a:hover,
.main-header-menu .sub-menu .menu-item > a:hover{
  background: rgba(91,183,122,0.16) !important;
}

/* 7) Sticky/scrolldown: iets “vaster” (witter + shadow) */
.ast-sticky-active .ast-primary-header-bar,
.ast-sticky-active .main-header-bar{
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(26,59,62,0.12) !important;
}

/* 8) Mobiel: hamburger kleur + panel leesbaar */
.ast-header-break-point .ast-mobile-menu-trigger-minimal{
  color: #1A3B3E !important;
}

.ast-header-break-point .main-header-menu{
  background: rgba(255,255,255,0.98) !important;
  border-top: 1px solid rgba(26,59,62,0.10) !important;
}

/* mobiele menu items */
.ast-header-break-point .main-header-menu > li > a{
  padding: 14px 16px !important;
  border-radius: 12px;
}
/* Hero foto iets naar beneden voor betere framing */
.vr-hero{
  background-position: center 58% !important;
}
/* Hero tekstbalk – softer glass look */
.vr-hero-copy{
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.hero-glass{
  background: rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}
/* Hero glass text box */
.hero-glass {
  background: rgba(255, 255, 255, 0.6); /* subtiel wit */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  max-width: 820px;
}

/* Tekstkleur binnen de glass box */
.hero-glass,
.hero-glass p,
.hero-glass h1,
.hero-glass h2,
.hero-glass h3 {
  color: #1a3b3e; /* jouw donker groen */
}

/* Mobiel iets rustiger */
@media (max-width: 768px) {
  .hero-glass {
    padding: 22px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
  }
}
/* === Layout: geen witte cards, wel nette content-blokken === */

/* 1) Intro blok: gewoon tekst, max-breedte + witruimte */
.vr-intro{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;

  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 56px;

  padding: 0 !important;
}

/* 2) Accent blok: subtiele sectie met lichte groene tint */
.vr-accent{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 40px;

  padding: 28px 28px !important;
  border-radius: 14px;

  background: rgba(243, 250, 246, 0.95) !important; /* lichtgroen, rustig */
  border: 1px solid rgba(91, 183, 122, 0.25) !important; /* #5BB77A */
  box-shadow: 0 12px 28px rgba(0,0,0,0.06) !important;
}

/* Accent: optionele linkerrand (mag je aan/uit zetten) */
.vr-accent{
  border-left: 6px solid rgba(91, 183, 122, 0.55) !important;
}

/* Tekstkleuren in beide blokken */
.vr-intro, .vr-intro p, .vr-intro h1, .vr-intro h2, .vr-intro h3,
.vr-accent, .vr-accent p, .vr-accent h1, .vr-accent h2, .vr-accent h3{
  color: #1a3b3e !important;
}

/* Mobiel: iets compacter */
@media (max-width: 768px){
  .vr-intro{
    max-width: 92%;
    margin-bottom: 36px;
  }
  .vr-accent{
    max-width: 92%;
    padding: 20px 18px !important;
    border-radius: 12px;
    border-left-width: 5px;
  }
}
/* Hero achtergrond iets laten zakken */
.vr-hero{
  background-position: center 35%;
}
@media (max-width: 767px){
  .vr-hero{
    background-position: center 45%;
  }
}
/* Hero titel + knoppen iets laten zakken */
.vr-hero-content{
  margin-top: 60px;
}
/* === 2026 Logo Carousel strip === */
.vr-logo-carousel{
  padding: 34px 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(91,183,122,.10), rgba(255,255,255,.0));
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
}

/* meer ‘lucht’ en centreren */
.vr-logo-carousel .elementor-widget-container{
  max-width: 1180px;
  margin: 0 auto;
}

/* logo’s groter + strakker */
.vr-logo-carousel img{
  max-height: 78px;
  width: auto !important;
  object-fit: contain;
  padding: 10px 18px;
  filter: grayscale(100%);
  opacity: .75;
  transform: translateZ(0);
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

/* 2026 hover: kleur + iets groter */
.vr-logo-carousel img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

/* pijlen en dots weg (voor de meeste carousels) */
.vr-logo-carousel .swiper-button-next,
.vr-logo-carousel .swiper-button-prev,
.vr-logo-carousel .swiper-pagination{
  display: none !important;
}

/* extra ruimte tussen slides (werkt bij veel swiper/carousel widgets) */
.vr-logo-carousel .swiper-slide{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
}

/* mobiel: niet te hoog, wel nog steeds premium */
@media (max-width: 767px){
  .vr-logo-carousel{ padding: 22px 0; border-radius: 14px; }
  .vr-logo-carousel img{ max-height: 56px; padding: 8px 12px; }
}
/* ========== 1) Homepage: header over hero (transparent/absolute) ========== */
body.home .site-header,
body.home .ast-primary-header-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 999;
}

/* ========== 2) Alle andere pagina's: header weer normaal (niet over content) ========== */
body:not(.home) .site-header,
body:not(.home) .ast-primary-header-bar {
  position: relative !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* ========== 3) Ruimte boven content op niet-home pagina's (zodat niets onder header valt) ========== */
body:not(.home) .site-content {
  padding-top: 24px;
}

/* ========== 4) Logo/menu sizing fix (voorkomt mega logo of rare hoogte) ========== */
body:not(.home) .site-branding img,
body:not(.home) .custom-logo {
  max-height: 64px;
  height: auto;
  width: auto;
}

body.home .site-branding img,
body.home .custom-logo {
  max-height: 90px; /* homepage mag iets groter */
}

/* ========== 5) Sticky header (als je die gebruikt): ook correct gedrag ========== */
body:not(.home) .ast-sticky-active .ast-primary-header-bar{
  background: #ffffff !important;
}
/* ===== LOGO FIX – voorkomt vervorming ===== */

/* Altijd verhouding behouden */
.site-branding img,
.custom-logo {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
}

/* Homepage: groter logo, maar NIET uitrekken */
body.home .site-branding img,
body.home .custom-logo {
  max-height: 80px;   /* pas aan naar smaak: 70–90 */
  width: auto !important;
}

/* Andere pagina’s: iets compacter */
body:not(.home) .site-branding img,
body:not(.home) .custom-logo {
  max-height: 60px;
  width: auto !important;
}
/* Hero buttons exact even groot */
.vr-hero-btn {
  min-width: 220px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767px){
  .vr-hero-btn{
    width: 100%;
  }
}
/* === HERO BUTTONS GELIJK MAKEN === */
.vr-hero-btn,
.vr-hero-btn .elementor-button,
.vr-hero-btn .elementor-button-content-wrapper {
  min-width: 240px;
}

.vr-hero-btn .elementor-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (max-width: 767px) {
  .vr-hero-btn,
  .vr-hero-btn .elementor-button {
    width: 100%;
    min-width: 100%;
  }
}
/* =============== */
/* STRAKKER FORMULIER (Elementor Form + eventueel Contact Form 7) */
/* =============== */

/* 1) Algemene spacing van het form */
.elementor-form,
.wpcf7 form {
  --vr-gap: 12px;           /* ruimte tussen velden */
  --vr-field-h: 46px;       /* hoogte inputs */
  --vr-radius: 10px;        /* ronding */
}

/* 2) Label compacter */
.elementor-form .elementor-field-label,
.wpcf7 form label {
  margin-bottom: 6px !important;
  font-size: 14px;
  font-weight: 600;
  color: #1A3B3E;
}

/* 3) Minder ruimte tussen field-groups */
.elementor-form .elementor-field-group {
  margin-bottom: var(--vr-gap) !important;
}

/* 4) Inputs/select/textarea strakker */
.elementor-form input.elementor-field,
.elementor-form select.elementor-field,
.elementor-form textarea.elementor-field,
.wpcf7 form input,
.wpcf7 form select,
.wpcf7 form textarea {
  height: var(--vr-field-h);
  padding: 10px 12px !important;
  border-radius: var(--vr-radius) !important;
  border: 1px solid rgba(26, 59, 62, 0.18) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 15px;
  color: #1A3B3E;
}

/* 5) Textarea: wel hoger, maar niet overdreven */
.elementor-form textarea.elementor-field,
.wpcf7 form textarea {
  height: 120px !important;
  min-height: 120px !important;
  resize: vertical;
}

/* 6) Focus state (net en merkwaardig) */
.elementor-form input.elementor-field:focus,
.elementor-form select.elementor-field:focus,
.elementor-form textarea.elementor-field:focus,
.wpcf7 form input:focus,
.wpcf7 form select:focus,
.wpcf7 form textarea:focus {
  outline: none !important;
  border-color: #5BB77A !important;
  box-shadow: 0 0 0 3px rgba(91, 183, 122, 0.18) !important;
}

/* 7) Placeholder iets subtieler */
.elementor-form input.elementor-field::placeholder,
.elementor-form textarea.elementor-field::placeholder,
.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {
  color: rgba(26, 59, 62, 0.45);
}

/* 8) Dropdown pijltje/hoogte consistent */
.elementor-form select.elementor-field,
.wpcf7 form select {
  line-height: 1.2;
}

/* 9) Submit knop strakker en in jouw kleuren */
.elementor-form button[type="submit"],
.wpcf7 form input[type="submit"] {
  padding: 12px 18px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: #1A3B3E !important;
  color: #fff !important;
  font-weight: 700;
  transition: transform .08s ease, opacity .15s ease;
}

.elementor-form button[type="submit"]:hover,
.wpcf7 form input[type="submit"]:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* 10) Mobiel: nog iets compacter */
@media (max-width: 767px) {
  .elementor-form .elementor-field-group { margin-bottom: 10px !important; }
  .elementor-form input.elementor-field,
  .elementor-form select.elementor-field,
  .wpcf7 form input,
  .wpcf7 form select {
    height: 44px;
  }
}
/* ===========================
   MODERNE KNOPPEN (zonder kleuren aan te passen)
   - Elementor + Astra + WP buttons
   =========================== */

/* 1) Target: meeste knoppen */
.elementor-button,
.elementor button,
.elementor input[type="button"],
.elementor input[type="submit"],
.ast-button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
a.button,
a.btn {
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.1;
  text-decoration: none !important;

  /* modern “feel” */
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  transform: translateY(0);
  cursor: pointer;
}

/* 2) Hover: subtiel omhoog + iets meer diepte (geen kleur wijziging) */
.elementor-button:hover,
.elementor button:hover,
.elementor input[type="button"]:hover,
.elementor input[type="submit"]:hover,
.ast-button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover,
a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  filter: brightness(1.02);
}

/* 3) Active: “pressed” */
.elementor-button:active,
.elementor button:active,
.elementor input[type="button"]:active,
.elementor input[type="submit"]:active,
.ast-button:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
.wp-block-button__link:active,
a.button:active,
a.btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* 4) Focus: toegankelijk en modern (geen kleur wijziging van de knop zelf) */
.elementor-button:focus-visible,
.elementor button:focus-visible,
.elementor input[type="button"]:focus-visible,
.elementor input[type="submit"]:focus-visible,
.ast-button:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus-visible,
a.button:focus-visible,
a.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.10);
}

/* 5) Knoppen met “grote” styling vaak wat netter */
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-md {
  padding: 13px 20px !important;
}

/* 6) Icon spacing (Elementor) */
.elementor-button .elementor-button-icon {
  margin-left: 10px;
}

/* 7) Alleen als je knoppen soms te hoog/laag worden door thema */
.elementor-button,
.ast-button {
  min-height: 44px;
}

/* 8) Respecteer disabled */
button:disabled,
input[type="submit"]:disabled,
.elementor-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.vr-divider-a{
  display:flex;
  align-items:center;
  width:100%;
  margin:60px 0;
  gap:18px;
}

.vr-divider-a:before,
.vr-divider-a:after{
  content:"";
  flex:1;
  height:2px;
  background:#5BB77A;
}

.vr-divider-a span{
  padding:8px 14px;
  border:2px solid #5BB77A;
  border-radius:999px;
  background:#fff;
  color:#1A3B3E;
  font-weight:700;
  letter-spacing:.18em;
  font-size:14px;
}
/* Consistente content-breedte en uitlijning */
.vr-content,
.elementor-section .elementor-container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Hoofdkoppen (H1 / H2) iets compacter en strakker */
.elementor h1,
.elementor h2 {
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Tekst onder koppen beter laten aansluiten */
.elementor p {
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Extra ruimte vóór nieuwe secties (zoals "Twee manieren...") */
.elementor h2 {
  margin-top: 48px;
}

/* Iets minder ruimte direct onder H1 */
.elementor h1 + p {
  margin-top: -4px;
}
.elementor-divider {
  margin-top: 24px;
}
@media (max-width: 768px) {
  .elementor-section .elementor-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .elementor h1,
  .elementor h2 {
    line-height: 1.25;
  }
}
/* HERO CTA knoppen: strak & even groot */
.vr-hero-btn.elementor-widget-button .elementor-button {
  width: 420px;                 /* beide exact even breed op desktop */
  max-width: 42vw;              /* voorkomt te groot op kleinere screens */
  min-height: 58px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 34px !important;
  border-radius: 999px;
  box-sizing: border-box;

  white-space: nowrap;          /* desktop: nooit afbreken */
  line-height: 1.1;
  font-size: 20px;              /* terug naar ‘hero-waardig’ */
}

/* Tablet: iets kleiner zodat het niet gaat botsen */
@media (max-width: 1024px) {
  .vr-hero-btn.elementor-widget-button .elementor-button {
    width: 360px;
    font-size: 18px;
  }
}

/* Mobiel: beide 100% even breed, tekst mag wel breken */
@media (max-width: 768px) {
  .vr-hero-btn.elementor-widget-button .elementor-button {
    width: 100%;
    max-width: 340px;
    white-space: normal;        /* mobiel: mag op 2 regels */
    text-align: center;
    font-size: 18px;
  }
}
.vr-fullwidth-image {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
}

.vr-fullwidth-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* =========================================
   VESTERS – MODERNE ASTRA HEADER (CSS)
   ========================================= */

/* 1) Header basis: wit + subtiele schaduw/lijn */
.ast-primary-header-bar{
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(26,59,62,0.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* 2) Hoogte/padding iets strakker */
.ast-primary-header-bar .ast-container{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* 3) Menu items strak */
.main-header-menu > li > a{
  color: #1A3B3E !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  padding: 10px 14px !important;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}

/* Hover: subtiele pill */
.main-header-menu > li > a:hover{
  background: rgba(91,183,122,0.14) !important;
  transform: translateY(-1px);
}

/* 4) Active/current: GEEN groene blob, wel underline */
.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current_page_item > a,
.main-header-menu > li.current-menu-ancestor > a{
  background: transparent !important;
  box-shadow: inset 0 -2px 0 #5BB77A !important;
  border-radius: 0 !important;
}

/* 5) CTA: laatste menu-item als knop */
.main-header-menu > li:last-child > a{
  background: #5BB77A !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 18px rgba(26,59,62,0.12) !important;
  transform: none !important;
}

.main-header-menu > li:last-child > a:hover{
  background: #1A3B3E !important;
}

/* 6) Mobiel/tablet: compacter */
@media (max-width: 1024px){
  .ast-primary-header-bar .ast-container{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .main-header-menu > li > a{
    padding: 9px 12px !important;
  }
}
/* =========================
   VESTERS RECRUITMENT - HEADER + HERO (VR)
   Voeg class 'vr-hero' toe aan je hero sectie in Elementor
   ========================= */

/* ---------- 1) Moderne transparante header (desktop) ---------- */

/* Maak header transparant bovenaan (over hero) */
.elementor-location-header,
header.site-header,
#masthead,
.ast-primary-header-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Iets meer “premium” spacing */
.ast-primary-header-bar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Menu typografie strakker */
.ast-desktop .main-header-menu > .menu-item > .menu-link,
.ast-desktop .ast-builder-menu-1 .menu-link,
.ast-desktop .ast-builder-menu-2 .menu-link {
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;
}

/* Subtiele hover underline */
.ast-desktop .main-header-menu > .menu-item > .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .menu-link:hover,
.ast-desktop .ast-builder-menu-2 .menu-link:hover {
  opacity: .9;
}

/* Grote CTA knop rechtsboven moderner + iets compacter */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.header-widget-area .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  transform: translateZ(0);
}

/* ---------- 2) Sticky header: wit bij scroll (rustiger) ---------- */
/* Astra gebruikt vaak .ast-scroll-to-fixed-header of .ast-sticky-active */
.ast-scroll-to-fixed-header,
.ast-sticky-active header.site-header,
.ast-sticky-active #masthead,
.ast-sticky-active .ast-primary-header-bar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
}

/* Tekstkleur in menu bij sticky (donker) */
.ast-scroll-to-fixed-header .menu-link,
.ast-sticky-active .menu-link {
  color: #1A3B3E !important;
}

/* ---------- 3) Hero rustiger maken + tekst lager ---------- */

/* Zorg dat hero ruimte heeft voor header (zodat tekst niet tegen bovenkant zit) */
.vr-hero {
  min-height: 78vh;              /* pas aan naar smaak */
  padding-top: 110px !important; /* duwt content omlaag */
  position: relative;
}

/* Donkere overlay (rust + leesbaarheid) */
.vr-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.15) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Zorg dat alle hero content boven overlay ligt */
.vr-hero .elementor-container,
.vr-hero .elementor-widget-wrap,
.vr-hero .elementor-column,
.vr-hero .elementor-widget {
  position: relative;
  z-index: 1;
}

/* Headline net wat groter/strakker (optioneel) */
.vr-hero h1 {
  line-height: 1.05 !important;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Intro tekst iets meer contrast */
.vr-hero p {
  text-shadow: 0 8px 30px rgba(0,0,0,.30);
}

/* ---------- 4) Jouw 2 groene hero knoppen: gelijk + modern ---------- */
/* Elementor knoppen in de vr-hero */
.vr-hero .elementor-button {
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
  min-width: 260px;              /* maakt ze visueel gelijk */
  text-align: center;
}

/* Mobiel: knoppen full-width en onder elkaar */
@media (max-width: 767px) {
  .vr-hero { padding-top: 90px !important; min-height: 70vh; }
  .vr-hero .elementor-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- 5) Kleine polish: logo niet “zweven” ---------- */
.custom-logo-link img,
.site-logo-img img,
.ast-site-identity img {
  max-height: 44px !important;  /* pas aan als je wilt */
}
/* ================================
   VESTERS RECRUITMENT – HEADER FIX
   (Astra + Elementor hero)
   Plakken in: Customizer > Extra CSS
   ================================ */

/* ---------- 1) Basis: header over hero transparant + beter contrast ---------- */
#masthead,
header.site-header,
.elementor-location-header,
.ast-primary-header-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Zet header-content boven de hero/foto */
#masthead { position: relative; z-index: 9999; }

/* Maak de header “leesbaar” met een subtiele glass-balk (alleen bovenaan) */
.ast-primary-header-bar {
  padding: 12px 22px !important;
}

/* Glass achtergrond achter logo/menu zodat het niet wegvalt in de foto */
.ast-primary-header-bar:before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  bottom: 8px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  z-index: -1;
}

/* Zorg dat alles in de header netjes boven die glass-bg ligt */
.ast-primary-header-bar > * { position: relative; z-index: 2; }

/* ---------- 2) Logo: groter + strakker ---------- */
.custom-logo-link img,
.site-logo-img img,
.ast-site-identity img {
  max-height: 52px !important;    /* was vaak 40-44 */
  width: auto !important;
  transform: translateY(0);
}

/* Iets meer ademruimte links */
.ast-site-identity { padding-left: 6px !important; }

/* ---------- 3) Menu: moderner (gewicht/spacing/hover) ---------- */
.ast-desktop .main-header-menu > .menu-item > .menu-link,
.ast-desktop .ast-builder-menu-1 .menu-link,
.ast-desktop .ast-builder-menu-2 .menu-link {
  font-weight: 700 !important;
  letter-spacing: .25px !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  transition: all .18s ease !important;
  color: #1A3B3E !important;
}

/* Hover: subtiele “pill” highlight */
.ast-desktop .main-header-menu > .menu-item > .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .menu-link:hover,
.ast-desktop .ast-builder-menu-2 .menu-link:hover {
  background: rgba(255,255,255,.45) !important;
  transform: translateY(-1px);
}

/* Actieve menu-item */
.ast-desktop .current-menu-item > .menu-link,
.ast-desktop .current_page_item > .menu-link {
  background: rgba(255,255,255,.55) !important;
}

/* ---------- 4) CTA knop rechts: premium pill, iets compacter ---------- */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.header-widget-area .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
  border-radius: 999px !important;
  padding: 12px 18px !important;    /* iets compacter */
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.14) !important;
  transition: all .18s ease !important;
}

.ast-builder-button-wrap .ast-custom-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.18) !important;
}

/* ---------- 5) Sticky header (bij scroll): wit + scherp ---------- */
.ast-scroll-to-fixed-header,
.ast-sticky-active #masthead,
.ast-sticky-active .ast-primary-header-bar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}

/* Sticky: glass-balk uit (dan wordt het te dubbel) */
.ast-sticky-active .ast-primary-header-bar:before,
.ast-scroll-to-fixed-header .ast-primary-header-bar:before {
  display: none !important;
}

/* Sticky: menu altijd donker */
.ast-sticky-active .menu-link,
.ast-scroll-to-fixed-header .menu-link {
  color: #1A3B3E !important;
}

/* ---------- 6) Mobiel: rust + juiste klikbaarheid ---------- */
@media (max-width: 921px) {
  .ast-primary-header-bar { padding: 10px 14px !important; }
  .ast-primary-header-bar:before {
    left: 8px; right: 8px; top: 6px; bottom: 6px;
    border-radius: 16px;
  }
  .custom-logo-link img,
  .site-logo-img img,
  .ast-site-identity img { max-height: 46px !important; }
}
/* ================================
   VACATUREPAGINA IN VESTERS STIJL
   (WP Job Manager – filters + listings)
   Kleuren: #1A3B3E (donkergroen) / #5BB77A (lichtgroen)
   ================================ */

/* --- Algemene layout / container --- */
.job_listings,
.job_filters,
.job_listings * {
  box-sizing: border-box;
}

.job_filters {
  background: #ffffff !important;
  border: 1px solid rgba(26,59,62,.10) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.06) !important;
  margin-bottom: 22px !important;
}

/* --- Zoekvelden (Keywords/Locatie) --- */
.job_filters .search_jobs input[type="text"],
.job_filters .search_jobs input[type="search"],
.job_filters .search_jobs select {
  width: 100% !important;
  border-radius: 14px !important;
  border: 1px solid rgba(26,59,62,.18) !important;
  padding: 12px 14px !important;
  outline: none !important;
  background: #fff !important;
  transition: all .18s ease !important;
}

.job_filters .search_jobs input:focus,
.job_filters .search_jobs select:focus {
  border-color: rgba(91,183,122,.85) !important;
  box-shadow: 0 0 0 4px rgba(91,183,122,.20) !important;
}

/* --- “Zoek vacatures” knop (WP Job Manager gebruikt vaak button/input) --- */
.job_filters input[type="submit"],
.job_filters button,
.job_filters .search_jobs button,
.job_filters .search_jobs input[type="submit"] {
  background: #5BB77A !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}

.job_filters input[type="submit"]:hover,
.job_filters button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,.14) !important;
  opacity: .98;
}

/* --- Checkbox regel “Alleen vacatures op afstand” + type-filters --- */
.job_filters label,
.job_filters .search_jobs label,
.job_filters .job_types label {
  color: #1A3B3E !important;
  font-weight: 700 !important;
}

.job_filters input[type="checkbox"] {
  accent-color: #5BB77A;
}

/* Maak de job-types als “chips/pills” */
.job_filters .job_types,
.job_filters .job_types li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.job_filters .job_types {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.job_filters .job_types li {
  background: rgba(26,59,62,.06) !important;
  border: 1px solid rgba(26,59,62,.10) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
}

/* --- Vacaturelijst als kaarten --- */
ul.job_listings {
  padding: 0 !important;
  margin: 0 !important;
}

ul.job_listings li.job_listing,
ul.job_listings li.no_job_listings_found {
  list-style: none !important;
  background: #fff !important;
  border: 1px solid rgba(26,59,62,.10) !important;
  border-radius: 18px !important;
  margin: 0 0 14px 0 !important;
  padding: 14px 16px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

ul.job_listings li.job_listing:hover {
  transform: translateY(-2px);
  border-color: rgba(91,183,122,.55) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.10) !important;
}

/* Titel + meta */
ul.job_listings li.job_listing a,
ul.job_listings li.job_listing a:visited {
  color: #1A3B3E !important;
  text-decoration: none !important;
}

ul.job_listings li.job_listing .position h3,
ul.job_listings li.job_listing .position strong {
  color: #1A3B3E !important;
  font-weight: 900 !important;
  letter-spacing: .1px !important;
}

/* Meta info (locatie/datum/type) rustiger */
ul.job_listings li.job_listing .meta,
ul.job_listings li.job_listing .meta li,
ul.job_listings li.job_listing .company,
ul.job_listings li.job_listing .company strong {
  color: rgba(26,59,62,.78) !important;
}

/* Logo/thumbnail netter */
ul.job_listings li.job_listing img.company_logo {
  border-radius: 12px !important;
  border: 1px solid rgba(26,59,62,.10) !important;
  background: #fff !important;
}

/* RSS link subtiel */
.job_listings .rss_link,
.job_listings a.rss_link {
  color: rgba(26,59,62,.70) !important;
  font-weight: 700 !important;
}

/* --- Mobiel: alles onder elkaar + meer ademruimte --- */
@media (max-width: 767px) {
  .job_filters { padding: 14px !important; border-radius: 16px !important; }
  .job_filters .job_types { gap: 8px !important; }
  ul.job_listings li.job_listing { padding: 14px !important; }
}
/* ================================
   VACATURELIJST BREEDER MAKEN
   WP Job Manager + Astra
   ================================ */

/* Zorg dat de content container breder mag zijn */
.site-content .ast-container,
.site-content .container,
.site-main {
  max-width: 1400px !important;   /* pas aan: 1300–1600 */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Vacaturelijst zelf: volledige breedte */
.job_listings,
ul.job_listings {
  width: 100% !important;
  max-width: 100% !important;
}

/* Elke vacaturekaart gebruikt volledige rij */
ul.job_listings li.job_listing {
  display: block !important;
  width: 100% !important;
}

/* Interne layout van de vacature (tekst mag breder) */
ul.job_listings li.job_listing a {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
}

/* Titel en bedrijfsnaam mogen nu echt breed */
ul.job_listings li.job_listing .position {
  max-width: 100% !important;
}

/* Voorkom rare woord-afbrekingen */
ul.job_listings li.job_listing * {
  word-break: normal !important;
  hyphens: none !important;
}

/* Mobiel: weer netjes onder elkaar */
@media (max-width: 768px) {
  ul.job_listings li.job_listing a {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}
/* ================================
   VACATURES – FIX LAYOUT + RSS WEG
   ================================ */

/* 1) RSS verbergen */
.job_listings .rss_link,
.job_listings a.rss_link,
a.rss_link,
.rss_link,
.job_listings .rss {
  display: none !important;
}

/* 2) Listing layout strak: logo | tekst | meta rechts */
ul.job_listings li.job_listing a {
  display: grid !important;
  grid-template-columns: 64px 1fr 220px !important; /* logo | content | meta */
  gap: 18px !important;
  align-items: center !important;
}

/* Logo kolom */
ul.job_listings li.job_listing .company_logo,
ul.job_listings li.job_listing img.company_logo {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
}

/* Middencolom: titel + bedrijf */
ul.job_listings li.job_listing .position,
ul.job_listings li.job_listing .company {
  margin: 0 !important;
}

/* 3) Rechter meta-kolom: alles rechts uitlijnen + NIET afbreken */
ul.job_listings li.job_listing .meta {
  justify-self: end !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 220px !important;
}

/* Belangrijk: voorkom dat “1 maand geleden” in stukjes breekt */
ul.job_listings li.job_listing .meta li,
ul.job_listings li.job_listing .meta,
ul.job_listings li.job_listing time,
ul.job_listings li.job_listing .date,
ul.job_listings li.job_listing .job_listing-date {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Locatie wat subtieler */
ul.job_listings li.job_listing .location {
  color: rgba(26,59,62,.75) !important;
  font-weight: 700 !important;
}

/* 4) Kaarten iets compacter (minder “lucht”) */
ul.job_listings li.job_listing {
  padding: 16px 18px !important;
}

/* 5) Tablet/mobiel: meta onder elkaar en full width */
@media (max-width: 920px) {
  ul.job_listings li.job_listing a {
    grid-template-columns: 56px 1fr !important;
  }
  ul.job_listings li.job_listing .meta {
    justify-self: start !important;
    text-align: left !important;
    min-width: 0 !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 520px) {
  ul.job_listings li.job_listing a {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}
/* ================================
   FIX: vacatureregels weer normaal (geen verticale tekst)
   Plak ONDERAAN (override)
   ================================ */

/* RSS weg */
.job_listings .rss_link,
.job_listings a.rss_link,
a.rss_link,
.rss_link { display:none !important; }

/* 1) Zet de listing-link terug naar flex (grid uit) */
ul.job_listings li.job_listing a{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  width:100% !important;
}

/* 2) Logo vaste breedte */
ul.job_listings li.job_listing a img.company_logo{
  width:56px !important;
  height:56px !important;
  object-fit:cover !important;
  flex:0 0 56px !important;
}

/* 3) TITEL/CONTENT: geef ruimte zodat hij nooit 1px breed wordt */
ul.job_listings li.job_listing .position{
  flex:1 1 520px !important;     /* mag groeien/krimpen */
  min-width:320px !important;     /* voorkomt verticale letters */
  width:auto !important;
  max-width:none !important;
}

/* 4) Locatie: niet te breed, maar wel leesbaar */
ul.job_listings li.job_listing .location{
  flex:0 0 140px !important;
  min-width:120px !important;
  white-space:nowrap !important;
}

/* 5) Meta (datum): helemaal rechts, nooit afbreken */
ul.job_listings li.job_listing .meta{
  margin-left:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
  text-align:right !important;
}

/* Extra: voorkom rare afbrekingen in meta */
ul.job_listings li.job_listing .meta,
ul.job_listings li.job_listing .meta li{
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* Tablet/mobiel: netjes stapelen */
@media (max-width: 920px){
  ul.job_listings li.job_listing a{
    flex-wrap:wrap !important;
  }
  ul.job_listings li.job_listing .position{
    min-width:0 !important;
    flex:1 1 100% !important;
  }
  ul.job_listings li.job_listing .location{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  ul.job_listings li.job_listing .meta{
    margin-left:0 !important;
    text-align:left !important;
  }
}
/* ================================
   VESTERS – MOBIEL HAMBURGER MENU
   Astra theme
   ================================ */

/* Basis hamburger (3 streepjes / icon) */
.ast-button-wrap .menu-toggle,
.ast-mobile-header-wrap .menu-toggle {
  background: transparent !important;
  border: 0 !important;
}

/* Hamburger icon kleur + dikte */
.ast-button-wrap .menu-toggle svg,
.ast-button-wrap .menu-toggle span,
.ast-mobile-header-wrap .menu-toggle svg {
  fill: #5BB77A !important;        /* lichtgroen */
  color: #5BB77A !important;
  stroke: #5BB77A !important;
}

/* Iets groter en meer presence */
.ast-button-wrap .menu-toggle {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  transition: all .2s ease !important;
}

/* Hover / focus effect */
.ast-button-wrap .menu-toggle:hover,
.ast-button-wrap .menu-toggle:focus {
  background: rgba(91,183,122,.12) !important;
  transform: scale(1.05);
}

/* Actieve staat (menu open) */
.ast-button-wrap .menu-toggle.toggled {
  background: rgba(26,59,62,.08) !important;
}

/* Optioneel: iets donkerder bij sticky header */
.ast-sticky-active .ast-button-wrap .menu-toggle svg {
  fill: #1A3B3E !important;        /* donkergroen */
  stroke: #1A3B3E !important;
}
/* ===== MOBIEL MENU – BETERE CONTRASTEN ===== */

/* Achtergrond off-canvas menu (mobiel) */
@media (max-width: 768px) {
  .ast-mobile-popup-drawer,
  .ast-mobile-popup-inner {
    background-color: #ffffff !important;
  }

  /* Menu links */
  .ast-mobile-popup-content .menu-item > a {
    color: #1A3B3E !important;          /* donker groen */
    font-weight: 600;
    font-size: 18px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(26,59,62,0.08);
  }

  /* Hover / tap effect */
  .ast-mobile-popup-content .menu-item > a:hover {
    background: rgba(91,183,122,0.12);  /* licht groen */
  }

  /* Actieve pagina */
  .ast-mobile-popup-content .current-menu-item > a {
    background: rgba(91,183,122,0.20);
    color: #1A3B3E !important;
    border-radius: 12px;
    margin: 6px 12px;
  }

  /* CTA knop (Aanvraag / Vacature aanmelden) */
  .ast-mobile-popup-content .menu-item.menu-item-button > a,
  .ast-mobile-popup-content .menu-item:last-child > a {
    background: #5BB77A !important;
    color: #ffffff !important;
    border-radius: 999px;
    margin: 16px;
    text-align: center;
    font-weight: 600;
  }
}
selector {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background-size: cover;
  background-position: center;
}
/* ==============================
   CONTACT pagina – simpele upgrade
   Scope: alleen /contact/ (body class)
   ============================== */
body.page-contact{
  background:#f6f7f8;
}

/* 1) Minder mega-witruimte boven de content */
body.page-contact .site-content,
body.page-contact .content-area{
  padding-top: 24px !important;
}

/* 2) Elementor content wat compacter en mooier gecentreerd */
body.page-contact .elementor-section.elementor-section-boxed > .elementor-container{
  max-width: 1100px;
}

/* 3) Maak elke “blok/rij” als kaart (werkt meestal direct op je secties) */
body.page-contact .elementor-section{
  margin: 18px auto;
}
body.page-contact .elementor-section > .elementor-container{
  background:#fff;
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

/* 4) Balk-titels (Bel/Whatsapp, Mail, Locatie) strakker */
body.page-contact .elementor-widget-heading .elementor-heading-title{
  display:block;
  width:100%;
  margin: 0 0 14px 0 !important;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1A3B3E 0%, #123033 100%);
  color:#fff !important;
  text-align:center;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.1;
}

/* 5) Tekst: rustiger, iets groter, betere regelafstand */
body.page-contact .elementor-widget-text-editor,
body.page-contact .elementor-widget-text-editor p{
  color:#1A3B3E;
  font-size: 16px;
  line-height: 1.65;
}
body.page-contact .elementor-widget-text-editor p{
  margin: 0 0 12px 0;
}

/* 6) Buttons: moderner (zonder je kleuren “kapot” te maken) */
body.page-contact a.elementor-button,
body.page-contact .elementor-button{
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 20px rgba(26,59,62,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.page-contact a.elementor-button:hover,
body.page-contact .elementor-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(26,59,62,.22);
  filter: brightness(1.03);
}

/* 7) Op mobiel: kaarten wat compacter en balk-titels niet te groot */
@media (max-width: 767px){
  body.page-contact .elementor-section > .elementor-container{
    padding: 16px 14px;
    border-radius: 16px;
  }
  body.page-contact .elementor-widget-heading .elementor-heading-title{
    font-size: 18px;
    padding: 10px 12px;
    border-radius: 12px;
  }
}
/* TEST: moet je hele contactpagina lichtgeel maken */
body.page-id-999999 { background: #fff7c2 !important; }
/* ==============================
   CONTACT pagina – upgrade (Gutenberg/Elementor proof)
   VERVANG 1234 door jouw echte page-id
   ============================== */

body.page-id-1123{
  background:#f6f7f8;
}

/* Minder “lege zee” boven */
body.page-id-1123 .site-content,
body.page-id-1123 .content-area{
  padding-top: 24px !important;
}

/* Titels (Bel/Whatsapp, Mail, Locatie) */
body.page-id-1123 .entry-content h2,
body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
  display:block;
  width:100%;
  margin: 0 0 14px 0 !important;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1A3B3E 0%, #123033 100%);
  color:#fff !important;
  text-align:center;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Tekst */
body.page-id-1123 .entry-content,
body.page-id-1123 .entry-content p,
body.page-id-1123 .elementor-widget-text-editor,
body.page-id-1123 .elementor-widget-text-editor p{
  color:#1A3B3E;
  font-size: 16px;
  line-height: 1.65;
}

/* Buttons (Gutenberg + Elementor) */
body.page-id-1123 .wp-block-button__link,
body.page-id-1123 a.elementor-button,
body.page-id-1123 .elementor-button{
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 20px rgba(26,59,62,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.page-id-1123 .wp-block-button__link:hover,
body.page-id-1123 a.elementor-button:hover,
body.page-id-1123 .elementor-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(26,59,62,.22);
  filter: brightness(1.03);
}

/* Mobiel */
@media (max-width: 767px){
  body.page-id-1123 .entry-content h2,
  body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
    font-size: 18px;
    padding: 10px 12px;
    border-radius: 12px;
  }
}
/* =========================================
   CONTACTPAGINA – MODERN CARD DESIGN
   Pagina ID: 1123
   ========================================= */

body.page-id-1123{
  background:#f4f6f7;
}

/* Minder lege ruimte boven */
body.page-id-1123 .site-content,
body.page-id-1123 .content-area{
  padding-top: 20px !important;
}

/* Max breedte netjes centreren */
body.page-id-1123 .elementor-section.elementor-top-section > .elementor-container{
  max-width: 1100px;
}

/* Cards voor Bel / Mail / Locatie */
body.page-id-1123 .elementor-section.elementor-top-section:not(:first-child) > .elementor-container{
  background:#ffffff;
  border-radius: 24px;
  padding: 32px 28px 28px;
  margin: 32px auto;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  border: 1px solid rgba(26,59,62,.08);
  position: relative;
}

/* Floating pill titles */
body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1A3B3E 0%, #0f2c2f 100%);
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: 0 14px 30px rgba(26,59,62,.25);
  white-space: nowrap;
}

/* Accent-lijn onder pill */
body.page-id-1123 .elementor-widget-heading .elementor-heading-title:after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:#5BB77A;
  border-radius:99px;
  margin:8px auto 0;
}

/* Tekst rustiger en professioneler */
body.page-id-1123 .elementor-widget-text-editor,
body.page-id-1123 .elementor-widget-text-editor p{
  color:#1A3B3E;
  font-size:16px;
  line-height:1.7;
}
body.page-id-1123 .elementor-widget-text-editor p{
  margin-bottom:14px;
}

/* Buttons modern & consistent */
body.page-id-1123 a.elementor-button,
body.page-id-1123 .elementor-button{
  border-radius:14px !important;
  padding:12px 20px !important;
  font-weight:800 !important;
  box-shadow:0 12px 26px rgba(26,59,62,.18);
  transition: all .2s ease;
}

body.page-id-1123 a.elementor-button:hover,
body.page-id-1123 .elementor-button:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 36px rgba(26,59,62,.25);
  filter: brightness(1.03);
}

/* Mobiel optimalisatie */
@media (max-width: 767px){
  body.page-id-1123 .elementor-section.elementor-top-section:not(:first-child) > .elementor-container{
    padding: 22px 16px;
    border-radius: 18px;
  }
  body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
    position: static;
    transform: none;
    margin-bottom: 12px;
    font-size:18px;
  }
}
/* =========================================
   FIX overlap tekst onder balken
   Contactpagina – page-id-1123
   ========================================= */

/* Geef secties extra top-padding zodat pill ruimte krijgt */
body.page-id-1123 
.elementor-section.elementor-top-section:not(:first-child) 
> .elementor-container{
  padding-top: 64px !important;
}

/* Verlaag de pill iets zodat hij minder overlapt */
body.page-id-1123 
.elementor-widget-heading .elementor-heading-title{
  top: -32px;   /* was -26px */
}

/* Zorg dat tekst altijd netjes onder titel begint */
body.page-id-1123 
.elementor-widget-text-editor{
  margin-top: 8px;
}

/* Mobiel: pill niet zwevend (voorkomt chaos) */
@media (max-width: 767px){
  body.page-id-1123 
  .elementor-section.elementor-top-section:not(:first-child) 
  > .elementor-container{
    padding-top: 22px !important;
  }

  body.page-id-1123 
  .elementor-widget-heading .elementor-heading-title{
    position: static;
    transform: none;
    margin-bottom: 14px;
  }
}
/* =========================================
   OVERLAP FIX (definitief) – page-id-1123
   Maak headings NIET absoluut -> geen tekst eronder
   ========================================= */

/* Zet de heading “pill” terug naar normale flow */
body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;

  display: block;
  width: 100%;
  margin: 0 0 14px 0 !important;
  padding: 18px 22px;

  border-radius: 999px;
  background: linear-gradient(135deg, #1A3B3E 0%, #0f2c2f 100%);
  color: #fff !important;

  font-weight: 900;
  letter-spacing: .3px;
  text-align: center;

  box-shadow: 0 16px 34px rgba(26,59,62,.22);
}

/* Accent-lijn (blijft mooi) */
body.page-id-1123 .elementor-widget-heading .elementor-heading-title:after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:#5BB77A;
  border-radius:99px;
  margin:10px auto 0;
}

/* Extra ruimte tussen heading en tekst */
body.page-id-1123 .elementor-widget-heading{
  margin-bottom: 14px !important;
}

/* Zorg dat tekst altijd eronder start */
body.page-id-1123 .elementor-widget-text-editor{
  margin-top: 0 !important;
  clear: both;
}
body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
  padding: 14px 20px;   /* was hoger */
  font-size: 20px;
}
body.page-id-1123 .elementor-button{
  margin-top: 8px !important;
}
/* Bel/Whatsapp knop extra nadruk */
body.page-id-1123 .elementor-button[href^="tel"],
body.page-id-1123 .elementor-button[href*="whatsapp"]{
  box-shadow: 0 18px 40px rgba(91,183,122,.35);
  transform: scale(1.03);
}
body.page-id-1123 .elementor-widget-heading .elementor-heading-title{
  padding: 12px 18px;
  font-size: 19px;
}
body.page-id-1123 .elementor-widget-text-editor{
  margin-top: -4px;
}
body.page-id-1123 .elementor-button[href^="tel"],
body.page-id-1123 .elementor-button[href*="whatsapp"]{
  box-shadow: 0 16px 36px rgba(91,183,122,.35);
}
/* Verwijder witruimte naast full-width blokken */
.elementor-section-full_width,
.elementor-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body{
  overflow-x: hidden;
}
/* Force full width voor aanvraagblok */
.vr-fullwidth{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
/* Verwijder witruimte links/rechts op mobiel */
html, body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .elementor-section,
  .elementor-container,
  .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}