@font-face { font-family: 'Asfalto'; src: url('Asfalto.otf') format('opentype'), url('Asfalto.ttf') format('truetype');}
@font-face { font-family: 'Montserrat'; src: url('Montserrat-Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'Montserrat'; src: url('Montserrat-SemiBold.woff') format('woff'); font-weight: 600; }
@font-face { font-family: 'Montserrat'; src: url('Montserrat-Bold.woff') format('woff'); font-weight: 700; }
@font-face { font-family: 'Montserrat'; src: url('Montserrat-ExtraBold.woff') format('woff'); font-weight: 800; }
@font-face { font-family: 'Montserrat'; src: url('Montserrat-Black.woff') format('woff'); font-weight: 900; }

:root {
    --verde-baldi: #88b126;
    --verde-scuro: #6c8c1c;
    --grigio-testo: #727271;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; line-height: 1.6; color: #333; }

/* Header Desktop */
.main-header {
    display: flex;
    width: 100%;
    height: 100px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-col {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-col a {
    text-decoration: none;
    color: var(--verde-baldi);
    font-weight: 700;
    font-size: 1.2vw;
    transition: color 0.3s ease;
}
.linktel {color:var(--verde-scuro);text-decoration:none;}
.linktel:hover {color:var(--verde-baldi);}
.nav-col a:hover { color: var(--verde-scuro); }

.logo-col img { max-height: 80px; width: auto; }

/* Nascondi Hamburger su Desktop */
.mobile-menu-toggle, .mobile-overlay { display: none; }

/* Contenuti Sezioni */
.content-section { max-width: 1200px; margin: 80px auto; padding: 0 20px; text-align: center; }
.titolo-sezione { font-weight: 700; color: #84b222; font-size: 7rem; padding-top:20px; margin-bottom: 10px; font-family: 'Asfalto', sans-serif; line-height:1;}
h1 { font-weight: 700; font-size: 4rem; margin-bottom: 10px; font-family: 'Asfalto', sans-serif; line-height:1;}
.testo-intro { font-weight: bold; color: var(--verde-scuro); font-size: 2rem; margin-bottom: 25px; line-height:1; }
.testo-bottega { font-weight: 600; font-size: 1.2rem; color: var(--grigio-testo); margin: 0 10%; }
.testo-bottega b {font-weight:800}
.testo-bottega p {margin-bottom:20px;}
.hero-image img { width: 100%; height: auto; display: block; }

.bg-verde {background-color:var(--verde-baldi);color:#fff;display: flex;}
.grilled-intro {font-weight: bold; font-size: 1.3rem; margin-bottom: 80px; line-height:1.3;}
.footer-info { font-size: 0.9rem; color: var(--verde-scuro)}

/* Mobile Layout (< 768px) */
@media (max-width: 768px) {
    .main-header {
        height: 70px;
        display: flex;
        flex-direction: row; /* Elementi sulla stessa riga */
        justify-content: space-between; /* Logo a sinistra, Hamburger a destra */
        align-items: center;
        padding: 0 20px;
    }

    /* Nascondi voci menu desktop */
    .d-none-mobile { display: none !important; }

    .logo-col {
        width: auto;
        justify-content: flex-start;
    }

    .logo-col img { max-height: 50px; }

    .mobile-menu-toggle {
        display: flex;
        font-size: 35px;
        color: var(--verde-baldi);
        cursor: pointer;
    }

    .mobile-overlay {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease;
        z-index: 2000;
    }

    .mobile-overlay.active { right: 0; }
    .mobile-overlay a { font-size: 24px; color: var(--verde-baldi); text-decoration: none; font-weight: 700; margin: 20px 0; }
    .close-btn { position: absolute; top: 20px; right: 30px; font-size: 45px; color: var(--verde-baldi); }
}


/* --- LAYOUT GRILLED BOX ZIG-ZAG --- */

/* Contenitore riga per ogni box */
.omaggio-suino-della-marca, 
.a-tutta-brace, 
.a-tutto-maiale, 
.la-classica {
    display: flex;
    align-items: center; /* Allinea verticalmente al centro */
    margin-bottom: 80px; /* Distanza tra le box */
    text-align: left;    /* Testo allineato a sinistra nelle box */
    gap: 80px;           /* Spazio tra immagine e testo */
}

/* Classi larghezza Colonne Desktop */
.col-sx-40, .col-dx-40 { flex: 0 0 40%; }
.col-sx-60, .col-dx-60 { flex: 0 0 60%; }
/* Classi larghezza Colonne Desktop */
.col-sx-30, .col-dx-30 { flex: 0 0 30%; }
.col-sx-70, .col-dx-70 { flex: 0 0 70%; }

.col-sx-40 img, .col-dx-40 img {
    display: block;
    border-radius: 20px; /* Opzionale: arrotonda un po' le foto */
}

/* Stili testi interni alle box */
.titolo-grilled { font-family: 'Asfalto', sans-serif; font-size: 2rem; margin-bottom: 15px; line-height:1; }
.testo-grilled { margin-bottom: 20px; font-weight: 600; font-size:14px; line-height:1.3;}
.box-grilled { font-size:14px; line-height:1.3; }
.chiama-ora { font-family: 'Asfalto', sans-serif; font-size: 3rem; margin-bottom: 15px; line-height:1; color: var(--verde-baldi); }

/* --- RESPONSIVE MOBILE (< 768px) --- */
@media (max-width: 768px) {
    .omaggio-suino-della-marca, 
    .a-tutta-brace, 
    .a-tutto-maiale, 
    .la-classica {
        flex-direction: column !important; /* Forza incolonnamento */             /* Testo centrato su mobile */
        gap: 20px;
    }

    /* Forza l'immagine ad essere sempre la prima nel flusso visuale */
    /* Nelle box dove l'immagine è nel secondo div (col-dx-40), la spostiamo sopra */
    .a-tutta-brace, .la-classica {
        display: flex;
        flex-direction: column-reverse !important; 
    }
    /* Nota: Se il testo è sopra e l'img è sotto nell'HTML, 
       column-reverse porterà l'img sopra su mobile */

    .col-sx-40, .col-dx-60, .col-sx-60, .col-dx-40 {
        width: 100% !important;
        flex: 0 0 100%;
    }
    
    .titolo-grilled { font-size: 2.2rem; }
    .titolo-sezione { font-size: 3rem; } 
	.testo-intro { font-size: 1.5rem; } 
}

.social-footer {
    display: flex;          /* Allinea gli elementi in riga */
    gap: 15px;              /* Spaziatura di 15px tra le icone */
    padding: 20px 0;        /* Spazio sopra e sotto il blocco social */
}

.social-footer a {
    display: flex;          /* Evita spazi vuoti strani sotto i link */
}

.social-footer img {
    width: 30px;            /* Larghezza fissa */
    height: 30px;           /* Altezza fissa (essendo quadrate) */
    display: block;
}



/* Container Footer */
.footer-info {
    margin: 0 auto;
    display: flex;
    align-items: center; /* Allinea verticalmente al centro logo e testo */
}
.footer-info .col-sx-30,
.footer-info .col-sx-40 {text-align:center;}
.footer-info .col-sx-30 img,
.footer-info .col-sx-40 img {max-width:200px; display: inline;}
.footer-info .col-dx-70,
.footer-info .col-dx-60 {

    text-align: left; /* Testo allineato a sinistra come richiesto */

}


.tel-footer {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-info p {
    margin-bottom: 10px;
    font-size: 1.3rem;
	font-weight:600;
    line-height: 1.3;
}

/* Logo Footer */
.logo-footer {
    max-width: 200px; /* Regola in base alla grandezza del tuo logo */
    height: auto;
}

/* Social Footer (già definito prima, assicurati che sia così) */
.social-footer {
    display: flex;
    gap: 15px;
	padding:10px 0;
}

.social-footer img {
    height: 40px;
    width: 40px;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .footer-info {
        flex-direction: column; /* Incolonna logo e testo */
        text-align: center;
    }
	.footer-info .col-sx-30 img {margin-bottom:20px}
	.footer-info .col-sx-30,
.footer-info .col-sx-40 {text-align:left;}
	.col-sx-30, .col-dx-70,
    .col-sx-40, .col-dx-60 {
        flex: 0 0 100%;
        width: 100%;
    }

}

/* --- 1. FIX ANCORE (HEADER FISSO) --- */
/* Applichiamo il margine di scorrimento a tutte le sezioni con ID */
section[id], footer[id] {
    scroll-margin-top: 100px; /* Esattamente l'altezza del tuo header desktop */
}

/* --- 2. HEADER CONTENUTO --- */
.main-header {
    width: 100%;
    height: 100px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center; /* Centra il contenitore interno */
}

.header-container {
    width: 100%;
    max-width: 1200px; /* Stessa larghezza delle tue content-section */
    height: 100%;
    display: flex;
    flex-direction: row;
    padding: 0 20px; /* Padding di sicurezza per schermi medi */
}

/* Regola le colonne nav dentro il nuovo container */
.header-container .nav-col {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 3. FIX MOBILE PER HEADER CONTENUTO --- */
@media (max-width: 768px) {
    section[id], footer[id] {
        scroll-margin-top: 70px; /* Altezza header mobile */
    }
    
    .main-header {
        height: 70px;
    }
    
    .header-container {
        justify-content: space-between; /* Logo a sx, Hamburger a dx */
        align-items: center;
        padding: 0 20px;
    }
    
    .header-container .nav-col.logo-col {
        width: auto;
    }
}

/* --- GESTIONE IMMAGINI CON OVERLAY (ZIG-ZAG) --- */

/* Contenitore principale (già creato) */
.img-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    /* Aggiungiamo un po' di margine laterale se la fiamma esce troppo */
    margin: 30px 0; 
}

/* L'immagine principale (già creato) */
.img-main {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    position: relative; /* Necessario per far funzionare lo z-index */
    z-index: 2;         /* Sopra la fiamma */
}

/* --- NUOVO: La fiamma dietro --- */
.flame-bg1 {
    position: absolute;
    top: -50%;         /* Esce sopra */
    left: -30%;        /* Esce a sinistra */
    width: auto;        /* Mantiene le proporzioni originali */
    height: 120%;       /* Un po' più alta dell'immagine */
    max-width: 150%;    /* Per non esagerare */
    z-index: 1;         /* Dietro l'immagine principale */
    pointer-events: none; /* Evita che la fiamma disturbi i click sulla foto */
}
.flame-bg2 {
    position: absolute;
    top: -50%;         /* Esce sopra */
    right: -30%;        /* Esce a sinistra */
    width: auto;        /* Mantiene le proporzioni originali */
    height: 120%;       /* Un po' più alta dell'immagine */
    max-width: 150%;    /* Per non esagerare */
    z-index: 1;         /* Dietro l'immagine principale */
    pointer-events: none; /* Evita che la fiamma disturbi i click sulla foto */
}
.flame-bg3 {
    position: absolute;
    top: 10%;         /* Esce sopra */
    left: -30%;        /* Esce a sinistra */
    width: auto;        /* Mantiene le proporzioni originali */
    height: 80%;       /* Un po' più alta dell'immagine */
    max-width: 150%;    /* Per non esagerare */
    z-index: 1;         /* Dietro l'immagine principale */
    pointer-events: none; /* Evita che la fiamma disturbi i click sulla foto */
}
.flame-bg4 {
    position: absolute;
    top: -50%;         /* Esce sopra */
    right: -30%;        /* Esce a sinistra */
    width: auto;        /* Mantiene le proporzioni originali */
    height: 120%;       /* Un po' più alta dell'immagine */
    max-width: 150%;    /* Per non esagerare */
    z-index: 1;         /* Dietro l'immagine principale */
    pointer-events: none; /* Evita che la fiamma disturbi i click sulla foto */
}
/* Il bollino overlay (già creato) */
.badge-overlay {
    position: absolute;
    bottom: -20px;      /* Esce in basso */
    right: -60px;       /* Esce a destra */
    width: 120px;       /* Grandezza bollino desktop */
    height: auto;
    z-index: 3;         /* Sopra l'immagine principale (e la fiamma) */
}

/* --- AGGIUSTAMENTO MOBILE (< 768px) --- */
@media (max-width: 768px) {
    .img-wrapper {
        max-width: 100%; /* Lascia spazio ai bollini che escono */
        margin: 20px auto;
    }
	.col-sx-40 .img-main {max-width:90%;margin: 0 10% 0 0;}
	.col-dx-40 .img-main {max-width:90%;margin: 0 10% 0 0;}
    
    .flame-bg1{
        top: -60px;
        left: 0px;
        height: 100%;
    }
	.flame-bg2{
        top: -60px;
        right: 0px;
        height: 100%;
    }
	.flame-bg3{
        top: -60px;
        left: 0px;
        height: 100%;
    }
	.flame-bg4
	{
        top: -60px;
        right: 0px;
        height: 100%;
    }
	.grilled-intro  {font-size: 1rem;}
    .testo-bottega {font-size: 1rem;margin:0;}
    .badge-overlay {
        width: 80px;    /* Grandezza bollino mobile */
        bottom: -15px;
        right: 0px;
    }
}