/* BBMc nav - fixed slim translucent bar. Owner: FOUNDATION */

/* ---------------------------------------------------------------------------
   HEADS UP for future edits: the LIVE nav on all 24 pages is
   `.alethia .topnav > .brand / .navlinks / .nav-cta`, styled in two-world.css
   (collapse breakpoint there: max-width 760px). The `.site-nav` / `.nav-brand` /
   `.nav-links` rules below are from the earlier FOUNDATION markup and match no
   shipped page - do not tune them expecting a visible result.

   TABLET/SMALL-LAPTOP OVERFLOW FIX (measured 2026-08-07):
   the nav needs ~1097px to lay out (brand 72 + links 726 + CTA 226 + 2x36
   gutter) but the links only collapse below 760px. Between 761px and 1096px -
   iPads, 1024px laptops, half-screen windows - the links pushed the "Plan een
   afspraak" CTA 158px off-screen on EVERY page. Rather than hide the nav on
   real laptops, let the link row take the leftover space and scroll, so every
   link stays reachable and the CTA stays anchored and visible.
   --------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1096px) {
  .alethia .topnav { gap: 1rem; }
  .alethia .topnav .brand { flex: 0 0 auto; }
  .alethia .topnav .navlinks {
    flex: 1 1 auto;
    min-width: 0;              /* without this a flex item refuses to shrink */
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;      /* the row is short; a bar would sit on the copy */
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;  /* don't hand the gesture to the page */
  }
  .alethia .topnav .navlinks::-webkit-scrollbar { display: none; }
  .alethia .topnav .navlinks a { white-space: nowrap; }
  .alethia .topnav .nav-cta { flex: 0 0 auto; }
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 68px;
  padding-inline: var(--gutter);
  background: rgba(19, 38, 54, 0.72); /* --ink, translucent */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline);
}

/* brand: rook logo + wordmark, left */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--pale);
  font-weight: var(--w-accent);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* links: single line, centered in the free space */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-left: auto;
  white-space: nowrap;
}
.nav-links a {
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: var(--w-regular);
  padding: 0.4rem 0.1rem;
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--pale);
}

/* compact CTA, right */
.nav-cta {
  padding: 0.55em 1.3em;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.site-nav .nav-cta { margin-left: 0; }
.nav-links + .nav-cta { margin-left: 0; }

/* Keep page content clear of the fixed bar for anchor jumps.
   The live bar is .alethia .topnav (padding-sized, ~94px) — not this 68px .site-nav —
   so the clearance is a variable, applied to EVERY id (not just :target, which only
   ever covered the hash-landing case) and to the scroll container itself.
   js/anchors.js measures the real bar at runtime; this is the no-JS / native path. */
:root { --nav-clear: 106px; }
html { scroll-padding-top: var(--nav-clear); }
[id] { scroll-margin-top: var(--nav-clear); }
/* No mobile override: the live .topnav measures ~97px at 375px too, so 106px is the
   correct clearance on both. (Measured — do not "optimise" this back down.) */

/* ---- mobile <768px: brand + CTA only, no hamburger ---- */
@media (max-width: 767px) {
  .site-nav {
    height: 64px;
    gap: 1rem;
    justify-content: space-between;
  }
  .nav-links { display: none; }
  .nav-brand span { display: none; } /* logo only, keep it airy at 375px */
  .nav-brand img {
    width: 36px;
    height: 36px;
  }
}