/* La pagina /menu: il racconto del menù digitale per i ristoratori.
 *
 * Sta accanto a styles.css e non dentro, come restaurants.css: qui ci sono
 * solo le cose di questa pagina, e i colori e i caratteri restano quelli del
 * sito.
 *
 * ⚠️ IL MENÙ DI PROVA NON È STILATO DA QUI. Vive dentro una cornice
 * (l'iframe di /menu-demo) e porta con sé menu-page.css, esattamente quello
 * dei menù veri: è la ragione per cui la prova non può divergere da ciò che
 * il cliente vedrà al tavolo. Da questo foglio si disegna il TELEFONO, mai
 * quello che ci sta dentro. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── LA TESTATA ─────────────────────────────────────────────────────── */

.ml-hero {
    padding: 122px 0 52px;
    background: linear-gradient(180deg, #F4FAF5 0%, #EAF4EC 100%);
}

.ml-pitch {
    max-width: 46em;
    text-align: center;
}

.ml-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Non --primary-dark: su questo fondo verdino sta a 3,9:1, e questa riga
     * è testo piccolo. Il verde più scuro della stessa famiglia arriva a
     * 4,8:1 senza cambiare il tono della pagina. */
    color: #2E7D32;
    margin-bottom: 14px;
}

.ml-title {
    font-size: clamp(29px, 3.9vw, 46px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    text-wrap: balance;
}

.ml-subtitle {
    max-width: 34em;
    margin: 0 auto;
    font-size: 18px;
    color: var(--text-secondary);
}

.ml-cta-row {
    margin-top: 30px;
}

.ml-cta-lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.ml-cta {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 38px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ml-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(76, 175, 80, 0.38);
}

/* La riga che dice cosa comprende «gratis». Sta SOTTO il bottone e non
 * dentro: sul bottone ci va la promessa corta, e la promessa corta senza il
 * dettaglio è una promessa che non sappiamo mantenere. */
.ml-cta-note {
    margin: 14px auto 0;
    max-width: 34em;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ── LA PROVA, DENTRO UN RIQUADRO ───────────────────────────────────── */
/* Il riquadro serve a dire che quella è una cosa a parte e che si TOCCA. Le
 * tre parti sono tre fratelli e si dispongono con le aree della griglia,
 * perché su schermo stretto l'ordine dev'essere un altro: cappello, TELEFONO,
 * manopole. */

/* Il fondo continua quello della testata e sfuma nel bianco: è lì che il
 * riquadro bianco si stacca. Su fondo bianco sarebbe un bordo e basta. */
.ml-try {
    padding: 0 0 70px;
    background: linear-gradient(180deg, #EAF4EC 0%, var(--bg) 62%);
}

.ml-try-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 40px 44px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head preview"
        "knobs preview";
    column-gap: 56px;
    row-gap: 22px;
}

/* Il cappello scende in fondo alla sua riga e le manopole partono in cima
 * alla loro: si incontrano a metà, e la colonna di sinistra risulta centrata
 * contro il telefono senza doverne conoscere l'altezza. */
.ml-try-head {
    grid-area: head;
    align-self: end;
    max-width: 32em;
}

.ml-knobs {
    grid-area: knobs;
    align-self: start;
    max-width: 32em;
}

.ml-preview {
    grid-area: preview;
    justify-self: end;
    align-self: center;
}

/* ── IL TELEFONO ────────────────────────────────────────────────────── */

/* Il telefono resta fermo mentre si scorrono le manopole: la colonna di
 * sinistra è più alta di lui, e senza questo si finirebbe a cambiare colore
 * con la cosa da guardare già uscita dallo schermo. La sua area di griglia
 * copre tutte e due le righe, quindi ha spazio per scorrere dentro. */
.ml-preview {
    justify-self: end;
    position: sticky;
    top: 96px;
}

.ml-phone {
    position: relative;
    /* La cornice si stringe intorno allo schermo: è quello a decidere le
     * misure, non un numero scritto qui. */
    width: fit-content;
    max-width: 100%;
    /* La cornice dei telefoni di oggi è SOTTILE e uguale sui quattro lati. */
    padding: 10px;
    /* Il bordo non è nero piatto: è un profilo metallico che prende luce sui
     * fianchi. Due lampi chiari agli angoli bastano a farlo sembrare un
     * oggetto invece di un rettangolo. */
    background: linear-gradient(150deg, #4a4a4e 0%, #1b1b1d 22%, #131315 50%, #1b1b1d 78%, #4a4a4e 100%);
    border-radius: 54px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 28px 64px rgba(0, 0, 0, 0.26);
}

/* I TASTI sul fianco. Non si toccano e non si vedono quasi: servono a dire
 * che è un telefono e non una finestra col bordo tondo. */
.ml-phone::before,
.ml-phone::after {
    content: '';
    position: absolute;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4a4a4e, #232326);
}

/* Volume, a sinistra */
.ml-phone::before {
    left: -2px;
    top: 17%;
    height: 15%;
}

/* Accensione, a destra: più in basso e più corto, come sui telefoni veri */
.ml-phone::after {
    right: -2px;
    top: 22%;
    height: 11%;
}

/* LO SCHERMO. Il formato è quello di un telefono di oggi e NON SI PIEGA: se
 * l'altezza disponibile non basta, a stringersi è la larghezza. Tenere fissa
 * la larghezza e lasciar tagliare l'altezza — come si faceva prima — dava un
 * apparecchio tozzo, largo come un telefono e alto come non lo è nessuno.
 *
 * 393 × 852 sono le misure vere di un telefono recente; 393/852 = 0,4613 è
 * quanto sta in larghezza per ogni pixel di altezza concesso. */
.ml-phone-screen {
    position: relative;
    width: min(393px, calc((100vh - 176px) * 0.4613));
    aspect-ratio: 393 / 852;
    /* Concentrico con la cornice: 54 fuori meno 10 di bordo. */
    border-radius: 44px;
    overflow: hidden;
    background: #fff;
}

/* L'isola in alto. Sta SOPRA la pagina, come su un telefono vero, e cade
 * nella fascia vuota dell'intestazione del menù: sotto ci passa il nome del
 * locale, mai coperto. */
/* Le sue misure scendono con la carta, non con lo schermo: la fascia vuota
 * in cui deve stare è dentro la pagina, e anche lei si rimpicciolisce. */
.ml-phone-screen::after {
    content: '';
    position: absolute;
    top: calc(9px * var(--ml-scala, 1));
    left: 50%;
    transform: translateX(-50%);
    width: calc(92px * var(--ml-scala, 1));
    height: calc(20px * var(--ml-scala, 1));
    border-radius: 999px;
    background: #0b0b0c;
    pointer-events: none;
}

/* LA CARTA È DISEGNATA A 393 E POI RIMPICCIOLITA, non compressa in uno
 * schermo più stretto. È la differenza fra una fotografia di un telefono e un
 * telefono deformato: i testi, i margini e le pastiglie stanno fra loro
 * esattamente come staranno al tavolo, solo più piccoli. Il fattore lo scrive
 * menu-landing.js, perché il CSS non sa dividere due misure. */
.ml-phone-screen iframe {
    display: block;
    width: 393px;
    height: 852px;
    border: 0;
    transform: scale(var(--ml-scala, 1));
    transform-origin: top left;
}

/* Lo schermo non è più appeso all'altezza della finestra ma a quella del
 * riquadro, che è una cosa sola con la colonna accanto: resta il tetto della
 * finestra perché su un portatile basso il riquadro non diventi più alto
 * dello schermo. */

/* ── LE MANOPOLE ────────────────────────────────────────────────────── */

.ml-knobs {
    max-width: 34em;
}

.ml-knobs-title {
    line-height: 1.25;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ml-knobs-intro {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

.ml-knobs-intro strong {
    color: var(--text);
}

.ml-knobs-grid {
    display: grid;
    gap: 22px;
}

.ml-knob-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.ml-swatches {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 3px 0;
}

.ml-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--c);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ml-swatch:hover {
    transform: scale(1.08);
}

/* L'anello che dice qual è acceso sta FUORI dalla pastiglia, su fondo bianco:
 * dentro spariva contro le tinte scure — sull'antracite non si vedeva
 * proprio, ed era il colore di partenza. Due ombre: prima uno stacco bianco,
 * poi l'anello scuro, così l'anello non tocca il colore e resta netto su
 * tutte e sei le tinte. */
.ml-swatch.is-on {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--text);
}

.ml-swatch:focus-visible,
.ml-choice:focus-visible,
.ml-cta:focus-visible {
    outline: 3px solid #1F4E79;
    outline-offset: 3px;
}

.ml-choices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ml-choice {
    font: inherit;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ml-choice:hover {
    border-color: var(--primary);
}

.ml-choice.is-on {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}

/* ── QUELLO CHE QUI NON SI TOCCA ────────────────────────────────────── */
/* Le manopole che esistono nel portale ma non nella prova. Si vedono, in
 * chiaro, e non si premono: servono a far capire cosa si ottiene aprendo un
 * profilo. NON sono un muro del premium — sono gratuite anche loro — quindi
 * niente lucchetti né avvisi di pagamento, solo il tono più basso di una
 * cosa che qui non c'è. */

/* Non è più una coda del pannello: è una sezione, e dice cosa si può fare
 * invece di cosa qui manca. In coda al pannello allungava la colonna al
 * doppio del telefono, e sotto la cornice restavano seicento pixel di
 * niente. */
.ml-custom {
    padding: 8px 0 72px;
    text-align: center;
}

.ml-custom-title {
    line-height: 1.15;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    margin-bottom: 12px;
}

.ml-custom-intro {
    max-width: 40em;
    margin: 0 auto 36px;
    color: var(--text-secondary);
}

.ml-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 60em;
    margin: 0 auto;
    text-align: left;
}

.ml-custom-item {
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 20px 22px;
}

.ml-custom-note {
    margin-top: 30px;
    font-size: 15px;
    color: var(--text-secondary);
}

.ml-custom-note a {
    color: #2E7D32; /* v. .ml-eyebrow: contrasto su fondo chiaro */
    font-weight: 600;
}

.ml-locked-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ml-locked-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Non `opacity` sull'intera riga: sbiadirebbe anche il nome della manopola,
 * che invece deve restare leggibile — è quello che si sta promettendo. */
.ml-choice.is-locked {
    border-style: dashed;
    border-color: #D8D8D8;
    background: transparent;
    color: #9A9A9A;
    cursor: default;
}

.ml-choice.is-locked:hover {
    border-color: #D8D8D8;
}



/* ── IL LEGAME CON L'APP ────────────────────────────────────────────── */

.ml-app {
    padding: 70px 0;
    background: var(--bg-alt);
}

.ml-app-inner {
    display: grid;
    grid-template-columns: minmax(0, 22em) minmax(0, 34em);
    gap: 24px 64px;
    justify-content: center;
}

.ml-app-title {
    line-height: 1.15;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    margin: 0;
}

.ml-app-text p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.ml-app-text a {
    color: #2E7D32; /* v. .ml-eyebrow: contrasto su fondo chiaro */
}

/* Il pezzo che non c'è ancora sta in un riquadro suo: non deve poter essere
 * letto di sfuggita come se fosse fra le cose che si possono avere oggi. */
.ml-app-soon {
    margin-top: 4px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
}

.ml-app-soon strong {
    color: var(--text);
}

/* ── IL FILTRO ──────────────────────────────────────────────────────── */

.ml-filter {
    padding: 70px 0;
}

.ml-filter-inner {
    display: grid;
    grid-template-columns: minmax(0, 22em) minmax(0, 34em);
    gap: 24px 64px;
    justify-content: center;
}

.ml-filter-title {
    line-height: 1.15;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    margin: 0;
}

.ml-filter-text p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.ml-filter-text strong {
    color: var(--text);
}

.ml-filter-claim {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
    color: var(--text) !important;
}

/* ── CHIUSURA ───────────────────────────────────────────────────────── */

.ml-end {
    padding: 70px 0 90px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg) 0%, #F4FAF5 100%);
}

.ml-end-title {
    line-height: 1.15;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    margin-bottom: 14px;
}

.ml-end-text {
    max-width: 540px;
    margin: 0 auto 30px;
    color: var(--text-secondary);
}

.ml-end-note {
    margin-top: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.ml-end-note a {
    color: #2E7D32; /* v. .ml-eyebrow: contrasto su fondo chiaro */
}

@media (prefers-reduced-motion: reduce) {
    .ml-swatch,
    .ml-choice,
    .ml-cta {
        transition: none;
    }

    .ml-swatch:hover,
    .ml-cta:hover {
        transform: none;
    }
}

/* ── TELEFONO VERO ──────────────────────────────────────────────────── */
@media (max-width: 1040px) {
    /* Nel riquadro una colonna sola, e il telefono IN MEZZO: si guarda quello
     * che si sta per cambiare, non lo si cambia alla cieca. `minmax(0, …)` e
     * non `1fr`, o la colonna resterebbe larga quanto il telefono e uscirebbe
     * dallo schermo. */
    .ml-try-box {
        padding: 30px 24px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "preview"
            "knobs";
        row-gap: 30px;
    }

    .ml-try-head,
    .ml-knobs {
        align-self: auto;
        max-width: 46em;
    }

    /* `justify-self: end` lascerebbe la cornice a destra e larga quanto il suo
     * contenuto: qui occupa la colonna e centra dentro di sé. */
    .ml-preview {
        justify-self: stretch;
        align-self: auto;
        display: flex;
        justify-content: center;
    }

    /* In colonna sola il telefono non deve più stare accanto a niente: prende
       la larghezza che la colonna concede, fino alle misure vere. */
    .ml-phone {
        width: 100%;
        max-width: 413px;
    }

    .ml-phone-screen {
        width: 100%;
    }

    .ml-filter-inner,
    .ml-app-inner {
        grid-template-columns: minmax(0, 34em);
    }
}

@media (max-width: 480px) {
    .ml-hero {
        padding-top: 104px;
    }

    .ml-try-box {
        padding: 26px 18px;
        border-radius: 22px;
    }

    /* Su un telefono vero la cornice si assottiglia ancora: quello che deve
       restare largo è la carta dentro. Raggi e isola scendono con lei, o si
       vedrebbe una cornice di plastica intorno a uno schermo squadrato. */
    .ml-phone {
        padding: 7px;
        border-radius: 42px;
    }

    .ml-phone::before,
    .ml-phone::after {
        display: none;
    }

    .ml-phone-screen {
        border-radius: 35px;
    }

}