/*
Theme Name: Agnelli Grid Minimal
Author: Agnelli Stefano
Version: 2.1.1
*/

/* --- 1. FONTS --- */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/playfair-display-v37-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('font/playfair-display-v37-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('font/montserrat-v25-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/montserrat-v25-latin-regular.woff2') format('woff2'); }

/* --- 2. RESET E SICUREZZA LAYOUT --- */
* { box-sizing: border-box !important; margin: 0; padding: 0; }

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    height: 100%;
}

body { 
    font-family: 'Montserrat', sans-serif; 
    line-height: 1.6;
    background-color: #f9f7f2 !important; 
    color: #333;
    min-height: 100vh;
}

p, h1, h2, h3, li, span {
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

aside, main, .site-footer {
    width: 100% !important;
    max-width: 100vw !important;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }
img { max-width: 100% !important; height: auto !important; display: block; }

/* --- 3. GRID BASE (MOBILE FIRST) --- */
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
}

/* Assegnazione aree */
header { grid-area: header; width: 100%; }
main { grid-area: main; padding: 40px 15px; width: 100%; max-width: 900px; margin: 0 auto; }
aside { grid-area: sidebar; background-color: #2c2c2c; color: #fdf5e6; padding: 30px 15px; }
.site-footer { grid-area: footer; background-color: #2c2c2c !important; color: white; padding: 60px 15px 30px; }

/* Fix liste / tabelle */
ul, li { overflow-wrap: break-word; }
table { width: 100% !important; table-layout: fixed; }

/* --- 4. HEADER --- */
.header-grid-area {
    background-size: cover !important;
    background-position: center !important;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-branding { text-align: center; z-index: 5; }
.site-title { font-size: clamp(35px, 10vw, 45px); }
.site-title a { color: white; text-decoration: none; }
.site-description { 
    font-family: 'Montserrat', sans-serif; 
    text-transform: uppercase; 
    color: #f1c40f; 
    letter-spacing: 3px; 
    font-size: 16px; 
}

/* --- 5. NAV MOBILE --- */
.menu-toggle {
    display: flex; flex-direction: column; gap: 5px;
    width: 45px; height: 45px;
    background: rgba(0, 0, 0, 0.5);
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    justify-content: center; align-items: center;
    border: none; cursor: pointer; border-radius: 4px;
}

.hamburger { width: 25px; height: 3px; background-color: #fff; }

@media (max-width: 767px) {
    nav.nav { 
        opacity: 0; visibility: hidden;
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #2C2C2C; padding: 80px 20px;
        transition: all 0.3s ease;
        display: flex; flex-direction: column; align-items: center;
    }

    nav.nav.toggled { opacity: 1; visibility: visible; }
    nav.nav a { color: #fff; font-size: 18px; padding: 15px; }
}

/* --- 6. FEATURES --- */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 10px;
}

.feature-item { flex: 1 1 140px; max-width: 100%; text-align: center; }
.feature-icon { font-size: 50px; margin-bottom: 10px; filter: sepia(1) saturate(5) hue-rotate(10deg); }
.feature-item h3 { font-size: 14px; text-transform: uppercase; }

/* --- 7. DESKTOP --- */
@media (min-width: 768px) {

    header#masthead { position: relative; }

    nav.nav {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(44,44,44,0.9);
        padding: 15px 0;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    nav.nav ul {
        display: flex; justify-content: center; 
        gap: 40px; list-style: none;
    }

    nav.nav a { font-size: 14px; color: white; }

    .menu-toggle { display: none !important; }

    .site-title { font-size: 80px !important; }
    .site-description { font-size: 26px !important; letter-spacing: 5px; }

    /* === GRID BASE DESKTOP CORRETTA === */
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }

    /* === FULLWIDTH === */
    .container.fullwidth {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }
    .container.fullwidth aside { display: none; }

    /* === SIDEBAR RIGHT === */
    .container.sidebar-right {
        grid-template-columns: 1fr 250px;
        grid-template-areas:
            "header header"
            "main sidebar"
            "footer footer";
    }

    /* === SIDEBAR LEFT === */
    .container.sidebar-left {
        grid-template-columns: 250px 1fr;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
    }

    #masthead { grid-area: header; }
    main.content { grid-area: main; }
    aside.sidebar { grid-area: sidebar; }
    .site-footer { grid-area: footer; }
}

/* --- 8. FOOTER --- */
.footer-widgets-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column { flex: 1 1 280px; text-align: center; padding: 10px; }
.footer-column h3 { color: #f1c40f; font-size: 1.2rem; margin-bottom: 15px; }
.footer-column img { margin: 0 auto 15px; max-height: 200px; object-fit: cover; }

.credit {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}
/******************** puntini *******************/
 /* Il contenitore principale della riga */
.menu-item-row {
    display: flex !important;
    align-items: baseline;
    width: 50%;
    gap: 10px;
}

/* Nome e Prezzo */
.menu-item-name, .menu-item-price {
    margin: 0 !important;
    white-space: nowrap;
    flex-shrink: 0; /* Impedisce al prezzo di rimpicciolirsi */
}

/* Questo seleziona quel <p>&nbsp;</p> che vedo nel tuo screenshot */
.menu-item-row > p:not(.menu-item-name):not(.menu-item-price) {
    flex-grow: 1;
    border-bottom: 2px dotted #888; /* I tuoi puntini */
    margin: 0 0 5px 0 !important; /* Allineamento basso */
    line-height: 1;
    height: 10px; /* Altezza per far vedere il bordo */
    overflow: hidden;
    color: transparent; /* Nasconde lo spazio &nbsp; se visibile */
}
/* Seleziona il div con la classe che hai creato */
.puntini-flessibili {
    flex-grow: 1;           /* Lo costringe a occupare tutto lo spazio tra nome e prezzo */
    border-bottom: 2px dotted #000; /* Crea i puntini */
    height: 1.2em;          /* Altezza fissa per allinearli al testo */
    margin: 0 10px;         /* Distanza minima dai testi laterali */
    display: inline-block;
}

/* Assicuriamoci che il contenitore sia un Flexbox (fondamentale) */
.contenitore-menu-item {
    display: flex !important;
    align-items: baseline;  /* Allinea i puntini alla base del testo */
    width: 100%;
}

/* Rimuoviamo margini fastidiosi dai paragrafi */
.nome-piatto, .prezzo-piatto {
    margin: 0 !important;
    white-space: nowrap;    /* Impedisce al prezzo di finire a capo */
}