/* ============================================================
   ExitIQ — Extra CSS (Weergave > Aanpassen > Extra CSS)
   Complete versie. Selecteer ALLES in het veld en vervang
   door dit bestand.

   Dit bestand leeft normaal ALLEEN in wp-admin (Jetpack/WP.com
   "Extra CSS"-veld) en stond nergens in git. Op 2026-08-10
   1-op-1 overgenomen van de live site, plus sectie 6 toegevoegd
   voor de "Inzichten"-submenu op mobiel. Na wijzigen hier: kopieer
   het hele bestand naar wp-admin en publiceer daar pas echt.

   Wat er is veranderd t.o.v. je vorige versie:
   1. .site-header was niet afgesloten -> alles erna was dood.
      Nu gerepareerd; je dropdown en micro-interacties werken weer.
   2. backdrop-filter verhuisd van .site-header naar ::before,
      zodat het mobiele menu het scherm kan vullen.
   3. Mobiel menu toegevoegd: volledig scherm, glassmorphism.
   4. body { border-top: 6px solid red } verwijderd (debug-code).
   5. (2026-08-10) Sectie 6: submenu-gedrag (bv. "Inzichten") op
      mobiel — was nog niet gedekt, tikken op zo'n item deed niets
      zichtbaars of klikte gewoon door.
   6. (2026-08-10, later) Hamburger-grens van 767px naar 1024px:
      op tablet paste de volle horizontale nav niet meer (6 items +
      "Verloopkosten berekenen" + logo + knop). De desktop-only
      dropdown-regel uit sectie 4 (".nav-list li { display:flex }")
      liep daarnaast ongewild door naar mobiel, waardoor het
      Inzichten-submenu náást i.p.v. onder het hoofditem stond —
      nu strikt achter een (min-width: 1025px) gezet.
   ============================================================ */

/* ============================================================
   1. WPFORMS — ExitIQ huisstijl
   ============================================================ */

/* Labels */
.wpforms-form .wpforms-field-label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: #16191A !important;
    margin-bottom: 7px !important;
}
.wpforms-form .wpforms-field-sublabel {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    color: #8A9285 !important;
}

/* Invoervelden */
.wpforms-form input[type=text],
.wpforms-form input[type=email],
.wpforms-form input[type=tel],
.wpforms-form input[type=url],
.wpforms-form input[type=number],
.wpforms-form textarea {
    font-family: 'Outfit', sans-serif !important;
    background: #FBFBF8 !important;
    border: 1px solid #E2DED3 !important;
    border-radius: 11px !important;
    padding: 13px 15px !important;
    font-size: 15px !important;
    color: #16191A !important;
    box-shadow: none !important;
    width: 100% !important;
}
.wpforms-form textarea {
    min-height: 120px !important;
    resize: vertical;
}

/* Focus-staat: groene rand */
.wpforms-form input:focus,
.wpforms-form textarea:focus {
    border-color: #1F622C !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31,98,44,0.10) !important;
}

/* Placeholder-tekst */
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
    color: #A7AEA2 !important;
}

/* Pijltjes weg bij nummer-veld */
.wpforms-form input[type=number] { -moz-appearance: textfield !important; }
.wpforms-form input[type=number]::-webkit-outer-spin-button,
.wpforms-form input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Voor-/achternaam netjes naast elkaar */
.wpforms-field-name { display: flex !important; gap: 16px !important; flex-wrap: wrap; }
.wpforms-field-name > label.wpforms-field-label { flex: 0 0 100%; }
.wpforms-field-name .wpforms-field-row,
.wpforms-field-name [class*="wpforms-field-name-"] {
    flex: 1 1 0 !important; margin: 0 !important; min-width: 180px;
}

/* Verzendknop: groene pill */
div.wpforms-container button[type=submit],
div.wpforms-container .wpforms-submit {
    font-family: 'Outfit', sans-serif !important;
    background: #1F622C !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 32px !important;
    padding: 15px 30px !important;
    transition: background .2s ease;
}
div.wpforms-container button[type=submit]:hover,
div.wpforms-container .wpforms-submit:hover {
    background: #184F24 !important;
}

/* --- TOEVOEGING: iOS-zoom voorkomen ---------------------------
   Safari op iPhone zoomt automatisch in zodra je een veld met
   font-size onder 16px aantikt. Jouw velden staan op 15px, dus
   dat gebeurt nu. Deze regel lost dat op zonder je desktop-
   ontwerp te raken. Weghalen als je het niet wilt.            */
@media (max-width: 767px) {
  .wpforms-form input[type=text],
  .wpforms-form input[type=email],
  .wpforms-form input[type=tel],
  .wpforms-form input[type=url],
  .wpforms-form input[type=number],
  .wpforms-form textarea,
  .wpforms-form select {
      font-size: 16px !important;
  }
  .wpforms-form .wpforms-field-label {
      font-size: 15px !important;
  }
}

/* ============================================================
   2. HEADER — blok correct afgesloten, blur naar ::before
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  margin: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 24px -14px rgba(22, 40, 25, 0.25);

  background: transparent;
  isolation: isolate;

  /* GEEN backdrop-filter hier. Een element met backdrop-filter
     wordt het referentiepunt voor position:fixed kinderen, en
     dan zit het mobiele menu opgesloten in de header (getest:
     364x72 i.p.v. 390x844). Het effect staat op ::before. */
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  pointer-events: none;

  background: rgba(242, 239, 231, 0.00);
  -webkit-backdrop-filter: blur(10px) saturate(1);
  backdrop-filter: blur(10px) saturate(1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: rgba(242, 239, 231, 0.92);
  }
}

/* ============================================================
   3. MOBIEL MENU — volledig scherm, glassmorphism
   (2026-08-10: grens opgeschoven naar 1024px, geldt nu ook voor
   tablet — de horizontale nav paste daar niet meer, zie sectie 4)
   ============================================================ */

@media (max-width: 1024px) {

  .primary-nav {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 998;
    align-items: center;
    justify-content: center;

    background: rgba(246, 244, 237, 0.85);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;

    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .primary-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .primary-nav .nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 24px;
    list-style: none;
  }

  .primary-nav .nav-list > li {
    width: 100%;
    text-align: center;
  }

  .primary-nav .nav-list > li > a {
    display: block;
    padding: 16px 24px;

    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #1F622C;
    text-decoration: none;

    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .primary-nav .nav-list > li > a:hover,
  .primary-nav .nav-list > li > a:focus-visible {
    background: rgba(237, 243, 236, 0.9);
    color: #16451F;
  }

  .primary-nav .nav-list > li.current-menu-item > a {
    background: rgba(237, 243, 236, 0.9);
  }

  /* Logo en hamburger boven de overlay houden, zodat je
     met dezelfde knop kunt sluiten */
  .logo,
  .nav-toggle {
    position: relative;
    z-index: 1000;
  }
}

/* ============================================================
   4. DROPDOWN-MENU (desktop) — ongewijzigd, maar nu wel actief
   ============================================================ */

/* Het menu-item zelf is anders maar zo hoog als de link-tekst (gecentreerd
   in de 72px header), waardoor "direct eronder" (top:100%) in het midden
   van de header uitkomt i.p.v. eronder. Hier de volle headerhoogte geven.
   ALLEEN op desktop (>1024px) — op tablet/mobiel toont sectie 3 het
   volledig-scherm menu en moet de <li> gewoon blok/kolom blijven, anders
   komt het submenu naast i.p.v. onder het hoofditem te staan. */
@media (min-width: 1025px) {
  .nav-list { height: 72px; }
  .nav-list li { display: flex; align-items: center; }
}

.nav-list .menu-item-has-children { position: relative; }

/* pijltje achter items met een submenu */
.nav-list .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease; opacity: .6;
}
.nav-list .menu-item-has-children:hover > a::after { transform: translateY(0) rotate(225deg); }

/* onzichtbare hover-brug zodat het menu niet dichtklapt */
.nav-list .menu-item-has-children::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}

/* submenu-container onzichtbaar; alleen de bubbels zijn zichtbaar */
.nav-list .sub-menu {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 240px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1000;
}
.nav-list .menu-item-has-children:hover > .sub-menu,
.nav-list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* elke optie = een eigen frosted bubbel */
.nav-list .sub-menu li a {
  display: block; text-decoration: none;
  padding: 12px 16px; color: #16191A; line-height: 1.3;
  background: rgba(246, 244, 237, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  box-shadow: 0 14px 30px -18px rgba(22, 40, 25, 0.35);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-list .sub-menu li a:hover {
  background: rgba(237, 243, 236, 0.96);
  color: #1F622C; transform: translateX(3px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-list .sub-menu li a { background: rgba(246, 244, 237, 0.99); }
}

/* ============================================================
   5. MICRO-INTERACTIES
   Deze stonden al in je CSS maar werkten niet, omdat ze
   vastzaten in het kapotte .site-header blok. Nu wel.
   ============================================================ */

/* Knoppen */
.elementor-button {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(22, 40, 25, 0.35);
}

/* Kaarten (opt-in)
   Geef een kaart de CSS-class 'premium-card' via
   Geavanceerd > CSS Classes */
.premium-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(22, 40, 25, 0.28);
}

/* Soepel scrollen */
html { scroll-behavior: smooth; }

/* Animated underline op tekstlinks */
.elementor-widget-text-editor a {
  text-decoration: none;
  background-image: linear-gradient(#1F622C, #1F622C);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}
.elementor-widget-text-editor a:hover {
  background-size: 100% 1.5px;
}

/* Nette focus-ring (toegankelijk + verzorgd) */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #1F622C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respecteer 'minder beweging'-voorkeur */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Kaart-offsets uit op mobiel ----
   Op desktop staan deze kaarten naast elkaar en geeft de
   verticale offset een verspringend ritme. Gestapeld op
   mobiel werkt dezelfde offset in de stapelrichting en
   krijg je gaps van 57 / -10 / 39px in plaats van 22.
   Desktop blijft ongemoeid: deze query bestaat alleen <768px. */
@media (max-width: 767px) {
  .elementor-element-5cb96ee5 > .e-con,
  .elementor-element-32221d0b > .e-con {
    transform: none !important;
  }
}

/* Fixen van de volgorde op de mobiele versie voor de zig-zag kaartjes */
@media (max-width: 767px) {
  .elementor-element-81c3a80 { order: -1; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-48304ba { padding-left: 24px !important; padding-right: 24px !important; }
  .elementor-element-2230fb8 { flex-wrap: wrap !important; }
  .elementor-element-2230fb8 > .e-con {
    flex: 0 0 calc(50% - 5px) !important;
		max-width: calc(50% - 5px) !important;}
}
	@media (max-width: 767px) {
  .elementor-element-2844dc05 {
    flex-wrap: wrap !important;
  }
  .elementor-element-2844dc05 > .e-con {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   6. SUBMENU (bv. "Inzichten") OP MOBIEL/TABLET
   Blok 3 (volledig-scherm menu) en blok 4 (hover-dropdown)
   houden geen rekening met elkaar: zonder hover (touch) zou een
   item met kinderen gewoon doorklikken naar zijn eigen link i.p.v.
   de submenu-opties te tonen. Dit maakt er een tik-om-te-openen
   accordion van, met dezelfde losse bubbel-stijl per link als op
   desktop (blok 4). Zelfde grens (1024px) als blok 3.
   Vereist het stukje JS dat de class 'submenu-open' op de <li>
   zet bij een tik op het bovenliggende item (zit in main.js).
   ============================================================ */

@media (max-width: 1024px) {

  /* <li> blijft blok/kolom i.p.v. de desktop-rij uit blok 4,
     anders komt de submenu naast i.p.v. onder "Inzichten" */
  .nav-list .menu-item-has-children {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav-list .menu-item-has-children::before { display: none; }

  .nav-list .menu-item-has-children.submenu-open > a::after {
    transform: translateY(0) rotate(225deg);
  }

  .nav-list .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin: 8px auto 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }

  .nav-list .menu-item-has-children.submenu-open > .sub-menu {
    max-height: 240px;
  }

  .nav-list .sub-menu li a {
    text-align: center;
    font-size: 17px;
    padding: 12px 16px;
  }
}