/* HBL Rolluiken – huisstijl fixes */
:root {
  --blue: #015f9d !important;
  --red: #00b0ff !important;
  --yellow: #7ec8e3 !important;
  --hbl-sky: #00b0ff;
  --hbl-mid: #015f9d;
  --hbl-navy: #000d3a;
  --hbl-soft: #e8f6fc;
  --white: #fff;
  /* Headerhoogte: past bij groot logo, dropdown blijft compact */
  --nav-bar-height: 10.4rem !important;
}
@media only screen and (max-width: 1023px) {
  :root {
    --nav-bar-height: 8rem !important;
  }
}

/* ========== HEADER: sticky, top transparant ========== */
.main-header,
body.home .main-header,
body.home header.main-header,
body:not(.home) .main-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transition: background-color .25s ease, box-shadow .25s ease !important;
}

.main-header .nav-bar,
body.home .nav-bar,
.main-header .nav-bar::before,
.main-header .nav-bar::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.main-header .nav-bar .wrap,
.main-header .nav-bar .wrap.wrap__full-width,
.main-header .wrap.wrap__full-width,
.nav-bar .wrap__full-width,
.nav-bar__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
}

/* Menu links: wit op homepage (over video), blauw op overige pagina's */
.main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
.main-header .menu > .menu-item > a,
.main-header .nav-bar .menu > .menu-item > a {
  color: #015f9d !important;
  -webkit-text-fill-color: #015f9d !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}
.main-header .nav-bar .menu > .menu-item > a .menu-item__toggle,
.main-header .menu > .menu-item > a .menu-item__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.4rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
.main-header .menu > .menu-item > a .menu-item__toggle svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
  color: #015f9d !important;
  stroke: #015f9d !important;
  fill: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Dicht: pijl omlaag */
  transform: rotate(0deg) !important;
  transition: transform .2s ease !important;
  transform-origin: center !important;
}
/* Open bij hover / open mega / focus: pijl omhoog */
.main-header .nav-bar .menu > .menu-item-has-children:hover > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-megamenu:hover > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item.is-mega-open > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-children:focus-within > a .menu-item__toggle svg,
.main-header .menu > .menu-item-has-children:hover > a .menu-item__toggle svg,
.main-header .menu > .menu-item-has-megamenu:hover > a .menu-item__toggle svg,
.main-header .menu > .menu-item.is-mega-open > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-children:hover > a svg.hbl-chevron,
.main-header .nav-bar .menu > .menu-item-has-megamenu:hover > a svg.hbl-chevron,
.main-header .nav-bar .menu > .menu-item.is-mega-open > a svg.hbl-chevron {
  transform: rotate(180deg) !important;
}
body.home .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.home .main-header .menu > .menu-item > a,
body.home .main-header .nav-bar .menu > .menu-item > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 13, 58, 0.35) !important;
}
body.home .main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.home .main-header .menu > .menu-item > a .menu-item__toggle svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-header .nav-bar__buttons a,
.main-header .nav-bar__buttons .button,
.nav-bar__buttons a.button {
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border-radius: 999px !important;
}
.main-header .nav-bar__buttons a:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
}

.main-header .site-logo img,
.main-header .custom-logo {
  max-height: 128px !important;
  width: auto !important;
  height: auto !important;
}
.main-header .nav-bar,
.main-header .nav-bar__content {
  min-height: var(--nav-bar-height) !important;
  height: var(--nav-bar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header .nav-bar .wrap,
.main-header .nav-bar .wrap.wrap__full-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* ========== MEGA MENU: dichter bij links + radius ========== */
.nav-bar .menu .menu-item.menu-item-has-megamenu {
  position: static !important;
}

.nav-bar .menu .menu-item.menu-item-has-megamenu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.8rem;
  z-index: 1190;
}

.main-header .megamenu-container,
.megamenu-container {
  background: #fff !important;
  position: absolute !important;
  top: calc(100% - 2px) !important;
  left: 0;
  right: 0;
  z-index: 1200 !important;
  transform-origin: top !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 16px 40px rgba(0, 13, 58, 0.14);
  margin-top: 0 !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.megamenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.8rem;
  height: 0.8rem;
  background: transparent;
  pointer-events: auto;
}

.megamenu-container {
  transform: scaleY(0);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.menu-item-has-megamenu:hover > .megamenu-container,
.menu-item-has-megamenu.is-mega-open > .megamenu-container,
.megamenu-container.megamenu-container--active {
  transform: scaleY(1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Gewone sub-menu dropdowns: dichterbij + radius */
.nav-bar .menu .menu-item.menu-item-has-children .sub-menu {
  border-radius: 1.2rem !important;
  top: calc(100% - 2px) !important;
  margin-top: 0 !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.megamenu-group__title.active,
.megamenu-branche-link:hover {
  color: #015f9d !important;
}

/* ========== MOBIEL ========== */
@media (max-width: 1023px) {
  /* Alleen children transparant — NIET .main-header zelf (anders blijft scroll-wit weg) */
  .main-header .nav-bar,
  .main-header .nav-bar .wrap,
  .main-header .wrap.wrap__full-width,
  .nav-bar .wrap__full-width,
  .nav-bar__content {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

.mobile-navigation,
.mobile-navigation .menu .menu-item.menu-item-has-children .sub-menu,
.mobile-navigation .menu .menu-item.menu-item-has-megamenu .sub-menu {
  background: rgba(1, 95, 157, 0.92) !important;
  background-color: rgba(1, 95, 157, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff !important;
}

.mobile-navigation .menu .menu-item > a,
.mobile-navigation .menu .menu-item a,
.mobile-navigation .sub-menu__back {
  color: #fff !important;
  background: transparent !important;
}

/* Hamburger: witte strepen + donkere cirkel (altijd zichtbaar op hero) */
.mobile-nav-toggle,
.nav-bar__mobile-toggle,
.hamburger {
  background: transparent !important;
}
body .mobile-nav-toggle__button,
.main-header .mobile-nav-toggle__button,
.nav-bar .mobile-nav-toggle__button {
  background: rgba(0, 13, 58, 0.55) !important;
  background-color: rgba(0, 13, 58, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 13, 58, 0.25) !important;
}
body .mobile-nav-toggle__button .strokes span,
.main-header .mobile-nav-toggle__button .strokes span,
.nav-bar .mobile-nav-toggle__button .strokes span {
  background: #fff !important;
  background-color: #fff !important;
}

/* Mobiel: Contact-knop met zijkanten / ademruimte */
@media (max-width: 1023px) {
  .main-header .nav-bar .wrap.wrap__full-width,
  .main-header .nav-bar .wrap,
  .main-header .nav-bar__content {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
  }
  .main-header .site-logo img,
  .main-header .custom-logo {
    max-height: 96px !important;
  }
  .nav-bar__buttons-mobile {
    display: flex !important;
    gap: 1.2rem !important;
    margin-left: 1.2rem !important;
    margin-right: 1.2rem !important;
  }
  .nav-bar__buttons-mobile a.button,
  .nav-bar__buttons-mobile a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .nav-bar__right {
    gap: 1.2rem !important;
    padding-right: 0.4rem !important;
  }
  .mobile-nav-toggle {
    margin-right: 0.4rem !important;
  }
}

/* ========== SCROLLED: wit + zwart (MOET onderaan staan, wint van mobiel) ========== */
.main-header.is-scrolled,
body.home .main-header.is-scrolled,
body:not(.home) .main-header.is-scrolled,
header.main-header.is-scrolled {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 13, 58, 0.08) !important;
}
/* Sticky wit: kortere header, minder ruimte boven/onder */
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar__content {
  min-height: 7.2rem !important;
  height: 7.2rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header.is-scrolled .nav-bar .wrap,
.main-header.is-scrolled .nav-bar .wrap.wrap__full-width,
.main-header.is-scrolled .wrap.wrap__full-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 7.2rem !important;
  height: 7.2rem !important;
  align-items: center !important;
}
.main-header.is-scrolled .site-logo img,
.main-header.is-scrolled .custom-logo {
  max-height: 128px !important;
}
@media only screen and (max-width: 1023px) {
  .main-header.is-scrolled .nav-bar,
  .main-header.is-scrolled .nav-bar__content,
  .main-header.is-scrolled .nav-bar .wrap,
  .main-header.is-scrolled .nav-bar .wrap.wrap__full-width {
    min-height: 6.4rem !important;
    height: 6.4rem !important;
  }
  .main-header.is-scrolled .site-logo img,
  .main-header.is-scrolled .custom-logo {
    max-height: 96px !important;
  }
}
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar .wrap,
.main-header.is-scrolled .nav-bar .wrap.wrap__full-width,
.main-header.is-scrolled .wrap.wrap__full-width,
.main-header.is-scrolled .nav-bar__content {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.main-header.is-scrolled .nav-bar__menu-wrap > .menu > .menu-item > a,
.main-header.is-scrolled .menu > .menu-item > a,
.main-header.is-scrolled .nav-bar .menu > .menu-item > a,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
}
.main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
.main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron,
.main-header.is-scrolled .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron {
  color: #111 !important;
  stroke: #111 !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.main-header.is-scrolled .mobile-nav-toggle__button,
body .main-header.is-scrolled .mobile-nav-toggle__button {
  background: transparent !important;
  background-color: transparent !important;
  border-color: #111 !important;
  color: #111 !important;
  box-shadow: none !important;
}
.main-header.is-scrolled .mobile-nav-toggle__button .strokes span,
body .main-header.is-scrolled .mobile-nav-toggle__button .strokes span {
  background: #111 !important;
  background-color: #111 !important;
}

@media (max-width: 1023px) {
  .main-header.is-scrolled,
  body.home .main-header.is-scrolled,
  .main-header.is-scrolled .nav-bar,
  .main-header.is-scrolled .nav-bar .wrap {
    background: #fff !important;
    background-color: #fff !important;
  }
}

/* ========== FOOTER: donkerblauw behouden ========== */
.footer-top__shape-top svg,
.footer-top__shape-top svg path {
  color: #000d3a !important;
  fill: #000d3a !important;
}

.footer-top {
  background: transparent !important;
  background-color: transparent !important;
}

footer.main-footer,
.site-footer,
.main-footer {
  background: transparent !important;
  background-color: transparent !important;
}

/* Footer content: donkerblauw (niet wit) */
.footer-nav,
.footer-nav .wrap,
.footer-nav .wrap.wrap__full-width,
.footer-nav .wrap.wrap__full-width.bg-blue,
.footer-nav .bg-blue,
.footer-copyright,
.footer-copyright .wrap,
.footer-copyright .wrap.wrap__full-width,
.footer-copyright .wrap.wrap__full-width.bg-blue,
.footer-copyright .bg-blue,
footer.main-footer .bg-blue,
footer.main-footer .footer-nav,
footer.main-footer .footer-copyright {
  background: #000d3a !important;
  background-color: #000d3a !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.footer-nav,
.footer-nav a,
.footer-nav p,
.footer-nav li,
.footer-nav .footer-nav__title,
.footer-nav .footer-nav__slogan p,
.footer-top__slogan p,
.footer-copyright,
.footer-copyright a,
.footer-copyright p,
.footer-copyright li,
.footer-nav .white-text,
.footer-copyright .white-text,
.footer-top .white-text {
  color: #fff !important;
}

.footer-nav .site-logo img,
.footer-top .site-logo img,
.footer-nav .custom-logo,
.footer-nav a.site-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  max-height: 144px !important;
  width: auto !important;
  height: auto !important;
}

/* Knoppen vast */
a.btn, .btn, .button, .megamenu-button,
input[type="submit"], button[type="submit"] {
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  font-weight: 700 !important;
}
a.btn:hover, .btn:hover, .button:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
}

body.home .site-content,
body.home #content,
body.home main {
  padding-top: 0 !important;
}

.vacancy-selector,
.vacancy-sticky-finder,
section.vacancy,
.vacancy-selector__grid {
  display: none !important;
}

body.page-dienst {
  background: #fff !important;
}


/* Mobiel: dicht = rechts, open/active = omlaag */
.mobile-navigation .menu-item__toggle svg.hbl-chevron {
  transform: rotate(-90deg) !important;
  transition: transform .2s ease !important;
}
.mobile-navigation .menu-item__toggle.active svg.hbl-chevron,
.mobile-navigation .menu-item:has(> .sub-menu.active) > a .menu-item__toggle svg.hbl-chevron {
  transform: rotate(0deg) !important;
}


/* Footer cleanup */
.footer-nav .sm-icons,
.sm-icons,
.footer-nav__quality-block,
.quality-block-container,
.footer-certification-gallery {
  display: none !important;
}
.footer-nav .site-logo img,
.footer-top .site-logo img,
.footer-nav a.site-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  max-height: 144px !important;
  width: auto !important;
  height: auto !important;
}

/* Mobiel submenu: zichtbaar als active */
@media (max-width: 1023px) {
  .mobile-navigation .menu .menu-item-has-megamenu > .sub-menu.active,
  .mobile-navigation .menu .menu-item-has-children > .sub-menu.active {
    right: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* Footer: 4 gelijke kolommen netjes naast elkaar */
.footer-nav__container.hbl-footer-grid,
.footer-nav .footer-nav__container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3.2rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 129.6rem !important;
  margin: 0 auto !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.footer-nav__container .footer-nav__col,
.footer-nav__container .footer-nav__first-block,
.footer-nav__container .footer-nav__second-block,
.footer-nav__container .footer-nav__third-block,
.footer-nav__container .footer-nav__fourth-block {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.footer-nav__left-column,
.footer-nav__right-column {
  display: contents !important; /* flatten old nested grid if still present */
}
.footer-nav__title {
  margin: 0 0 1.2rem !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
}
.footer-nav__col .textwidget ul,
.footer-nav__container ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-nav__col .textwidget li,
.footer-nav__container .textwidget li {
  margin: 0 0 0.6rem !important;
  padding: 0 !important;
}
.footer-nav__col .textwidget a,
.footer-nav__container .textwidget a {
  text-decoration: none !important;
}
@media (max-width: 1023px) {
  .footer-nav__container.hbl-footer-grid,
  .footer-nav .footer-nav__container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2.4rem !important;
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
  }
}
@media (max-width: 600px) {
  .footer-nav__container.hbl-footer-grid,
  .footer-nav .footer-nav__container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}