/* STILI BASE E SFONDO */

html {
    height: 100%;
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 0; 
    background: linear-gradient(135deg, black 0%, red 50%, dodgerblue 100%);
    background-attachment: fixed; 
    color: white; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Il footer resta sempre in fondo alla pagina:
   se il contenuto è poco, viene spinto giù fino al bordo;
   se il contenuto è tanto, scorre normalmente dopo di esso */
footer {
    flex-shrink: 0;
    margin-top: auto !important;
}

/* BARRA DI NAVIGAZIONE E MENÙ A TENDINA */

nav { 
    background: rgba(0, 0, 0, 0.6); 
    padding: 15px; 
    text-align: center; 
    backdrop-filter: blur(5px);
    position: sticky; 
    top: 0;
    z-index: 999; 
}

nav a, .dropbtn { 
    color: white; 
    margin: 0 15px; 
    text-decoration: none; 
    font-weight: bold; 
    text-transform: uppercase;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border-radius: 5px;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 0; 
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0;
}

.dropdown-content a:hover {
    background-color: red;
    border-radius: 5px;
}

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

/* LA "COVER" (HERO SECTION) IN INDEX.PHP */
.hero-cover {
    background-size: cover;
    background-position: center;
    height: 70vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-cover::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
}

.hero-content {
    position: relative; 
    z-index: 10;
}

.hero-content h1 {
    font-size: 4em;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.hero-content p {
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* PULSANTI E TITOLI */

.section-title { 
    text-align: center; 
    margin-top: 30px; 
    font-size: 2em; 
}

button { 
    background-color: dodgerblue; 
    color: white; 
    border: 2px solid white; 
    padding: 10px 25px; 
    border-radius: 30px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
    transition: all 0.3s ease; 
}

button:hover { 
    background-color: red; 
    transform: translateY(-3px); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.5); 
}

/* CARD E IMMAGINI (Hall of Fame, Curve) */
.card-img { 
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    object-position: top;
    border-radius: 8px; 
    margin-bottom: 15px; 
    background-color: rgba(255,255,255,0.2); 
}

.hof-grid, .curva-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px; 
    padding: 20px; 
}

.hof-card, .card-curva { 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    padding: 20px; 
    border-radius: 10px; 
    transition: 0.3s; 
    text-align: center; 
}

.hof-card { 
    cursor: pointer; 
}

.hof-card:hover { 
    background: rgba(255, 255, 255, 0.2); 
    transform: scale(1.02); 
}

/* SCROLLYTELLING (Righe Index) */
.row { 
    display: flex; 
    align-items: center; 
    gap: 50px; 
    padding: 50px; 
    border-bottom: 1px solid rgba(255,255,255,0.2); 
    text-align: left; 
    opacity: 0; 
    transform: translateY(50px); 
    transition: all 0.8s ease-out; 
}

.row.visibile { 
    opacity: 1; 
    transform: translateY(0); 
}

.col-img { flex: 1; }
.col-text { flex: 1; }

/* MAPPA INTERATTIVA */
.map-wrapper { 
    position: relative; 
    width: 90%; 
    max-width: 800px; 
    height: 500px; 
    margin: 30px auto; 
    background-image: url('img/mappa.png'); 
    background-size: contain; 
    background-repeat: no-repeat; /* Evito l'effetto della foto che si ripete */
    background-position: center; 
    background-color: #333; 
    border: 2px solid white; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
}
.dot { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border: 2px solid white; 
    box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    cursor: pointer; 
    transition: transform 0.2s; 
}

.dot:hover { transform: scale(1.5); }
.dot.rosso { background-color: red; }
.dot.azzurro { background-color: dodgerblue; }

/* POP-UP OVERLAY */

#popup-overlay { 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    opacity: 0; 
    visibility: hidden; 
    transition: 0.3s; 
    z-index: 1000; 
}

#popup-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

.popup-content { 
    position: relative; 
    background: white; 
    color: black; 
    padding: 40px; 
    border-radius: 15px; 
    width: 80%; 
    max-width: 500px; 
    transform: scale(0.9); 
    transition: 0.3s; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
}

#popup-overlay.active .popup-content { 
    transform: scale(1); 
}

.close-btn { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background-color: red; 
    width: 35px; 
    height: 35px; 
    padding: 0; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border: none; 
    font-size: 18px; 
}

.close-btn:hover { 
    background-color: darkred; 
    transform: scale(1.1); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}