/* Onesto V16: mobile navigation; desktop remains unchanged. */
@media (max-width: 980px) {
  html, body { overflow-x: clip; }
  body .site-header { height: 82px !important; min-height: 82px !important; position: relative !important; z-index: 999 !important; }
  body .site-header > .wrap { box-sizing: border-box !important; width: calc(100% - 36px) !important; max-width: none !important; height: 82px !important; min-height: 82px !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
  body .site-header .brand { display: block !important; flex: 0 1 auto !important; width: auto !important; max-width: min(210px, 60vw) !important; min-width: 0 !important; margin: 0 !important; }
  body .site-header .brand img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 65px !important; object-fit: contain !important; }
  body .site-header .header-cta { display: none !important; }
  body .site-header .menu-toggle { display: flex !important; flex: 0 0 46px !important; width: 46px !important; height: 46px !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #dce8ec !important; border-radius: 12px !important; background: #fff !important; cursor: pointer !important; }
  body .site-header .menu-toggle span { display: block !important; width: 21px !important; height: 2px !important; background: #102e44 !important; border-radius: 2px !important; }
  body .site-header nav { display: none !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; width: 100% !important; padding: 14px 18px 22px !important; margin: 0 !important; background: #f7f9fb !important; border-bottom: 1px solid #dce8ec !important; box-shadow: 0 18px 26px rgba(8, 31, 48, .12) !important; box-sizing: border-box !important; }
  body .site-header.menu-open nav { display: block !important; }
  body .site-header nav .main-nav { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100% !important; white-space: normal !important; margin: 0 !important; padding: 0 !important; }
  body .site-header nav .main-nav li { width: 100% !important; }
  body .site-header nav .main-nav a { display: block !important; padding: 13px 8px !important; font-size: 16px !important; line-height: 1.3 !important; border-bottom: 1px solid #e5ecef !important; }
  body .site-header nav .mobile-nav-cta { display: block !important; margin-top: 16px !important; padding: 15px 18px !important; background: #eb006f !important; color: #fff !important; border-radius: 999px !important; text-align: center !important; font-weight: 700 !important; text-decoration: none !important; }
}
@media (min-width: 981px) { body .site-header .menu-toggle, body .site-header nav .mobile-nav-cta { display: none !important; } }

/* Fix: V16 hides .main-nav on mobile with a more specific selector. */
@media (max-width: 980px) {
  body.onesto-home .site-header.menu-open nav .main-nav,
  body.onesto-inner .site-header.menu-open nav .main-nav,
  body.onesto-v8 .site-header.menu-open nav .main-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
  body.onesto-home .site-header.menu-open nav .main-nav li,
  body.onesto-inner .site-header.menu-open nav .main-nav li,
  body.onesto-v8 .site-header.menu-open nav .main-nav li { display: block !important; width: 100% !important; }
  body.onesto-home .site-header.menu-open nav .main-nav a,
  body.onesto-inner .site-header.menu-open nav .main-nav a,
  body.onesto-v8 .site-header.menu-open nav .main-nav a { display: block !important; padding: 13px 8px !important; font-size: 16px !important; }
}

/* Definitieve statusregeling: navigatie uitsluitend zichtbaar wanneer geopend. */
@media (max-width: 980px) {
  html body .site-header:not(.menu-open) nav#onesto-mobile-nav,
  html body.onesto-home .site-header:not(.menu-open) nav#onesto-mobile-nav,
  html body.onesto-inner .site-header:not(.menu-open) nav#onesto-mobile-nav,
  html body.onesto-v8 .site-header:not(.menu-open) nav#onesto-mobile-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  html body .site-header.menu-open nav#onesto-mobile-nav { display: block !important; visibility: visible !important; pointer-events: auto !important; }
  html body .site-header nav#onesto-mobile-nav .mobile-nav-cta { width: 100% !important; box-sizing: border-box !important; }
}

/* Uniforme mobiele header op ALLE pagina's: override oude home/v8 desktopregels. */
@media (max-width: 980px) {
 html body.onesto-home header.site-header,
 html body.onesto-v8 header.site-header,
 html body.onesto-inner header.site-header {height:82px!important;min-height:82px!important;padding:0!important;}
 html body.onesto-home header.site-header > .wrap,
 html body.onesto-v8 header.site-header > .wrap,
 html body.onesto-inner header.site-header > .wrap {display:flex!important;grid-template-columns:none!important;width:calc(100% - 36px)!important;height:82px!important;min-height:82px!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:0!important;}
 html body.onesto-home header.site-header .brand,
 html body.onesto-v8 header.site-header .brand,
 html body.onesto-inner header.site-header .brand {width:auto!important;max-width:min(210px,60vw)!important;min-width:0!important;flex:0 1 auto!important;}
 html body.onesto-home header.site-header .brand img,
 html body.onesto-v8 header.site-header .brand img,
 html body.onesto-inner header.site-header .brand img {width:auto!important;max-width:100%!important;max-height:65px!important;height:auto!important;}
 html body.onesto-home header.site-header .header-cta,
 html body.onesto-v8 header.site-header .header-cta,
 html body.onesto-inner header.site-header .header-cta {display:none!important;}
 html body.onesto-home header.site-header .menu-toggle,
 html body.onesto-v8 header.site-header .menu-toggle,
 html body.onesto-inner header.site-header .menu-toggle {display:flex!important;flex:0 0 46px!important;}
 html body.onesto-home header.site-header nav#onesto-mobile-nav,
 html body.onesto-v8 header.site-header nav#onesto-mobile-nav,
 html body.onesto-inner header.site-header nav#onesto-mobile-nav {position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;min-width:0!important;padding:14px 18px 22px!important;margin:0!important;}
 html body header.site-header:not(.menu-open) nav#onesto-mobile-nav {display:none!important;}
 html body header.site-header.menu-open nav#onesto-mobile-nav {display:block!important;}
}
/* VoIP hero: forceer een enkele kolom, zodat telefoon en tekst niet overlappen. */
@media (max-width: 900px) {
 html body.onesto-v8 section.v8-voip-hero .v8-hero-grid {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:32px!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-hero-grid > * {min-width:0!important;max-width:100%!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-phone {box-sizing:border-box!important;width:min(330px,calc(100vw - 80px))!important;max-width:100%!important;height:480px!important;margin:0 auto!important;transform:none!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-phone:before {left:-16px!important;width:65px!important;height:65px!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-phone:after {right:-12px!important;width:50px!important;height:50px!important;}
}
@media (max-width: 600px) {
 html body.onesto-v8 section.v8-voip-hero {padding:45px 0!important;}
 html body.onesto-v8 section.v8-voip-hero h1 {font-size:clamp(36px,10vw,48px)!important;line-height:1.08!important;overflow-wrap:anywhere!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-actions {display:flex!important;flex-wrap:wrap!important;gap:12px!important;}
 html body.onesto-v8 section.v8-voip-hero .v8-phone {height:400px!important;}
}

/* Mobiel: geen decoratieve blauwe hover-/actieve onderstreping in het menu. */
@media (max-width: 980px) {
  html body .site-header nav#onesto-mobile-nav .main-nav a::before,
  html body .site-header nav#onesto-mobile-nav .main-nav a::after,
  html body .site-header nav#onesto-mobile-nav .main-nav a:hover::after,
  html body .site-header nav#onesto-mobile-nav .main-nav a.active::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}