/* Le pagine pubbliche di un ristorante dentro ceers.
   Stessa lingua visiva della vetrina — un prodotto solo, non due. */
@import url('/vetrina.css');

/* Il velo di colore di Ceers (`main::before` in vetrina.css, macchie viola e
   azzurre del logo) serve solo alle pagine di Ceers. Le pagine del locale
   hanno i colori scelti dal ristoratore: lì il nostro colore non c'entra e
   può stonare (Lorenzo, 08/11/2026). */
main::before { content: none; }

/* `hidden` deve vincere su qualunque display: — trovato il 17/09/2026: dopo
   «Prenota il tavolo» il blocco del passo 1 (.pr-azione, display:flex) restava
   a schermo con «Continua» e «Nessun orario buono?» sotto «Tavolo confermato». */
[hidden] { display: none !important; }

.testa {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.5rem; background: rgba(251,252,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(14,16,22,.06);
  position: sticky; top: 0; z-index: 50;
}
 /* In testa c'è il NOME DEL RISTORANTE, non il nostro: queste pagine sono le
    sue. Il marchio di ceers sta in fondo, e ci sta piccolo. */
.marchio {
  font-family: var(--display); font-weight: 600; font-size: 1.28rem;
  color: var(--inchiostro); text-decoration: none; letter-spacing: -.02em;
}
.con-marca {
  display: flex; align-items: center; gap: .4rem;
  color: var(--debole); font-size: .8rem; margin: 0 0 .6rem;
}

/* 04/11/2026 (Lorenzo: «meno spazio vuoto in alto»): 1,5rem in cima invece di 3. */
main { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
main h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-bottom: .6rem; }
/* Il logo del locale sopra il suo nome (04/11/2026). Piccolo (Lorenzo: «logo
   più piccolo»): si riconosce, ma il nome resta la cosa più grande. */
.logo-locale { display: block; height: 52px; width: auto; max-width: 160px;
               object-fit: contain; margin: 0 0 .7rem; }
.sottotitolo { color: var(--tenue); font-size: 1.08rem; margin: 0 0 2rem; }

footer { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 3rem; color: var(--debole); font-size: .84rem; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 1.2rem 0; }
th {
  text-align: left; font: 700 .92rem/1.2 var(--corpo); color: var(--testo);
  padding: .5rem .9rem .5rem 0; box-shadow: 0 1px 0 rgba(14,16,22,.08);
}
td { padding: .6rem .9rem .6rem 0; box-shadow: 0 1px 0 rgba(14,16,22,.05); color: var(--testo); }

/* ── il modulo di prenotazione ──────────────────────────────────────────────
   `prenota.css` è scritto bene: tutti i suoi colori passano da token del sito
   ospite (`--c-ink`, `--c-accent`, …) con un ripiego. Basta dichiararli e il
   componente adotta la lingua di ceers — nessuna riga del componente da
   toccare. È il motivo per cui i token si scrivono così. */
:root {
  --c-ink: var(--inchiostro);
  --c-muted: var(--tenue);
  --c-accent: var(--verde);
  --c-accent-ink: #fff;
  --font-label: var(--corpo);
  --font-display: var(--display);
}

/* Il componente nasce per stare dentro una sezione a tutta larghezza di un
   sito di ristorante. Qui vive in una colonna di lettura: gli si dà respiro
   e una superficie sua, altrimenti galleggia. */
.pr {
  background: var(--bianco); border-radius: var(--raggio-lg);
  padding: 1.8rem 1.6rem; box-shadow: var(--alza-2); margin-top: 1.5rem;
}
.pr-titolo { font-family: var(--display); }

/* ── INCORPORATO ─────────────────────────────────────────────────────────────
   La pagina vive dentro il sito di qualcun altro (`?incorpora=1`).
   Due regole, e nascono entrambe da un difetto dei moduli incorporati:
     · niente margini né fondo proprio — il riquadro deve sparire dentro la
       pagina che lo ospita, non sembrarci appoggiato sopra;
     · nessuna altezza minima — l'altezza la misura il contenuto e la comunica
       a chi ospita, quindi imporne una qui produrrebbe spazio vuoto in fondo. */
body.nudo { background: transparent; }
body.nudo main { max-width: none; margin: 0; padding: 0; }

/* ── la home del ristorante ─────────────────────────────────────────────── */
.casa { margin-top: 1.5rem; }
.casa-azioni { display: grid; gap: .75rem; max-width: 420px; }
.casa-azioni .btn { justify-content: center; width: 100%; }
.casa-tel { margin-top: 1.5rem; color: var(--tenue); }
.casa-tel a { color: var(--inchiostro); font-weight: 600; white-space: nowrap; }

/* Le pagine portate dal sito singolo (conferma, disdici, asporto, attesa…)
   hanno `padding-top:clamp(90px,12vh,150px)` scritto nell'attributo: là
   l'intestazione era fissa e copriva il contenuto. Qui l'intestazione occupa
   il suo spazio, e quel margine lasciava un buco vuoto in cima alla pagina. */
main > .section:first-child { padding-top: 0 !important; }