/* Header: dark vertical gradient, sticky to top */
header {
  background: linear-gradient(#000 0%, #0f0f0f 50%, #3d3d3d 100%);
  color: #fff;
  padding: 1rem 0;
  position: sticky; /* stays visible while scrolling */
  top: 0;
  z-index: 100;
}

/* Layout: logo left, nav right */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo size */
.logo {
  font-size: 2rem;
}

/* Active nav state (desktop) */
nav ul li.active a {
  color: var(--color-bg);
  background-color: #2b2b2b;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
nav ul li.active a:hover {
  background-color: #fff;
  color: var(--color-accent);
}

/* Nav wrapper & default nav styles */
.nav-wrapper {
  position: relative; /* needed for the absolute mobile menu */
}

/* Desktop list */
nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  text-decoration: underline;
}

/* Hamburger (shown only on small screens) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 4px 0;
  background-color: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile styles */
@media (max-width: 768px) {
  .nav-toggle {
    display: block; /* show hamburger */
  }

  /* Hide desktop nav list */
  nav ul {
    display: none;
  }

  /* Slide-out menu (anchored to right under header) */
  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    max-width: 80vw;
    background: linear-gradient(#2d2d2d 0%, #181818 50%, #000 100%);
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10;
  }

  /* Mobile list: vertical stack */
  .site-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .site-nav a {
    color: #fff;
  }

  /* When header gets .nav-open (via JS), reveal menu */
  .nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
  }

  /* Hamburger → “X” animation */
  .nav-toggle.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.open .bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Highlights current page link */
nav ul li.active a {
  color: var(--color-bg);
  background-color: #4c4c4c;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}