/* ============================================================
   H2G Theme — nav.css
   Topbar — 1-op-1 met de Lijndraad-ontwerpbron (.dc.html <header>).
   Flex-balk: merk · plaats · nav · pill. Geen hamburger (nav wrapt via flex-wrap).
   ============================================================ */

.h2g-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px var(--gutter);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-white);
}

/* ─── Merk ───────────────────────────────────────────────── */
.h2g-topbar__merk {
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.h2g-topbar__merk span {
  font-weight: 400;
}

/* ─── Plaats / notitie (verborgen op mobiel) ─────────────── */
.h2g-topbar__plaats,
.h2g-topbar__note {
  font-weight: 400;
  white-space: nowrap;
}

/* ─── Navigatie ──────────────────────────────────────────── */
.h2g-topbar__nav {
  display: flex;
  gap: 28px;
  font-weight: 400;
}

.h2g-topbar__nav a {
  color: var(--color-accent);
  text-decoration: none;
}

.h2g-topbar__nav a:hover {
  text-decoration: underline;
}

.h2g-topbar__nav a.is-actief {
  text-decoration: underline;
  font-weight: 600;
}

/* ─── "Start een project"-pill ───────────────────────────── */
.h2g-topbar__cta {
  color: var(--color-white);
  background: var(--color-accent);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

.h2g-topbar__cta:hover {
  opacity: 0.85;
}

/* ─── Responsive (@760px — spiegelt data-m-* uit het ontwerp) ─ */
/* Horizontale rand schaalt nu via var(--gutter) (28px 40px→20px). */
@media (max-width: 760px) {
  .h2g-topbar__plaats,
  .h2g-topbar__note {
    display: none;
  }

  /* Ruimere tap-targets op touch: nav-links krijgen wat verticale hoogte. */
  .h2g-topbar__nav {
    gap: 20px;
  }
  .h2g-topbar__nav a {
    padding: 6px 0;
  }
}