.main-nav {
  --navigation-blue: var(--ink);
  --navigation-ink: #ffffff;
  background: var(--navigation-blue);
  border-color: var(--navigation-blue);
}

.main-nav .nav-row {
  color: var(--navigation-ink);
}

.main-nav .nav-row > a,
.main-nav .nav-row > details > summary {
  color: var(--navigation-ink);
}

.main-nav .nav-row > a:hover,
.main-nav .nav-row > details > summary:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.main-nav .nav-row > a[aria-current="page"] {
  border-bottom-color: var(--navigation-ink);
}

.main-nav .nav-row > details[open] > summary,
.main-nav .nav-row > details:has([aria-current="page"]) > summary {
  box-shadow: inset 0 -3px var(--navigation-ink);
}

.main-nav .nav-row > details > div {
  color: var(--ink);
}

.main-nav .nav-row > a:focus-visible,
.main-nav .nav-row > details > summary:focus-visible {
  outline-color: var(--navigation-ink);
}

#site > header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
}

html {
  scroll-padding-top: calc(var(--site-header-height, 160px) + 16px);
}

.skip {
  z-index: 30;
}

@media (min-width: 1001px) {
  .main-nav .nav-row > details > div {
    max-height: calc(100dvh - var(--site-header-height, 160px) - 16px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 1000px) {
  #hoofdmenu.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: var(--site-menu-height, calc(100dvh - var(--site-masthead-height, 142px)));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}