/*
 * I quattro stili delle pagine pubbliche.
 *
 * Qui non c'è nessuna regola di disposizione: solo variabili. Il menù,
 * il delivery e il profilo disegnano sé stessi leggendo queste, e non
 * sanno quale stile è attivo. Aggiungerne un quinto vuol dire scrivere
 * un blocco qui e nient'altro.
 *
 * Ogni stile dichiara la stessa lista di variabili. Se una manca, quel
 * pezzo di pagina eredita il valore di "moderno" — che è il blocco
 * :root qui sotto — invece di sparire.
 *
 * Le famiglie di caratteri sono quelle presenti sul dispositivo.
 * Caricarle da Google significherebbe mandare l'indirizzo IP di ogni
 * visitatore a Google, e in Europa su questo ci sono già state
 * condanne.
 */

.yummyit-style {
    /* --- Moderno: è anche il valore di partenza per tutti gli altri --- */

    --yz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --yz-display: var(--yz-font);

    --yz-ink: #16191f;
    --yz-soft: #6b7280;
    --yz-page: #ffffff;
    --yz-card: #ffffff;
    --yz-line: #e5e7eb;
    --yz-well: #f6f6f7;

    /*
     * I colori del ristorante entrano da qui: il template li scrive
     * in linea sul contenitore, calcolati da BrandService.
     *
     * Il secondario ricade sul principale: chi non lo sceglie non deve
     * ritrovarsi i titoli di un colore che non ha mai indicato.
     */
    --yz-accent: #1f2933;
    --yz-on-accent: #ffffff;
    --yz-accent-alt: var(--yz-accent);

    --yz-radius: 14px;
    --yz-radius-small: 9px;

    --yz-title-size: 21px;
    --yz-title-weight: 700;
    --yz-title-spacing: -0.01em;
    --yz-title-transform: none;

    --yz-item-size: 17px;
    --yz-item-weight: 600;
    --yz-item-font: var(--yz-font);
    --yz-item-transform: none;
    --yz-item-spacing: normal;

    --yz-body-size: 15px;
    --yz-rhythm: 18px;
    --yz-section-gap: 52px;

    /* Il filo fra il nome del piatto e il prezzo */
    --yz-leader: radial-gradient(circle, var(--yz-line) 1px, transparent 1px);
    --yz-leader-size: 5px 2px;

    --yz-rule: 1px solid var(--yz-line);
    --yz-title-rule: 2px solid var(--yz-accent);

    --yz-shadow: 0 1px 2px rgba(16, 19, 31, .05), 0 6px 20px rgba(16, 19, 31, .06);
}

/* ------------------------------------------------------------------ */
/* Elegante                                                            */

/*
 * Grazie sottili e molta aria. Le due cose che fanno il lavoro sono la
 * spaziatura fra le lettere dei titoli e il ritmo verticale: un menù
 * costoso è un menù in cui ogni piatto ha spazio intorno, perché il
 * tempo di leggerlo fa parte di quello che si compra.
 */
.yummyit-style.is-elegante {
    --yz-font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    --yz-display: var(--yz-font);

    --yz-ink: #23201d;
    --yz-soft: #7d766d;
    --yz-page: #fdfcfa;
    --yz-card: #fdfcfa;
    --yz-line: #e0dbd3;
    --yz-well: #f6f3ee;

    --yz-radius: 2px;
    --yz-radius-small: 2px;

    --yz-title-size: 19px;
    --yz-title-weight: 400;
    --yz-title-spacing: .18em;
    --yz-title-transform: uppercase;

    --yz-item-size: 18px;
    --yz-item-weight: 400;
    --yz-item-font: var(--yz-font);
    --yz-item-transform: none;
    --yz-item-spacing: .02em;

    --yz-body-size: 15px;
    --yz-rhythm: 28px;
    --yz-section-gap: 76px;

    /* Nessun filo puntinato: su una carta di questo tipo è rumore */
    --yz-leader: none;

    --yz-rule: 1px solid #ece7e0;
    --yz-title-rule: 1px solid #c9c0b4;

    --yz-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Trattoria                                                           */

/*
 * Carta color panna e caldo. Angoli morbidi e un filo più marcato: il
 * riferimento è la tovaglietta stampata, non il libro.
 */
.yummyit-style.is-trattoria {
    --yz-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --yz-display: var(--yz-font);

    --yz-ink: #33271c;
    --yz-soft: #7a6a58;
    --yz-page: #fbf6ec;
    --yz-card: #fffdf8;
    --yz-line: #e2d5c0;
    --yz-well: #f5ecdd;

    --yz-radius: 10px;
    --yz-radius-small: 7px;

    --yz-title-size: 23px;
    --yz-title-weight: 700;
    --yz-title-spacing: 0;
    --yz-title-transform: none;

    --yz-item-size: 17px;
    --yz-item-weight: 700;
    --yz-item-font: var(--yz-font);
    --yz-item-transform: none;
    --yz-item-spacing: normal;

    --yz-body-size: 15px;
    --yz-rhythm: 20px;
    --yz-section-gap: 56px;

    --yz-leader: radial-gradient(circle, #c9b795 1px, transparent 1px);
    --yz-leader-size: 6px 2px;

    --yz-rule: 1px dashed #ddceb4;
    --yz-title-rule: 3px double var(--yz-accent);

    --yz-shadow: 0 1px 0 rgba(120, 90, 50, .06);
}

/* ------------------------------------------------------------------ */
/* Pub                                                                 */

/*
 * Fondo scuro e titoli in stampatello stretto. Sul nero il testo
 * chiaro affatica, quindi il corpo non è bianco puro ma leggermente
 * spento — e la spaziatura fra le righe è più larga del solito, che
 * sul fondo scuro serve davvero.
 */
.yummyit-style.is-pub {
    --yz-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --yz-display: 'Arial Narrow', 'Helvetica Neue', Impact, var(--yz-font);

    --yz-ink: #ececec;
    --yz-soft: #9aa0a6;
    --yz-page: #16181c;
    --yz-card: #202329;
    --yz-line: #33383f;
    --yz-well: #23272e;

    --yz-radius: 6px;
    --yz-radius-small: 4px;

    --yz-title-size: 26px;
    --yz-title-weight: 800;
    --yz-title-spacing: .06em;
    --yz-title-transform: uppercase;

    --yz-item-size: 17px;
    --yz-item-weight: 700;
    --yz-item-font: var(--yz-display);
    --yz-item-transform: uppercase;
    --yz-item-spacing: .04em;

    --yz-body-size: 15px;
    --yz-rhythm: 18px;
    --yz-section-gap: 54px;

    --yz-leader: radial-gradient(circle, #454b53 1px, transparent 1px);
    --yz-leader-size: 5px 2px;

    --yz-rule: 1px solid #2c3037;
    --yz-title-rule: 3px solid var(--yz-accent);

    --yz-shadow: none;
}

/*
 * Sul fondo scuro il colore del ristorante può essere illeggibile: un
 * blu notte su nero sparisce. Il contrasto del testo sopra l'accento lo
 * calcola già il PHP; qui si alza solo la separazione fra le schede e
 * il fondo, che è l'unica cosa che il colore non risolve.
 */
.yummyit-style.is-pub .yz-card { border: 1px solid var(--yz-line); }

/* ==================================================================
 * Promozioni, conto alla rovescia e legenda degli allergeni
 *
 * Stanno nel foglio condiviso e non in quelli delle due pagine perché
 * servono a tutte e due: un prezzo scontato disegnato diversamente sul
 * menù e sul delivery fa pensare a un errore, e su un prezzo quel
 * dubbio costa l'ordine.
 * ================================================================== */

.yz-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Il prezzo in promozione è una riga sola: sbarrato, nuovo, sconto.
 * In quest'ordine, perché senza il termine di paragone "8 €" è solo un
 * prezzo — con accanto "12 €" sbarrato è un affare.
 */
.yz-price.is-promo {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.yz-price-was {
    color: var(--yz-soft);
    font-weight: 400;
    /* Il barrato del browser è sottile e su schermo si perde */
    text-decoration: line-through 1.5px;
    opacity: .75;
}

.yz-price-now {
    color: #b4232a;
    font-weight: 700;
}

.yz-price-off {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 999px;
    background: #b4232a;
    color: #fff;
    white-space: nowrap;
}

/*
 * Il conto alla rovescia va sotto il prezzo, non accanto: accanto
 * allunga la riga e su un telefono manda il prezzo a capo, che è
 * esattamente la cosa che non deve succedere.
 */
.yz-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--yz-soft);
    white-space: nowrap;
}

.yz-countdown-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--yz-ink);
}

/* L'ultima ora si fa notare: è quando il conto serve a qualcosa */
.yz-countdown.is-urgent .yz-countdown-value { color: #b4232a; }

.yz-countdown.is-over .yz-countdown-label { display: none; }
.yz-countdown.is-over .yz-countdown-value { color: var(--yz-soft); font-weight: 400; }

/* --- La legenda dei simboli --- */

.yz-legend {
    margin: 34px 0 0;
    padding: 22px 20px;
    border-radius: var(--yz-radius);
    background: var(--yz-well);
}

.yz-legend-title {
    margin: 0 0 14px;
    font-family: var(--yz-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--yz-soft);
}

/*
 * A colonne che si adattano: su un telefono ne sta una, su un tavolo
 * tre. Con `auto-fill` e un minimo, senza media query da tenere
 * allineate a mano.
 */
.yz-legend-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 18px;
}

.yz-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.35;
}

/*
 * La misura base del simbolo, qui e non nel foglio di una pagina sola.
 *
 * Stava solo in `menu.css`. Sul delivery esisteva unicamente dentro
 * `.yd-product-allergens`, quindi nella legenda — che sta fuori da quel
 * contenitore — l'SVG restava senza dimensioni e spariva: si vedevano
 * le etichette e nessuna icona, cioè una legenda che non spiega niente.
 *
 * Adesso il simbolo ha una misura ovunque venga messo; le due pagine
 * possono ancora ritoccarla dove serve.
 */
.yz-allergen {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--yz-soft);
    /* Il puntatore a domanda dice che c'è un titolo da leggere: senza,
       nessuno prova a passarci sopra */
    cursor: help;
}

.yz-allergen svg {
    width: 100%;
    height: 100%;
    display: block;
}

.yz-legend-item .yz-allergen {
    flex: 0 0 auto;
    margin-top: 1px;
}

.yz-legend-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.yz-legend-text em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--yz-soft);
}

.yz-legend-note {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--yz-soft);
}

/* ==================================================================
 * La fotografia di apertura di una categoria
 *
 * La foto si caricava già dal pannello e non compariva da nessuna
 * parte. Adesso apre la sezione, e quando c'è **sostituisce** il
 * titolo scritto invece di aggiungersi: leggere due volte lo stesso
 * nome è la cosa che fa sembrare un sito fatto male.
 * ================================================================== */

.yz-cat-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /*
     * Alta quanto basta a far vedere il piatto, non tanto da spingere
     * il menù fuori dalla prima schermata: chi arriva deve vedere una
     * foto **e** l'inizio dell'elenco, sennò scrolla via senza guardare
     * né l'una né l'altro.
     */
    min-height: 190px;
    margin: 0 0 20px;
    padding: 22px;
    border-radius: var(--yz-radius);
    overflow: hidden;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
}

/*
 * Il velo è un elemento e non un filtro sull'immagine: un filtro
 * spegnerebbe anche il testo. Sfuma dal basso, dove sta la scritta,
 * verso l'alto, dove si guarda la foto.
 */
.yz-cat-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .12) 100%);
}

.yz-cat-hero-text {
    position: relative;
    max-width: 34rem;
}

.yz-cat-hero-name {
    margin: 0;
    font-family: var(--yz-display);
    font-size: clamp(24px, 4vw, 34px);
    font-weight: var(--yz-title-weight);
    letter-spacing: var(--yz-title-spacing);
    text-transform: var(--yz-title-transform);
    line-height: 1.12;
    /* Bianco fisso e non la variabile del testo: sotto c'è una foto,
       non il fondo della pagina, e su una foto il colore del tema può
       essere qualsiasi cosa */
    color: #fff;
    /* L'ombra regge anche sulle foto chiarissime, dove il velo da solo
       non basta */
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.yz-cat-hero-note {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

@media (max-width: 560px) {
    .yz-cat-hero {
        min-height: 150px;
        padding: 18px;
    }
}

@media print {
    /* Su carta la foto mangia il toner e non aggiunge niente: resta il
       nome, che è l'unica cosa che serve leggere */
    .yz-cat-hero {
        min-height: 0;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .yz-cat-hero-veil { display: none; }
    .yz-cat-hero-name,
    .yz-cat-hero-note { color: #000; text-shadow: none; }
}

/* L'account offerto dentro il modulo di prenotazione.

   Riquadro leggero e non colorato: è una cosa in più che si può fare,
   non un passaggio da superare. Un blocco vistoso qui farebbe sembrare
   obbligatorio registrarsi per prenotare, e non lo è. */
.yummyit-account {
    padding: 12px 14px;
    border: 1px dashed #d6dae0;
    border-radius: 8px;
}

.yummyit-account-password {
    margin-top: 10px;
}

/* "con YummyIt": la firma in fondo alle pagine che vede il cliente.

   Piccola, grigia, centrata, sempre come ultima cosa. Il logo è alto
   quattordici pixel — l'altezza di una riga di testo — e non di più:
   un marchio grosso sulla pagina di un ristorante fa sembrare la
   pagina nostra e non sua, e il primo che se ne accorge è il
   ristoratore che paga. */
.yz-firma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 28px 0 0;
    padding: 0 0 4px;
    font-size: 11px;
    line-height: 1;
    color: #9aa5b1;
    text-decoration: none;
    /* Smorzata finché non ci si passa sopra: chi legge la pagina non
       deve inciampare in un secondo marchio */
    opacity: .7;
    transition: opacity .15s ease;
}

.yz-firma:hover,
.yz-firma:focus {
    opacity: 1;
}

/*
 * Le misure del logo con `!important`, e qui serve davvero.
 *
 * Quasi tutti i temi scrivono `img { height: auto !important }` per
 * far stare le foto dentro le colonne. Quella riga vince sulla nostra,
 * e il logo — che il file lo porta a 480 pixel — usciva **gigante in
 * fondo al modulo**: la cosa più vistosa della pagina, che è
 * esattamente il contrario di quello che deve essere.
 *
 * Anche `max-width`, per i temi che allargano le immagini invece di
 * restringerle.
 */
.yz-firma img {
    display: block !important;
    height: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* --- Esaurito ---------------------------------------------------- */

/* La fascetta di un piatto finito.

   Sta nello strato comune perché la portano tutte e due le pagine — la
   carta e il delivery — e una copia per foglio diverge alla prima
   modifica: il giorno che cambia la parola, cambierebbe in una sola. */
.yz-esaurito {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #6b7280;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
    vertical-align: middle;
}

/* Il piatto esaurito resta leggibile ma spento: si deve capire che c'è
   e che oggi non c'è, non farlo sparire — sparire era il difetto di
   prima. Il testo resta pieno, così il nome si legge lo stesso. */
.is-esaurito {
    position: relative;
    opacity: .55;
}

/* Niente cursore da cosa cliccabile e nessun sollevamento al
   passaggio: un piatto che reagisce al dito e poi non fa niente
   sembra rotto */
.is-esaurito,
.is-esaurito * {
    cursor: default;
    pointer-events: none;
}

/* La fascetta invece resta a piena tinta: è l'unica cosa che deve
   saltare all'occhio in un blocco smorzato */
.is-esaurito .yz-esaurito {
    opacity: 1;
}