/* Drop-down of the right-edge item open to the left */
.edge-right {
  position: relative;
}

.edge-right > ul.sub-menu,
.edge-right > .sub-menu {
  left: auto !important;
  right: 0 !important;
}
/* Make submenu background and text disappear together */
.main-header-menu .sub-menu li {
  background: transparent;
}

.main-header-menu .sub-menu li > a {
  display: block;
  width: 100%;
  background: #ffffff;
  padding: 12px 16px;
  transition: background-color .12s ease, color .12s ease;
}

/* Remove delayed fading that causes text to linger */
.main-header-menu .sub-menu,
.main-header-menu .sub-menu * {
  transition: none;
}
/* Sticky header - Astra Free */
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}
/* Helps sticky on iOS/Android when wrappers interfere */
#masthead,
.elementor-location-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
}
/* ===== Astra mobile submenu arrow (broad + reliable) ===== */

/* The little submenu toggle button (arrow container) */
.ast-header-break-point .ast-menu-toggle,
.ast-header-break-point .menu-item-has-children > .ast-menu-toggle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
 margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The arrow icon itself */
.ast-header-break-point .ast-menu-toggle svg,
.ast-header-break-point .ast-menu-toggle .ast-icon svg {
  width: 10px !important;
  height: 10px !important;
}

/* Arrow color */
.ast-header-break-point .ast-menu-toggle {
  color: #652E6A !important; /* change this */
}

/* Align text nicely so arrow doesn't push it weirdly */
.ast-header-break-point .main-header-menu .menu-item-has-children > a,
.ast-header-break-point .main-navigation .menu-item-has-children > a {
  padding-right: 40px !important;
}
/* ===== Fix: vertically center the submenu toggle without changing layout ===== */

/* Make the link a positioning reference */
.ast-header-break-point .main-header-menu .menu-item-has-children,
.ast-header-break-point .main-navigation .menu-item-has-children {
  position: relative;
}

/* ===== Lock toggle to the TOP row, even when submenu expands ===== */

/* Set a consistent row height for the clickable menu item */
.ast-header-break-point .main-header-menu .menu-item > a,
.ast-header-break-point .main-navigation .menu-item > a {
  min-height: 48px !important;      /* pas aan als jouw rijen hoger/lager zijn */
  display: flex !important;
  align-items: center !important;
}

/* Position toggle relative to the LI, but using fixed top = half of row height */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 24px !important;             /* helft van 48px */
  transform: translateY(-50%) !important;

  z-index: 9999 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ===== Keep the submenu toggle visible + clickable in all states ===== */

/* Make sure the toggle stays on top and clickable */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Force the icon to remain visible */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle,
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle svg,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle svg {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== Rotate arrow when submenu is open ===== */

/* Smooth animation baseline */
.ast-header-break-point .ast-menu-toggle svg {
  transition: transform 0.2s ease !important;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

/* Most common: aria-expanded toggles on the button */
.ast-header-break-point .ast-menu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg) !important;
}

/* Fallback: some Astra versions add a class to the LI */
.ast-header-break-point .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle svg {
  transform: rotate(180deg) !important;
}
/* ===== Fix rotate + keep centered (combine transforms) ===== */

/* Closed state: centered, not rotated */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle svg,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle svg {
  top: 50% !important;
  left: 12px !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  transition: transform 0.2s ease !important;
}

/* Open state: centered + rotated */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"] svg,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"] svg {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* Fallback if Astra uses class on the LI */
.ast-header-break-point .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle svg {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* ===== Vergroot klikgebied naar rechts zonder het pijltje te verplaatsen ===== */

/* 1) Maak de toggle breder en schuif hem iets naar rechts,
      zodat de linkerkant (en dus de pijlpositie) hetzelfde blijft */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle {
  width: 44px !important;          /* totale hitbox breedte */
  height: 34px !important;         /* hoogte hitbox (mag je 34/36/40 maken) */
  min-width: 44px !important;
  min-height: 34px !important;

  right: -8px !important;          /* KEY: breidt uit naar rechts */
  z-index: 9999 !important;
  pointer-events: auto !important;

  display: block !important;       /* we positioneren het icoon zelf */
}

/* 2) Zet het pijltje vast op de oude “center” positie (12px vanaf links) */
.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle svg,
.ast-header-break-point .main-navigation .menu-item-has-children > .ast-menu-toggle svg {
  position: absolute !important;
  left: 12px !important;           /* center van oude 24px box */
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}
/* ===== Desktop: rotate submenu indicator on hover ===== */
@media (min-width: 921px) {

  /* Variant A: Astra icon inside the link */
  .main-header-menu .menu-item-has-children > a .ast-icon svg,
  .main-navigation .menu-item-has-children > a .ast-icon svg {
    transition: transform 0.2s ease;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  .main-header-menu .menu-item-has-children:hover > a .ast-icon svg,
  .main-navigation .menu-item-has-children:hover > a .ast-icon svg {
    transform: rotate(180deg);
  }

  /* Variant B: Arrow is created via pseudo-element */
  .main-header-menu .menu-item-has-children > a:after,
  .main-navigation .menu-item-has-children > a:after {
    transition: transform 0.2s ease;
  }

  .main-header-menu .menu-item-has-children:hover > a:after,
  .main-navigation .menu-item-has-children:hover > a:after {
    transform: rotate(180deg);
  }
}
/* Elementor Menu Anchor offset */
.elementor-menu-anchor {
  position: relative;
  top: -90px;
  display: block;
  height: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .elementor-menu-anchor {
    top: -70px;
  }
}
/* Hide per-slider reset links */
.facetwp-slider-reset,
.facetwp-type-slider .facetwp-reset {
  display: none !important;
}
/* actieve balk */
.facetwp-slider .noUi-connect{
  background: #652e6a !important;
}

/* knopjes */
.facetwp-slider .noUi-handle{
  border-color: #652e6a !important;
}
.facetwp-facet{
  color: #000000;
}

/* Checkbox / radio labels */
.facetwp-checkbox,
.facetwp-radio{
  color: #000000;
}

/* Actieve selectie */
.facetwp-checkbox.checked,
.facetwp-radio.checked{
  font-weight: 600;
}
.facetwp-checkbox:hover,
.facetwp-radio:hover{
  color: #652e6a;
}

/* VERWIJDER FacetWP standaard checkbox styling */
.facetwp-checkbox {
  background: none !important;
}

/* Basis */
.facetwp-checkbox{
  position: relative;
  padding-left: 32px;
  cursor: pointer;
}

/* Custom checkbox */
.facetwp-checkbox::before{
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  background: #fff;
}

/* Checked state */
.facetwp-checkbox.checked::before{
  background: #652e6a;
  border-color: #652e6a;
}

/* Checkmark */
.facetwp-checkbox.checked::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.facetwp-search input.facetwp-search-field{
  border-radius: 12px;
  padding: 10px 12px;
}

@media (min-width: 1025px){
  /* zorg dat Elementor containers sticky kunnen zijn */
  .elementor-section, .e-con, .e-con-inner { overflow: visible !important; }

  .filters-sticky{
    position: sticky !important;
    top: 120px;            /* pas aan aan je header */
    align-self: flex-start;
    height: fit-content;
  }
}
/* FacetWP search: ronde hoeken + net uiterlijk */
.facetwp-facet.facetwp-type-search input.facetwp-search-field{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid #e8e8ee !important;
  width: 100%;
  box-sizing: border-box;
}
/* FacetWP search: pak élk input in de search facet */
.facetwp-facet input.facetwp-search-field,
.facetwp-facet input.facetwp-search,
.facetwp-facet.facetwp-type-search input,
.facetwp-facet.facetwp-type-search select{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid #e8e8ee !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Desktop: 2 kolommen meta */
.meta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

/* Eerder naar 1 kolom omdat sidebar ruimte kost */
@media (max-width: 1400px){
  .meta-grid{
    grid-template-columns: 1fr;
  }
}

/* Verberg [+] */
.facetwp-expand { font-size: 0; }

/* Dicht */
.facetwp-expand::after{
  content: "▾";
  font-size: 14px;
  color: #111;
}

/* Open */
li.fwp-open > .facetwp-expand::after{
  content: "▴";
}

/* FacetWP result count */
.facetwp-counts,
.facetwp-result-count{
  font-size: 16px;   /* pas aan */
  font-weight: 500; /* optioneel */
}
/* Standaard: top filters verbergen op brede schermen */
.filters-top{
  display: none;
}

/* Vanaf 1400px en kleiner: sidebar weg, top filters aan */
@media (max-width: 1400px){
  .filters-sidebar{
    display: none !important;
  }
  .filters-top{
    display: block !important;
  }
}
/* Zorg dat accordion headers altijd klikbaar bovenop liggen */
.filters-sticky .elementor-accordion .elementor-tab-title{
  position: relative;
  z-index: 5;
}

/* Alleen de shortcode-knop */
.se-sollicitatie-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#000;
  color:#fff !important;
  border-radius:999px;

  /* “kleine” knop look */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:1;
  text-decoration:none !important;

  padding: 10px 22px;
  font-size: 18px; /* basis */
}

/* Tablet */
@media (min-width: 768px){
  .se-sollicitatie-btn{
    font-size: 18px;
    padding: 11px 22px;
  }
}

/* Desktop */
@media (min-width: 1025px){
  .se-sollicitatie-btn{
    font-size: 24px;
    padding: 12px 20px;
  }
}

/* Zorg dat input + knop als één geheel werken */
.fluentform .ff_input-group{
  display: flex;
}

/* Input: rechter hoeken uit */
.fluentform .ff_input-group input{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Grijze locatie-knop wrapper */
.fluentform .ff_input-group-append{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;

  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;

  overflow: hidden;
}

/* Hier zit de grijze achtergrond */
.fluentform .ff_input-group-text{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;

  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Banner titel */
.banner-title{
  color: #652e6a;
  font-weight: 700;
  font-size: 32px; /* desktop */
  line-height: 1.2;
}

/* Banner meta (salaris / uren) */
.banner-meta{
  color: #000;
  font-weight: 500;
  font-size: 18px; /* desktop + tablet */
  line-height: 1.3;
}

/* Tablet */
@media (max-width: 1024px){
  .banner-title{
    font-size: 26px;
  }
}

/* Mobile */
@media (max-width: 767px){
  .banner-title{
    font-size: 22px;
  }
  .banner-meta{
    font-size: 16px;
  }
}

/* Under-banner meta (zelfde als banner-meta, andere kleur) */
.under-banner{
  color: #fff;
  font-weight: 500;
  font-size: 18px; /* desktop + tablet */
  line-height: 1.3;
}

/* Mobile */
@media (max-width: 767px){
  .under-banner{
    font-size: 16px;
  }
}

/* knop standaard verbergen */
.back-to-vacatures{ display:none !important; }
.back-to-vacatures.is-visible{ display:inline-flex !important; }

/* Compactere Fluent Forms succesmelding */
.fluentform .ff-message-success{
  border-radius: 16px !important;
  padding: 12px 16px; /* minder hoog */
  background: #f6f6f9;
  line-height: 1.4;
}

/* Astra tablet (545–921px): 4 -> 3 kolommen in dit specifieke block */
@media (min-width: 545px) and (max-width: 921px){
  #footer-cols{
    flex-wrap: wrap !important;
  }

  #footer-cols > .wp-block-column{
    flex-basis: 33.333% !important;
    --wp--style--flex-basis: 33.333% !important; /* Gutenberg variabele */
    max-width: 33.333% !important;
  }

  /* verberg de lege 4e kolom */
  #footer-cols > .wp-block-column:nth-child(4){
    display: none !important;
  }
}

/* Verberg de standaard checkbox */
.facet-toggle .facetwp-checkbox {
  position: relative;
  padding-left: 54px;
  cursor: pointer;
  user-select: none;
}

/* verberg het "vakje" (FacetWP gebruikt pseudo-elementen) */
.facet-toggle .facetwp-checkbox:before,
.facet-toggle .facetwp-checkbox.checked:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #ccc;
  transition: .2s;
}

.facet-toggle .facetwp-checkbox:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  transition: .2s;
}

/* AAN-stand */
.facet-toggle .facetwp-checkbox.checked:before {
  background: #4caf50;
}
.facet-toggle .facetwp-checkbox.checked:after {
  left: 23px;
}

/* verberg (no) / (yes) tekst achter de checkbox */
.facet-toggle .facetwp-checkbox .facetwp-display-value {
  display: none !important;
}

/* 1) stop stretching / distributing space */
.fixed-gap-carousel .swiper-wrapper{
  justify-content: flex-start !important;
}

.fixed-gap-carousel .swiper-wrapper {
  justify-content: flex-start !important;
}

.fixed-gap-carousel .swiper-slide {
  width: auto !important;
  flex: 0 0 auto !important;
}

.fixed-gap-carousel .swiper-wrapper {
  transition-timing-function: linear !important;
}

.fixed-gap-carousel .swiper-wrapper {
  justify-content: flex-start !important;
}
.site-footer img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
}