/* ============================================================
   HEADER.CSS  –  Bovenbalk met logo (blauwe rasterbanner)
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;   /* boven de pagina-inhoud, onder mobiel menu (1100) */
  width: 100%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  /* erft .blue-grid achtergrond uit style.css */
}

/* op de homepagina staat de header boven de hero:
   zelfde lichte grid-achtergrond als de hero */
/* .site-header.is-hero { background-color: var(--lichtblauw); } */

/* logo --------------------------------------------------------- */

.site-logo {
  display: inline-flex;
  align-items: center;
  width: 84px;
  min-width: 60px;
  flex-shrink: 0;
}

.site-logo svg { width: 100%; height: auto; display: block; }

/* tweede pad 2px naar onder (in SVG-eenheden: ~25 = 2px bij 84px breedte) */
.site-logo .logo-stroke:last-child {
  transform: translateY(25px);
}

.site-logo .logo-stroke {
  stroke: var(--wit);
  fill: none;
}

@media screen and (max-width: 680px) {
  .site-header { padding: 12px 18px; }
  .site-logo { width: 60px; }
}