/* Importazione del font Lulo Clean One Bold */
@font-face {
    font-family: 'Lulo Clean';
    src: url('fonts/lulocleanonebold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

/* Stili globali per il body */
body {
    background-color: #AE9A64;
    margin: 0;
    font-family: sans-serif;
}

/* Stili per l'header */
header {
    background-color: #AE9A64;
    height: 2cm;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin: 0 30px;
}

header nav ul li a {
    text-decoration: none;
    color: #323232;
    font-weight: bold;
    transition: color 0.3s ease;
    font-family: 'Lulo Clean', sans-serif;
    font-size: 0.8em;
}

/* Stile per il passaggio del mouse (hover) */
header nav ul li a:hover {
    color: #FFFFFF;
}

/* Stile per la voce selezionata (potresti gestirla con JavaScript per la pagina attiva) */
header nav ul li.active a {
    color: #FFFFFF;
}

/* Stili per la fascia informativa sotto il menu */
.info-bar {
    background-color: #323232;
    height: 2cm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 0;
}

.info-bar p {
    color: #AE9A64;
    font-family: Georgia, serif;
    font-style: italic;
    margin: 5px 0;
    font-size: 0.9em;
    text-align: center;
}

/* --- */

/* Nuovi stili per la fascia con immagine di sfondo */
.hero-section {
    width: 100%;
    height: 700px;
    background-image: url('../img/sfondo-modificato-2.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex; /* Aggiunto per centrare il contenuto interno */
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center; /* Centra verticalmente il contenuto */
    text-align: center; /* Assicura che il testo all'interno sia centrato */
    background-attachment: fixed;
}

.hero-content {
    color: #FFFFFF; /* Colore del testo bianco */
    line-height: 0.8; /* Riduci l'interlinea per avvicinare le righe */
}

.hero-text-small {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 30px; /* Dimensione del font per "FAMIGLIA" e "MACELLERIA" */
    margin: 0; /* Rimuove i margini predefiniti dei paragrafi */
    padding: 0; /* Rimuove i padding predefiniti dei paragrafi */
}

.hero-text-large {
    font-family: 'Anton', sans-serif;
    font-size: 150px; /* Dimensione del font per "APRUZZI" */
    margin: 0; /* Rimuove i margini predefiniti */
    padding: 0; /* Rimuove i padding predefiniti */
    white-space: nowrap; /* Evita che il testo vada a capo su schermi più piccoli */
    line-height: 1; /* Riduci l'interlinea per questa riga grande */
}

.hero-text-macelleria {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 30px;
    margin: 0;
    padding: 0;
    position: relative; /* Abilita il posizionamento relativo */
    top: -10px; /* Sposta la scritta più su (regola questo valore) */
    left: 10px; /* Sposta la scritta più a destra (regola questo valore) */
}

/* --- */


/* --- NUOVI STILI PER LA SEZIONE STORIA --- */
.storia-section {
    width: 100%;
    padding: 10px 10px; /* Spazio sopra e sotto il contenuto */
    background-image: url('../img/sfondo-storia.jpg'); /* Immagine di sfondo */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effetto parallasse anche qui */
    display: flex; /* Per centrare il contenuto */
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #AE9A64; /* Colore del testo generale per questa sezione */
    box-sizing: border-box; /* Include padding nella larghezza/altezza */
}

.storia-content {
    max-width: 800px; /* Larghezza massima del contenuto per una migliore leggibilità */
    margin: 0 auto; /* Centra il blocco di contenuto */
    padding: 0 20px; /* Padding laterale per schermi piccoli */
    background-color: rgba(50, 50, 50, 0.0); /* Sfondo semi-trasparente per il testo per migliorare la leggibilità */
    border-radius: 10px;
    padding: 40px;
}

.storia-section h2 {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 40px;
    color: #AE9A64; /* Colore giallo del sito */
    margin-bottom: 20px; /* Spazio sotto il titolo */
}

.storia-section .divider {
    width: 80px; /* Larghezza del divider */
    height: 3px; /* Altezza del divider */
    background-color: #AE9A64; /* Colore del divider */
    margin: 0 auto 30px auto; /* Centra il divider e aggiunge spazio sotto */
}

.storia-section p {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #AE9A64; /* Colore giallo del sito */
    line-height: 1.6; /* Aumenta l'interlinea per una migliore leggibilità */
    text-align: justify; /* Allinea il testo a giustificato */
}

/* --- */

/* --- NUOVI STILI PER LE SEZIONI VARIETÀ E TRADIZIONI --- */
.main-content-section {
    width: 100%;
    display: flex; /* Abilita Flexbox per le colonne */
    flex-wrap: wrap; /* Permette alle colonne di andare a capo su schermi piccoli */
    justify-content: center; /* Centra le colonne */
    align-items: stretch; /* *** IMPORTANTE: FA SÌ CHE LE COLONNE ABBIANO LA STESSA ALTEZZA *** */
    padding: 10px 20px; /* Padding generale per la sezione */
    background-color: #AE9A64;
    box-sizing: border-box;
}

.column {
    flex: 1; /* Le colonne occuperanno spazio uguale */
    min-width: 300px; /* Larghezza minima per evitare che si comprimano troppo */
    margin: 20px; /* Margine tra le colonne e dai bordi della sezione */
    background-color: #F8F8F8; /* Sfondo chiaro per le colonne per far risaltare il testo giallo */
    padding: 15px 30px 30px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra leggera */
    text-align: center; /* Centra il contenuto delle colonne */
    max-width: 500px;
    display: flex; /* La colonna è ora un contenitore flex */
    flex-direction: column; /* I suoi contenuti si impileranno verticalmente */
    justify-content: space-between; /* Spazia gli elementi all'interno, spingendo il footer implicito in basso */
}

.column-title {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 40px;
    color: #323232; /* Colore scuro per il titolo */
    margin-bottom: 25px;
}

.gallery-description, .fixed-description {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #323232; /* Colore scuro per il testo */
    line-height: 1.6;
    text-align: justify; /* Allineamento del testo */
    flex-grow: 1; /* Permette al testo di espandersi e occupare lo spazio disponibile */
    overflow: auto; /* Aggiunto per permettere lo scroll se il testo è troppo lungo */
}

/* Stili per la galleria RAZZE (dinamica) */
.razze-gallery {
    position: relative; /* Necessario per posizionare i pulsanti */
    max-width: 100%; /* La galleria prende la larghezza della colonna */
    margin: 0 auto;
    overflow: hidden; /* Nasconde le slide non attive */
    flex-grow: 1; /* Permette a questo contenitore di espandersi */
    display: flex; /* Diventa un flex container */
    flex-direction: column; /* Contenuto impilato */
}

.gallery-wrapper {
    position: relative; /* Necessario per posizionare i pulsanti */
    max-width: 100%; /* La galleria prende la larghezza della colonna */
    margin: 0 auto 20px auto; /* Spazio sotto la galleria */
    overflow: hidden; /* Nasconde le slide non attive */
    border-radius: 8px; /* Bordo arrotondato al wrapper della galleria */
    background-color: #ECECEC; /* Sfondo per la galleria */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Rimosso flex-grow: 1; da qui per evitare conflitti con .razze-gallery se è il genitore */
    /* Se .gallery-wrapper è direttamente un figlio di .column, allora flex-grow: 1; ci va qui */
    /* Se invece .razze-gallery contiene .gallery-wrapper, allora flex-grow: 1; va solo su .razze-gallery */
    /* Dando un'occhiata alla struttura HTML tipica di un carosello, .gallery-wrapper è il contenitore principale, quindi la mettiamo qui. */
    flex-grow: 1; /* Consente al wrapper della galleria di espandersi */
    display: flex; /* Fa sì che il contenuto al suo interno si possa gestire con flex */
    flex-direction: column; /* impila l'immagine, la descrizione e i puntini */
    justify-content: space-between; /* Spazia gli elementi all'interno della galleria */
}

.gallery-slide {
    display: none; /* Nasconde tutte le slide per default */
    text-align: center;
    /* Ho rimosso display: flex; da qui, il carosello lo gestisce via JS */
    /* e l'overflow: hidden del parent impedisce di vedere le slide nascoste */
    flex-shrink: 0; /* Impedisce alla slide di rimpicciolirsi */
    width: 100%; /* La slide occupa tutta la larghezza */
    min-height: 300px;
}

.gallery-slide.active-slide {
    display: block; /* Mostra solo la slide attiva */
    /* IMPORTANTE: per un carosello JS, spesso si usa 'display: block' o simili */
    /* e non 'display: flex' sulla slide stessa, a meno che il JS non lo gestisca in modo specifico */
}

.gallery-wrapper .gallery-image {
    width: 100%; /* L'immagine riempie il contenitore */
    height: 250px; /* Altezza fissa per coerenza, puoi regolarla */
    object-fit: cover; /* Assicura che l'immagine copra lo spazio senza deformarsi */
    border-radius: 8px 8px 0 0; /* Bordo arrotondato solo in alto */
    margin-bottom: 15px; /* Spazio sotto l'immagine */
    flex-shrink: 0; /* Impedisce che l'immagine si rimpicciolisca */
}

/* MANTENIAMO .razze-gallery .gallery-image E .razze-gallery .gallery-description SE QUESTI SOVRASCRIVONO QUELLI GENERALI */
.razze-gallery .gallery-image {
    width: 100%; /* L'immagine riempie il contenitore */
    height: 300px; /* Altezza fissa per coerenza, puoi regolarla */
    object-fit: cover; /* Assicura che l'immagine copra lo spazio senza deformarsi */
    border-radius: 8px;
    margin-bottom: 15px;
}

.razze-gallery .gallery-description {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #323232;
    line-height: 1.6;
    text-align: justify; /* Testo giustificato */
    padding: 0 10px; /* Piccolo padding per non attaccare ai bordi */
    flex-grow: 1; /* Permette alla descrizione di espandersi */
    overflow: auto; /* Abilita lo scroll se il testo è troppo lungo */
    
}


.gallery-wrapper[data-gallery-id="razze"] .prev-slide,
.gallery-wrapper[data-gallery-id="razze"] .next-slide {
    top: 120px; /* O il valore che preferisci per le frecce di RAZZE */
}


/* Stili per i pulsanti di navigazione */

.gallery-wrapper .prev-slide,
.gallery-wrapper .next-slide {
    cursor: pointer;
    position: absolute;
    top: 50%; /* Centra verticalmente rispetto al wrapper */
    transform: translateY(-50%);
    width: auto;
    padding: 8px 12px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: 0.6s ease;
    background-color: rgba(0,0,0,0.5);
    border: none;
    user-select: none;
    z-index: 1;
}

.gallery-wrapper .next-slide {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.gallery-wrapper .prev-slide {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.gallery-wrapper .prev-slide:hover,
.gallery-wrapper .next-slide:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Stili per i puntini di navigazione */
.gallery-wrapper .dots-container {
    text-align: center;
    padding: 10px 0 0 0; /* Spazio sopra i puntini */
    position: relative; /* Mantenerlo relativo */
    margin-top: auto; /* Spinge i puntini in basso all'interno del flex container */
    width: 100%;
}

.gallery-wrapper .dot {
    cursor: pointer;
    height: 12px; /* Dimensione più piccola per i puntini */
    width: 12px;
    margin: 0 4px; /* Spazio tra i puntini */
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.gallery-wrapper .active-dot,
.gallery-wrapper .dot:hover {
    background-color: #717171;
}


/* Stili per la galleria TRADIZIONI (griglia di immagini) */
/* Se .tradizioni-gallery-grid non è un carosello, ma una griglia fissa */
/* E se la descrizione è fissa e lunga, dobbiamo aiutarla a contribuire all'altezza */
.tradizioni-gallery-grid {
    display: grid; /* Usa CSS Grid per la griglia di immagini */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonne flessibili */
    gap: 10px; /* Spazio tra le immagini */
    margin-bottom: 20px;
}

.gallery-image-grid {
    width: 100%; /* L'immagine riempie la cella della griglia */
    height: 100px; /* Altezza fissa per le immagini nella griglia */
    object-fit: cover; /* Assicura che l'immagine copra lo spazio senza deformarsi */
    border-radius: 8px;
}

/* Se la sezione "Tradizioni" usa un'immagine singola grande con un testo sotto */
.tradizioni-single-image { /* Assumendo che tu abbia una classe per l'immagine singola */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.gallery-wrapper[data-gallery-id="tradizioni"] .prev-slide,
.gallery-wrapper[data-gallery-id="tradizioni"] .next-slide {
    top: 120px; /* Mantienile centrate verticalmente sull'immagine */
}



/* --- */


/* --- NUOVI STILI PER LA SEZIONE STAFF --- */

.combined-staff-gallery-section {
    width: 100%;
    background-image: url('../img/staff.jpg'); /* Qui applichiamo lo sfondo */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effetto parallasse */
    box-sizing: border-box;
}

.staff-section {
    width: 100%;
    padding: 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #AE9A64;
    box-sizing: border-box;
}

.staff-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    border-radius: 10px;
    padding: 40px;
    display: flex; /* Abilita flexbox per il contenuto */
    flex-direction: column; /* Allinea gli elementi figli in colonna */
    align-items: center; /* Centra orizzontalmente gli elementi figli */
}

.staff-section h2 {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 40px;
    color: #AE9A64;
    margin-bottom: 20px;
}

.staff-section .divider {
    width: 80px;
    height: 3px;
    background-color: #AE9A64;
    margin: 0 auto 30px auto;
}

.staff-section p {
    font-family: Georgia, serif;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px; /* Aggiungi un margine inferiore per separare dal team-members */
}

/* Stili per i membri del team */
.team-members {
    display: flex; /* Usa flexbox per affiancare i membri */
    justify-content: center; /* Centra i membri orizzontalmente */
    flex-wrap: wrap; /* Permette ai membri di andare a capo su schermi più piccoli */
    gap: 50px; /* Spazio tra i membri */
    margin-top: 30px; /* Spazio sopra le foto */
    width: 100%; /* Occupa tutta la larghezza disponibile */
}

.member {
    text-align: center;
    flex-shrink: 0; /* Impedisce che si rimpiccioliscano troppo */
}

.member-photo {
    width: 200px; /* Dimensione della foto */
    height: 200px; /* Dimensione della foto */
    border-radius: 50%; /* Rende la foto rotonda */
    object-fit: cover; /* Assicura che l'immagine copra l'area senza distorsioni */
    border: 4px solid #AE9A64; /* Bordo giallo intorno alla foto */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Ombra per profondità */
}

.member-name {
    font-family: Georgia, serif; /* Puoi usare 'Lulo Clean' per i nomi se preferisci uno stile più audace */
    font-size: 1.2em;
    color: #AE9A64; /* Colore giallo per il nome */
    margin-top: 15px;
    font-weight: bold;
}


/* --- NUOVI STILI PER LA SEZIONE GALLERY (principale) --- */
.gallery-full-section {
    width: 100%;
    padding: 10px 0; /* Spazio sopra e sotto il contenuto */
    text-align: center;
    box-sizing: border-box;
}

.gallery-full-content {
    max-width: 1200px; /* Larghezza massima del contenuto della galleria */
    margin: 0 auto;
    padding: 0 0 50px 0;
}

.gallery-full-section h2 {
    font-family: 'Lulo Clean', sans-serif;
    font-size: 40px;
    color: #AE9A64; /* Colore scuro per il titolo */
    margin-bottom: 20px;
}

.gallery-full-section .divider {
    width: 80px;
    height: 3px;
    background-color: #AE9A64;
    margin: 0 auto 30px auto;
}

.gallery-full-section p {
    font-family: Georgia, serif;
    font-size: 18px;
    color: #323232;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 0px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Griglia responsiva */
    gap: 15px; /* Spazio tra le immagini */
    padding: 20px;
}

.grid-item {
    width: 100%;
    height: 200px; /* Altezza fissa per le immagini della griglia */
    object-fit: cover; /* Adatta l'immagine coprendo l'area, ritagliando se necessario */
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.grid-item:hover {
    transform: scale(1.03); /* Piccolo ingrandimento all'hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* --- Stili per l'Overlay Fullscreen --- */
.fullscreen-overlay {
    position: fixed; /* Fisso sullo schermo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Sfondo semi-trasparente scuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assicura che sia sopra tutto */
    visibility: hidden; /* Nascosto per default */
    opacity: 0; /* Nascosto per default */
    transition: visibility 0s, opacity 0.3s ease;
}

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

.fullscreen-overlay img {
    max-width: 90%; /* Limita la larghezza massima dell'immagine nell'overlay */
    max-height: 90%; /* Limita l'altezza massima dell'immagine nell'overlay */
    object-fit: contain; /* L'immagine si adatta all'interno del contenitore */
    display: block; /* Rimuove lo spazio extra sotto l'immagine */
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 1001; /* Sopra l'immagine */
}

.close-btn:hover,
.close-btn:focus {
    color: #AE9A64; /* Colore giallo al passaggio del mouse */
    text-decoration: none;
    cursor: pointer;
}

.overlay-nav-btn {
    cursor: pointer;
    position: fixed; /* FISSO A BORDO SCHERMO */
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 25px; /* Dimensione maggiore per i pulsanti */
    transition: 0.6s ease;
    background-color: rgba(0,0,0,0.5);
    border: none;
    user-select: none;
    z-index: 1001; /* Sopra l'immagine */
}

.overlay-nav-btn.next-btn {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.overlay-nav-btn.prev-btn {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.overlay-nav-btn:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Stili per il pulsante "Torna su" */
#backToTopBtn {
    display: none; /* Inizialmente nascosto */
    position: fixed; /* Rimane fisso mentre la pagina scorre */
    bottom: 30px; /* Distanza dal fondo della viewport */
    right: 30px; /* Distanza dal lato destro della viewport */
    z-index: 99; /* Assicura che sia sopra gli altri elementi */
    font-size: 24px; /* Dimensione della freccia */
    border: none; /* Rimuovi il bordo predefinito */
    outline: none; /* Rimuovi l'outline al focus */
    background-color: #555; /* Colore di sfondo scuro */
    color: white; /* Colore del testo/freccia */
    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */
    padding: 10px 15px; /* Padding interno */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    transition: background-color 0.3s, opacity 0.3s; /* Animazione per l'hover e la comparsa/scomparsa */
    opacity: 0.7; /* Leggermente trasparente in stato normale */
}

#backToTopBtn:hover {
    background-color: #777; /* Colore più chiaro all'hover */
    opacity: 1; /* Completamente opaco all'hover */
}

/* Stili per il footer */
footer {
    background-color: #AE9A64;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    position: relative; /* Cambiato da fixed a relative per un comportamento standard */
    bottom: 0;
    left: 0;
}

footer p {
    color: #FFFFFF;
    margin: 0;
    font-size: 0.9em;
}