/* Top bar + sticky site header, faithful to the original layout:
   topbar (support email left, Prijzen link right) above a white header with
   logo left, nav center, CTA button right. */

/* ---- Scroll progress bar (original: wdt-horizontal-progress-bar) ---- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  z-index: var(--z-progress);
}

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-bg);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-1); }
.site-header__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; gap: var(--sp-4);
}

/* Brand: globe SVG mark + wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 34px; height: 34px; color: var(--c-primary); flex: none; }
.brand__mark svg { width: 100%; height: 100%; fill: currentColor; }
.brand__name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.35rem; color: var(--c-text); line-height: 1.1;
}
.brand__name .hl { color: var(--c-primary); }
.brand:hover { color: inherit; }

/* Nav */
.nav-primary { display: flex; align-items: center; gap: var(--sp-5); }
/* .btn.nav-cta wins over .btn even though components.css loads after header.css */
.btn.nav-cta { padding: 6px 20px; }  /* slimmer header CTA than the default .btn */
.nav-primary__logo { display: none; }  /* mobile off-canvas only */
.nav-close { display: none; }           /* mobile off-canvas only */
.nav-primary__list { display: flex; gap: var(--sp-4); }
.nav-primary__link {
  font-family: var(--font-heading); font-weight: 500;
  color: var(--c-text); padding: 8px 2px; position: relative;
}
.nav-primary__link:hover { color: var(--c-accent); }
.nav-primary__link[aria-current="page"] { color: var(--c-accent); }
.nav-primary__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-primary); border-radius: 2px;
}

.nav-toggle { display: none; width: 44px; height: 44px; color: var(--c-text); }
.nav-toggle svg { width: 26px; height: 26px; margin: auto; }

@media (max-width: 1100px) {
  .nav-toggle { display: grid; place-items: center; }
  /* Full-screen off-canvas panel. Closed state stays within the viewport
     (no translateX off-screen) so it never expands the horizontal scroll
     area; it is hidden via opacity/visibility + a subtle slide instead. */
  .nav-primary {
    position: fixed; inset: 0; top: 0; padding: 20px var(--container-pad) var(--sp-6);
    background: var(--c-bg);
    flex-direction: column; align-items: flex-start; gap: var(--sp-4);
    opacity: 0; visibility: hidden; transform: translateX(24px); pointer-events: none;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
                visibility 0s var(--t-base);
  }
  .nav-primary[data-open="true"] {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }
  .nav-primary__logo { display: block; margin-bottom: var(--sp-4); }
  .nav-primary__logo img { height: 36px; width: auto; }
  .nav-close {
    display: grid; place-items: center;
    position: absolute; top: 16px; right: var(--container-pad);
    width: 44px; height: 44px; border-radius: 50%;
    color: var(--c-text); background: var(--c-tint-1);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .nav-close:hover { background: var(--c-primary); color: #fff; }
  .nav-close svg { width: 24px; height: 24px; }
  .nav-primary__list { flex-direction: column; gap: var(--sp-3); width: 100%; }
  .nav-primary__link { font-size: var(--fz-h4); display: block; }
}