/* Font serviti dal nostro server: niente Google Fonts, niente dati inviati a terzi (GDPR) */
@font-face { font-family: Display; src: url(fonts/bebas-neue.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Testo; src: url(fonts/dm-sans.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: Corsivo; src: url(fonts/instrument-serif-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }

:root {
  --verde: #124A23;
  --verde-2: #0D3A1B;
  --verde-luce: #2E7A44;
  --crema: #F6F1E6;
  --carta: #FFFDF8;
  --inchiostro: #1B271E;
  --tenue: #5F6B60;
  --linea: #E3DBCB;
  --puntini: #CFC5B1;
  --crosta: #B4592A;
  --prezzo: #124A23;
  --chip: #EEF3EA;
  --ombra: 0 1px 2px rgb(27 39 30 / .06), 0 8px 24px -12px rgb(27 39 30 / .18);
  --r: 22px;
  --display: Display, "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --testo: Testo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corsivo: Corsivo, "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crema: #0E1711; --carta: #14211A; --inchiostro: #EEE9DD; --tenue: #A7B1A5;
    --linea: #24362A; --puntini: #33493A; --crosta: #E39A6C; --prezzo: #9DD8AC; --chip: #1B2C21;
    --ombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --crema: #0E1711; --carta: #14211A; --inchiostro: #EEE9DD; --tenue: #A7B1A5;
  --linea: #24362A; --puntini: #33493A; --crosta: #E39A6C; --prezzo: #9DD8AC; --chip: #1B2C21;
  --ombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--crema); color: var(--inchiostro);
  font: 400 16.5px/1.55 var(--testo); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--crosta); outline-offset: 3px; border-radius: 6px; }

/* ── Apertura ─────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; color: #F6F1E6; background: var(--verde);
  padding: 18px 0 clamp(150px, 22vw, 230px); overflow: hidden;
}
.hero::before { /* luce calda dal forno */
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 40%, rgb(255 214 150 / .16), transparent 70%),
              radial-gradient(40% 40% at 85% 10%, rgb(46 122 68 / .55), transparent 70%),
              radial-gradient(45% 45% at 10% 90%, rgb(8 40 18 / .7), transparent 70%);
}
.hero::after { /* trama sottile, come una tovaglia */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background-image: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, #fff 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.barra .luogo { display: inline-flex; align-items: center; gap: 8px; opacity: .85; text-decoration: none; }
.social { display: flex; gap: 6px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #F6F1E6; background: rgb(255 255 255 / .08); transition: background .2s; }
.social a:hover { background: rgb(255 255 255 / .18); }
.hero-centro { display: grid; justify-items: center; text-align: center; padding-top: clamp(28px, 6vw, 56px); }
.logo { width: clamp(220px, 46vw, 340px); height: auto; color: #fff; filter: drop-shadow(0 10px 30px rgb(0 0 0 / .25)); animation: entra .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { position: absolute; }
.claim, .motto, .intro h2, .cat-foto h2, .galleria-testa p { text-wrap: balance; }
.claim { font: italic 400 clamp(24px, 4.4vw, 34px)/1.15 var(--corsivo); margin-top: 22px; color: #F3E7CF; animation: entra .9s .12s cubic-bezier(.2,.7,.2,1) both; }
.tipo { margin-top: 10px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; opacity: .75; animation: entra .9s .2s cubic-bezier(.2,.7,.2,1) both; }
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; animation: entra .9s .28s cubic-bezier(.2,.7,.2,1) both; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 15.5px/1 var(--testo); text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-pieno { background: #F6F1E6; color: var(--verde); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .5); }
.btn-vuoto { color: #F6F1E6; border: 1.5px solid rgb(246 241 230 / .35); }
.btn-vuoto:hover { background: rgb(255 255 255 / .08); border-color: rgb(246 241 230 / .6); }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

/* bordo smerlato in fondo all'apertura, come la cornice dell'insegna */
.smerlo { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--crema);
  -webkit-mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% / 28px 100%; mask: radial-gradient(14px at 50% 0, #0000 98%, #000) 50% / 28px 100%; }

/* tris di foto a cavallo dell'apertura */
.vetrina { position: relative; z-index: 2; margin-top: clamp(-200px, -19vw, -120px); max-width: 940px; }
.vetrina ul { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(10px, 2vw, 22px); align-items: end; }
.vetrina li { border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 50px -24px rgb(10 30 15 / .55); background: var(--carta); }
.vetrina li img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vetrina li:nth-child(1) { transform: rotate(-3deg) translateY(10px); }
.vetrina li:nth-child(3) { transform: rotate(3deg) translateY(10px); }
.vetrina li:nth-child(2) img { aspect-ratio: 4 / 4.6; }

.intro { text-align: center; padding: clamp(40px, 7vw, 72px) 0 8px; }
.intro p.occhiello { font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--crosta); font-weight: 600; }
.intro h2 { font: 400 clamp(46px, 9vw, 84px)/.92 var(--display); letter-spacing: .01em; margin-top: 10px; color: var(--verde); }
:root[data-theme="dark"] .intro h2 { color: var(--inchiostro); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .intro h2 { color: var(--inchiostro); } }
.intro .sotto { font: italic 400 clamp(20px, 3vw, 24px)/1.3 var(--corsivo); color: var(--tenue); margin-top: 10px; }

/* ── Navigazione categorie + ricerca ─────────────────── */
.nav { position: sticky; top: 0; z-index: 20; margin-top: 28px;
  background: color-mix(in srgb, var(--crema) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.nav.staccata { border-color: var(--linea); box-shadow: 0 8px 20px -18px rgb(0 0 0 / .4); }
.nav .wrap { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.pillole { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
.pillole::-webkit-scrollbar { display: none; }
.pillole a { display: block; white-space: nowrap; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--tenue); scroll-snap-align: start; transition: background .2s, color .2s; }
.pillole a:hover { color: var(--inchiostro); background: var(--chip); }
.pillole a.attiva { background: var(--verde); color: #F6F1E6; }
.cerca { position: relative; flex: none; }
.cerca input {
  width: 46px; height: 44px; padding: 0 0 0 42px; border-radius: 999px; border: 1.5px solid var(--linea);
  background: var(--carta); color: var(--inchiostro); font: 500 15px var(--testo); cursor: pointer;
  transition: width .3s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.cerca input::placeholder { color: var(--tenue); opacity: 0; transition: opacity .2s; }
.cerca input:focus, .cerca.piena input { width: min(280px, 62vw); cursor: text; outline: none; border-color: var(--verde-luce); }
.cerca input:focus::placeholder { opacity: 1; }
.cerca .ico { position: absolute; left: 13px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--tenue); width: 19px; height: 19px; }
.vuoto { display: none; text-align: center; padding: 56px 0 8px; color: var(--tenue); font: italic 22px var(--corsivo); }
.vuoto.si { display: block; }

/* ── Categorie ───────────────────────────────────────── */
.categoria { padding-top: clamp(48px, 8vw, 88px); }
.vuoto + .categoria { padding-top: 24px; }
.cat-foto { position: relative; border-radius: var(--r); overflow: hidden; background: var(--verde); box-shadow: var(--ombra); }
.cat-foto > img:first-child { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 760px) { .cat-foto > img:first-child { aspect-ratio: 21 / 8; } }
.cat-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(9 30 15 / .88), rgb(9 30 15 / .35) 45%, transparent 75%); }
.cat-foto .foto2 { position: absolute; z-index: 1; right: clamp(14px, 3vw, 32px); top: clamp(14px, 3vw, 32px); width: clamp(110px, 24%, 260px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--carta); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .5); }
.cat-foto figcaption { position: absolute; z-index: 1; left: clamp(18px, 4vw, 40px); right: 18px; bottom: clamp(16px, 3.4vw, 34px); color: #F6F1E6; }
.num { display: inline-block; font: 600 12px var(--testo); letter-spacing: .28em; padding: 5px 10px; border: 1px solid rgb(246 241 230 / .4); border-radius: 999px; margin-bottom: 10px; }
.cat-foto h2 { font: 400 clamp(46px, 8.5vw, 88px)/.9 var(--display); letter-spacing: .01em; }
.motto { font: italic 400 clamp(19px, 2.6vw, 25px)/1.25 var(--corsivo); color: #F0E4CB; margin-top: 6px; }
.nota-cat { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--chip); color: var(--inchiostro); font-size: 14.5px; font-weight: 500; }
.nota-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--crosta); flex: none; }

.gruppo { margin-top: 30px; }
.gruppo-titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 12px; border-bottom: 2px solid var(--verde); margin-bottom: 6px; }
.gruppo-titolo span:first-child { font: 400 32px/1 var(--display); letter-spacing: .02em; color: var(--verde); }
:root[data-theme="dark"] .gruppo-titolo span:first-child { color: var(--prezzo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gruppo-titolo span:first-child { color: var(--prezzo); } }
:root[data-theme="dark"] .gruppo-titolo { border-color: var(--puntini); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gruppo-titolo { border-color: var(--puntini); } }
.gruppo-titolo .sotto { font: italic 19px var(--corsivo); color: var(--tenue); }

.lista { column-gap: 56px; }
.lista > li { break-inside: avoid; }
@media (min-width: 860px) { .lista { columns: 2; } }
.voce { padding: 16px 0 15px; border-bottom: 1px solid var(--linea); }
.riga { display: flex; align-items: baseline; gap: 10px; }
.nome { font: 650 17.5px/1.3 var(--testo); letter-spacing: -.005em; }
.puntini { flex: 1; min-width: 18px; height: 1px; background-image: radial-gradient(circle, var(--puntini) 1.1px, transparent 1.3px); background-size: 7px 3px; background-repeat: repeat-x; translate: 0 -4px; }
.prezzo { font: 700 17.5px/1 var(--testo); font-variant-numeric: tabular-nums lining-nums; color: var(--prezzo); white-space: nowrap; }
.valuta { font-weight: 500; font-size: .82em; margin-right: 3px; opacity: .8; }
.unita { font-weight: 500; font-size: .78em; color: var(--tenue); margin-left: 1px; }
.desc { color: var(--tenue); font-size: 15px; line-height: 1.45; margin-top: 4px; max-width: 46ch; }
.opzioni { margin-top: 7px; display: grid; gap: 3px; }
.opzioni li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--tenue); }
.opzioni li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--crosta); }
.ast { color: var(--crosta); font-weight: 700; font-size: .78em; margin-left: 1px; line-height: 0; }

/* Sfilatini: i nomi degli dèi in grande */
.lista-dei { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); margin-top: 24px; }
.dio { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; background: var(--carta); border: 1px solid var(--linea); box-shadow: var(--ombra); overflow: hidden; }
.dio::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--verde); }
.dio-nome { font: 400 46px/.95 var(--display); letter-spacing: .03em; color: var(--verde); }
:root[data-theme="dark"] .dio-nome { color: var(--prezzo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dio-nome { color: var(--prezzo); } }
.dio .desc { margin: 8px 0 16px; flex: 1; }
.dio .prezzo { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--chip); }

/* Kebab */
.lista-kebab .voce { padding: 20px 0; }
.lista-kebab .nome { font-size: 20px; }
.lista-kebab .prezzo { font-size: 22px; }
.condimenti { margin-top: 26px; padding: clamp(20px, 4vw, 32px); border-radius: var(--r); background: var(--carta); border: 1px solid var(--linea); box-shadow: var(--ombra); }
.condimenti h3 { font: 400 34px/1 var(--display); letter-spacing: .02em; }
.cond-label { margin: 18px 0 10px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--chip); font-size: 14.5px; font-weight: 500; }

/* Menù Baby */
.lista-baby { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 18px; }
.baby { padding: 20px 22px; border-radius: 18px; background: var(--carta); border: 1.5px dashed var(--puntini); }
.baby .riga { justify-content: space-between; }
.baby .nome { font: 400 30px/1 var(--display); letter-spacing: .03em; }
.baby .prezzo { font-size: 21px; }

.nascosto { display: none !important; }

/* ── Galleria ────────────────────────────────────────── */
.galleria { padding-top: clamp(64px, 10vw, 110px); }
.galleria-testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
.galleria-testa h2 { font: 400 clamp(40px, 7vw, 64px)/.95 var(--display); letter-spacing: .01em; }
.galleria-testa p { font: italic 21px var(--corsivo); color: var(--tenue); }
.striscia { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(16px, (100% - 1120px) / 2) 18px; scrollbar-width: thin; scrollbar-color: var(--puntini) transparent; }
.striscia li { flex: none; width: min(72vw, 340px); scroll-snap-align: center; border-radius: 18px; overflow: hidden; box-shadow: var(--ombra); background: var(--carta); }
.striscia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.striscia li:hover img { transform: scale(1.04); }

/* ── Info e contatti ─────────────────────────────────── */
.info { position: relative; margin-top: clamp(64px, 10vw, 110px); background: var(--verde); color: #F6F1E6; padding: clamp(64px, 9vw, 100px) 0 40px; }
.info::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px; background: var(--crema);
  -webkit-mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; }
.info-griglia { display: grid; gap: 40px; }
@media (min-width: 860px) { .info-griglia { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 64px; } }
.info h2 { font: 400 clamp(48px, 8vw, 80px)/.92 var(--display); }
.info .claim2 { font: italic 24px/1.3 var(--corsivo); color: #F0E4CB; margin-top: 10px; }
.contatti { display: grid; gap: 10px; margin-top: 28px; }
.contatti a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); text-decoration: none; transition: background .2s; }
.contatti a:hover { background: rgb(255 255 255 / .12); }
.contatti .ico { width: 22px; height: 22px; color: #F3D9A8; }
.contatti small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.contatti strong { font-weight: 600; font-size: 16.5px; }
.riquadro { border-radius: var(--r); background: var(--verde-2); padding: clamp(22px, 4vw, 32px); border: 1px solid rgb(255 255 255 / .08); }
.riquadro + .riquadro { margin-top: 16px; }
.riquadro h3 { font: 400 30px/1 var(--display); letter-spacing: .03em; margin-bottom: 10px; }
.riquadro p { font-size: 15px; opacity: .85; }
.legenda { display: grid; gap: 8px; margin-top: 4px; font-size: 15px; }
.legenda .ast { color: #F3B48A; font-size: 1em; }
details.allergeni summary { cursor: pointer; font-weight: 600; margin-top: 14px; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: #F3D9A8; }
details.allergeni summary::-webkit-details-marker { display: none; }
details.allergeni summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .2s; }
details.allergeni[open] summary::after { transform: rotate(45deg); }
details.allergeni ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; opacity: .9; columns: 2; }
.recensione { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stelle { display: inline-flex; gap: 2px; color: #F3C25B; }
.piede { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: start; font-size: 13.5px; color: rgb(246 241 230 / .78); }
.legale { display: grid; gap: 6px; max-width: 760px; }
.legale p { margin: 0; }
.privacy summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.privacy p { margin-top: 8px; max-width: 70ch; }
.piede button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Barra azioni (solo telefono) ────────────────────── */
.dock { display: none; }
@media (max-width: 759px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--verde-2) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5); transition: translate .35s cubic-bezier(.2,.7,.2,1); }
  .dock.via { translate: 0 140%; }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 16px; color: #F6F1E6; text-decoration: none; font-size: 12px; font-weight: 600; }
  .dock a:active { background: rgb(255 255 255 / .1); }
  .dock .ico { width: 22px; height: 22px; }
  .vetrina ul { grid-template-columns: .8fr 1.2fr .8fr; }
  .hero .btn-vuoto.solo-largo { display: none; }
}
@media print { .nav, .dock, .galleria, .vetrina, .azioni { display: none !important; } .hero { padding-bottom: 30px; } }