/* Estilo do menu hamburguer */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
}

/* Estilo base do menu */
nav ul {
  list-style: none;
  gap: 20px;
  padding: 0;
  margin: 0;
}

/* Links */
nav ul li a {
  color: #fff; /* branco padrão */
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

/* Link ativo - cor padrão branca */
nav ul li a.active {
  color: #fff;
}

/* Link ativo com hover - azul */
nav ul li a.active:hover {
  color: #ffffff;
}

/* Link normal com hover - azul */
nav ul li a:hover {
  color: #0077ff;
}

/* --- DESKTOP --- */
@media (min-width: 769px) {
  nav ul {
    display: flex;
  }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 3;
    align-self: center;
  }

  .menu-wrapper {
    position: relative;
    display: flex;
    justify-content: center; /* Centraliza o botão e o menu */
  }

  nav ul { 
    position: absolute;
    top: 100%;
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%) translateY(-10px); /* Entrada animada */
    background: #0b122198;
    flex-direction: column;
    gap: 15px;
    padding: 20px 30px;
    border-radius: 8px;
    z-index: 2;
    width: 200px;
    text-align: center;

    /* Animação */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  }

  nav ul.active {
    max-height: 500px;
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* anima para posição final */
    pointer-events: auto;
  }
}