/* ========== Design tokens ========== */
:root{
    --bg: #f6f1d3;
    --paper: #fffaf0;
    --ink: #2a1e12;
    --muted: #7b4a12;
    --brand: #8b0000;
    --brand-2: rgba(179, 106, 53, 0.38);
    --ring: 0 0 0 3px rgba(139,0,0,.15);

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-1: 0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
    --shadow-2: 0 14px 40px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.06);

    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
}

/* Dark mode automatico */
@media (prefers-color-scheme: dark){
    :root{
        --bg: #14110f;
        --paper: #1d1916;
        --ink: #efe7dc;
        --muted: #d2b08b;
        --brand: #ffc46b;
        --brand-2: #e6a86a;
        --ring: 0 0 0 3px rgba(255,107,107,.2);
        --shadow-1: 0 6px 24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
        --shadow-2: 0 14px 40px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.45);
    }
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
    margin:0;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    color: var(--ink);
    background: radial-gradient(1200px 800px at 50% -200px, #fff8e6 0%, var(--bg) 60%);
    display:flex; flex-direction:column; align-items:center;
    line-height:1.5;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

/* riduce animazioni se richiesto */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ========== Header ========== */
.header-title{
    width:100%;
    background: var(--paper);
    position:sticky; top:0; z-index:100;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Riga logo + titolo + bandiere */
.title-row{
    display:flex; justify-content:center; align-items:center; gap: var(--space-4);
    padding: var(--space-4) var(--space-3) var(--space-2);
}

.logo-side{ width:clamp(90px, 10vw, 150px) }

.branding{ display:flex; flex-direction:column; align-items:center; gap:.25rem }

h1{
    margin:0;
    font-family: "Great Vibes", "Playfair Display", ui-serif, serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: var(--brand);
    letter-spacing:.5px;
}
.slogan{
    margin: .25rem 0 0;
    color: var(--muted);
    font-style: italic;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

/* switch lingue */
.lang-switcher{ display:flex; gap:.5rem; align-items:center }
.lang-switcher img{
    width:26px; height:auto; border-radius:6px; border:1px solid transparent;
    transition: border-color .2s ease, transform .15s ease;
}
.lang-switcher img:hover{ border-color:rgba(0,0,0,.2); transform:translateY(-1px) }

/* ========== Top Nav moderno ========== */
.topnav{
    display:flex; justify-content:center; align-items:center; gap: .75rem;
    padding: .6rem .8rem .8rem;
    width:100%;
    background: var(--paper);
    border-bottom:2px solid color-mix(in srgb, var(--muted) 65%, transparent);
}

.topnav a{
    display:inline-flex; align-items:center; gap:.4rem;
    padding: .45rem .7rem;
    border-radius:999px;
    font-weight:600;
    color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%);
    transition: background .2s ease, transform .08s ease, box-shadow .2s ease;
}
.topnav a:hover{ background: color-mix(in srgb, var(--brand) 12%, transparent); }
.topnav a:active{ transform: translateY(1px) }
.topnav a[aria-current="page"]{
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    box-shadow: var(--ring);
    border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ========== Container contenuti ========== */
.body{
    width:min(100%, 980px);
    background: var(--paper);
    margin: clamp(16px, 3vw, 30px);
    padding: clamp(22px, 3vw, 40px);
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
    box-shadow: var(--shadow-1);
}

/* ========== Card pizza ========== */
.pizza{
    display:flex; gap: clamp(14px, 2vw, 22px);
    align-items:flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent), var(--paper));
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .25s ease, background .3s ease;
    margin-bottom: var(--space-4);
}
.pizza:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    background: color-mix(in srgb, var(--paper) 95%, white 5%);
}

.pizza img{
    width: clamp(160px, 26vw, 220px);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    aspect-ratio: 4/3; object-fit: cover;
}

.pizza-text{ flex:1; min-width:0 }

h2{
    margin:0 0 .25rem 0;
    color: var(--brand);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    letter-spacing:.2px;
}
.kcal-inline{
    font-size:.6em; font-weight:500; font-style:italic;
    color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%);
    margin-left:.5rem;
}

.ingredients{
    margin:0 0 .4rem 0;
    color: color-mix(in srgb, var(--ink) 70%, var(--muted) 30%);
}

.price{
    margin:.2rem 0 0;
    color: var(--brand);
    font-style: italic;
    font-weight:600;
}

/* ========== Lightbox minimale ========== */
.lightbox{
    display:none; position:fixed; inset:0; z-index:9999;
    background: color-mix(in srgb, #000 78%, transparent);
    justify-content:center; align-items:center; padding: 4vw;
}
.lightbox:target{ display:flex }
.lightbox img{
    max-width:min(1100px, 92vw); max-height:90vh;
    border-radius: 14px;
    box-shadow: 0 40px 80px rgba(0,0,0,.5);
}

/* ========== Dialog ========== */
#pizza-dialog{
    border:none; border-radius: 16px;
    padding: 1.2rem 1.2rem .9rem;
    width:min(560px, calc(100% - 2rem));
    box-shadow: var(--shadow-2);
    background: var(--paper);
    color: var(--ink);
}
#pizza-dialog::backdrop{ background: color-mix(in srgb, #000 45%, transparent) }
#pizza-dialog button{
    padding:.55rem .9rem; border-radius: 10px;
    border:1px solid color-mix(in srgb, var(--muted) 30%, transparent);
    background: color-mix(in srgb, var(--paper) 90%, white 10%);
    cursor:pointer;
    transition: filter .15s ease, transform .08s ease, background .2s ease;
}
#pizza-dialog button:hover{ filter:brightness(0.98) }
#pizza-dialog button:active{ transform: translateY(1px) }

/* ========== Tabella (tariffario) ========== */
.tariffario{
    width:100%; border-collapse: collapse; margin-top:1rem;
    font-size: clamp(.95rem, 1.1vw, 1rem);
    overflow:hidden; border-radius: 12px; box-shadow: var(--shadow-1);
}
.tariffario thead th{
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--paper)), var(--paper));
    color: var(--ink); font-weight:700; text-align:left;
    padding: .75rem .9rem; border-bottom:1px solid color-mix(in srgb, var(--muted) 25%, transparent);
}
.tariffario td{
    padding: .7rem .9rem; border-bottom:1px solid color-mix(in srgb, var(--muted) 18%, transparent);
}
.tariffario tr:nth-child(even) td{
    background: color-mix(in srgb, var(--paper) 92%, white 8%);
}

.pizza-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.info-btn {
    border: none;
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
}

.info-btn:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

.info-btn .icon {
    font-size: 1.1rem;
}
.icon i {
    color: color-mix(in srgb, var(--brand) 15%, transparent);;
    font-size: 1.1rem;
}
.info-btn:hover .icon i {
    color: #ffebee;
}

/* ========== Responsive tweaks ========== */
@media (max-width: 780px){
    .title-row{ gap:12px }
    .pizza{ padding: var(--space-2) }
    .pizza img{ width:min(45vw, 220px) }
}

@media (max-width: 560px){
    .title-row{ flex-direction:column; padding: var(--space-3) var(--space-3) var(--space-2) }
    .topnav{ flex-wrap:wrap; gap:.4rem; padding:.6rem .8rem }
    .pizza{ flex-direction:column; align-items:stretch }
    .pizza img{ width:100% }
}
/* Burger button (mobile) */
/* Bottone hamburger */
.nav-toggle{
    display:none;
    position:absolute; right:14px; top:14px;
    width:44px; height:44px; border-radius:10px;
    border:1px solid color-mix(in srgb, var(--muted) 25%, transparent);
    background: color-mix(in srgb, var(--paper) 92%, white 8%);
    box-shadow: var(--shadow-1);
    padding:0; cursor:pointer;
    z-index:105;
}
.nav-toggle span{
    display:block; width:22px; height:2px; margin:5px auto;
    background: var(--ink); border-radius:2px;
    transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; width:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* Mobile: nav a pannello */
@media (max-width: 780px){
    .nav-toggle{ display:block }
    .title-row{ padding-right:60px } /* spazio per il bottone */

    .topnav{
        position:absolute; right:10px; top:72px;   /* dropdown dal bordo destro */
        width:min(80vw, 320px);
        max-height:70vh; overflow:auto;
        display:block; padding:6px;
        background: var(--paper);
        border:1px solid color-mix(in srgb, var(--muted) 25%, transparent);
        border-radius:12px;
        box-shadow: var(--shadow-2);
        z-index:104;
    }
    .topnav[hidden]{ display:none } /* rispetta [hidden] */

    .topnav a{
        display:block; padding:.85rem 1rem;
        border-radius:8px;
        border:none;
        color: var(--ink);
    }
    .topnav a + a{ margin-top:4px }
    .topnav a:hover{ background: color-mix(in srgb, var(--brand) 10%, transparent) }
    .topnav a[aria-current="page"]{
        background: color-mix(in srgb, var(--brand) 15%, transparent);
        color: var(--brand);
        font-weight:700;
        box-shadow:none;
    }
}

/* Desktop: nav orizzontale come prima */
@media (min-width: 781px){
    .topnav{
        position:static; display:flex; justify-content:center; align-items:center;
        gap:.75rem; padding:.6rem .8rem .8rem; width:100%;
        background: var(--paper);
        border-bottom:2px solid color-mix(in srgb, var(--muted) 65%, transparent);
        box-shadow:none; border-radius:0;
    }
    #site-nav[hidden]{ display:flex !important } /* su desktop mai nascosto */
}

@media (max-width: 780px) {
    .title-row {
        flex-direction: column;
        align-items: center; /* centra tutto orizzontalmente */
        justify-content: center;
        text-align: center;
        padding: var(--space-3) var(--space-3) var(--space-2);
        gap: 0.6rem;
    }

    .title-row .branding {
        align-items: center;
    }

    h1 {
        text-align: center;
    }

    .slogan {
        text-align: center;
    }
}