/* ==========================================================================
 * NContact — mobiele navigatie
 *
 * Naar het Figma-frame "Mobile Navigation" (50610:4654, 393x852).
 * Het paneel hangt aan de bovenkant van het scherm, 16px van de zijkanten,
 * vlakke bovenhoeken en onderhoeken van 20. De balk met logo, Aanmelden en de
 * ronde knop is de bovenrand van datzelfde paneel; open en dicht is het één vlak.
 *
 * Wat hier vóór stond werkte niet: de Aanmelden-knop lag over de hamburger heen
 * (die was daardoor niet aan te tikken) en het uitklapmenu had breedte 0, dus
 * er kwam sowieso niets tevoorschijn. Op mobiel was de site niet te navigeren.
 *
 * Alles ≤1024px, want dat is waar Elementor zijn dropdownmenu aanzet.
 * ========================================================================== */

@media (max-width:1024px){

  /* --- de balk ---------------------------------------------------------- */
  header[data-elementor-type="header"] .elementor-element-hdrroot{
    padding:0 !important;
    display:block !important;
  }
  header[data-elementor-type="header"] .elementor-element-hdrbar{
    margin:0 16px !important;
    padding:12px 20px !important;
    border-radius:0 0 20px 20px !important;
    background:var(--nc-lift,#fff) !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    min-height:60px;
    height:60px !important;
    box-sizing:border-box;
    width:auto !important;
    max-width:none !important;
    /* Een backdrop-filter maakt van dit element het referentiekader voor alles
     * wat position:fixed is. Het paneel hieronder werd daardoor 248 breed in
     * plaats van schermbreed. De balk is wit en dekkend, dus de blur doet hier
     * visueel niets; weghalen is de nette oplossing. */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* De tussenlagen laten hun kinderen los, zodat logo, knop en toggle één rij
   * worden. Anders staat de toggle in een eigen kolom middenin de balk — daar
   * kwam de overlap met Aanmelden vandaan. */
  header[data-elementor-type="header"] .elementor-element-hdrleft{ display:contents !important; }

  header[data-elementor-type="header"] .elementor-element-hdrlogoc{
    order:1; margin-right:auto !important; width:auto !important;
    padding:0 !important; flex:0 0 auto !important;
  }
  header[data-elementor-type="header"] .elementor-element-hdrright{
    order:2; width:auto !important; padding:0 !important; flex:0 0 auto !important;
    margin:0 !important;
  }
  header[data-elementor-type="header"] .elementor-element-hdrmenuc{
    order:3; width:auto !important; padding:0 !important; flex:0 0 auto !important;
    min-width:0 !important;
  }
  header[data-elementor-type="header"] .elementor-element-hdrmenu{
    width:auto !important; padding:0 !important;
  }

  /* Logo. Het ontwerp toont 42x16, maar dat is in Figma een uitsnede van alleen
   * het woordmerk. Besluit James 22 aug: gewoon het hele logo met tagline. Dat
   * betekent zo groot als de rij toelaat: de balk is 60 hoog met 12 padding,
   * dus 36. Bij 168x96 als bronmaat komt dat neer op 63x36. */
  header[data-elementor-type="header"] .elementor-element-hdrlogo img{
    height:36px !important; width:auto !important; max-width:none !important;
  }
  header[data-elementor-type="header"] .elementor-element-hdrlogo,
  header[data-elementor-type="header"] .elementor-element-hdrlogo a{
    display:block; line-height:0; padding:0 !important;
  }

  /* Aanmelden: de pil uit het ontwerp, 14/16, 12 boven en onder, 20 opzij. */
  header[data-elementor-type="header"] .elementor-element-hdrcta .elementor-button{
    display:inline-flex; align-items:center; justify-content:center;
    height:36px; padding:0 20px !important;
    font-size:14px !important;
    line-height:16px !important;
    border-radius:32px !important;
    min-height:0 !important;
    white-space:nowrap;
  }

  /* De ronde knop rechts. */
  header[data-elementor-type="header"] .elementor-menu-toggle{
    width:36px !important; height:36px !important;
    min-width:36px; min-height:36px;
    padding:0 !important; margin:0 !important; border:0 !important;
    border-radius:32px !important;
    background:rgba(36,16,24,.08) !important;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex !important; align-items:center; justify-content:center;
    color:#241018 !important;
  }
  header[data-elementor-type="header"] .elementor-menu-toggle svg{
    width:16px !important; height:16px !important; fill:#241018 !important;
  }
  header[data-elementor-type="header"] .elementor-menu-toggle i{
    font-size:16px !important; color:#241018 !important;
  }

  /* --- vaste balk (nc-vaste-balk) -------------------------------------- */
  /* Op een pagina van 12.000px moest je helemaal terug naar boven om bij het
   * menu te komen. De balk blijft nu staan. Hij is smal (60) en dekkend wit,
   * dus de inhoud schuift er netjes onderdoor; de eerste sectie heeft in
   * mobile-fixes.css al 88px ruimte bovenaan zodat er niets achter verdwijnt.
   * Besluit James, 22 aug: alleen dit punt, submenu en logo blijven zoals ze zijn. */
  header[data-elementor-type="header"] .elementor-element-hdrroot{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
  }

  /* --- open staat ------------------------------------------------------- */
  /* De balk gaat vast bovenin staan, zodat balk en paneel altijd aansluiten,
   * ook als je halverwege de pagina opent. */
  header[data-elementor-type="header"]:has(.elementor-menu-toggle.elementor-active) .elementor-element-hdrroot{
    position:fixed; top:0; left:0; right:0; z-index:100;
  }

  /* Waas over de pagina, zoals in het ontwerp: 8% donker met 8px blur. */
  header[data-elementor-type="header"]:has(.elementor-menu-toggle.elementor-active)::after{
    content:"";
    position:fixed; inset:0; z-index:-1;
    background:rgba(36,16,24,.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }

  /* --- het paneel ------------------------------------------------------- */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown{
    position:fixed !important;
    top:60px; left:16px; right:16px;
    width:auto !important; max-width:none !important;
    margin:0 !important;
    padding:8px 20px 20px !important;
    background:var(--nc-lift,#fff) !important;
    border:0 !important;
    border-radius:0 0 20px 20px !important;
    box-shadow:none !important;
    max-height:calc(100dvh - 76px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:99;
  }

  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown ul.elementor-nav-menu{
    display:block !important; padding:0 !important; margin:0 !important;
    background:transparent !important; border:0 !important;
  }

  /* Elk item krijgt een lijn erboven, het laatste ook een lijn eronder. */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li{
    border-top:1px solid rgba(36,16,24,.08) !important;
    border-bottom:0 !important;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li:last-child{
    border-bottom:1px solid rgba(36,16,24,.08) !important;
  }

  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li > a.elementor-item{
    display:flex !important; align-items:center; justify-content:space-between; gap:32px;
    min-height:52px;
    padding:8px 0 !important;
    font-family:"Satoshi Variable","Satoshi",sans-serif !important;
    font-size:24px !important; line-height:28px !important;
    font-weight:400 !important; letter-spacing:0 !important;
    text-transform:none !important;
    color:#241018 !important;
    background:transparent !important; border:0 !important;
  }

  /* De ronde plus/min-knop. Alleen items met een submenu hebben er een; de
   * andere hebben in het ontwerp geen icoon. */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow{
    position:relative;
    width:36px !important; height:36px !important;
    flex:0 0 36px;
    margin:0 !important; padding:0 !important;
    border-radius:32px;
    background:rgba(36,16,24,.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow svg,
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow i{
    display:none !important;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow::before,
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow::after{
    content:""; position:absolute;
    width:8px; height:1.5px; border-radius:1px;
    background:#241018;
    transition:transform .2s ease, opacity .2s ease;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .sub-arrow::after{
    transform:rotate(90deg);
  }
  /* Open: het streepje rechtop verdwijnt, dan staat er een min. */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li.nc-open > a .sub-arrow::after{
    transform:rotate(0deg); opacity:0;
  }

  /* --- submenu ---------------------------------------------------------- */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li > ul.sub-menu{
    display:none !important;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li.nc-open > ul.sub-menu{
    display:flex !important;
    flex-direction:column;
    gap:8px;
    padding:0 0 16px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    position:static !important;
    width:auto !important;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li > ul.sub-menu > li{
    border:0 !important;
  }
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown > ul > li > ul.sub-menu a{
    display:flex !important; align-items:center;
    min-height:40px;
    padding:0 !important;
    font-family:"Satoshi Variable","Satoshi",sans-serif !important;
    font-size:16px !important; line-height:24px !important;
    font-weight:400 !important; letter-spacing:0 !important;
    text-transform:none !important;
    color:#241018 !important;
    background:transparent !important; border:0 !important;
  }

  /* Geen hover-effecten op een touchscherm; wel een duidelijke actieve pagina. */
  header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    font-weight:500 !important;
  }
}

/* Scrollen achter het open paneel vergrendelen. */
html.nc-nav-open, body.nc-nav-open{ overflow:hidden !important; }