@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');





:root {
    /* Tavolozza base */
    --clr-orange: #C3592B;
    --clr-orange-dark: #b04f21;
    
    --clr-light: #ffffff;
    --clr-gray: #E5E5E5;
    --clr-dark-blue: #012438;
    --clr-deep-blue: #012438;
    --clr-map:#D99A42;







    --bg-main: var(--clr-map);
    --text-color: var(--clr-gray);
    --logo-color: var(--clr-deep-blue);


}

.overflow-hidden-mobile {
    overflow: hidden;
}

body {
    background:
        linear-gradient(
            rgba(230, 201, 138, 0.671),
            rgba(214, 184, 118, 0.548)
        ),
        url('img/background.webp');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    min-height: 100vh;
        
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 20% 20%, rgba(0,0,0,.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,.08), transparent 40%);

    mix-blend-mode: multiply;
}

.logo{
    color: #f7e4a7;
    text-shadow:
        2px 2px 0 #5a3818,
        4px 4px 8px rgba(0,0,0,.3);
    font-size: 1.6rem;
    font-family: "young serif", serif;
}

.navbar{
    font-family: "Young Serif", serif;
    background: rgba(88, 53, 21, 0.85);
    border-bottom: 3px solid #3b2411;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    transition: .2s ease-in-out;
}

.nav-scrolled{
    background-color: #012438;
    
}




.hamburger-menu{
    stroke: rgb(247, 228, 167); /* Nero */
    stroke-width: 3px;
    fill: none; /* Opzionale: rimuove il riempimento interno */
}

.hamburger-menu-scrolled {
    stroke: #ffffff; /* Nero */
    stroke-width: 3px;
    fill: none; /* Opzionale: rimuove il riempimento interno */
}

.title{
    font-family: "Young Serif", serif;
    color: #5a3818;
    text-shadow: 1px 1px 0 #f4ddb1;
    letter-spacing: 0;
}

.title-subtitle {
    margin: 0.5rem auto 0;
    max-width: 760px;
    padding: 0 1rem;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #3a2a15;
    text-shadow: none;
}

.categorie-wrapper {
    position: sticky;
    top: var(--navbar-height, 76px); /* sotto la navbar */

    width: 100%;
    max-width: 700px;

    z-index: 5;

    padding: 10px 0;
}

.categorie-select {
    width: 100%;

    padding: 14px 18px;

    border: 3px solid #8b5e34;
    border-radius: 14px;

    background: rgba(245, 222, 179, .95);

    font-family: "Young Serif", serif;
    font-size: 1rem;

    color: #5a3818;

    box-shadow:
        0 6px 15px rgba(0,0,0,.15);
}

.filter-button{
   padding: 10px 18px;

    background: #8b5e34;
    color: #f5e6c4;

    border: 2px solid #5c3b1f;
    border-radius: 999px;

    font-family: "Young Serif", serif;

    transition: all .2s ease;
}


#lista-piatti {
    width: 100%;
    max-width: 900px;

    margin-top: 30px;
    padding: 25px;

    background: rgba(245, 222, 179, .9);

    border: 3px solid #8b5e34;
    border-radius: 18px;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.12),
        0 10px 25px rgba(0,0,0,.2);
}

.menu-category {
    margin-top: 40px;
    margin-bottom: 20px;

    font-family: "Young Serif", serif;
    font-size: 2rem;

    color: #5a3818;

    border-bottom: 3px solid #8b5e34;
}


.menu-card {
    width: 100%;
    max-width: 700px;

    background: rgba(245, 222, 179, 0.92);

    border: 2px solid #8b5e34;
    border-radius: 14px;

    padding: 18px 20px;
    margin-bottom: 18px;

    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.menu-card .ingredienti {
    margin-top: 10px;

    font-size: 0.9rem;
    line-height: 1.4;

    color: #5a3d1f;

    opacity: 0.9;
}

.menu-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 8px;
}

.menu-card-header h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3a2a15;
}

.menu-card-header span {
    font-weight: bold;
    color: #8b5e34;
}

.menu-card p {
    color: #5c4a33;
}

.menu-card-header h3 {
    margin-right: 12px;
}

.menu-card .desc {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #5c4a33;
    opacity: 0.9;
}

.categoria-vuota {
    font-family: "Young Serif", serif;
    color: #7a5c33;
    font-style: italic;
    margin-bottom: 20px;
}

/* ============ ALLERGENI (sempre visibili in fondo, non filtrabili) ============ */

.allergeni-box {
    width: 100%;
    max-width: 700px;

    margin: 40px auto 0;
    padding: 20px 24px;

    background: rgba(255, 250, 235, .85);

    border: 2px dashed #8b5e34;
    border-radius: 14px;
}

.allergeni-titolo {
    margin: 0 0 6px;

    font-family: "Young Serif", serif;
    font-size: 1.5rem;

    color: #5a3818;
}

.allergeni-nota {
    margin-bottom: 14px;

    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.4;

    color: #7a5c33;
}

.allergeni-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 26px;

    padding-left: 22px;

    font-size: 0.92rem;
    line-height: 1.5;

    color: #5c4a33;
}

.allergeni-lista li {
    padding-left: 4px;
}

.allergeni-lista li::marker {
    color: #8b5e34;
    font-weight: bold;
}

/* ============ RESPONSIVE ============ */

@media (min-width: 640px) {
    .allergeni-lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .title {
        font-size: 1.6rem;
        padding: 1.25rem 1rem;
    }

    #spazio-menu {
        padding: 0 0.75rem 2rem;
    }

    .categorie-wrapper {
        max-width: 100%;
    }

    .categorie-select {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    #lista-piatti {
        padding: 16px;
        margin-top: 20px;
        border-radius: 14px;
    }

    .menu-category {
        font-size: 1.4rem;
        margin-top: 28px;
        margin-bottom: 14px;
    }

    .menu-card {
        padding: 14px 16px;
        margin-bottom: 14px;
        max-width: 100%;
    }

    .menu-card-header {
        flex-wrap: wrap;
        gap: 4px;
    }

    .menu-card-header h3 {
        font-size: 1.05rem;
    }

    .allergeni-box {
        padding: 16px 18px;
        margin-top: 28px;
    }

    .allergeni-titolo {
        font-size: 1.3rem;
    }
}

@media (max-width: 420px) {
    .logo {
        font-size: 1.3rem;
    }

    .title {
        font-size: 1.35rem;
    }

    .menu-category {
        font-size: 1.2rem;
    }
}