/* Navigatie – header, logo en spoorwisselaar
   Samengevoegd uit de inline CSS van 57 referentiepagina's. */

.nav {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,248,244,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.logo {
  font-family:var(--display);
  font-weight:600;
  font-size:23px;
  letter-spacing:-.03em;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  line-height:1;
}
.logo .sub {
  font-weight:400;
  color:var(--ink-faint);
}
.nav-links {
  display:flex;
  gap:30px;
  align-items:center;
}
.nav-links a {
  color:var(--ink-soft);
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  transition:color .2s;
  white-space:nowrap;
}
.nav-links a.active, .nav-links a:hover {
  color:var(--orange-deep);
}
.nav-cta {
  padding:11px 22px !important;
  font-size:14px !important;
}
.nav-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span {
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:.2s;
}

@media(max-width:1560px) {
  .nav-links {
  gap:18px;
  }
  .nav-links a {
  font-size:13.5px;
  }
  .track-switch a {
  font-size:11.5px;
  padding:5px 11px;
  }
  .nav-cta {
  padding:9px 16px !important;
  font-size:13px !important;
  }
}

@media(max-width:1280px) {
  .nav-links {
  gap:12px;
  }
  .nav-links a {
  font-size:13px;
  }
}

@media(max-width:1240px) {
  .nav-links {
  position:fixed;
  top:76px;
  left:0;
  right:0;
  background:var(--cream);
  flex-direction:column;
  gap:0;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  transform:translateY(-150%);
  transition:transform .3s;
  align-items:stretch;
  }
  .nav-links.open {
  transform:none;
  }
  .nav-links a {
  font-size:14.5px;
  padding:14px 36px;
  }
  .nav-links a.nav-cta {
  margin:10px 36px;
  text-align:center;
  justify-content:center;
  }
  .nav-toggle {
  display:flex;
  }
}
.nav-inlog {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
  color:var(--ink-soft);
  padding:8px 14px;
  border-radius:100px;
  border:1.5px solid var(--tk-line,var(--line));
  transition:.2s;
  white-space:nowrap;
}
.nav-inlog:hover {
  border-color:var(--ink);
  color:var(--ink);
}
.nav-inlog svg {
  flex-shrink:0;
}

@media(max-width:1400px) {
  .nav-inlog {
  align-self:flex-start;
  margin:8px 0;
  }
}

@media(min-width:1561px) {
  .nav-links {
  gap:15px;
  }
  .nav-links a {
  font-size:13.8px;
  }
  .nav-inlog {
  padding:7px 12px;
  font-size:13px;
  }
  .nav-links a.nav-cta {
  padding:11px 18px;
  font-size:13.8px;
  }
  .track-switch a {
  padding:5px 12px;
  font-size:12px;
  }
  .nav .wrap {
  padding-left:26px;
  padding-right:26px;
  gap:14px;
  }
}

@media(min-width:1561px) and (max-width:1700px) {
  .nav-links {
  gap:11px;
  }
  .nav-links a {
  font-size:13px;
  }
  .logo {
  font-size:19px;
  }
}
.logo img {
  height:26px;
  width:auto;
  display:block;
}

@media(max-width:1400px) {
  .logo img {
  height:24px;
  }
}

@media(max-width:520px) {
  .logo img {
  height:26px;
  }
}
.track-switch {
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1.5px solid var(--tk-line);
  border-radius:100px;
  padding:3px;
  background:var(--tk-surface);
}
.track-switch a {
  font-size:12.5px;
  font-weight:700;
  padding:6px 14px;
  border-radius:100px;
  text-decoration:none;
  color:var(--ink-soft);
  transition:.2s;
  white-space:nowrap;
}
.track-switch a.on {
  background:var(--ink);
  color:#fff;
}

@media(max-width:920px) {
  .track-switch {
  margin:10px 36px;
  }
}