/*
 * Orion desktopheader: nette ruimte tussen het vaste logo en hoofdmenu.
 * Laad dit bestand als laatste header-stylesheet.
 */

@media (min-width: 1000px) {
  :root {
    --orion-desktop-header-height: 130px;
    --orion-sticky-menu-gap: 0px;
  }

  #topheader {
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    background: #ffffff;
  }

  #container2 {
    top: calc(
      var(--orion-desktop-header-height) + var(--orion-sticky-menu-gap)
    ) !important;
    right: 0;
    left: 0 !important;
    width: 100% !important;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
    border-right: 1px solid #444477;
    border-left: 1px solid #444477;
    box-sizing: border-box;
  }

  #menuheader {
    width: 100% !important;
    max-width: 1280px;
    box-sizing: border-box;
  }

  /* Houd de nieuwe tussenruimte rustig wit tijdens het scrollen. */
  #topheader::after {
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--orion-sticky-menu-gap));
    left: 0;
    z-index: 0;
    height: var(--orion-sticky-menu-gap);
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(34, 34, 68, 0.08);
    content: "";
    pointer-events: none;
  }
}