/* Base nav styles */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.main-nav li {
  cursor: pointer;
}
.main-nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease-in;

}
.main-nav a:hover {
  color: #BFBFBF;
}

/* Hide checkbox */
.nav-toggle {
  display: none;
}

/* Hamburger icon */
.nav-toggle-label {
  display: none;          /* hidden on desktop */
  width: 32px;
  height: 24px;
  cursor: pointer;
  position: relative;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  left: 0;
  transition: 0.2s;
}

.nav-toggle-label span {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-label span::before {
  top: -8px;
}

.nav-toggle-label span::after {
  top: 8px;
}

/* Mobile layout */
@media (max-width: 768px) {
  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #115DBF;
    position: absolute;
    top: 56px;          /* below header/hamburger */
    left: 0;
    right: 0;
    z-index: 50;
    padding: 1rem;
    border-top: 1px solid #ddd;
  }

  .nav-toggle-label {
    display: block;     /* show hamburger on mobile */
  }

  /* When checkbox is checked, show menu */
  .nav-toggle:checked ~ .main-nav ul {
    display: flex;
  }

  /* Animate hamburger into X when open */
  .nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}