/*
 * Header — sticky op desktop, hamburger op mobiel,
 * Vlaardingse vlag als subtiele achtergrond (8%).
 */

.svv-header {
  position: relative;
  padding-block: var(--wp--preset--spacing--20);
}

/* Grid-wrapper: zelfde uitlijning als de rest van de site. */
.svv-header__inner {
  max-width: var(--wp--style--global--content-size, 1280px);
  margin-inline: auto;
  /* padding-inline: var(--wp--preset--spacing--40); */
}

/* De wit zwevende balk waarin de navigatie zit. */
.svv-header__bar {
  background-color: var(--wp--preset--color--white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 79, 122, 0.08);
  padding: 0.625rem 1.25rem 0.625rem 1.5rem;
  gap: var(--wp--preset--spacing--20);
}

/* Drie zones: nav links, logo gecentreerd, acties rechts. */
.svv-header__nav {
  flex: 1 1 0;
}
.svv-header__logo {
  flex: 0 0 auto;
}
.svv-header__actions {
  flex: 1 1 0;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--20);
}

.svv-header__nav .wp-block-navigation__container {
  gap: clamp(1rem, 2vw, 2rem);
}

.svv-header__nav a {
  font-family: var(--wp--preset--font-family--manrope);
  font-weight: 600;
  color: var(--wp--preset--color--primary-dark);
  text-decoration: none;
}

.svv-header__contact a {
  font-family: var(--wp--preset--font-family--manrope);
  font-weight: 600;
  color: var(--wp--preset--color--primary-dark);
  text-decoration: none;
}

.svv-header__contact {
  margin: 0;
}

/* Sticky alleen op desktop. Sticky hoort op het <header>-element zelf
   (directe child van .wp-site-blocks), niet op de binnenste .svv-header —
   anders is de ouder te laag en werkt sticky niet. */
@media (min-width: 782px) {
  .wp-site-blocks > header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* Smart-sticky: uit beeld bij scrollen naar beneden. */
  .wp-site-blocks > header.svv-header-hidden {
    transform: translateY(-100%);
  }
}

/* Mobiel: compacter. Logo links, daarna Steun ons + hamburger rechts. */
@media (max-width: 781px) {
  .svv-header__contact {
    display: none;
  }
  .svv-header__bar {
    padding: 0.5rem 0.75rem 0.5rem 1rem;
  }

  .svv-header__bar > .svv-header__logo {
    order: 1;
  }
  .svv-header__bar > .svv-header__actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .svv-header__bar > .svv-header__nav {
    order: 3;
    flex: 0 0 auto;
  }
  .svv-header__actions .wp-block-button__link {
    white-space: nowrap;
  }
}