header {
  background-color: #000;
  height: var(--header-height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  padding-left: 10px;
}

.hamburger {
  display: none;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-family: "Bungee", sans-serif;
  padding-right: 10px;
}

/* Only apply these styles on screens 768px wide or smaller (mobile/tablet) */
@media screen and (max-width: 768px) {
  .nav-links {
    /* Position the menu relative to the header */
    position: absolute;
    top: var(--header-height); /* Place it right below the header */
    right: 0; /* Align to the right side */
    background-color: #000;
    flex-direction: column; /* Stack links vertically */
    padding: 20px;
    gap: 15px; /* Space between each link */

    /* HIDDEN STATE - menu starts invisible */
    opacity: 0; /* Fully transparent */
    visibility: hidden; /* Also hide from screen readers/clicking */
    transform: translateY(-10px); /* Shift up 10px (for slide effect) */

    /* ANIMATION - these properties will animate smoothly over 0.3 seconds */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  /* VISIBLE STATE - when JavaScript adds the "active" class */
  .nav-links.active {
    opacity: 1; /* Fully visible */
    visibility: visible; /* Can be clicked/read */
    transform: translateY(0); /* Slide back to normal position */
  }

  .hamburger {
    display: block; /* Show the hamburger icon on mobile */
    cursor: pointer; /* Show hand cursor when hovering */
    padding-right: 10px;
  }
}