/*
 * 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, rendered from
 * app/views/layouts/application.html.erb. 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;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--moss);
}

.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);
}

/* Mobile hamburger button. Hidden above the tablet breakpoint; the @media
 * block below flips it on. Three stacked spans styled with currentColor
 * inherit the nav's on-dark-75 tint, so no extra colour declarations are
 * needed when a future palette tweak changes the foreground. */
.site-nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--on-dark-75);
  width: 2.75rem;
  height: 2.75rem;
  padding: .625rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r);
}

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

.site-nav-toggle span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* Tablet and below: collapse the link list behind the hamburger button.
 * The disclosure state lives on the nav element as data-nav-open, toggled
 * by app/javascript/controllers/nav_controller.js. See docs/design_system.md
 * §"Breakpoints" for the 48rem / 768px boundary. */
@media (max-width: 48rem) {
  .site-nav-toggle {
    display: inline-flex;
  }

  .site-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: .75rem 1.5rem 1rem;
    background: var(--forest);
    border-bottom: 2px solid var(--moss);
    display: none;
  }

  .site-nav[data-nav-open="true"] .site-nav-links {
    display: flex;
  }

  .site-nav-links li {
    width: 100%;
  }

  .site-nav-links a {
    display: block;
    padding: .75rem 0;
    font-size: var(--fs-sm);
  }

  .site-nav-links .site-nav-cta {
    text-align: center;
    margin-top: .5rem;
  }
}