/* GoedOnline — site header & navigation. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: #ffffff;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line-soft);
  box-shadow: var(--sh-xs);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 76px;
  padding-block: var(--sp-3);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  text-decoration: none;
}

.site-logo__svg {
  height: 34px;
  width: auto;
  color: var(--color-primary);
}

.site-logo__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

.site-logo__wordmark i {
  color: var(--color-accent);
  font-style: normal;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-nav__panel {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--dur-2) var(--ease-out);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-3) var(--ease-out);
}

.site-nav__list a:hover {
  color: var(--color-accent);
}

.site-nav__list a:hover::after {
  right: 0;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--color-accent);
}

.site-nav__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}

.nav-toggle:hover {
  background: var(--color-slate-50);
}

.nav-toggle__lines {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-toggle__lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--dur-2) var(--ease-out),
              top var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}

.nav-toggle__lines i:nth-child(1) { top: 0; }
.nav-toggle__lines i:nth-child(2) { top: 6px; }
.nav-toggle__lines i:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__lines i:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__lines i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__lines i:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav__panel {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--gutter);
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease-out);
    overflow-y: auto;
    border-top: 1px solid var(--color-line);
    z-index: var(--z-sticky);
  }

  .site-nav__panel.is-open {
    transform: translateX(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--color-line-soft);
  }

  .site-nav__list a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: 1.0625rem;
  }

  .site-nav__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }

  .site-nav__cta .btn {
    width: 100%;
  }
}

/* Header is altijd wit met donkere menu-tekst — ook over de donkere hero. */