/* La pagina pubblica del menù, impaginazione "carta" (livello A, tema base).
   Nata dalla carta del sito d'esempio Trattoria Dellarole (siti/demo/esempio-ristorante):
   stessi ritmi, ma i colori e i font arrivano dal tema del locale come variabili, messe
   nell'HTML dal server (solo esadecimali validati e nomi da lista: tema.ts).
   Regole del gate: niente emoji, hover solo con puntatore fine, movimento sotto i 300 ms,
   funziona senza JS (qui di JS non ce n'è). */

:root{
  --sfondo:#5a1621;--carta:#f7efe1;--inchiostro:#2b1814;--seppia:#6e4a3c;--accento:#e2b24c;--chiaro:#f4e6d4;
  --f-titoli:'Bodoni Moda',Didot,'Times New Roman',serif;
  --f-testo:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mano:'Kalam','Segoe Print',cursive;
  --ardesia:#232826;--gesso:#f1eee6;
  --scuro:color-mix(in srgb,var(--sfondo) 65%,#000);
  --bordo-carta:color-mix(in srgb,var(--inchiostro) 14%,var(--carta));
  --chip:color-mix(in srgb,var(--inchiostro) 9%,var(--carta));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sfondo);color:var(--chiaro);font:400 1.0625rem/1.6 var(--f-testo);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:var(--f-titoli);font-weight:700;line-height:1.08;margin:0;text-wrap:balance}
p{text-wrap:pretty}
section[id]{scroll-margin-top:12px}
.largo{max-width:1040px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
:focus-visible{outline:3px solid var(--accento);outline-offset:3px}

.nastro{background:var(--scuro);color:var(--chiaro);font-size:.8125rem;text-align:center;padding:.5rem 1rem;line-height:1.45}
.nastro a{color:#fff}

.copertina{text-align:center;padding:clamp(36px,6vw,64px) 0 clamp(24px,4vw,40px)}
/* le lingue (?lingua=): link semplici in cima, quella in uso sottolineata */
.lingue{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin:-12px 0 22px;font-size:.9375rem}
.lingue a{color:var(--chiaro);text-decoration:none;padding:8px 2px;border-bottom:1.5px solid transparent}
.lingue a[aria-current]{border-bottom-color:var(--accento);font-weight:700}
@media (hover:hover) and (pointer:fine){.lingue a:hover{border-bottom-color:currentColor}}
.copertina .tipo{font:600 .9375rem/1 var(--f-testo);letter-spacing:.22em;text-transform:uppercase;color:var(--accento);margin:0}
.copertina h1{font-size:clamp(2.6rem,9vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-.01em;margin:12px 0 0;color:var(--chiaro)}
.filetto{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px auto 0;color:var(--accento)}
.filetto::before,.filetto::after{content:"";width:min(18vw,140px);height:1px;background:currentColor}
.filetto svg{width:16px;height:16px;fill:currentColor}
.copertina .presentazione{font-size:clamp(1.0625rem,2vw,1.25rem);max-width:48ch;margin:18px auto 0}
.copertina .dettagli{margin:14px 0 0;font-size:.9375rem;color:var(--chiaro)}
.copertina .dettagli a{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.copertina .azioni{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.copertina .azioni a{display:inline-block;padding:9px 16px;border:1.5px solid var(--chiaro);border-radius:999px;text-decoration:none;font-weight:700;font-size:.9375rem;color:var(--chiaro)}

/* la lavagna del giorno: ardesia e gesso, colori fissi come una lavagna vera */
.lavagna{max-width:600px;margin:clamp(20px,4vw,36px) auto 0;padding:12px;background:#7a5234;border-radius:6px;box-shadow:0 26px 40px -18px rgba(0,0,0,.55);transform:rotate(-1.2deg)}
.lavagna .ardesia{background:var(--ardesia);border-radius:3px;padding:22px 28px 24px;color:var(--gesso);font-family:var(--f-mano);text-align:left}
.lavagna h2{font:700 2rem/1.1 var(--f-mano);color:var(--gesso);text-align:center;margin:0 0 14px}
.lavagna ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lavagna li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:1.25rem;line-height:1.4}
.lavagna li .voce{flex:1}
.lavagna li small{display:block;font-size:.9375rem;color:#cfccc2}
.lavagna li b{white-space:nowrap;font-weight:700}

.menu-sezione{padding:clamp(28px,5vw,48px) 0 clamp(60px,8vw,100px)}
.carta{background:var(--carta);color:var(--inchiostro);border-radius:4px;padding:clamp(24px,5vw,56px) clamp(18px,5vw,64px);max-width:1040px;margin:0 auto}
.carta-testa{text-align:center}
.carta-testa h2{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800}
.carta-testa p{margin:10px auto 0;color:var(--seppia);max-width:52ch}
.portate{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.portate a{display:inline-block;padding:9px 16px;border:1.5px solid var(--inchiostro);border-radius:999px;text-decoration:none;font-weight:700;font-size:.9375rem;transition:background-color .15s ease-out,color .15s ease-out}
@media (hover:hover) and (pointer:fine){.portate a:hover{background:var(--inchiostro);color:var(--carta)}}
.testa-menu{margin-top:30px;text-align:center}
.testa-menu .titolo-menu{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800}
.testa-menu .orario-menu{margin:6px 0 0;color:var(--seppia);font-size:.9375rem}
.testa-menu .orario-menu b{color:var(--inchiostro)}
.colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,5vw,72px);margin-top:32px}
.portata{margin-bottom:18px;scroll-margin-top:16px;break-inside:avoid}
.portata h3{font-size:1.75rem;font-weight:800;text-align:center;padding-bottom:12px;margin-bottom:6px;border-bottom:1.5px solid var(--inchiostro)}
.portata .nota{margin:0 0 6px;text-align:center;color:var(--seppia);font-size:.9375rem}
.piatti{list-style:none;margin:0;padding:0}
.piatto{padding:14px 0 10px;border-bottom:1px solid var(--bordo-carta)}
.piatto .riga{display:flex;align-items:baseline;gap:10px}
.piatto h4{font-size:1.1875rem;font-weight:700}
.piatto .punti{flex:1;border-bottom:1.5px dotted color-mix(in srgb,var(--inchiostro) 45%,var(--carta));transform:translateY(-4px);min-width:16px}
.piatto .prezzo{font:700 1.1875rem/1 var(--f-titoli);white-space:nowrap;text-align:right}
.piatto .prezzo small{font:600 .75rem/1 var(--f-testo);color:var(--seppia);margin-right:4px}
.piatto .prezzi-piu span+span::before{content:"·";margin:0 6px;color:var(--seppia);font-family:var(--f-testo)}
/* più prezzi (calice, bottiglia, mezza): se non stanno accanto al nome vanno sotto, a destra,
   e vanno a capo fra un prezzo e l'altro. Prima schiacciavano il nome su quattro righe e su
   mobile l'ultimo usciva dalla carta (visto col menù "cattivo" del 2026-09-29). */
.piatto .riga:has(.prezzi-piu){flex-wrap:wrap;row-gap:4px}
.piatto .prezzi-piu{margin-left:auto;display:inline-flex;flex-wrap:wrap;justify-content:flex-end;row-gap:4px;white-space:normal}
.piatto .prezzi-piu span{white-space:nowrap}
.piatto p{margin:3px 0 0;color:var(--seppia);font-size:.9375rem}
.piatto .etichetta{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--seppia);border-radius:999px;font:600 .6875rem/1.4 var(--f-testo);color:var(--seppia);vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}
.allergeni{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
/* allergeni in parole accanto al piatto (i numeri restano solo nella legenda) */
.allergeni span{display:inline-block;padding:1px 9px;border-radius:11px;background:var(--chip);color:var(--inchiostro);font-size:.75rem;font-weight:600;line-height:1.6}
.piatto--foto{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.piatto .foto{width:96px;height:72px;object-fit:cover;border-radius:4px;background:var(--chip)}
.piatto-testo{min-width:0}
.piatto--finito .foto{filter:grayscale(1);opacity:.6}
/* finito oggi: più chiaro ma leggibile (al 45% era 2,8:1, sotto il gate); lo dicono la riga barrata e la targhetta */
.piatto--finito h4,.piatto--finito .prezzo,.piatto--finito p{color:color-mix(in srgb,var(--inchiostro) 65%,var(--carta))}
.piatto--finito h4{text-decoration:line-through;text-decoration-thickness:1px}
.piatto .finito{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:var(--inchiostro);color:var(--carta);font:700 .75rem/1.6 var(--f-testo)}
.legenda{margin-top:16px;padding-top:20px;border-top:1.5px solid var(--inchiostro)}
.legenda h3{font-size:1.25rem;margin-bottom:12px}
.legenda ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px}
.legenda li{display:flex;align-items:center;gap:8px;font-size:.9375rem}
.legenda li span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--chip);font-size:.75rem;font-weight:700;flex:none}
.legenda p{margin:14px 0 0;color:var(--seppia);font-size:.9375rem;max-width:56ch}

.orari{padding:clamp(16px,3vw,28px) 0 clamp(48px,7vw,80px)}
.orari h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px;color:var(--chiaro)}
.orari p{white-space:pre-line;margin:0;max-width:56ch}

.piede{background:var(--scuro);padding:36px 0;font-size:.9375rem}
.piede .largo{display:grid;gap:12px}
.piede b{font:800 1.5rem/1 var(--f-titoli);color:var(--chiaro)}
.piede p{margin:0}
/* la firma (decisione 8): una riga piccola, coi colori del locale, l'ancora è il nome */
.piede .firma{font-size:.8125rem;color:var(--chiaro)}
.piede .firma a{color:inherit}

.avviso{max-width:520px;margin:20vh auto;text-align:center;padding:0 20px}

@media (max-width:900px){.colonne{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  body{font-size:1rem}
  .nastro{font-size:.75rem}
  .lavagna{padding:9px}
  .lavagna .ardesia{padding:18px 16px 20px}
  .lavagna li{font-size:1.125rem}
  .portata h3{font-size:1.5rem}
}