/* Header (NieuwNiveau) */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-xs); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: var(--space-4); top: var(--space-4); width: auto; height: auto; padding: 10px 12px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); z-index: 1100; text-decoration: none; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 800; font-size: 14px; }
.brand-text { font-size: var(--text-size-lg); }

/* Navigation */
.site-nav .nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav a { color: var(--color-text); font-weight: 600; }
.site-nav a:hover { text-decoration: underline; }

/* Toggle */
.menu-toggle { display: none; gap: var(--space-2); }
.menu-toggle .icon-close { display: none; }
.site-header[data-menu-open="true"] .menu-toggle .icon-bars { display: none; }
.site-header[data-menu-open="true"] .menu-toggle .icon-close { display: inline-flex; }

/* Responsive behavior */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  /* Progressive enhancement: hide nav on mobile only when JS is enabled and menu is closed */
  html.has-js .site-header[data-menu-open="false"] .site-nav { display: none; }
  .site-nav { position: fixed; inset: 0 0 auto 0; top: 64px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
  .site-nav .nav { flex-direction: column; align-items: stretch; padding: var(--space-5); gap: var(--space-3); }
  .site-nav .nav a { padding: 12px; border-radius: var(--radius-md); background: transparent; }
  .site-nav .nav a:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); text-decoration: none; }
}

/* Prevent body scroll when menu open */
body.no-scroll { overflow: hidden; }