/* I Giardini di Manù — pagina del menù (si apre dal QR sul tavolo: telefono prima di tutto).
   Ricalca il menù stampato del locale (verde bosco e oro, pagine color lino, la brace, il rosso delle pizze):
   ogni sezione è una «pagina» appoggiata sulla tovaglia a quadretti del sito. Usa i token di base.css. */

.mn {
  --bosco: hsl(132 14% 28%);
  --bosco-s: hsl(134 17% 20%);
  --oro-m: hsl(42 53% 55%);
  --oro-c: hsl(42 62% 74%);
  --pomodoro: hsl(8 58% 33%);
  --brace: hsl(18 16% 8%);
  --cacao: hsl(24 26% 13%);
  --carta: hsl(40 38% 97%);
  padding-bottom: var(--s-a);
  /* la tovaglia: vichy leggerissimo, le pagine ci stanno sopra */
  background:
    linear-gradient(90deg, hsl(26 28% 32% / .045) 50%, transparent 50%) 0 0 / 28px 28px,
    linear-gradient(hsl(26 28% 32% / .045) 50%, transparent 50%) 0 0 / 28px 28px,
    var(--lino);
}

/* fascia «menù di prova»: compare solo finché il menù è una bozza */
.mn-bozza { margin: 0; padding: 10px var(--gut); background: var(--oro-d); color: var(--bianco); text-align: center; font: 600 .9rem/1.35 var(--f-txt); }
.mn-bozza strong { font-family: var(--f-sc); font-weight: 400; letter-spacing: .08em; font-size: 1rem; margin-right: 6px; }

/* ── copertina: la prima pagina del menù stampato ── */
.mn-testa {
  position: relative; isolation: isolate; text-align: center; color: var(--lino);
  padding: 28px var(--gut) 26px;
  background:
    repeating-linear-gradient(90deg, hsl(0 0% 100% / .035) 0 1px, transparent 1px 5px),
    radial-gradient(120% 90% at 50% 0%, hsl(132 14% 33%), var(--bosco) 55%, var(--bosco-s));
}
.mn-emblema { display: block; width: 88px; height: 88px; margin: 0 auto 10px; }
.mn-emblema img { width: 100%; height: 100%; object-fit: contain; }
.mn-testa h1 { margin: 0; color: var(--oro-c); font: 400 clamp(2.4rem, 2rem + 2.4vw, 3.4rem)/1 var(--f-mano); letter-spacing: 0; }
.mn-h-picc { display: block; margin-bottom: 6px; color: var(--bianco); font: 400 clamp(1.55rem, 1.3rem + 1.4vw, 2.2rem)/1.05 var(--f-sc); letter-spacing: .06em; }
.mn-sopra { margin: 14px 0 0; color: var(--oro-c); font: 700 .8rem/1 var(--f-txt); letter-spacing: .32em; text-transform: uppercase; }
.mn-sopra::before, .mn-sopra::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin: 0 12px; background: currentColor; opacity: .7; }
.mn-intro { margin: 10px auto 0; max-width: 40ch; font-size: .95rem; color: hsl(40 30% 90%); }
.mn-intro a { color: var(--oro-c); }

/* ── indice a chip: resta agganciato sotto la testata del sito (64px) ── */
.mn-indice { position: sticky; top: 64px; z-index: 40; background: hsl(38 33% 96% / .92); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid hsl(26 28% 32% / .14); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mn-indice::-webkit-scrollbar { display: none; }
.mn-indice ul { display: flex; gap: 8px; list-style: none; margin: 0 auto; padding: 8px var(--gut); width: max-content; min-width: 100%; justify-content: flex-start; }
@media (min-width: 1100px) { .mn-indice ul { justify-content: center; } }
.mn-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid hsl(132 14% 28% / .35); background: var(--bianco); color: var(--ink); font: 700 .95rem/1 var(--f-txt); white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--st), color .2s var(--st), border-color .2s var(--st), transform .2s var(--st); }
.mn-indice a:hover { border-color: var(--bosco); color: var(--bosco); }
.mn-indice a:active { transform: scale(.97); }
.mn-indice a[aria-current="true"] { background: var(--bosco); border-color: var(--bosco); color: var(--lino); }

/* ── le pagine ── */
.mn-corpo { max-width: 720px; padding-top: 18px; display: grid; gap: 16px; }
.mn-sez {
  --fg: var(--ink); --fg2: var(--muted); --tit: var(--bosco); --pr: var(--oro-d); --cornice: hsl(42 53% 45% / .75); --puntini: hsl(26 28% 32% / .45);
  position: relative; isolation: isolate; scroll-margin-top: 124px;
  padding: 40px 26px 34px; color: var(--fg); background: var(--carta);
  box-shadow: var(--ombra);
}
@media (min-width: 560px) { .mn-sez { padding: 48px 48px 40px; } }
/* cornice d'oro dentro la pagina */
.mn-sez::before { content: ""; position: absolute; inset: 10px; z-index: -1; border: 1px solid var(--cornice); pointer-events: none; }

/* titolo: maiuscole spaziate e il trattino d'oro sotto, come in carta */
.mn-sez h2 { margin: 0 0 22px; text-align: center; color: var(--tit); font: 400 clamp(1.5rem, 1.25rem + 1.3vw, 2.1rem)/1.1 var(--f-sc); letter-spacing: .2em; text-wrap: balance; }
.mn-sez h2::after { content: ""; display: block; width: 64px; height: 3px; margin: 14px auto 0; background: var(--oro-m); }
.mn-mano { display: block; margin-bottom: .06em; color: var(--oro-m); font: 400 clamp(2.4rem, 2rem + 2vw, 3.2rem)/1 var(--f-mano); letter-spacing: 0; text-transform: none; }
.mn-sez h2.mn-h-mano { font: 400 clamp(2.5rem, 2.1rem + 2.2vw, 3.4rem)/1.1 var(--f-mano); letter-spacing: 0; }

.mn-nota { margin: -8px 0 10px; text-align: center; font-size: .92rem; font-style: italic; color: var(--fg2); }
.mn-voci { list-style: none; margin: 0; padding: 0; }
.mn-v { padding: 11px 0; }
.mn-v + .mn-v { border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }

/* nome ........ prezzo */
.mn-nome { font: 400 1.16rem/1.28 var(--f-tit); letter-spacing: 0; margin: 0; text-wrap: pretty; color: var(--fg); }
.mn-riga { display: flex; align-items: baseline; align-items: last baseline; gap: 8px; }
.mn-n { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mn-p { flex: 1 1 12px; min-width: 12px; height: 1px; border-bottom: 2px dotted var(--puntini); transform: translateY(-4px); }
.mn-prezzo { font: 400 1.2rem/1.2 var(--f-tit); color: var(--pr); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-desc { margin: 3px 0 0; font-size: .95rem; line-height: 1.45; font-style: italic; color: var(--fg2); max-width: 52ch; }

/* più formati (birra 0,3 / 0,5) */
.mn-varianti { list-style: none; margin: 6px 0 0 14px; padding: 0; display: grid; gap: 4px; }
.mn-var { font: 400 1rem/1.3 var(--f-txt); color: var(--fg); }
.mn-var .mn-n { font-weight: 600; }
.mn-var .mn-prezzo { font-size: 1.08rem; }

/* tag e allergeni */
.mn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; margin: 7px 0 0; padding: 0; }
.mn-tag { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cornice); color: var(--pr); font: 700 .74rem/1.3 var(--f-txt); text-transform: uppercase; letter-spacing: .07em; }
.mn-all > span[aria-hidden] { display: inline-flex; gap: 5px; }
.mn-all b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; border: 1.5px solid currentColor; color: var(--pr); font: 700 .8rem/1 var(--f-txt); font-variant-numeric: tabular-nums; }

/* foto vera del locale dentro la pagina */
.mn-foto { margin: 0 0 22px; }
.mn-foto picture, .mn-foto img { display: block; width: 100%; }
.mn-foto img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 1px var(--cornice), 0 14px 30px -18px hsl(0 0% 0% / .55); }
.mn-foto figcaption { margin-top: 8px; text-align: center; font-size: .88rem; font-style: italic; color: var(--fg2); }

/* ── i toni delle pagine ── */
/* verde bosco, cornice dritta (antipasti, bibite) */
.mn-verde { --fg: var(--bianco); --fg2: hsl(40 30% 88%); --tit: var(--bianco); --pr: var(--oro-c); --puntini: hsl(42 62% 74% / .5);
  background: repeating-linear-gradient(90deg, hsl(0 0% 100% / .03) 0 1px, transparent 1px 5px), var(--bosco); }

/* lino con la grana della carta (stuzzicheria, pizze bianche) */
.mn-lino { background:
  radial-gradient(hsl(30 30% 40% / .05) 1px, transparent 1.4px) 0 0 / 7px 7px,
  var(--carta); }

/* lino con gli angoli intagliati e i punti d'oro (primi) */
.mn-cornice::before, .mn-foglie::before {
  inset: 12px; border-color: var(--oro-m);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 15px, #000 15.5px) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 15px, #000 15.5px) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 15px, #000 15.5px) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 15px, #000 15.5px) 100% 100% / 51% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 15px, #000 15.5px) 0 0 / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 15px, #000 15.5px) 100% 0 / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 15px, #000 15.5px) 0 100% / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 15px, #000 15.5px) 100% 100% / 51% 51% no-repeat;
}
.mn-cornice::after, .mn-foglie::after {
  content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, var(--oro-m) 2.5px, #0000 3px) 0 0 / 16px 16px no-repeat,
    radial-gradient(circle, var(--oro-m) 2.5px, #0000 3px) 100% 0 / 16px 16px no-repeat,
    radial-gradient(circle, var(--oro-m) 2.5px, #0000 3px) 0 100% / 16px 16px no-repeat,
    radial-gradient(circle, var(--oro-m) 2.5px, #0000 3px) 100% 100% / 16px 16px no-repeat;
}
.mn-cornice { background:
  radial-gradient(hsl(30 30% 40% / .05) 1px, transparent 1.4px) 0 0 / 7px 7px,
  var(--carta); }

/* la brace: notte, carbone acceso in fondo, doppia riga bianca (secondi) */
.mn-brace { --fg: var(--bianco); --fg2: hsl(30 20% 82%); --tit: var(--bianco); --pr: hsl(36 85% 70%); --cornice: hsl(0 0% 100% / .55); --puntini: hsl(36 85% 70% / .45);
  background:
    radial-gradient(70% 38% at 18% 104%, hsl(18 95% 48% / .42), transparent 70%),
    radial-gradient(60% 34% at 86% 102%, hsl(32 95% 52% / .34), transparent 70%),
    radial-gradient(90% 60% at 50% 0%, hsl(20 8% 16%), transparent 70%),
    var(--brace); }
.mn-brace::after { content: ""; position: absolute; inset: 15px; z-index: -1; border: 1px solid hsl(0 0% 100% / .22); pointer-events: none; }

/* contorni: verde con i rami di foglie d'oro, come la pagina stampata */
.mn-foglie { --fg: var(--bianco); --fg2: hsl(40 30% 88%); --tit: var(--bianco); --pr: var(--oro-c); --puntini: hsl(42 62% 74% / .5);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23c5a048' stroke-opacity='.28' stroke-width='1.2'%3E%3Cpath d='M-10 150C30 120 50 70 40 20M120 190c10-50 40-80 70-90'/%3E%3C/g%3E%3Cg fill='%23c5a048' fill-opacity='.2'%3E%3Cpath d='M40 60c-16-6-22-20-18-30 14 4 22 16 18 30z'/%3E%3Cpath d='M44 92c12-12 28-12 34-4-10 10-24 12-34 4z'/%3E%3Cpath d='M30 124c-14-8-18-22-12-30 12 6 18 18 12 30z'/%3E%3Cpath d='M150 118c10-14 26-16 32-8-8 12-22 14-32 8z'/%3E%3Cpath d='M128 150c-6-16 0-30 10-32 4 14-2 26-10 32z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 180px,
    var(--bosco); }

/* pizze rosse: il rosso pomodoro della carta */
.mn-pomodoro { --fg: var(--bianco); --fg2: hsl(20 40% 90%); --tit: var(--bianco); --pr: var(--oro-c); --cornice: hsl(42 62% 74% / .6); --puntini: hsl(42 62% 74% / .5);
  background: radial-gradient(hsl(0 0% 0% / .08) 1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(100% 80% at 80% 0%, hsl(8 55% 38%), var(--pomodoro)); }
.mn-pomodoro .mn-mano { color: var(--oro-c); }

/* dessert: cacao, titolo tutto a mano */
.mn-dolce { --fg: var(--bianco); --fg2: hsl(30 25% 84%); --tit: var(--bianco); --pr: var(--oro-c); --cornice: hsl(42 62% 74% / .5);
  text-align: center;
  background: radial-gradient(80% 70% at 50% 40%, hsl(26 30% 22%), var(--cacao)); }
.mn-dolce h2::after { display: none; }
.mn-dolce .mn-v { padding: 0; }
.mn-dolce .mn-riga { justify-content: center; }
.mn-dolce .mn-nome { font-size: 1.35rem; }
.mn-dolce .mn-desc { margin-inline: auto; }

/* ── allergeni, note, fine ── */
.mn-leg { margin-top: 10px; padding: 22px 20px 20px; background: var(--carta); box-shadow: var(--ombra); scroll-margin-top: 124px; }
.mn-leg h2 { font-size: var(--t-3); color: var(--bosco); margin-bottom: 8px; }
.mn-chiedi { margin: 0 0 12px; color: var(--ink); }
.mn-leg-d summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--bosco); font-weight: 700; list-style: none; -webkit-tap-highlight-color: transparent; }
.mn-leg-d summary::-webkit-details-marker { display: none; }
.mn-leg-d summary::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .25s var(--st); }
.mn-leg-d[open] summary::before { transform: rotate(45deg); }
.mn-leg-d summary:focus-visible { outline: 2px solid var(--bosco); outline-offset: 3px; border-radius: 4px; }
.mn-leg-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .mn-leg-l { grid-template-columns: 1fr 1fr; } .mn-leg { padding: 26px 28px 24px; } }
.mn-leg-l li { display: flex; align-items: center; gap: 10px; font-size: .95rem; line-height: 1.3; }
.mn-leg-l b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--bosco); color: var(--bosco); font: 700 .8rem/1 var(--f-txt); font-variant-numeric: tabular-nums; }
.mn-note { margin-top: 4px; text-align: center; font-size: .92rem; color: var(--muted); }
.mn-note p { margin: 0 0 6px; }
.mn-fine { margin: 12px 0 0; text-align: center; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mn-indice a, .mn-leg-d summary::before { transition: none; } }