/* --- BASE --- */

body { 
  margin: 0; 
  font-family: Arial, sans-serif; 
  background: #f4f4f4; 
} 

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; 
}

/* --- NAVBAR (Desktop & Comune) --- */

.navbar { 
  display: flex; 
  justify-content: space-between; /* Spinge Logo a sx e Nav a dx */
  align-items: center; 
  background: #111; 
  color: white; 
  padding: 15px 20px; 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
} 

.logo {
  font-weight: bold;
  font-size: 1.2rem;
}

.navbar nav { 
  display: flex; 
  align-items: center;
} 

.navbar a { 
  color: white; 
  margin-left: 20px; 
  text-decoration: none; 
  font-weight: bold; 
  transition: color 0.3s; 
} 

.navbar a:hover { 
  color: #00bcd4; 
}

/* --- HAMBURGER (Nascosto su Desktop) --- */

.hamburger {
  display: none; 
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1100;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: white;
  transition: 0.3s;
}

/* Animazione X */

.navbar.active .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar.active .hamburger span:nth-child(2) { opacity: 0; }
.navbar.active .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* --- DROPDOWN (Desktop) --- */

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #222;
  min-width: 180px;
  top: 100%;
  left: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.dropdown.open .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  color: white;
  margin-left: 0; /* Reset del margine della navbar */
}

.dropdown-content a:hover {
  background: #333;
  color: #ff4444; /* Rosso */
}

/* --- CONTENUTI (Card & Platform) --- */

.container { padding: 20px; }

.platform { margin-bottom: 20px; }

.platform h3 { 
  background: #ddd; 
  padding: 8px; 
  border-radius: 5px; 
}

.card { 
  background: white; 
  padding: 10px; 
  margin: 5px 0; 
  border-radius: 6px; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- MOBILE (Sotto i 600px) --- */

@media (max-width: 600px) {
  .hamburger {
    display: flex; /* Appare l'hamburger */
  }

  .navbar nav {
    display: none; /* Nasconde menu orizzontale */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #111;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    max-height: 80vh; 
    overflow-y: auto;
  }

  .navbar.active nav {
    display: flex; /* Mostra menu verticale al click */
  }

  .navbar a {
    margin: 10px 0;
    display: block;
    width: 100%;
    margin-left: 0; /* Rimuove margine sinistro su mobile */
    font-size: 18px;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  .dropdown-content {
    position: static; /* Sposta il contenuto invece di sovrapporsi */
    width: 100%;
    box-shadow: none;
    background: #1a1a1a;
    border-left: 4px solid #00bcd4;
    padding: 5px 0; /* Centrato */
  }

  .dropdown-content a {
    padding: 8px 0 !important;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: #222;
    border-bottom: 1px solid #333;
    margin: 0 !important; /* Rimuove i margini grandi dei link principali */
    font-size: 14px !important; /* Testo più piccolo per le piattaforme */
    font-weight: normal; /* Meno pesante rispetto a Vendite/Home */
    color: #bbb; /* Grigio chiaro invece di bianco puro */
  }

  .dropdown-content a:hover {
    background-color: #00bcd4;
    color: black;
  }
}