* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 250px; /* spazio per la sidebar quando presente */
}

/* Se la pagina non ha sidebar (es. homepage) rimuovi l'offset */
body.home header {
    margin-left: 0;
}

.logo img {
    height: 50px;
    width: auto;
}

.description {
    text-align: right;
}

.description h1 {
    font-size: 24px;
    color: #333;
}

.description p {
    font-size: 16px;
    color: #666;
}

/* Stile base del body */
body {
    font-family: Arial, sans-serif;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Menu laterale */
.sidebar {
    width: 250px;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10px;
    overflow-y: auto; /* Abilita lo scorrimento verticale */
    transition: transform 0.3s ease; /* Transizione per l'apertura/chiusura */
    transform: translateX(0); /* Menu visibile di default */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin: 10px 0;
}

.sidebar button {
    width: 100%;
    background-color: #444;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    text-align: left;
}

.sidebar button.accordion {
    font-weight: bold;
    background-color: #555;
}

.sidebar ul.panel {
    display: none; /* Pannello nascosto di default */
}

.sidebar ul.panel.active {
    display: block; /* Mostra il pannello quando è attivo */
}

.sidebar {
    max-height: 100vh; /* Limita l'altezza per garantire lo scroll */
    overflow-y: auto;
}

/* Bottone di toggle per il menu nella versione mobile */
.menu-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: #333;
    padding: 10px;
    border: none;
    cursor: pointer;
    z-index: 1000;
}

.menu-toggle svg {
    width: 24px;  /* Dimensione dell'icona */
    height: 24px;
}

/* Stile del contenuto principale */
.main-content {
    margin-left: 260px; /* spazio per il menu laterale */
    padding: 20px;
    flex: 1;
}

.gallery {
    margin-top: 20px;
}

/* Slider base */
.slider {
    position: relative;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
}

.slides-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Bottoni di navigazione dello slider */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    padding: 10px;
    border: none;
    cursor: pointer;
    user-select: none;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

/* Versione Mobile */
@media (max-width: 768px) {
    /* Nascondi il menu laterale e mostra il bottone di toggle */
    .sidebar {
        transform: translateX(-250px); /* Nascondi il menu di default */
    }

    .menu-toggle {
        display: block; /* Mostra il bottone di toggle */
    }

    /* Quando il menu è aperto nella versione mobile */
    .sidebar.active {
        transform: translateX(0); /* Mostra il menu */
    }

    /* Rendi lo slider orizzontale con swipe per mobile */
    .slider {
        width: 100%; /* Occupa tutta la larghezza disponibile */
        padding: 0;
    }

    .slider .slides-container {
        display: flex;
        overflow-x: scroll; /* Scorrimento orizzontale per lo swipe */
        scroll-snap-type: x mandatory; /* Scorrimento fluido centrato */
    }

    .slider .slide {
        flex: 0 0 100%; /* Ogni immagine occupa tutta la larghezza dello schermo */
    }

    /* Nascondi i bottoni di navigazione su mobile */
    .prev, .next {
        display: none;
    }

    /* Ottimizza il layout del contenuto */
    .main-content {
        margin-left: 0; /* Rimuovi il margine per la versione mobile */
        padding: 10px;
    }

    header{
        margin-left: 50px; 
    }
}

@media (max-width: 480px) {
    /* Migliora ancora la visualizzazione delle gallerie su schermi piccoli */
    .slider .slide {
        flex: 0 0 100%; /* Mantieni le immagini grandi */
        max-width: 100%;
        height: auto;
    }

    .main-content {
        padding: 10px; /* Riduci il padding su schermi molto piccoli */
    }

    .gallery {
        margin: 10px auto; /* Centra la galleria */
        width: 100%; /* Assicurati che la galleria occupi tutta la larghezza */
    }
}

/* Menu laterale */
.sidebar {
    width: 250px;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10px;
    overflow-y: auto;
    transition: transform 0.3s ease; /* Transizione per apertura/chiusura */
    z-index: 1000; /* Z-index alto per assicurare che il menu sia sempre sopra */
}

/* Bottone di toggle del menu nella versione mobile */
.menu-toggle {
    display: none; /* Visibile solo in mobile */
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: #333;
    padding: 10px;
    border: none;
    cursor: pointer;
    z-index: 1100; /* Assicurati che il bottone sia sopra tutto */
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* Stile del contenuto principale */
.main-content {
    margin-left: 260px; /* Spazio per il menu laterale */
    padding: 20px;
    flex: 1;
    z-index: 1; /* Mantieni il contenuto principale sotto la sidebar */
    position: relative;
    text-align: center;
    text-size-adjust: auto;
}

/* Slider */
.slider {
    position: relative;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
    z-index: 1; /* Mantieni lo slider sotto la sidebar */
}

.slides-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Bottoni dello slider */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    padding: 10px;
    border: none;
    cursor: pointer;
    user-select: none;
    z-index: 2; /* Assicurati che i bottoni siano visibili sopra lo slider */
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

/* Altri stili rimangono invariati */

/* Versione Mobile */
@media (max-width: 768px) {
    /* Nascondi il menu laterale e mostra il bottone di toggle */
    .sidebar {
        transform: translateX(-250px); /* Nascondi il menu di default */
        z-index: 1000; /* Assicurati che il menu rimanga sopra il contenuto */
    }

    .menu-toggle {
        display: block; /* Mostra il bottone di toggle */
    }

    .sidebar.active {
        transform: translateX(0); /* Mostra il menu */
    }

    /* Slider mobile */
    .slider {
        width: 100%; /* Occupa tutta la larghezza disponibile */
        padding: 0;
        z-index: 1; /* Assicurati che lo slider stia sotto il menu */
    }

    .slider .slides-container {
        display: flex;
        overflow-x: scroll; /* Scorrimento orizzontale per lo swipe */
        scroll-snap-type: x mandatory; /* Scorrimento fluido */
    }

    .slider .slide {
        flex: 0 0 100%; /* Ogni immagine occupa il 100% della larghezza dello schermo */
    }

    /* Assicurati che i bottoni di navigazione siano visibili su mobile */
    .prev, .next {
        display: block; /* Mostra i bottoni di navigazione anche su mobile */
        z-index: 2; /* Assicurati che i bottoni siano visibili sopra lo slider */
    }

    /* Assicurati che il contenuto principale sia sotto la sidebar */
    .main-content {
        margin-left: 0; /* Rimuovi lo spazio riservato al menu */
        padding: 10px;
    }
}


/* Stile per il banner di alert */
.alert {
    background-color: #f44336; /* Colore di sfondo rosso per l'alert */
    color: white; /* Colore del testo */
    padding: 15px;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 18px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#close-btn {
    background: none;
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#close-btn:hover {
    color: #ddd;
}