/* STILE FINALE: TEMA DARK, TEXTURE FUMO LEGGERA, SENZA BAGLIORI ECCESSIVI */



/* Stile Generale e Reset */

body {

    font-family: Arial, sans-serif; 

    margin: 0; 

    padding: 0;

    

    background-color: #1a1a1a; 

    color: #f0f0f0; 

    position: relative; 

    min-height: 100vh; 

    overflow-x: hidden; 

}



/* PSEUDO-ELEMENTO PER SFONDO TEXTURE FUMO LEGGERA (Veloce e Discreto) */

body::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    /* Assicurati che 'img/smoke-texture-light.png' esista e sia caricato! */

    background-color: #1a1a1a;

    background-image: url('img/smoke-texture-light.png'); 

    background-repeat: repeat; 

    background-size: 50%; 

    opacity: 0.2; /* QUESTA CONTROLLA LA TRASPARENZA DELLA TEXTURE */

}



/* Header e Navigazione */

header {

    background-color: #0d0d0d; 

    color: #ffffff; 

    padding: 20px;

    text-align: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); 

    position: relative; 

    z-index: 10;

}



/* Stile per il logo immagine - Base (Mobile First: 90% della larghezza) */

.logo {

    margin-bottom: 10px; 

}



.logo img {

    max-width: 90%; 

    height: auto;

    display: block; 

    margin: 0 auto; 

    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); 

}



/* Menu */

nav ul {

    list-style-type: none; 

    padding: 0;

    margin-top: 10px;

    display: flex; 

    flex-wrap: wrap; 

    justify-content: center; 

    width: 100%;

}



nav ul li {

    margin: 5px 10px; 

}



nav ul li a {

    color: #ffffff; 

    text-decoration: none; 

    font-weight: bold;

    font-size: 1.1em;

    padding-bottom: 5px; 

    transition: color 0.3s, border-bottom 0.3s;

}



nav ul li a:hover {

    color: #4ac0ff; 

    border-bottom: 2px solid #ffd700; 

}



/* Contenuto Principale (il "Palco" del testo) */

main {

    max-width: 900px;

    margin: 30px auto; 

    padding: 30px;

    background: #212121; 

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 

    border-radius: 8px;

    border: 1px solid #333; 

    position: relative; 

    z-index: 5;

}



/* Titolo H1 */

main h1 {

    color: #ffd700; 

    padding-bottom: 10px;

    margin-bottom: 20px;

    border-bottom: 2px solid #333; 

}



/* DIVISORE SOLO PER H1 */

main h1::after {

    content: "🎶 🎧 🎶"; 

    display: block;

    font-size: 0.8em;

    color: #008000; 

    text-align: center;

    margin-top: 10px;

    opacity: 0.8; 

}



/* *** STILE SPECIFICO H2 (VIDEO E FOTO - BLU NEON) *** */

main h2 {

    color: #4ac0ff; /* Blu brillante */

    text-align: center;

    text-shadow: 0 0 8px rgba(74, 192, 255, 0.7); /* Effetto glow blu */

    padding-bottom: 10px;

    margin-bottom: 10px;

    border-bottom: 2px solid #333; 

}



/* Rimuoviamo il divisore H1 sotto l'H2 */

main h2::after {

    content: none; 

}

/* ****************************************** */



main h3 {

    color: #4ac0ff; 

}



/* Linea divisoria (Semplice) */

hr {

    border: 0;

    height: 1px; 

    background: #444; 

    margin: 30px 0;

}



/* Stile per il Pulsante Grande (Call to Action) */

.pulsante {

    display: inline-block;

    background-color: #008000; 

    color: white !important; 

    padding: 18px 35px;

    margin: 15px 0;

    border-radius: 50px; 

    text-decoration: none;

    font-size: 1.3em;

    font-weight: bold;

    letter-spacing: 1px;

    box-shadow: 0 4px 8px rgba(0, 128, 0, 0.4); 

    transition: background-color 0.3s ease, transform 0.1s ease;

}



.pulsante:hover {

    background-color: #00cc00; 

    transform: scale(1.02); 

    box-shadow: 0 4px 10px rgba(0, 128, 0, 0.6); 

}



/* Miglioramento elenchi */

main ul li, main ol li {

    margin-bottom: 10px;

    line-height: 1.6;

}



/* Footer */

footer {

    background-color: #0d0d0d;

    color: #ffffff;

    text-align: center;

    padding: 15px;

    width: 100%;

    box-sizing: border-box; 

    position: relative; 

    z-index: 10;

}



/* STILE IMMAGINI E VIDEO */

.main-image {

    max-width: 100%; 

    height: auto; 

    display: block; 

    margin: 20px auto; 

    border-radius: 5px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 

}



/* Container per i video embed, che devono essere responsivi */

.video-container {

    position: relative;

    padding-bottom: 56.25%; /* Rapporto 16:9 */

    height: 0;

    overflow: hidden;

    margin-top: 25px; 

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



/* STILI PER LE CARD EVENTO */

.evento-card {

    display: flex; 

    align-items: flex-start;

    margin-bottom: 30px;

    padding: 15px;

    background-color: #2a2a2a; 

    border: 1px solid #3d3d3d;

    border-left: 5px solid #4ac0ff; 

    border-radius: 5px;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 

    color: #f0f0f0;

}



.evento-foto {

    width: 150px; 

    height: 100px;

    object-fit: cover; 

    margin-right: 15px;

    border-radius: 3px;

}



.evento-dettagli {

    flex-grow: 1;

}



.evento-dettagli h3 {

    margin-top: 0;

    margin-bottom: 5px;

    color: #ffd700; 

}



.evento-luogo {

    font-style: italic;

    color: #b0b0b0; 

    margin-top: 0;

}



/* Pulsante più piccolo */

.pulsante-piccolo {

    display: inline-block;

    background-color: #4ac0ff; 

    color: #1a1a1a !important; 

    padding: 8px 15px;

    border-radius: 3px;

    font-weight: bold;

    text-decoration: none;

    font-size: 0.9em;

    margin-top: 10px;

    transition: background-color 0.3s;

}



.pulsante-piccolo:hover {

    background-color: #21a3e6;

}



/* --- STILI PER LA GALLERIA --- */

.galleria-griglia {

    display: grid;

    grid-template-columns: 1fr 1fr; /* 2 colonne su Mobile/Tablet (default) */

    gap: 15px; 

    margin-top: 20px;

}



.galleria-foto {

    width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 5px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 

    transition: transform 0.3s;

}



.galleria-foto:hover {

    transform: scale(1.03); 

}



/* --- STILI AGGIUNTIVI PER GALLERIA (Badge Foto/Video) --- */



/* Contenitore necessario per posizionare il badge in modo assoluto */

.galleria-item {

    position: relative; 

    overflow: hidden; 

}



/* Badge (Etichetta) generale */

.galleria-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: #ffd700; /* Giallo (per le Foto) */

    color: #1a1a1a;

    padding: 5px 10px;

    border-radius: 3px;

    font-size: 0.8em;

    font-weight: bold;

    z-index: 5;

    text-transform: uppercase;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);

}



/* Badge specifico per i Video (Rosso) */

.galleria-badge.video {

    background-color: #ff4c4c; 

    color: white;

}



/* --- STILE AGGIUNTIVO PER PULSANTE LIVE KARAOKE (BLU) --- */

.pulsante-live {

    background-color: #007bff; /* Blu brillante per Live Karaoke */

    border: 2px solid #0056b3;

}



/* Effetto al passaggio del mouse (hover) per il pulsante blu */

.pulsante-live:hover {

    background-color: #0056b3; 

    border: 2px solid #004085;

    transform: translateY(-2px); 

}



/* Media Query per Desktop (sopra i 769px) */

@media (min-width: 769px) {

    .logo img {

        max-width: 610px; 

    }

}



/* Media Query per Mobile (sotto i 768px) */

@media (max-width: 768px) {

    nav ul li {

        margin: 5px 5px; 

    }

}



/* Media Query per Tablet Grande e Desktop: 3 COLONNE IN GALLERIA (FOTO PIÙ PICCOLE) */

@media (min-width: 769px) {

    .galleria-griglia {

        grid-template-columns: 1fr 1fr 1fr; 

    }

}



/* Media Query per schermi molto piccoli (Responsive) */

@media (max-width: 600px) {

    .galleria-griglia {

        grid-template-columns: 1fr;

    }

    .evento-card {

        flex-direction: column;

        align-items: center;

    }

    .evento-foto {

        width: 100%;

        height: auto;

        margin-right: 0;

        margin-bottom: 10px;

    }

    .evento-dettagli {

        text-align: center;

    }

}