/* ═══════════════════════════════════════════════════════════════
   HARBOR51.COM - HEADER
   Site zonder webshop: geen winkelwagen-pill, accountmenu,
   productzoekbalk, btw-balk of winkelwagen-drawer nodig.
   ═══════════════════════════════════════════════════════════════ */

.ast-above-header-wrap, .ast-below-header-wrap { display: none !important; }

#masthead, .site-header, .ast-primary-header-bar, .main-header-bar {
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid #4192d3 !important;
  padding: 0 !important;
  z-index: 10000 !important;
}
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container {
  min-height: 72px !important;
  max-width: 1400px !important;
  padding: 0 32px !important;
}
.site-title, .ast-site-identity .site-title,
.ast-site-identity .site-description { display: none !important; }
.custom-logo-link { display: flex !important; align-items: center !important; }
.custom-logo-link img { width: 160px !important; height: auto !important; display: block !important; }

/* Menu-items. Het actieve item krijgt zijn blauwe streepje van een ::after,
   niet van een border-bottom met een negatieve marge. Reden: bij Astra is de
   <li> zelf een flexcontainer, en een negatieve margin-bottom krimpt die
   container mee. Het resultaat was een link van 7px hoog waarbij de streep
   boven de tekst uitkwam in plaats van eronder. Een ::after met position
   absolute raakt de layout niet aan, dus dit blijft goed staan ongeacht de
   hoogte van de headerbalk. */
.main-header-menu > li { align-items: center !important; }

.main-header-menu > li > a {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #475569 !important;
  padding: 0 14px !important;
  line-height: 1.4 !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  transition: color .15s !important;
  white-space: nowrap !important;
}
.main-header-menu > li > a::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important; right: 14px !important; bottom: -7px !important;
  height: 2px !important;
  background: transparent !important;
  transition: background .15s !important;
  pointer-events: none !important;
}
.main-header-menu > li > a:hover { color: #4192d3 !important; }

.main-header-menu > li.current-menu-item > a,
.main-header-menu > li.current-menu-ancestor > a {
  color: #4192d3 !important; font-weight: 600 !important;
}
.main-header-menu > li.current-menu-item > a::after,
.main-header-menu > li.current-menu-ancestor > a::after { background: #4192d3 !important; }

/* Laatste menu-item als blauwe knop. Zet in Weergave -> Menu's bij dat item
   de CSS-klasse h51-cta, bijvoorbeeld bij "Gratis demo" of "Aanvraag webshop". */
.main-header-menu .h51-cta > a,
#primary-menu .h51-cta > a {
  background: #4192d3 !important; color: #fff !important;
  border-radius: 9999px !important; padding: 8px 18px !important;
  align-self: center !important; margin: 0 0 0 10px !important;
  font-weight: 600 !important; border-bottom: none !important;
  transition: background .15s !important;
}
.main-header-menu .h51-cta > a:hover,
#primary-menu .h51-cta > a:hover { background: #2c7ab7 !important; color: #fff !important; }
.main-header-menu .h51-cta > a::after { display: none !important; }

.ast-sticky-active #masthead { box-shadow: 0 2px 10px rgba(15,23,42,.07) !important; }

/* submenu */
.main-header-menu .sub-menu, #primary-menu .sub-menu {
  background: #fff !important; border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important; box-shadow: 0 4px 16px rgba(15,23,42,.08) !important;
  padding: 6px !important; min-width: 190px !important;
}
.main-header-menu .sub-menu li > a, #primary-menu .sub-menu li > a {
  border: none !important; border-radius: 6px !important; padding: 8px 14px !important;
  margin: 0 !important; font-size: 13px !important; color: #475569 !important;
  line-height: 1.4 !important; background: transparent !important;
}
.main-header-menu .sub-menu li > a:hover, #primary-menu .sub-menu li > a:hover {
  background: #f8fafc !important; color: #0f172a !important;
}
.main-header-menu .sub-menu li > a::after { display: none !important; }

@media (max-width: 921px) {
  .ast-primary-header-bar .ast-container { padding: 0 16px !important; }
  .custom-logo-link img { width: 120px !important; }
  .menu-toggle { border: 1px solid #e2e8f0 !important; border-radius: 4px !important;
    color: #0f172a !important; background: transparent !important; }
  .ast-mobile-header-wrap { background: #fff !important; }
  .ast-mobile-header-wrap .menu-item > a,
  .ast-mobile-popup-content .menu-item > a {
    font-family: "Inter", sans-serif !important; font-size: 14px !important;
    color: #0f172a !important; padding: 13px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important; margin-bottom: 0 !important;
    line-height: 1.4 !important; min-height: 44px !important;
  }
  .ast-mobile-header-wrap .menu-item > a::after,
  .ast-mobile-popup-content .menu-item > a::after { display: none !important; }
  .ast-mobile-popup-content .h51-cta > a,
  .ast-mobile-header-wrap .h51-cta > a {
    margin: 10px 12px 0 12px !important; width: calc(100% - 24px) !important;
    justify-content: center !important;
  }
}