/* HBL Rolluiken – vaste huisstijl */
:root {
  --blue: #015f9d !important;
  --red: #00b0ff !important;
  --yellow: #7ec8e3 !important;
  --gold: #5eb8e8 !important;
  --hbl-sky: #00b0ff;
  --hbl-mid: #015f9d;
  --hbl-navy: #000d3a;
  --hbl-soft: #e8f6fc;
}

/* ===== Header: transparant over video ===== */
body.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;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}
body.home .main-header .nav-bar,
body.home .nav-bar {
  background: transparent !important;
  background-color: transparent !important;
}

/* Na scroll: lichte navy bar */
body.home .main-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0, 13, 58, 0.08) !important;
}

/* ===== Menu: donkerblauw, GEEN witte tekst, GEEN shadow ===== */
.main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
.main-header .menu > .menu-item > a,
.nav-bar__menu-wrap > .menu > .menu-item > a {
  color: #015f9d !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #015f9d !important;
}
body.home .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.home .main-header .menu > .menu-item > a {
  color: #015f9d !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #015f9d !important;
}
/* Op video: witte pill achtergrond zodat donkerblauw leesbaar blijft */
body.home .main-header:not(.is-scrolled) .nav-bar__menu-wrap > .menu > .menu-item > a {
  color: #015f9d !important;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.55rem 1rem !important;
  border-radius: 2rem;
  text-shadow: none !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;
}
.main-header .nav-bar__buttons a:hover,
.nav-bar__buttons a.button:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
  color: #fff !important;
}

/* Logo vast */
.main-header .site-logo img,
.main-header .custom-logo,
.site-logo__img,
footer .site-logo img,
.footer-nav img.custom-logo {
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
  content: url('/wp-content/uploads/hbl/logo-hbl.png');
}

/* ===== Knoppen: één vaste kleur overal ===== */
a.btn, .btn, .button, .megamenu-button,
input[type="submit"], button[type="submit"],
.gform_button, .wp-block-button__link {
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
a.btn:hover, .btn:hover, .button:hover,
.megamenu-button:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
  color: #fff !important;
}

/* Mega menu */
.main-header .megamenu-container {
  background: #fff !important;
  position: absolute !important;
  top: 100% !important;
  left: 0; right: 0;
  z-index: 1200 !important;
  transform-origin: top !important;
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 13, 58, 0.12);
}
.megamenu-group__title.active,
.megamenu-branche-link:hover,
.megamenu-branche-text {
  color: #015f9d !important;
}

/* Footer */
.footer-nav, footer, .site-footer {
  background: #000d3a !important;
  color: #fff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.footer-nav a, footer a {
  color: #fff !important;
}

/* Sections zichtbaar */
.site-content, main, #content, .page-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
section {
  display: block !important;
  visibility: visible !important;
}

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

/* Soft accents */
.section--alt, .bg-light {
  background-color: #e8f6fc !important;
}

/* Inner pages: vaste header (geen video) */
body:not(.home) .main-header {
  position: sticky !important;
  top: 0;
  z-index: 1100 !important;
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(0, 13, 58, 0.08) !important;
}
body:not(.home) .main-header .nav-bar__menu-wrap > .menu > .menu-item > a {
  color: #015f9d !important;
  background: transparent !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #015f9d !important;
}

/* Mega menu closed by default — theme CSS must load; this is safety net */
.megamenu-container {
  transform: scaleY(0) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
.menu-item-has-megamenu:hover > .megamenu-container,
.megamenu-container.megamenu-container--active {
  transform: scaleY(1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Hide mobile submenu clones that leak into desktop */
.nav-bar__menu-wrap .menu .menu-item .menu-item {
  /* ok inside megamenu */
}

/* Extra force: home header echt transparant */
body.home .main-header,
body.home .main-header.is-scrolled,
body.home header.main-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
body.home .main-header.is-scrolled {
  background: rgba(255,255,255,0.92) !important;
}
/* Theme sometimes paints white bar */
body.home .nav-bar,
body.home .nav-bar::before,
body.home .nav-bar::after {
  background: transparent !important;
  background-color: transparent !important;
}

/* Verberg oude vacature-selector (niet relevant voor HBL) */
.vacancy-selector, .vacancy-sticky-finder, section.vacancy, .vacancy-selector__grid { display:none !important; }

/* Dienstpagina's: witte achtergrond, geen zwarte vlakken */
body.page-dienst {
  background: #fff !important;
  background-color: #fff !important;
}
body.page-dienst main.dienst-page,
body.page-dienst .dienst-grid,
body.page-dienst .dienst-body,
body.page-dienst .dienst-hero {
  background-color: transparent;
}
body.page-dienst .dienst-grid {
  background: #fff !important;
}
body.page-dienst .footer-nav { margin-top: 0; }