/* =====================================================================
   maasstad-child: header-navigatie msc-navigatie (CONTRACTEN §14, §17).
   Alles onder .msc-nav (plus de widgetwrapper .msc-nav-houder en .msc-nav-vast op <html> als het paneel of de
   zoek-overlay open is). Laadt alleen als de widget in de Theme Builder-kop
   of op de pagina staat.

   Ziet eruit als header 26 van maasstadcleaning.nl (gemeten in
   /uploads/elementor/css/post-26.css, 27 okt):
   - container 819c793: min-height 90px, wit (Kit a983356), inhoud 1400px, sticky top (Pro, blijft);
   - logo bd1ba50 (2091) op 65% van een kolom van 20% (desktop): 182px breed; tablet en mobiel begrensd op max. 180x60px
     (mobiel 160x50px), zodat de eerste rij (logo, zoeken, hamburger) niet hoger wordt dan 90px;
   - menu ac0e2fe: Roboto 400 17px, regelhoogte 56px, letter-spacing -0.3px, zwart, items 20px opzij,
     submenu wit met hover/actief blauw vlak (#357DC0) en witte tekst, items 12px opzij;
   - knoppen 95d4d4c "offerte" en 8771d3b "SOLLICITEREN": transparant, rand 2px #357DC0, tekst #357DC0,
     Inter 500 15px (mobiel 14px), hoofdletters, regelhoogte 1em, letter-spacing -0.2px, hoek 8px,
     Elementor-padding 12px 24px; hover blauw vlak met witte tekst;
   - mobiel (tot 1024px): hamburger rechts (wit vlak, blauw icoon), menu klapt onder de balk uit
     (items 47px opzij, 23px boven/onder), de twee knoppen staan altijd zichtbaar op een eigen rij.
   Nieuw ten opzichte van live: menu-item Vacatures met het aantal als klein blauw getal (geen badge)
   en een eenvoudig zoekicoon. Geen schaduw, geen pills; de hoogte blijft bij scrollen gelijk.
   ===================================================================== */

.msc-nav {
  --mscn-blauw: var(--e-global-color-primary, #357DC0);
  --mscn-groen: var(--e-global-color-50aace6, #49B46A);
  --mscn-tekst: var(--e-global-color-text, #000000);
  --mscn-wit: var(--e-global-color-a983356, #FFFFFF);
  --mscn-hoogte: 90px;

  position: relative;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  background: var(--mscn-wit);
  font-family: "Roboto", var(--e-global-typography-text-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mscn-tekst);
}
.msc-nav *,
.msc-nav *::before,
.msc-nav *::after { box-sizing: inherit; }
/* de widgetwrapper (.msc-nav-houder, eigen klasse via get_html_wrapper_class) vult de headercontainer 819c793; zonder dit
   krimpt hij op tablet/mobiel tot zijn inhoud (staging 1024px: ca. 534px) en staan zoekicoon en hamburger in het midden.
   Dubbele klasse plus .elementor-element (0,3,0) wint van de Elementor-regels voor widgets in een flexcontainer. */
.msc-nav-houder.msc-nav-houder.elementor-element { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; --container-widget-width: 100%; --container-widget-flex-grow: 1; }
.msc-nav-houder.msc-nav-houder.elementor-element > .elementor-widget-container { width: 100%; }
.msc-nav ul { list-style: none; margin: 0; padding: 0; }
.msc-nav--klein { --mscn-hoogte: 90px; }   /* zelfde hoogte als live, ook bij scrollen */

.msc-nav .msc-nav__sr,
.msc-nav .msc-zoeken__sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.msc-nav .msc-nav__icoon { flex: none; width: 20px; height: 20px; }

/* ---------- balk */
.msc-nav .msc-nav__balk {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1400px;
  min-height: var(--mscn-hoogte);
  margin: 0 auto;
  padding: 0;
}
.msc-nav .msc-nav__logo { display: inline-flex; align-items: center; flex: 0 0 20%; margin-right: auto; text-decoration: none; }
.msc-nav .msc-nav__logo-img { display: block; width: 65%; max-width: 182px; height: auto; }
.msc-nav .msc-nav__logo-tekst { font-weight: 600; font-size: 21px; color: var(--mscn-blauw); }

/* ---------- menu */
.msc-nav .msc-nav__link,
.msc-nav .msc-nav__open,
.msc-nav .msc-nav__zoek,
.msc-nav .msc-nav__burger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mscn-tekst);
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: -0.3px;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;   /* "Onze diensten" op één regel, zoals live */
  box-shadow: none;
  cursor: pointer;
}
.msc-nav .msc-nav__link:hover,
.msc-nav .msc-nav__open:hover,
.msc-nav .msc-nav__zoek:hover { color: var(--mscn-tekst); background: none; }
/* actief item: blauwe lijn onder het woord, zoals de Pro nav-menu live onder "Home" (pointer underline, 3px) */
.msc-nav .msc-nav__item--actief > .msc-nav__link,
.msc-nav .msc-nav__link[aria-current="page"] { position: relative; color: var(--mscn-tekst); }
.msc-nav .msc-nav__item--actief > .msc-nav__link::after,
.msc-nav .msc-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--mscn-blauw); }
.msc-nav .msc-nav__open .msc-nav__icoon { width: 14px; height: 14px; transition: transform 0.2s ease; }
.msc-nav .msc-nav__open[aria-expanded="true"] .msc-nav__icoon { transform: rotate(180deg); }
.msc-nav .msc-nav__open--los { padding: 0 8px; margin-left: -16px; }

/* aantal open vacatures: klein blauw getal, geen badge */
.msc-nav .msc-nav__teller { display: inline; margin-left: 2px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--mscn-blauw); font-size: 13px; font-weight: 600; line-height: 1; vertical-align: super; }

/* submenu: wit, hover en actief blauw vlak met witte tekst (zoals de Pro nav-menu) */
.msc-nav .msc-nav__sublink { display: block; padding: 12px; background: var(--mscn-wit); color: var(--mscn-tekst); font-size: 17px; line-height: 1; letter-spacing: 0; text-decoration: none; border-radius: 0; }
.msc-nav .msc-nav__sublink:hover,
.msc-nav .msc-nav__sublink:focus,
.msc-nav .msc-nav__sublink[aria-current="page"] { background: var(--mscn-blauw); color: var(--mscn-wit); }

/* ---------- knoppen zoals 95d4d4c en 8771d3b */
.msc-nav .msc-nav__ctas { display: flex; align-items: center; gap: 10px; }
.msc-nav .msc-nav__ctas .msc-nav__knop { min-width: 140px; }   /* live: knoppen vullen hun kolom (align justify), ca. 147px op 1280 */
.msc-nav .msc-nav__knop {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid var(--mscn-blauw);
  border-radius: 8px;
  background: transparent;
  color: var(--mscn-blauw);
  font-family: "Inter", var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.2px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 0.3s, color 0.3s;
}
.msc-nav .msc-nav__knop:hover,
.msc-nav .msc-nav__knop:focus { background: var(--mscn-blauw); color: var(--mscn-wit); }

.msc-nav a:focus-visible,
.msc-nav button:focus-visible,
.msc-nav input:focus-visible { outline: 2px solid var(--mscn-tekst); outline-offset: 2px; }

/* ---------- gereedschap: zoekicoon en hamburger */
.msc-nav .msc-nav__gereedschap { display: flex; align-items: center; }
.msc-nav .msc-nav__zoek { padding: 0 12px; color: var(--mscn-blauw); }
.msc-nav .msc-nav__zoek-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msc-nav .msc-nav__burger[hidden] { display: none; }
.msc-nav .msc-nav__burger { padding: 0 8px; color: var(--mscn-blauw); background: var(--mscn-wit); line-height: 1; min-height: 44px; }
.msc-nav .msc-nav__burger .msc-nav__icoon { width: 28px; height: 28px; }
.msc-nav .msc-nav__burger-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msc-nav .msc-nav__burger-dicht { display: none; }
.msc-nav--open .msc-nav__burger-open { display: none; }
.msc-nav--open .msc-nav__burger-dicht { display: inline-flex; }

/* ---------- tablet en mobiel (tot 1024px, zoals de Pro nav-menu) */
@media (max-width: 1024px) {
  .msc-nav .msc-nav__balk { flex-wrap: wrap; padding: 0 2%; }
  /* eerste rij: logo, zoekicoon en hamburger, samen max. 90px hoog (live mobiel: logo ca. 50-60px hoog, max. ca. 180px breed) */
  .msc-nav .msc-nav__balk { min-height: 0; }
  .msc-nav .msc-nav__logo { flex: 0 1 auto; min-height: 70px; max-height: 90px; }
  .msc-nav .msc-nav__logo-img { width: auto; max-width: 180px; max-height: 60px; height: auto; object-fit: contain; }
  .msc-nav .msc-nav__gereedschap { margin-left: auto; }
  /* knoppen altijd zichtbaar op een eigen rij (kolom 1fb3c8a: 100%, knoppen elk 50%) */
  .msc-nav .msc-nav__ctas { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding: 0 0 5%; }
  .msc-nav .msc-nav__knop { width: 100%; }
  /* zonder JS: menu onder de balk, alles zichtbaar */
  .msc-nav .msc-nav__paneel { order: 3; width: 100%; }
  .msc-nav .msc-nav__lijst { display: grid; }
  .msc-nav .msc-nav__link,
  .msc-nav .msc-nav__open { width: 100%; padding: 23px 45px; line-height: 1; font-size: 19px; }
  .msc-nav .msc-nav__item { display: flex; flex-wrap: wrap; align-items: center; }
  .msc-nav .msc-nav__item > .msc-nav__link { flex: 1 1 auto; width: auto; }
  .msc-nav .msc-nav__open--los { width: auto; margin-left: 0; padding: 23px 20px; }
  .msc-nav .msc-nav__sub { width: 100%; }
  .msc-nav .msc-nav__sublink { padding: 23px 45px 23px 65px; font-size: 19px; }
  .msc-nav .msc-nav__link:hover,
  .msc-nav .msc-nav__open:hover { background: var(--mscn-blauw); color: var(--mscn-wit); }

  /* met JS: menu klapt onder de balk uit, over de pagina heen (zoals de Pro-dropdown) */
  .msc-nav--js .msc-nav__paneel {
    display: none;
    position: absolute;
    top: var(--mscn-hoogte);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: calc(100vh - var(--mscn-hoogte));
    overflow-y: auto;
    background: var(--mscn-wit);
  }
  .msc-nav--js.msc-nav--open .msc-nav__paneel { display: block; }
  .msc-nav--js .msc-nav__sub { display: none; }
  .msc-nav--js .msc-nav__item.is-open > .msc-nav__sub { display: block; }
}
@media (max-width: 767px) {
  .msc-nav .msc-nav__logo-img { max-width: 160px; max-height: 50px; }
  .msc-nav .msc-nav__knop { font-size: 14px; }
  .msc-nav .msc-nav__link,
  .msc-nav .msc-nav__open { padding: 23px 47px; font-size: 32px; }
  .msc-nav .msc-nav__sublink { font-size: 15px; padding: 23px 47px 23px 67px; }
}

/* ---------- desktop */
@media (min-width: 1025px) {
  .msc-nav .msc-nav__burger { display: none; }
  /* zijmarge zoals live (logo ca. 15px van de rand), ook rechts, binnen de 1400px van container 819c793 */
  .msc-nav .msc-nav__balk { padding: 0 15px; }
  .msc-nav .msc-nav__logo { flex: 0 1 20%; min-width: 150px; }
  .msc-nav .msc-nav__gereedschap { flex: none; }
  .msc-nav .msc-nav__paneel { display: flex; flex: 1 1 auto; justify-content: flex-end; }   /* live 47%; hier de rest van de balk, zodat Vacatures erbij past */
  .msc-nav .msc-nav__lijst { display: flex; align-items: center; }
  .msc-nav .msc-nav__item { position: relative; display: flex; align-items: center; }
  .msc-nav .msc-nav__ctas { flex: 0 0 auto; padding-left: 16px; }
  .msc-nav .msc-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    min-width: 220px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--mscn-wit);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
  }
  /* zonder JS: hover en focus; met JS: de knop (en hover als extra) */
  .msc-nav .msc-nav__item--sub:hover > .msc-nav__sub,
  .msc-nav .msc-nav__item--sub:focus-within > .msc-nav__sub,
  .msc-nav .msc-nav__item.is-open > .msc-nav__sub { opacity: 1; visibility: visible; }
  .msc-nav--js .msc-nav__item--sub:focus-within:not(.is-open) > .msc-nav__sub { opacity: 0; visibility: hidden; }
  .msc-nav--js .msc-nav__item--sub:hover > .msc-nav__sub { opacity: 1; visibility: visible; }
}
@media (min-width: 1025px) and (max-width: 1439.98px) {
  .msc-nav .msc-nav__link,
  .msc-nav .msc-nav__open { padding: 0 12px; }
  .msc-nav .msc-nav__item--actief > .msc-nav__link::after,
  .msc-nav .msc-nav__link[aria-current="page"]::after { left: 12px; right: 12px; }
  .msc-nav .msc-nav__knop { padding: 12px 16px; }
  .msc-nav .msc-nav__ctas .msc-nav__knop { min-width: 0; }
  .msc-nav .msc-nav__logo { flex: 0 0 160px; }
  .msc-nav .msc-nav__logo-img { width: 100%; }
  .msc-nav .msc-nav__zoek { padding: 0 8px; }
}

/* ---------- zoek-overlay: wit vlak, rechthoekig */
.msc-nav .msc-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(0, 0, 0, 0.5);
}
.msc-nav .msc-nav__overlay[hidden] { display: none; }
.msc-nav .msc-nav__overlay-binnen { position: relative; width: 100%; max-width: 680px; padding: 32px 24px 24px; border-radius: 0; background: var(--mscn-wit); box-shadow: none; }
.msc-nav .msc-nav__overlay-sluit {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mscn-blauw);
  cursor: pointer;
}

.msc-nav-vast { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .msc-nav,
  .msc-nav * { transition: none !important; }
}