/*
  NOME DEL TUO RISTORANTE: esempio di sito WebLaunch per la ristorazione.

  Scritto a mano e senza librerie: deve aprirsi in fretta su un telefono
  con i dati mobili, perché è lì che lo apre chi riceve la nostra email
  (decisioni del 4 ott 2026, sezione 3.3: LCP sotto i 2,5 secondi).

  DOVE STA IL CSS. Questo file NON è tutto il CSS della demo.
  - La prima schermata (colori in :root, base, bottoni, fascetta, testata,
    barra fissa) sta dentro le pagine, nel loro <style>: un file a parte va
    scaricato prima di poter disegnare qualunque cosa, e Lighthouse lo
    contava come «render blocking» (150 ms persi sul telefono).
    Quel blocco è uguale in index.html e in menu.html: una regola che
    cambia lì va cambiata in tutte e due le pagine.
  - Sempre nel <style>: l'apertura c'è solo in index.html, il menù solo in
    menu.html.
  - Qui c'è il resto, cioè quello che sta sotto la piega e la finestra di
    prenotazione. Le pagine lo chiedono senza fermarsi ad aspettarlo,
    come il font dei titoli. I colori e le misure (var(--…)) vengono da
    :root nel <style> delle pagine.

  Si parte dal telefono e si allarga: i blocchi @media aggiungono, non
  tolgono. I pannelli si staccano dallo sfondo con l'ombra, non col bordo.
*/

/* ---------- Cosa si mangia ---------- */
.categorie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.categoria {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--bianco); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.categoria:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
.categoria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--crema-2); }
.categoria-testo { padding: 12px 14px 16px; }
.categoria h3 { font-size: 20px; }
.categoria p { margin: 4px 0 0; font-size: 14px; color: var(--inchiostro-70); line-height: 1.4; }
.categoria .prezzo { color: var(--pomodoro-scuro); font-weight: 700; }
.sotto-griglia { display: flex; justify-content: center; margin-top: 24px; }

/* ---------- Fascia a metà pagina ---------- */
.sezione-fascia { margin-bottom: 64px; }
.fascia {
  background: var(--pomodoro); color: #fff; border-radius: var(--raggio);
  padding: 32px 22px; box-shadow: var(--ombra-2);
  display: grid; gap: 18px;
}
.fascia h2 { font-size: clamp(28px, 6.6vw, 42px); }
.fascia p { margin: 8px 0 0; color: #fff; }
.fascia .btn-chiaro { color: var(--pomodoro-scuro); }

/* ---------- Birreria ---------- */
.scuro { background: var(--carbone); color: var(--su-scuro); }
.scuro .occhiello { color: var(--senape); }
.scuro .attacco { color: var(--su-scuro-70); }
.affianco { display: grid; gap: 28px; align-items: center; }
.foto-tonda { border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-scura); }
.foto-tonda img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spine { list-style: none; margin: 22px 0 0; padding: 0; display: grid; }
.spine li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
  padding: 12px 0; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);
}
.spine b { font-size: 17px; }
.spine span { grid-column: 1; font-size: 14px; color: var(--su-scuro-70); }
.spine .prezzi { font-style: normal; grid-column: 2; grid-row: 1 / span 2; text-align: right; font-variant-numeric: tabular-nums; color: var(--senape); font-weight: 700; font-size: 15px; line-height: 1.5; }
.nota-spine { font-size: 14px; color: var(--su-scuro-70); margin: 12px 0 0; }
.link-freccia { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; text-underline-offset: 4px; min-height: 44px; }
.link-freccia svg { width: 18px; height: 18px; }

/* ---------- Il locale ---------- */
.punti { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.punti li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.punti .tondo {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bianco); color: var(--pomodoro); box-shadow: var(--ombra-1);
}
.punti svg { width: 20px; height: 20px; }
.punti b { display: block; }
.punti p { margin: 2px 0 0; color: var(--inchiostro-70); font-size: 16px; }
.due-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.due-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raggio); box-shadow: var(--ombra-2); background: var(--crema-2); }
.due-foto img:last-child { margin-top: 36px; }

/* ---------- Dove siamo ---------- */
.sezione-chiara { background: var(--crema-2); }
.dove { display: grid; gap: 16px; margin-top: 28px; }
.mappa { border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-1); background: var(--crema); }
.mappa svg { display: block; width: 100%; height: auto; }
.schede { display: grid; gap: 12px; }
.scheda { background: var(--bianco); border-radius: var(--raggio); padding: 18px 20px; box-shadow: var(--ombra-1); }
.scheda h3 { font-family: var(--testo); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-70); margin-bottom: 6px; }
.scheda p { margin: 0; }
.orari { margin: 0; }
.orari dt { font-weight: 700; }
.orari dd { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.orari dd:last-child { margin-bottom: 0; }

/* ---------- Prenota (in fondo) ---------- */
.prenota-fondo { text-align: center; }
.prenota-fondo .attacco { margin-inline: auto; }
.prenota-fondo .btn { margin-top: 22px; }

/* ---------- Piede ---------- */
/* Sotto c'è la barra fissa del telefono: il piede si allunga di quanto è alta */
.piede { background: var(--carbone); color: var(--su-scuro-70); padding: 44px 0 calc(28px + var(--barra)); font-size: 15px; }
.piede .marchio { color: var(--su-scuro); }
.piede-righe { display: grid; gap: 14px; margin-top: 18px; }
.piede p { margin: 0; }
.piede a { color: var(--su-scuro); }
.esempio {
  margin-top: 30px; padding: 20px; border-radius: var(--raggio);
  background: var(--carbone-2); box-shadow: var(--ombra-scura);
  display: grid; gap: 14px; justify-items: start;
}
.esempio p { color: var(--su-scuro); }
.esempio small { display: block; color: var(--su-scuro-70); font-size: 13px; margin-top: 4px; }

/* ---------- Prenotazione del tavolo (finestra) ---------- */
/* Con la prenotazione aperta la pagina sotto resta ferma */
body:has(dialog[open]) { overflow: hidden; }
.foglio {
  width: 100%; max-width: 560px; max-height: 92svh; margin: auto auto 0; padding: 0;
  border: 0; border-radius: 24px 24px 0 0; background: var(--crema); color: var(--inchiostro);
  box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .6); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.foglio::-webkit-scrollbar { display: none; }
.foglio::backdrop { background: rgb(20 16 13 / .62); }
.foglio-testa {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px; background: var(--crema);
}
.foglio-testa h2 { font-size: 26px; }
.chiudi {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--bianco); box-shadow: var(--ombra-1);
}
.chiudi svg { width: 20px; height: 20px; }
.foglio form, .conferma { padding: 4px 20px 24px; }
.campo { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.campo legend, .campo > label, .etichetta { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.scelte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scelta { position: relative; display: block; }
.scelta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.scelta span {
  display: grid; place-items: center; min-height: 52px; padding: 6px 4px; border-radius: var(--raggio-s);
  background: var(--bianco); box-shadow: var(--ombra-1); text-align: center; line-height: 1.15;
  font-size: 15px; font-weight: 700; transition: background-color .15s ease, color .15s ease;
}
.scelta span small { display: block; font-size: 12px; font-weight: 500; color: var(--inchiostro-70); }
.scelta input:checked + span { background: var(--carbone); color: var(--su-scuro); }
.scelta input:checked + span small { color: var(--su-scuro-70); }
.scelta input:focus-visible + span { outline: 3px solid var(--senape); outline-offset: 2px; }
.scelta input:disabled + span { opacity: .45; box-shadow: none; background: transparent; }
.scelta input:disabled { cursor: not-allowed; }
.altra-data { margin-top: 10px; }
.altra-data[hidden] { display: none; }
.casella {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--raggio-s);
  background: var(--bianco); box-shadow: var(--ombra-1); font-size: 17px;
}
.passi { display: flex; align-items: center; gap: 12px; }
.passi button {
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bianco); box-shadow: var(--ombra-1); font-size: 26px; font-weight: 700; line-height: 1;
}
.passi button:disabled { opacity: .4; cursor: not-allowed; }
.passi output { min-width: 4.5em; text-align: center; font-family: var(--display); font-weight: 800; font-size: 24px; }
.errore { display: block; margin-top: 6px; color: var(--pomodoro-scuro); font-size: 14px; font-weight: 600; }
/* Vuota non occupa spazio, ma resta nella pagina: se sparisse del tutto
   (display: none) il lettore di schermo non annuncerebbe la scritta nel
   momento in cui compare. */
.errore:empty { margin: 0; }
.avviso { font-size: 13px; color: var(--inchiostro-70); text-align: center; margin: 12px 0 0; }
.invia { width: 100%; }
.conferma[hidden], .foglio form[hidden] { display: none; }
.conferma { text-align: center; }
.conferma .spunta {
  width: 64px; height: 64px; margin: 8px auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pomodoro); color: #fff; box-shadow: 0 14px 30px -12px rgb(196 64 42 / .8);
}
.conferma .spunta svg { width: 32px; height: 32px; }
.conferma h3 { font-size: 28px; }
.riepilogo {
  margin: 16px 0; padding: 16px; border-radius: var(--raggio-s); background: var(--bianco); box-shadow: var(--ombra-1);
  font-weight: 700; font-size: 18px; line-height: 1.4;
}
.conferma p { color: var(--inchiostro-70); }
.conferma .riepilogo { color: var(--inchiostro); }
.conferma .btn { width: 100%; margin-top: 10px; }

/* ---------- Comparsa allo scorrimento ----------
   La classe «attesa» la mette lo script, e solo a ciò che è sotto la
   piega: se lo script non arriva, la pagina resta tutta visibile. */
@media (prefers-reduced-motion: no-preference) {
  .rivela { transition: opacity .6s ease, transform .6s ease; }
  .rivela.attesa { opacity: 0; transform: translateY(18px); }
}

/* ---------- Telefono largo e tablet ---------- */
@media (min-width: 640px) {
  .categorie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fascia { grid-template-columns: 1fr auto; align-items: center; padding: 40px; }
  .schede { grid-template-columns: 1fr 1fr; }
  .scheda-larga { grid-column: 1 / -1; }
  .foglio { margin: auto; border-radius: 24px; max-height: 88vh; }
}

/* ---------- Computer ---------- */
@media (min-width: 960px) {
  .piede { padding-bottom: 28px; }
  .sezione-fascia { margin-bottom: 96px; }
  .affianco { grid-template-columns: 1fr 1fr; gap: 64px; }
  .affianco-giro > :first-child { order: 2; }
  .dove { grid-template-columns: 1.2fr 1fr; align-items: center; }
  .schede { grid-template-columns: 1fr; }
}