/* NAV fisso in alto, larghezza 100%, sfondo scuro. */
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #282828;
  padding: 8px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Contenitore NAVBAR con max 1200px di larghezza */
.nav-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Logo a sinistra e menu a destra */
  align-items: center;
  padding: 0 10px; /* Spazi laterali */
}

/* LOGO */
.nav-logo {
  font-size: 1.5em;
  font-family: Impact, sans-serif;
  color: #ffffff;
  background-color: #ff5722;
  padding: 2px 8px;
  border: 1px solid #ffffff;
  border-radius: 2px;
}

/* Contenitore per hamburger e login (mobile) */
.nav-right {
  display: none;
  align-items: center;
  gap: 10px;
}

/* LISTA dei bottoni del menu */
.nav-list {
  list-style: none;
  background-color: #282828;
  z-index: 1;
  display: flex;
  align-items: left;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

/* Elementi (li) */
.nav-list li {
  display: inherit;
  margin: 0 10px;
}

/* BOTTONI del menu */
.nav-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    padding: 8px 14px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #fff;
    background-color: #333333;
    transition: background-color 0.3s ease, transform 0.2s ease;
    outline: none;
    transform: scale(1);
    text-decoration: none;
}

/* Ingrandisci (scale) durante il click/touch */
.nav-btn:active {
  transform: scale(1.1);
  background-color: inherit;
}

/* Hover per i pulsanti del menu */
.btn-home:hover,
.btn-about:hover,
.btn-services:hover,
.btn-contact:hover {
  background-color: #F4511E;
}

/* Bottone Login (Desktop) */
.btn-login {
  font-weight: bold;
  background-color: #8583ff;
  color: #131313;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.btn-login:hover {
  background-color: #5245ff;
  color: #ffffff;
}

/* Bottone Login (Mobile) */
.btn-login-mobile {
  display: none; /* Nascondi di default, mostra solo su mobile */
  font-weight: bold;
  background-color: #8583ff;
  color: #131313;
  padding: 8px 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.btn-login-mobile:hover {
  background-color: #5245ff;
  color: #ffffff;
}

.nav-user-mobile { display: none !important; }
.nav-user-desktop span { display: block; }

.nav-user-desktop span,
.nav-user-mobile span {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 14px;
    padding: 8px 14px;
    margin-right: 10px;
    outline: none;
}

/* Media query per schermi piccoli */
@media (max-width: 768px) {
  .btn-login:hover,
  .btn-login-mobile:hover {
    transition: none !important;
  }

  .nav-btn {
    box-shadow: none;
  }

  /* Mostra il contenitore .nav-right */
  .nav-right {
    display: flex;
    /* Mantieni l'ordine naturale */
    flex-direction: row;
  }

  /* Imposta l'ordine dei pulsanti: Login prima, Menu dopo */
  .btn-login-mobile {
    order: 1;
  }

  .menu-toggle {
    order: 2;
  }

  /* Mostra il pulsante hamburger */
  .menu-toggle {
    display: block;
    background-color: #333333;
    color: #fff;
    padding: 8px 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    margin-right: 10px;
  }

  /* Personalizza l'icona all'interno del pulsante menu-toggle */
  .menu-toggle .icon {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    display: inline-block;
  }

  /* Nascondi il menu principale di default */
  .nav-list {
    position: absolute;
    top: 100%;
    right: calc(16px + 10px);
    border-top: 1px solid #393939;
    border-end-start-radius: 12px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    width: 130px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
}
  /* Quando il menu è attivo, mostra il menu */
  .nav-list.active {
    max-height: none;
    opacity: 1;
  }

  /* Elementi del menu */
  .nav-list li {
    margin: 10px 10px;
  }

  /* Nascondi il pulsante Login all'interno della nav-list su mobile */
  .nav-login-desktop {
    display: none;
  }

  /* Mostra il pulsante Login mobile */
  .btn-login-mobile {
    display: block;
  }

  .nav-user-mobile { display: block !important; }
  .nav-user-desktop span { display: none; }

  /* Stili per il pulsante menu-toggle quando è aperto */
  .menu-toggle.open {
    background-color: red;
    color: #ffffff;
  }

  .menu-toggle.open .icon {
    color: #ffffff;
  }

  /* Rimuovi l'effetto di ingrandimento sui pulsanti quando cliccati */
  .nav-btn:active {
    transform: scale(1);
  }

  /* Rimuovi la transizione dei pulsanti per cambi di colore istantanee */
  .nav-btn,
  .btn-login,
  .btn-login-mobile,
  .menu-toggle {
    transition: none;
  }
}