/* ==========================================================================
   Mobiele en tablet navigatie — Rustmoment in de klas
   Aangemaakt 25-08-2026. Repareert tapdoelen, tapfeedback en overlay-gedrag
   van de ElementsKit nav-menu in de header (template 483).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. De balk zelf (mobiel + tablet, tot en met 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Geen horizontale overflow meer: de oude balk stond op een vaste 500px. */
  html,
  body {
    overflow-x: hidden;
  }

  .ridk-mobilebar {
    position: relative;
    z-index: 100;
    border-bottom: 1px solid #E6EAEE;
  }

  .ridk-mobilebar .elementor-button {
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  /* Zichtbare bevestiging bij het aantikken van een knop. */
  .ridk-mobilebar .elementor-button:active {
    transform: scale(0.96);
  }

  .ridk-mobilebar__cta .elementor-button:active {
    background-color: #D84528 !important;
  }

  .ridk-mobilebar__login .elementor-button:active {
    background-color: #E3EEED !important;
  }

  /* Logo is nu een link — geef het een fatsoenlijk tapdoel. */
  .ridk-mobilebar__logo a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }

  .ridk-mobilebar__logo a:active {
    opacity: 0.65;
  }

  /* Niets mag krimpen of afbreken in de balk. */
  .ridk-mobilebar,
  .ridk-mobilebar > .e-con-inner > .e-con,
  .ridk-mobilebar > .e-con {
    flex-wrap: nowrap !important;
  }

  .ridk-mobilebar__logo,
  .ridk-mobilebar__cta,
  .ridk-mobilebar__login,
  .ridk-mobilebar__burger {
    flex: 0 0 auto !important;
  }

  /* Hamburger: minimaal 48x48 tapdoel. */
  .ridk-mobilebar .elementskit-menu-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    float: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .ridk-mobilebar .elementskit-menu-hamburger:active {
    background-color: #E3EEED !important;
    border-radius: 12px;
  }
}

/* Smalle telefoons (iPhone SE en vergelijkbaar): iets compacter, maar
   alle vier de elementen blijven staan. */
@media (max-width: 400px) {
  .ridk-mobilebar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ridk-mobilebar .e-con {
    --gap: 6px 6px !important;
    --column-gap: 6px !important;
  }

  .ridk-mobilebar__cta .elementor-button,
  .ridk-mobilebar__login .elementor-button {
    font-size: 12px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

/* --------------------------------------------------------------------------
   2. Het uitschuifpaneel: tapdoelen en feedback
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .elementskit-menu-offcanvas-elements {
    z-index: 9999;
  }

  .elementskit-navbar-nav > li > a,
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease;
  }

  .elementskit-navbar-nav > li > a:active,
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a:active,
  .elementskit-navbar-nav a.ridk-nav-loading {
    background-color: #E3EEED !important;
    color: #3075B1 !important;
  }

  /* Sluitknop van het paneel ook een echt tapdoel. */
  .elementskit-menu-close {
    min-width: 48px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   3. De open/dicht-knop van een submenu (de + achter Platform, Op Locatie,
      Kennis & Inspiratie)

      Twee problemen tegelijk opgelost:
      a) ElementsKit controleert of het aangetikte element de class
         .elementskit-submenu-indicator heeft. Bij een tik op de <path> in de
         SVG klopte dat niet, waardoor het submenu nooit openging. Met
         pointer-events: none op de inhoud is de SVG altijd zelf het doel.
      b) Het icoon was 10-16px groot. Met content-box padding wordt het
         tapdoel 52x52px zonder dat het icoon zelf groter wordt.
   -------------------------------------------------------------------------- */
.elementskit-submenu-indicator * {
  pointer-events: none;
}

@media (max-width: 1024px) {

  .elementskit-navbar-nav > li > a > svg.elementskit-submenu-indicator,
  .elementskit-navbar-nav .elementskit-submenu-panel > li > a > svg.elementskit-submenu-indicator {
    box-sizing: content-box !important;
    width: 14px !important;
    height: 14px !important;
    padding: 19px !important;
    margin: -19px -19px -19px 0 !important;
    border-radius: 12px;
    flex: 0 0 auto;
    transition: background-color 120ms ease;
  }

  .elementskit-navbar-nav > li > a > svg.elementskit-submenu-indicator:active {
    background-color: #E3EEED;
  }

  /* Zichtbaar verschil tussen open en dicht. */
  .elementskit-navbar-nav > li > a > svg.elementskit-submenu-indicator {
    transform: rotate(0deg);
    transition: transform 160ms ease, background-color 120ms ease;
  }

  .elementskit-navbar-nav > li.ridk-sub-open > a > svg.elementskit-submenu-indicator {
    transform: rotate(45deg);
  }
}

/* --------------------------------------------------------------------------
   4. Laadindicatie na een tik, zodat een trage overgang niet aanvoelt als
      een dode knop.
   -------------------------------------------------------------------------- */
html.ridk-nav-busy::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #FC6048, #FFAC24);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: ridk-nav-progress 2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  z-index: 100000;
  pointer-events: none;
}

@keyframes ridk-nav-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  html.ridk-nav-busy::after {
    animation: none;
    transform: scaleX(0.4);
  }

  .ridk-mobilebar .elementor-button:active {
    transform: none;
  }
}