/* --- Reset base --- */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Roboto', sans-serif; background: #1E1E2F; color:#fff; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* --- Header --- */
header {
  position: fixed;
  top:0; left:0; width:100%;
  background: rgba(30,30,47,0.95);
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 30px;
  z-index:1000;
  transition: top 0.3s;
}
header .logo { font-family: 'Orbitron', sans-serif; font-size:1.8em; color:#FF3C5B; letter-spacing:2px; }

nav { display:flex; gap:25px; transition: all 0.3s; }

/* --- Link principali --- */
nav a { font-weight:500; color:#fff; transition:0.3s; padding:5px 10px; display:block; }
nav a:hover { color:#FF6F91; }

/* --- Dropdown Menu --- */
nav .dropdown { position: relative; }
nav .dropdown > a::after {
  content: "▼";
  margin-left: 5px;
  font-size: 0.6em;
  vertical-align: middle;
  transition: transform 0.3s;
}
nav .dropdown:hover > a::after { transform: rotate(-180deg); }

nav .dropdown-content {
  display: none;
  position: absolute;
  top:100%;
  left:0;
  background:#2B2B3C;
  min-width:200px;
  border-radius:8px;
  overflow:hidden;
  flex-direction:column;
  z-index:1000;
}
nav .dropdown-content a {
  padding:10px 15px;
  display:block;
  color:#fff;
  font-weight:500;
  transition:0.3s;
}
nav .dropdown-content a:hover { background:#FF3C5B; color:#fff; }

/* Mostra il dropdown al passaggio del mouse (desktop) */
nav .dropdown:hover .dropdown-content { display:flex; flex-direction:column; }

/* --- Hamburger menu --- */
.hamburger { display:flex; flex-direction:column; cursor:pointer; gap:5px; }
.hamburger div { width:25px; height:3px; background:#FF3C5B; }

/* Menu scomparsa mobile */
nav { position: fixed; top:0; left:-100%; flex-direction:column; background:#1E1E2F; width:300px; height:100vh; padding:20px; gap:20px; z-index:999; }
nav.active { left:0; }

/* Mobile dropdown */
@media (max-width:1024px){
  nav { width:250px; padding:30px; gap:10px; }
  nav .dropdown-content { position: static; display:none; width:100%; margin-left:0; border-radius:6px; }
  nav .dropdown.active .dropdown-content { display:flex; flex-direction:column; }

  nav .dropdown > a::after { content:"▶"; float:right; transform:rotate(0deg); }
  nav .dropdown.active > a::after { transform:rotate(90deg); }
}

/* --- Hero Section --- */
.hero {
  margin-top:80px;
  position:relative;
  background: url('https://images.unsplash.com/photo-1573164574395-5f45060c5c5f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-4.0.3&q=80&w=1200') no-repeat center/cover;
  height:400px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero::after {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.6);
  pointer-events: none; /* permette il click sugli elementi sovrapposti */
}
.hero-content {
  position: relative;
  text-align:center;
  z-index: 2; /* fondamentale: mantiene il contenuto sopra l'overlay */
}
.hero-content h1 { font-family:'Orbitron', sans-serif; font-size:2.5em; color:#FF3C5B; margin-bottom:15px; }
.hero-content p { font-size:1.1em; margin-bottom:20px; color:#fff; }

/* btn applicabile sia ad <a> che a <button> */
.hero-content .btn,
.hero-content a.btn {
  display: inline-block;
  padding:12px 30px;
  background:#FF3C5B;
  color:#fff;
  border-radius:8px;
  border: none;
  cursor:pointer;
  font-weight:600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.hero-content .btn:hover,
.hero-content a.btn:hover { background:#FF6F91; transform: translateY(-2px); }
.hero-content .btn:focus,
.hero-content a.btn:focus { outline: 3px solid rgba(255,60,91,0.18); outline-offset: 3px; }

/* --- Sezione Stanze Popolari --- */
.section { padding:50px 30px; }
.section h2 { font-family:'Orbitron', sans-serif; font-size:2em; color:#FFD700; margin-bottom:30px; text-align:center; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:20px; }

/* Card generiche e hover */
.card, .card1, .card2, .card3, .card4, .card5 {
  background:#2B2B3C; border-radius:12px; overflow:hidden; position:relative;
  cursor:pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  -webkit-user-select: none; user-select: none;
}
.card:hover, .card1:hover, .card2:hover, .card3:hover, .card4:hover, .card5:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #FF3C5B;
}
.card img, .card1 img, .card2 img, .card3 img, .card4 img, .card5 img { width:100%; height:180px; object-fit:cover; }

.card-content { padding:15px; }
.card-content h3 { font-family:'Orbitron', sans-serif; font-size:1.2em; color:#FF3C5B; margin-bottom:10px; }
.card-content .btn,
.card-content a.btn {
  padding:8px 15px;
  background:#FFD700;
  color:#1E1E2F;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition: background 0.18s, transform 0.12s;
  text-decoration:none;
  display:inline-block;
}
.card-content .btn:hover,
.card-content a.btn:hover { background:#FF6F91; color:#fff; transform: translateY(-1px); }

/* --- Stato attivo al click --- */
.card.active, .card1.active, .card2.active, .card3.active, .card4.active, .card5.active {
  transform: scale(1.05);
  box-shadow: 0 0 20px #FF3C5B;
}

/* --- Footer --- */
footer {
  background:#1E1E2F; padding:30px; text-align:center; color:#aaa; font-size:0.9em;
  border-top:2px solid #FF3C5B;
}
footer a { color:#FFD700; }