/* ---------- la pagina del menù, e il passaggio per arrivarci ----------

   Caricato da `partner-pubblico.php` e da `menu.php`, cioè dalle due pagine
   fra cui si sfoglia. Non sta in `site.css` di proposito: il passaggio animato
   qui sotto vale per **tutte** le navigazioni di un documento che lo dichiara,
   e metterlo nel foglio comune lo accenderebbe su ogni pagina del sito, dove
   nessuno l'ha chiesto e dove sorprenderebbe.

   20 agosto 2026. */

/* ---------- il passaggio fra scheda e menù ----------

   Chiesto dall'utente: «un effetto di pagina che sfoglia, che scorre da una
   parte all'altra». Si fa senza librerie e senza build, che è il vincolo di
   questo progetto: i browser sanno animare il passaggio **fra due pagine
   diverse** se entrambe lo dichiarano. Per questo il foglio va incluso su
   tutte e due — se lo dichiara una sola, non succede niente.

   **L'effetto non porta mai la funzione.** «Menù / Ordina ora!» è un link
   vero verso una pagina vera: dove questa funzione non c'è — Firefox, al
   momento in cui scriviamo — il passaggio è un caricamento normale e non si
   perde nulla. È la lezione dello scorrimento morbido, misurata lo stesso
   giorno e scritta in docs/14 §3-novodecies: un'animazione può non partire,
   quindi non le si appoggia sopra niente di necessario. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: tk-sfoglia-esce 0.28s ease-in both;
    }

    ::view-transition-new(root) {
        animation: tk-sfoglia-entra 0.28s ease-out both;
    }
}

/* Scorre e sfuma insieme: il solo scorrimento, su una pagina lunga, sembra
   un trascinamento accidentale invece di un cambio di pagina. */
@keyframes tk-sfoglia-esce {
    to {
        transform: translateX(-3%);
        opacity: 0;
    }
}

@keyframes tk-sfoglia-entra {
    from {
        transform: translateX(3%);
        opacity: 0;
    }
}

/* Chi ha chiesto meno movimento riceve il cambio di pagina secco. Non basta
   togliere i `@keyframes`: senza una regola esplicita resterebbe la dissolvenza
   che i browser applicano da soli quando `@view-transition` è attivo. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ---------- le linguette delle categorie ----------

   Sono ancore, non filtri. Il perché sta in testa a `menu.php` e vale la pena
   ripeterlo qui in una riga, perché è da qui che si sarebbe tentati di
   cambiarle: un menù cartaceo separa gli articoli ma li mostra tutti, e con
   2,2 prodotti per categoria un filtro darebbe schermate da due righe. */

.tk-pagina-menu {
    /* **Solo un valore di riserva: quello vero lo misura il JavaScript.**

       Storia, perché è istruttiva. Prima le linguette andavano a capo e qui
       c'era 3.5rem: a 380px la barra veniva **113px**, e il titolo della
       sezione atterrava 45px *sotto* di essa — invisibile. Ho allora messo le
       linguette su una riga sola che scorre di lato, così l'altezza tornava
       costante e il numero fisso poteva essere giusto.

       Ma quella cura ha creato il difetto che l'utente ha segnalato dopo: le
       categorie che escono a destra **nessuno le vede**, e chi non prova a
       scorrere di lato crede che il locale abbia tre categorie invece di sei.
       Un menù che nasconde metà delle sue sezioni è peggio di una barra alta.

       Quindi si torna a capo, e stavolta l'altezza **si misura** invece di
       dichiararla (vedi lo script in fondo a `menu.php`). Nessun numero fisso
       poteva funzionare: la barra è alta quanto le categorie di *quel* locale
       mandano a capo su *quello* schermo, e le categorie le decide l'admin.

       Questo valore resta come rete: copre il caso di una riga sola, che è
       quello di quasi tutti i desktop, se lo script non parte. */
    --tk-linguette-h: 4.1rem;
}

.tk-linguette {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    /* **A capo e non di lato**, chiesto dall'utente: quello che esce dal
       bordo destro non lo cerca nessuno. Un menù cartaceo non ha sezioni
       nascoste dietro il margine. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 0;
    /* Il fondo pieno serve: senza, i prodotti scorrerebbero sotto le linguette
       e si leggerebbero due righe sovrapposte. */
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
}

/* **Solo il bordo rosso, non il fondo.**

   Provate prima tutte rosse a fondo pieno, e a vederle erano troppo forti
   (giudizio dell'utente, 20 agosto 2026): sei pastiglie piene in cima alla
   pagina gridavano più dei prodotti, che sono la cosa da guardare. Il bordo
   dà lo stesso segno «queste sono le categorie» lasciando il rosso pieno ai
   pulsanti che fanno qualcosa — il «+» e «Vai al carrello».

   Fondo e testo tornano ai token del tema, che qui è giusto: una pastiglia
   chiara deve restare chiara sul chiaro e scura sullo scuro. Il rosso del
   bordo invece è lo stesso nei due temi, ed è il colore del marchio.

   `--tk-fg` e non `--tk-text`: quest'ultimo **non esiste** in `site.css`, e
   scrivendolo la dichiarazione veniva buttata via in silenzio — il testo
   restava del colore predefinito dei link per caso, non per scelta. */
.tk-linguetta {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--tk-red);
    border-radius: 999px;
    background: var(--tk-surface);
    color: var(--tk-fg);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Il rosso pieno resta, ma solo sotto il dito o il cursore: lì è un ritorno
   momentaneo su una linguetta sola, non sei pastiglie ferme in cima. */
.tk-linguetta:hover,
.tk-linguetta:focus-visible {
    background: var(--tk-red);
    border-color: var(--tk-red);
    color: #fff;
}

/* La sezione non deve fermarsi sotto la barra appiccicata, che la coprirebbe
   proprio nel momento in cui ci si è appena arrivati. */
.tk-sezione-menu {
    scroll-margin-top: calc(var(--tk-linguette-h) + 0.75rem);
}

/* Lo stesso lampo dell'arrivo da un'ancora definito in `site.css`: qui le
   sezioni SONO `.tk-card`, quindi lo ereditano senza aggiungere niente. */

/* **Margine zero, e non è una svista.** `.tk-main` è una colonna flex con
   `gap`: un margine qui non collassa con lo stacco, ci si somma. Misurato con
   i valori di prima — 1.25rem sul titolo e 0.75rem sul ritorno — gli stacchi
   venivano 52px e 44 mentre tutti gli altri della pagina erano 32. È la
   spaziatura scritta in due posti di `docs/14` §3-septdecies, con me
   dall'altra parte. */
.tk-menu-titolo {
    margin: 0;
}

.tk-torna-scheda {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    color: var(--tk-gray);
}

.tk-torna-scheda:hover,
.tk-torna-scheda:focus-visible {
    color: var(--tk-red);
}

/* Il pulsante che porta al menù è il gesto principale della scheda: tutto il
   resto della pagina serve a decidere, questo è la decisione. Un po' più
   grande del normale, e senza `style=` scritto nel PHP — dove stava prima. */
.tk-btn-menu {
    font-size: 1.05rem;
    padding: 0.8rem 1.6rem;
}

/* ---------- i prodotti a mattonelle ----------

   Chiesto dall'utente, col menù di McDonald's come riferimento: «invece che
   apparire in singole lunghe righe mezze vuote… come quadrati». Il difetto
   era reale e si vedeva solo da desktop — una riga larga 1012px per un nome,
   un prezzo e un «+» lascia due terzi di spazio bianco, e per leggere dodici
   prodotti si scorreva dodici volte quello che ora sta in tre file.

   Misurato per scegliere il minimo: contenuto della sezione 1012px, stacco
   16px. `minmax(15rem, …)` dà (1012 + 16) / (240 + 16) = 4 colonne piene,
   cioè le quattro che l'utente ha chiesto — e senza media query, perché
   scendendo di larghezza le colonne calano da sole: 2 su tablet, 1 su
   telefono. */
.tk-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    /* **Ogni mattonella alta quanto le serve, non quanto la sua vicina.**

       Con il comportamento predefinito (`stretch`) tutte le celle di una fila
       prendono l'altezza della più alta. Misurato aprendo le salse su un
       kebab: la mattonella passava da 218px a 928, e **la vicina la seguiva**
       ritrovandosi con 737px di vuoto fra la descrizione e il prezzo.

       Il prezzo da pagare è che, a fila chiusa, i piedi di due mattonelle con
       il nome su un numero di righe diverso non stanno alla stessa altezza. È
       lo scambio giusto: il disallineamento è di una riga di testo e c'è solo
       quando i nomi hanno lunghezze diverse, il buco da 737px c'era ogni
       volta che qualcuno apriva le salse. */
    align-items: start;
}

.tk-mattonella {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    background: var(--tk-surface);
    /* La `<details>` delle salse, aperta, deve restare dentro il bordo
       arrotondato invece di uscirne dagli angoli. */
    overflow: hidden;
}

/* La riga diventa colonna. `.tk-prodotto` resta la stessa classe usata dal
   carrello, dove la riga larga va benissimo: qui si riscrive **solo** dentro
   una mattonella, e quella pagina non la vede. */
.tk-mattonella > .tk-prodotto {
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.85rem;
    /* Il filo di separazione fra le righe non serve più: a separare le
       mattonelle ci pensa lo stacco della griglia. Lasciandolo, ogni
       mattonella aveva una riga orizzontale a mezz'aria. */
    border-bottom: 0;
}

/* La foto passa da francobollo da 52px a fascia in cima. `aspect-ratio` e non
   un'altezza fissa: le foto del catalogo hanno proporzioni diverse e
   ritagliarle tutte alla stessa forma è ciò che rende una griglia ordinata. */
.tk-mattonella > .tk-prodotto > img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--tk-radius-sm);
}

.tk-mattonella .tk-prodotto-testo {
    flex: 0 1 auto;
    min-width: 0;
}

/* **Il piede spinto in fondo è ciò che allinea la fila.**

   `margin-top: auto` mangia lo spazio che avanza nella mattonella: un
   prodotto col nome su una riga e uno col nome su due finiscono comunque col
   prezzo e il «+» alla stessa altezza. Senza, i «+» di una stessa fila
   cadevano ognuno a un'altezza diversa — che è il difetto che si nota
   guardando una griglia, molto più di quanto si notasse su una riga sola. */
.tk-prodotto-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.3rem;
}

/* Nella mattonella il prezzo torna allineato a sinistra: la colonna a destra
   larga 6rem serviva a incolonnare i prezzi di righe sovrapposte, e qui le
   righe sovrapposte non ci sono più. */
.tk-prodotto-piede > .tk-prodotto-prezzo {
    min-width: 0;
    text-align: left;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
}

.tk-mattonella .tk-ingredienti {
    margin: 0 0.85rem 0.85rem;
}