/* ==========================================================================
   Di Bona Furchett, Menu digitale MenuLampo
   Look "senape / tovaglia di paese" (Direzione 4, approvata dal titolare).
   Porta il gusto della demo bespoke (_demo-pages/index.html) SOPRA il template
   Jinja condiviso (builder/templates/menu.html): stesso DOM di ogni cliente,
   solo questo CSS cambia la pelle. Palette OKLCH "tutto giallo senape, scritte
   nere in evidenza"; font Alfa Slab One (insegna) + Kaushan Script (titoli
   sezione) + Bitter (testo). Font self-hosted (CSP font-src 'self').
   ========================================================================== */

/* ---- Font self-hosted (../fonts/*.woff2), subset latin + latin-ext ---- */

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfa-slab-one-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfa-slab-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kaushan-script-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kaushan-script-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bitter-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bitter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bitter-400-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bitter-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bitter-600-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/bitter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/bitter-800-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/bitter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Palette + token ---- */

:root {
  /* "tutto giallo senape, scritte nere in evidenza" (richiesta titolare 15/07) */
  --nero: oklch(0.20 0.02 80);
  --nero-morbido: oklch(0.30 0.03 78);
  --senape: oklch(0.80 0.125 85);
  --senape-chiaro: oklch(0.85 0.11 88);
  --senape-scuro: oklch(0.75 0.135 82);
  --senape-nav: oklch(0.83 0.12 86);
  --senape-footer: oklch(0.68 0.135 80);
  --linea: oklch(0.27 0.05 76);
  --punti: oklch(0.27 0.05 76 / 0.55);

  --font-display: "Alfa Slab One", Georgia, serif;
  --font-script: "Kaushan Script", "Bitter", cursive;
  --font-body: "Bitter", Georgia, serif;

  --leggibile: 660px;         /* larghezza di lettura confortevole */
  --nav-h: 3.1rem;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 0.6rem);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--nero);
  background: var(--senape);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-right: var(--safe-right);
  padding-left: var(--safe-left);
}

/* Tovaglia a quadretti = bordo vivo in cima alla pagina (come la demo) */
body::before {
  content: "";
  display: block;
  height: 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, oklch(0.27 0.05 76 / .5) 9px 18px),
    repeating-linear-gradient(0deg, transparent 0 9px, oklch(0.27 0.05 76 / .3) 9px 18px),
    var(--senape-chiaro);
}

img, picture { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--linea);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---- Selettore lingua (nascosto finché la lingua è una sola; riappare al
        go-live col multilingua) ---- */

.lang {
  position: absolute;
  top: calc(var(--safe-top) + .5rem);
  right: calc(var(--safe-right) + .6rem);
  z-index: 20;
  display: flex;
  gap: .1rem;
}
.lang:not(:has(a + a)) { display: none; }
.lang a {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .5rem;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nero);
}
.lang a[aria-current="true"] { border-bottom: 2px solid var(--linea); }

/* ---- Insegna (header.hero) ----
   Il template MenuLampo mostra il NOME solo via immagine logo_wordmark, qui
   assente (il logo definitivo arriva col contratto, al go-live). In staging
   l'insegna è testo iniettato via ::before, così il look senape regge SUBITO
   e senza toccare menu.json. Al go-live: logo_wordmark reale -> sostituisce. */

.hero {
  background: var(--senape-scuro);
  text-align: center;
  padding: 2.1rem 1.2rem 1.7rem;
  border-bottom: 4px solid var(--linea);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Occhiello sopra il nome ("Trattoria e Pizzeria"). Placeholder di staging:
   al go-live diventa concept_keywords reali. */
.hero::after {
  content: "Trattoria e Pizzeria";
  order: 1;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .22em;
  color: var(--nero);
  margin-bottom: .7rem;
}
.hero::before {
  content: "Di Bona\A Furchett";
  order: 2;
  white-space: pre-line;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 11vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--nero);
  text-shadow: 3px 3px 0 var(--linea);
}

/* logo_wordmark (se presente al go-live): rende superflua l'insegna testuale */
.hero__logo { order: 0; width: clamp(54px, 14vw, 86px); margin: 0 0 1rem; }
.hero__wordmark { order: 0; width: clamp(220px, 60vw, 340px); margin: 0 0 .6rem; }
.hero:has(.hero__wordmark)::before { content: none; }
.hero:has(.hero__wordmark)::after { content: none; }

.hero__tagline {
  order: 3;
  margin-top: .8rem;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nero);
}

.hero__meta {
  margin-top: .5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--nero-morbido);
}
.hero__meta .dot { display: none; }

/* ---- Navigazione sezioni (sticky) ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--senape-nav);
  border-bottom: 3px double var(--linea);
  padding-top: var(--safe-top);
}
.nav__inner {
  max-width: var(--leggibile);
  margin: 0 auto;
  display: flex;
  gap: .2rem;
  padding: .5rem .7rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav__inner::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--nero);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a.is-active { border-bottom-color: var(--linea); }

/* ---- Sezioni a bande di senape (come la demo) ---- */

.section {
  padding: 2.2rem 1.15rem 2.6rem;
  scroll-margin-top: var(--nav-h);
}
.section > * {
  max-width: var(--leggibile);
  margin-inline: auto;
}
#fritti    { background: var(--senape-chiaro); padding-top: 1.9rem; }
#pizze     { background: var(--senape); }
#antipasti { background: var(--senape-scuro); padding-top: 2.6rem; }
#primi     { background: var(--senape); }
#secondi   { background: var(--senape-chiaro); }
#bevande   { background: var(--senape-scuro); }

/* Titolo sezione: Kaushan Script, leggermente ruotato, con filetto sotto */
.section__head { text-align: center; margin-bottom: 1.4rem; }
.section-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1.1;
  color: var(--nero);
  transform: rotate(-2deg);
  text-wrap: balance;
}
.section__head::after {
  content: "";
  display: block;
  width: 78px;
  margin: .5rem auto 0;
  border-top: 3px double var(--linea);
}
.section__intro {
  margin: .6rem auto 0;
  max-width: 34ch;
  font-size: .88rem;
  font-style: italic;
  color: var(--nero-morbido);
}

/* Ogni sezione ha la sua "mano": rotazioni e filetti mai identici (come la demo) */
#pizze    .section-title { transform: rotate(-2deg);   font-size: clamp(2.3rem, 10vw, 2.9rem); }
#antipasti .section-title { transform: rotate(-1deg); }
#primi    .section-title { transform: rotate(-2.5deg); }
#secondi  .section-title { transform: rotate(-1.2deg); }
#fritti   .section-title { transform: rotate(-2deg); }
#bevande  .section-title { transform: rotate(-1.5deg); }
#antipasti .section__head::after { border-top: 1.5px solid var(--linea); width: 120px; }
#primi     .section__head::after { border-top: 4px solid var(--linea); width: 44px; }
#secondi   .section__head::after { border-top: 1.5px solid var(--linea); width: 120px; }
#bevande   .section__head::after { border-top: 4px solid var(--linea); width: 44px; }

/* ---- Sotto-gruppi (subhead: Le classiche / Le gourmet / Di terra / ...) ---- */

.subhead { margin-top: 2rem; }
.subhead:first-of-type { margin-top: 0; }
.subhead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--nero);
  display: inline-block;
  border-bottom: 2px solid var(--linea);
  padding-bottom: .12rem;
  margin-bottom: .9rem;
}
.subhead__intro {
  font-size: .88rem;
  font-style: italic;
  color: var(--nero-morbido);
  margin-bottom: .8rem;
}
.subhead__region {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nero-morbido);
  margin: 1.4rem 0 .3rem;
}

/* ---- Voci di menu: nome ... puntini ... prezzo, poi ingredienti e allergeni ---- */

.menu-list { list-style: none; }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .5rem;
  align-items: baseline;
  margin-bottom: 1.05rem;
}
.item:last-child { margin-bottom: 0; }

.item__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
}
.item__name {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Puntini di conduzione nome -> prezzo */
.item__head::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.6rem;
  align-self: baseline;
  border-bottom: 2px dotted var(--punti);
  transform: translateY(-.28em);
}

.item__price {
  grid-column: 2;
  grid-row: 1;
  font-weight: 800;
  color: var(--nero);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.item__desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: .1rem;
  font-size: .88rem;
  font-style: italic;
  color: var(--nero-morbido);
  max-width: 60ch;
}

.item__meta {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: .15rem;
}
.allergens {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nero-morbido);
}

/* Badge (nessuno in questo menu; stile minimo di riserva per il futuro) */
.badge {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16em .5em;
  border: 1px solid var(--linea);
  border-radius: 3px;
  white-space: nowrap;
}

/* Esaurito (nessuno ora; il worker può marcarlo via WhatsApp) */
.item--sold-out .item__price { display: none; }
.item__badge--soldout {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  font-size: .82rem;
  color: var(--linea);
  white-space: nowrap;
}
.item--sold-out .item__name { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---- Foto pausa / immagini sezione (se aggiunte in futuro) ---- */
.visual { margin: 1.4rem auto; max-width: var(--leggibile); border: 2px solid var(--linea); }
.visual img { width: 100%; }

/* ---- Avviso allergeni (attivo solo con legal_enabled, al go-live) ---- */
.allergen-notice {
  background: oklch(1 0 0 / .32);
  border-color: var(--linea) !important;
  color: var(--nero) !important;
}

/* ---- Link PDF: fuori uso online (distribuzione PDF solo via WhatsApp) ---- */
.menu-pdf { display: none; }

/* ---- Footer ---- */

.footer {
  background: var(--senape-footer);
  color: var(--nero);
  padding: 2rem 1.2rem calc(2.4rem + var(--safe-bottom));
  font-size: .86rem;
  line-height: 1.7;
  text-align: center;
}
.footer::before {
  content: "Buon appetito!";
  display: block;
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--nero);
  margin-bottom: 1rem;
}
.footer > * { max-width: 62ch; margin-inline: auto; }
.footer p { margin: 0 0 .5rem; }
.footer strong { font-weight: 800; }
.footer a { text-decoration: underline; }
.footer .sep {
  display: block;
  width: 46px; height: 0;
  border-top: 2px solid var(--linea);
  margin: 1.1rem auto;
}
.footer__legal { margin: .5rem 0; font-size: .8rem; }
.footer__powered { margin-top: .6rem; opacity: .85; }

/* ---- Banner lingua / ricarica (creati da menu.js; senape, discreti) ---- */

.lang-suggest {
  position: fixed;
  top: var(--safe-top);
  left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .55rem .85rem;
  background: var(--senape-nav);
  color: var(--nero);
  font-size: .9rem;
  border-bottom: 2px solid var(--linea);
  transform: translateY(-100%);
  transition: transform .26s ease, opacity .26s ease;
  opacity: 0;
}
.lang-suggest[data-visible="true"] { transform: translateY(0); opacity: 1; }
.lang-suggest[data-visible="false"] { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.lang-suggest--reload {
  top: auto;
  bottom: var(--safe-bottom);
  border-top: 2px solid var(--linea);
  border-bottom: 0;
  transform: translateY(100%);
}
.lang-suggest--reload[data-visible="true"] { transform: translateY(0); }
.lang-suggest--reload[data-visible="false"] { transform: translateY(100%); }
.lang-suggest__cta {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: var(--senape);
  background: var(--nero);
  padding: .5rem .85rem;
  border-radius: 999px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.lang-suggest__close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--nero);
  font-size: 1.4rem;
  line-height: 1;
  padding: .25rem .5rem;
  min-width: 36px; min-height: 36px;
}
@media (prefers-reduced-motion: reduce) {
  .lang-suggest { transition: opacity .15s ease; transform: none; }
  .lang-suggest[data-visible="false"] { transform: none; }
  .lang-suggest--reload { transform: none; }
}

/* ---- Stampa da browser (il senape non stampa bene: B/N leggibile) ---- */

@media print {
  body { background: #fff; color: #111; }
  body::before, .nav, .lang, .lang-suggest, .menu-pdf { display: none !important; }
  .hero { background: none; border-bottom: 2px solid #111; }
  .hero::before { color: #111; text-shadow: none; }
  .section { background: none !important; padding: 1rem 0; }
  .section-title { transform: none; color: #111; }
  .item { break-inside: avoid; }
  .footer { background: none; }
}

/* ---- Motion ridotto ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}