/* Stili globali */
* {
    box-sizing: border-box; /* Includi padding e bordo nel calcolo di larghezza e altezza */
}
html {
    scroll-behavior: smooth; /* Scorrimento fluido per i link di ancoraggio */
}
body {
    margin: 0;
    padding: 0;
    overflow-y: scroll; /* Mostra sempre la barra di scorrimento verticale */
    background-color: #b8b8b8; /* Colore di sfondo in tonalità con le immagini di sfondo */
}

/* Barra di navigazione (navbar) */
.navbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Centra orizzontalmente la navbar */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    z-index: 1000;
    width: 80%; /* Larghezza della navbar (80% della pagina) */
}

/* Pulsanti a forma di trapezio (navbar e pulsanti allegati) */
.trapez-button {
    text-decoration: none;
    color: white;
    padding: 1.2vw 0 0 0;
    margin: -1vw 10px; /* Margine superiore negativo per allineare i pulsanti trapezoidali */
    font-family: 'Rokkitt', serif; /* Font Rokkitt per il testo del pulsante */
    font-weight: 600; /* Peso 600 (SemiBold) */
    font-size: 1.1vw;
    background-color: rgba(10, 10, 10, 0.7);
    clip-path: polygon( /* Forma trapezoidale ritagliata */
        0% 0%, 100% 0%, 99% 10%, 96.9% 21.94%, 94.77% 33.91%, 
        92.51% 39.4%, 86.71% 41.83%, 13.29% 41.83%, 7.49% 39.4%, 
        5.23% 33.91%, 3.11% 21.94%, 1% 9.98%, 0% 0%
    );
    width: 9.5vw;
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: all 0.1s;
}
.trapez-button:hover {
    font-size: 1.2vw; /* Aumenta leggermente la dimensione del testo al passaggio del mouse */
    background-color: rgba(0, 0, 0, 1); /* Sfondo nero pieno in hover */
}

/* Pulsante cambio lingua (icona bandierina) posizionato in alto a destra */
#lang-switch {
    position: absolute;
    top: 1vw;
    right: -8vw;
    width: 2vw;
    height: 2vw;
    z-index: 1000;
}
#lang-switch img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* Stili generici per testo sovrapposto (overlay) */
.text-overlay {
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo nero opaco al 70% */
    padding: 1vw 2vw; /* Spaziatura interna del riquadro di testo */
    border-radius: 0.2vw; /* Angoli leggermente arrotondati */
    text-align: left;
    font-family: 'Rokkitt', serif; /* Font Rokkitt per tutti i testi sovrapposti */
    font-size: 1.0vw;
}

/* Contenitore immagine (eventualmente per impilare immagini verticalmente) */
.image-container {
    display: flex;
    flex-direction: column;
}

/* Sezione immagine a pieno schermo */
.image-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.image-wrapper img {
    width: 100%;
    height: 100vh;
    object-fit: cover; /* Riempi lo spazio mantenendo le proporzioni dell'immagine */
    display: block;
}

/* Prima sezione (Home) */
#home .image-container img {
    filter: contrast(1.5) brightness(0.5); /* Aumenta contrasto e scurisce l'immagine di sfondo */
}
.logo-overlay img {
    filter: none; /* Non applicare filtri al logo */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra il logo orizzontalmente e verticalmente */
    width: 25vw;
    height: auto;
}

/* Seconda sezione (Azienda) */
#azienda > img {
    filter: blur(5px);
    margin-bottom: -1px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 0.2%, black 99.8%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 0.2%, black 99.8%, transparent 100%); /* Sfumatura verticale sui bordi (Safari) */
}
#azienda .image-overlay-section2 {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%); /* Centra il contenitore dell'immagine sovrapposta rispetto al punto impostato */
    width: 30vw;
    height: auto;
    border: 0.25vw solid #000;
    overflow: hidden;
}
#azienda .image-overlay-section2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: none; /* L'immagine sovrapposta non deve essere sfocata né scurita */
}
#azienda .text-overlay {
    top: 30%;
    left: 50%;
    /* (Animazione in entrata gestita di seguito) */
    width: 35vw;
    opacity: 0;
    animation: slideInLeft 0.5s ease-in-out forwards, fadeIn 0.5s ease-in-out forwards; /* Animazioni: scorrimento da sinistra e comparsa graduale */
}
#azienda .text-overlay p {
    margin: 10px; /* Spaziatura interna tra paragrafi */
    padding: 0;
}
button.gallery-button { /* Bottone "Galleria" centrato nella sezione Azienda */
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%); /* Centra orizzontalmente il pulsante in fondo alla sezione */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1vw 2vw;
    font-family: 'Rokkitt', serif;
    font-size: 1.2vw;
    border: none;
    cursor: pointer;
    border-radius: 0.2vw;
    transition: background-color 0.3s;
}
button.gallery-button:hover {
    background-color: rgba(0, 0, 0, 1); /* Sfondo nero completo al passaggio del mouse */
}

/* Modale Lightbox (galleria immagini) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
    position: relative;
    margin: auto;
    width: 80%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: 5%;
    height: 100%;
}
.modal-slide {
    display: none;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain; /* Adatta l'immagine all'interno della modale */
    border-radius: 0.2vw;
}
.modal-close {
    position: absolute;
    top: 2%;
    right: 2%;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    /* Pulsante di chiusura (×) */
}
.modal-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    border-radius: 0.1vw;
    /* Pulsanti di navigazione (prev/next) della modale */
}

/* ─── Override per le immagini della lightbox ─── */
.modal .modal-slide {
    filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  
.modal-prev { left: -5%; /* Pulsante precedente a sinistra leggermente fuori */ }
.modal-next { right: -5%; /* Pulsante successivo a destra leggermente fuori */ }

/* Terza sezione (Cosa facciamo – slider immagini) */
.image-slide-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Contenitore slider: immagini figlie in posizione assoluta per transizioni fluide */
}
.image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Transizione graduale nel cambio slide */
}
.image-slide.active {
    opacity: 1; /* L'immagine attiva (visibile) */
}
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    font-size: 2vw;
    padding: 1vw;
    cursor: pointer;
    width: 3vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Pulsanti freccia del carosello immagini */
}
.carousel-button.left  { left: 30vw; /* Posizione pulsante sinistro */ }
.carousel-button.right { right: 30vw; /* Posizione pulsante destro */ }
#cosa-facciamo img {
    filter: contrast(1.5) brightness(0.6);
    mask-image: linear-gradient(to bottom, transparent 0%, black 0.5%, black 99.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 0.5%, black 99.5%, transparent 100%); /* Sfumatura verticale per Safari */
}
#cosa-facciamo .text-overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra il testo al centro della sezione */
    font-size: 1vw;
    width: 26vw;
    /* (Sfondo, padding, ecc. ereditati da .text-overlay generale) */
}

/* Quarta sezione (Qualità) */
#qualita > img {
    filter: blur(5px);
    margin-bottom: -1px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 0.2%, black 99.8%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 0.2%, black 99.8%, transparent 100%); /* Sfumatura verticale sui bordi (Safari) */
}
#qualita .image-overlay-section4 {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(0, -50%); /* Posiziona il riquadro immagine certificato sul lato sinistro */
    width: 15vw;
    height: auto;
    border: 0.3vw solid #000;
    overflow: hidden;
}
#qualita .image-overlay-section4 img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Mostra l'intera immagine all'interno della cornice */
    filter: none; /* Nessun filtro sull’immagine certificato */
}
#qualita .text-overlay-container {
    position: absolute;
    top: 60%;
    right: 22%;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    width: 35vw;
    /* Contenitore testo e pulsante "Certificati" posizionato a destra */
}
#qualita .text-overlay {
    margin-bottom: 1vw; /* Spazio sotto il testo per il pulsante */
}
#qualita .text-overlay p {
    margin: 0;
    padding: 0;
}
#qualita .attached-button {
    margin-top: 13.8vw; /* Spazio verticale tra testo e pulsante "Certificati" */
}

/* Quinta sezione (Contatti) */
#contatti .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra il riquadro del testo contatti */
    padding: 2vw 3vw; /* Aumenta padding per contenere informazioni contatti */
    text-align: center;
    border-radius: 0.1vw; /* Angoli leggermente arrotondati (più piccoli rispetto ad altre sezioni) */
    /* (Colore sfondo e font ereditati da .text-overlay generale) */
}
#contatti .text-overlay p {
    margin: 0.5vw 0;
    font-size: 1vw;
}

/* Animazioni keyframes */
@keyframes slideInLeft {
    from { transform: translateX(-15%); }
    to   { transform: translateX(10%); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Adattamenti responsive */
@media (max-width: 1600px) {
    /* Nasconde il pulsante "Certificati" su schermi più piccoli di 1600px */
    #qualita .attached-button { display: none; }
}
@media (max-width: 1300px) {
    /* Adattamenti fino a 1300px di larghezza */
    #home .logo-overlay img { width: 40vw; }
    #azienda .image-overlay-section2 {
        top: 33%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40vw;
    }
    #azienda .text-overlay {
        opacity: 1;
        top: calc(45vh + 10vw + 1vh);
        left: 50%;
        transform: translate(-50%);
        font-size: 1.5vw;
        width: 60vw;
        animation: none;
    }
    #azienda .text-overlay p { margin: 0.5vw; }
    #cosa-facciamo .text-overlay {
        top: calc(35vh + 12.5vw + 1vh);
        left: 50%;
        font-size: 2vw;
        width: 50vw;
    }
    .carousel-button {
        width: 5vw;
        height: 5vw;
        font-size: 3vw;
    }
    .carousel-button.left  { left: 15vw; }
    .carousel-button.right { right: 15vw; }
    #qualita .image-overlay-section4 {
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        width: 20vw;
    }
    #qualita .text-overlay-container {
        top: calc(50% + 15vw + 2vh);
        left: 50%;
        transform: translate(-50%, 0);
        width: 75vw;
        font-size: 2vw;
        padding: 4vw;
    }
    #contatti .text-overlay {
        font-size: 2.5vw;
        padding: 3vw 4vw;
    }
    #contatti .text-overlay p {
        font-size: 2vw;
    }
}
@media (max-width: 768px) {
    /* Layout mobile (fino a 768px) */
    .navbar { display: none; }
    .gallery-button { display: none; }
    #home .logo-overlay img { width: 70vw; }
    #azienda .image-overlay-section2 {
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60vw;
    }
    #azienda .text-overlay {
        top: calc(35vh + 15vw + 1vh);
        font-size: 3vw;
        width: 80vw;
        padding: 2vw;
    }
    #azienda .text-overlay p {
        margin: 0;
        padding: 0;
    }
    #cosa-facciamo .text-overlay {
        font-size: 3vw;
        width: 80vw;
    }
    .carousel-button { display: none; }
    #qualita .image-overlay-section4 {
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%);
        width: 40vw;
    }
    #qualita .text-overlay-container {
        top: calc(50% + 30vw + 2vh);
        left: 50%;
        transform: translate(-50%, 0);
        width: 90vw;
        font-size: 3vw;
        padding: 4vw;
    }
}