/*
 * Site header navigation.
 *
 * Forest-green bar across the top of the page with the club logo on
 * the left and links + primary CTA on the right. Used on every real
 * page via the shared _nav.html.erb partial (once that partial exists).
 * The /design-system reference page also renders it to document the
 * pattern.
 *
 * See docs/design_system.md §"Navigatie" and docs/nnvv_prd.md §"Home".
 */

.site-nav {
  background: var(--forest);
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav-logo {
  font-family: "Playfair Display", serif;
  color: white;
  font-size: var(--fs-sm);
}

.site-nav-links {
  display: flex;
  gap: .25rem;
  list-style: none;
}

.site-nav-links a {
  display: block;
  padding: .4rem .75rem;
  border-radius: var(--r);
  font-size: var(--fs-xs);
  color: var(--on-dark-75);
  font-weight: 600;
  letter-spacing: .015em;
  transition: all .15s;
}

.site-nav-links a:hover {
  color: white;
  background: var(--on-dark-10);
}

.site-nav-links .site-nav-cta {
  background: var(--accent);
  color: white;
  font-weight: 600;
  padding: .4rem .875rem;
  border-radius: var(--r);
}

.site-nav-links .site-nav-cta:hover {
  background: var(--accent-dark);
}