/* ============================================================
   donna Anna — menu digitale
   Maiolica della costiera. Nessuna risorsa esterna.
   ============================================================ */

/* ---------- Tipografia self-hosted ---------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/ebgaramond-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/ebgaramond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Corsivo vero: senza questo il browser inclina il tondo da solo e le
   grazie si sfaldano. Serve ai sottotitoli e alla riga dei vini. */
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/ebgaramond-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* La firma del logo. Il file contiene solo le lettere di "Donna Anna":
   se il nome cambia, il font va rigenerato. */
@font-face {
  font-family: 'Great Vibes';
  src: url('fonts/greatvibes-sub.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Ruoli colore ---------- */
:root {
  --blu-cobalto:  #1B3A6B;   /* testo principale, cornice, titoli */
  --blu-maiolica: #2A5CA8;   /* decori, stati attivi */
  --blu-secondo:  #34558A;   /* descrizioni — 6,1:1 su crema */
  --blu-spento:   #5A6E90;   /* voci esaurite — 4,6:1 su crema */
  --oro:          #D3A029;   /* filetti, rosoni, accenti */
  --oro-velo:     #FBF3DF;   /* fondo dello stato attivo */
  --crema:        #F6F0E2;   /* fondo pagina */
  --smalto:       #FDFBF5;   /* fondo del cartiglio */
  --ombra:        rgba(27, 58, 107, .14);   /* blu desaturato, mai nero */

  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --titoli: 'Cinzel', 'Trajan Pro', 'Optima', Georgia, serif;
  --firma: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
  --blu-firma: #2A4278;      /* il blu della scritta sul logo */

  --bordo: 12px;                     /* fascia a mattonelle */
  --barra-h: 62px;
  --gutter: 16px;
}

@media (min-width: 560px) { :root { --bordo: 22px; --gutter: 22px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--blu-cobalto);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  font-kerning: normal;
  padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px) + 12px);
  -webkit-tap-highlight-color: rgba(42, 92, 168, .12);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pagina {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px calc(var(--bordo) + var(--gutter)) 8px;
}

/* ---------- Bordo a mattonelle ---------- */
.bordo {
  position: fixed; top: 0;
  width: var(--bordo);
  /* height esplicita: un elemento sostituito con top/bottom non si stira,
     ripiegherebbe sull'altezza intrinseca di 150px */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.bordo-sx { left: 0; }
.bordo-dx { right: 0; }
.bordo rect { fill: url(#nastro); }
@media (min-width: 560px) { .bordo rect { fill: url(#mattonelle); } }

/* ---------- Scelta della lingua ---------- */
.lingue {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(var(--bordo) + 10px);
  z-index: 4;
}

.lingua-tasto {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--smalto);
  border: 1.5px solid var(--blu-cobalto);
  border-radius: 999px;
  box-shadow: 0 2px 8px var(--ombra);
  cursor: pointer;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--blu-cobalto);
}
.lingua-tasto:focus-visible { outline: 2px solid var(--blu-maiolica); outline-offset: 2px; }

.lingua-bandiera {
  display: block;
  width: 24px; height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(27, 58, 107, .35);
  flex: none;
}
.lingua-bandiera svg { display: block; width: 100%; height: 100%; }
.lingua-sigla { line-height: 1; }
.lingua-freccia {
  width: 10px; height: 7px; flex: none;
  --segno: var(--blu-cobalto);
  transition: transform 200ms ease;
}
.lingue.aperto .lingua-freccia { transform: rotate(180deg); }

.lingua-elenco {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--smalto);
  border: 1.5px solid var(--blu-cobalto);
  border-radius: 12px;
  box-shadow: 0 8px 22px var(--ombra);
}
.lingua-elenco[hidden] { display: none; }

.lingua-voce {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: .98rem;
  color: var(--blu-cobalto);
  text-align: left;
}
.lingua-voce[aria-selected='true'] {
  background: var(--oro-velo);
  box-shadow: inset 0 0 0 1px rgba(211, 160, 41, .55);
  font-weight: 600;
}
.lingua-voce:focus-visible { outline: 2px solid var(--blu-maiolica); outline-offset: -2px; }

/* La testata scende sotto il tasto della lingua, che è fisso in alto.
   Quanto basta a non toccarlo: la cornice del cartiglio parte più in basso
   del suo riquadro, quindi 48px lasciano già aria. */
.pagina { padding-top: 48px; }

/* ---------- Cartiglio ---------- */
/* Compatto apposta: la testata è un sipario, non la scena. Più è raccolta,
   più piatti si leggono senza scorrere. */
.cartiglio {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 3px 10px var(--ombra));
}
@media (min-width: 560px) { .cartiglio { max-width: 360px; } }
.cartiglio-telaio,
.cartiglio-contenuto { grid-area: 1 / 1; }

.cartiglio-telaio { width: 100%; height: auto; display: block; }
.cartiglio-fondo  { fill: var(--smalto); }

.filetto { fill: none; stroke-linejoin: round; }
.filetto-blu { stroke: var(--blu-cobalto); stroke-width: 2.6; }
.filetto-oro { stroke: var(--oro);         stroke-width: 1.5; }

/* L'elemento firma: la scena si monta una volta per sessione, a strati.
   Prima i contorni si disegnano, poi lo smalto affiora, poi la firma
   si scrive da sinistra a destra come col pennino, e per ultima l'onda
   si apre dal centro. Le voci del menu non aspettano: entrano per conto
   loro appena sotto. */
.cartiglio.dipinge .filetto {
  stroke-dasharray: var(--lunghezza);
  stroke-dashoffset: var(--lunghezza);
  animation: disegna-filetto 900ms cubic-bezier(.35, .1, .25, 1) forwards;
}
.cartiglio.dipinge .filetto-oro { animation-delay: 300ms; animation-duration: 900ms; }
.cartiglio.dipinge .cartiglio-fondo { animation: emergi 420ms ease-out 620ms both; }
.cartiglio.dipinge .nome-ristorante {
  animation: scrivi 950ms cubic-bezier(.42, .05, .3, 1) 900ms both;
}
.cartiglio.dipinge .sottotitolo { animation: emergi 400ms ease-out 1650ms both; }
.cartiglio.dipinge .onda { animation: apri-onda 550ms cubic-bezier(.2, .6, .3, 1) 1750ms both; }

@keyframes disegna-filetto { to { stroke-dashoffset: 0; } }
@keyframes emergi { from { opacity: 0; } to { opacity: 1; } }
/* i margini negativi tengono dentro aste e svolazzi del corsivo */
@keyframes scrivi {
  from { clip-path: inset(-20% 100% -30% -10%); }
  to   { clip-path: inset(-20% -10% -30% -10%); }
}
@keyframes apri-onda {
  from { opacity: 0; transform: scaleX(.35); }
  to   { opacity: 1; transform: none; }
}

.cartiglio-contenuto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9% 13%;
  text-align: center;
}

/* Il nome del locale, scritto come sul logo e sulle card ai tavoli:
   "Donna Anna" in corsivo inglese, una riga sola, blu della firma.
   Niente letter-spacing: in un corsivo le lettere si toccano, spaziarle
   spezzerebbe i collegamenti dei tratti. */
.nome-ristorante {
  margin: 0;
  font-family: var(--firma);
  font-weight: 400;
  font-size: clamp(2.2rem, 11.8vw, 3.05rem);
  line-height: 1.25;          /* le aste del corsivo salgono e scendono molto */
  word-spacing: .14em;        /* il respiro fra le due parole, come sul logo */
  color: var(--blu-firma);
  white-space: nowrap;
}

.sottotitolo {
  font-family: var(--titoli);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blu-secondo);
  margin: .55rem 0 0;
}

.onda { width: 44%; max-width: 140px; margin-top: .3rem; --tratto: var(--oro); }

/* ---------- Sezioni ---------- */
.sezione { display: none; }
.sezione.attiva {
  display: block;
  animation: entra-sezione 250ms ease-out both;
}
@keyframes entra-sezione {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.sezione.esce { animation: esci-sezione 125ms ease-in both; }
@keyframes esci-sezione {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-5px); }
}

/* ---------- Categorie ---------- */
.categoria + .categoria { margin-top: 34px; }

.categoria-titolo {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-align: center;
  color: var(--blu-cobalto);
  margin: 0 0 .2rem;
  text-indent: .19em;          /* compensa la spaziatura sull'ultima lettera */
}

.categoria-sottotitolo {
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  color: var(--blu-secondo);
  margin: .1rem auto .9rem;
  max-width: 34ch;
  line-height: 1.4;
}

.categoria-filetto {
  width: 64px; height: 0;
  border-top: 1px solid var(--oro);
  margin: .45rem auto .75rem;
}

.voci { list-style: none; margin: 0; padding: 0; }
.separatore { display: block; }

/* Elenco compatto: bibite, vini, contorni. Niente fregio fra una riga e
   l'altra, un filetto sottile a separare e meno aria, così una carta da
   trentacinque etichette resta una lista da scorrere con l'occhio. */
.categoria.compatta .voce + .voce { border-top: 1px solid rgba(211, 160, 41, .28); }
.categoria.compatta .voce-corpo { padding: 11px 2px; }
.categoria.compatta .voce-meta { margin-top: .06rem; font-size: .88rem; }

/* visibile ai soli lettori di schermo */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Voce ---------- */
.voce { opacity: 1; }

.voce-corpo {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 2px;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
  border-radius: 6px;
}
button.voce-corpo { cursor: pointer; }
button.voce-corpo:focus-visible {
  outline: 2px solid var(--blu-maiolica);
  outline-offset: 2px;
}

.voce-riga {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rosone-bullet {
  flex: none;
  width: 15px; height: 15px;
  align-self: flex-start;
  margin-top: .32em;
  --petalo: var(--oro);
  --cuore: var(--blu-maiolica);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.voce-nome {
  font-weight: 600;
  font-size: 1.03rem;
  line-height: 1.32;
}

/* Guida puntinata fra nome e prezzo. min-width 0: se il nome va a capo
   e occupa la riga, la guida si azzera invece di lasciare un moncone. */
.voce-guida {
  flex: 1 1 auto;
  align-self: flex-end;
  min-width: 0;
  height: 0;
  margin-bottom: .34em;
  border-bottom: 1px dotted rgba(42, 92, 168, .42);
}

.voce-prezzo {
  flex: none;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--blu-cobalto);
}
.voce-prezzo.segnaposto { color: var(--blu-spento); font-weight: 400; }

.voce-descrizione {
  margin: .18rem 0 0;
  padding-left: 23px;
  font-size: .955rem;
  line-height: 1.42;
  color: var(--blu-secondo);
}

.voce-meta {           /* produttore · zona · annata · formato */
  margin: .18rem 0 0;
  padding-left: 23px;
  font-size: .93rem;
  font-style: italic;
  color: var(--blu-secondo);
}

.asterisco { color: var(--blu-maiolica); font-weight: 600; }

/* marcatori dietetici */
.marcatori { display: inline-flex; gap: 5px; margin-left: 7px; vertical-align: -1px; }
.marcatore {
  width: 15px; height: 15px;
  --segno: var(--blu-maiolica);
  --sfondo: var(--crema);      /* nervature e sbarra si ritagliano sul fondo */
}
.marcatore.oro { --segno: var(--oro); }

/* voce non disponibile */
.voce.esaurito .voce-nome,
.voce.esaurito .voce-prezzo { text-decoration: line-through; }
.voce.esaurito .voce-nome,
.voce.esaurito .voce-prezzo,
.voce.esaurito .voce-descrizione,
.voce.esaurito .voce-meta { color: var(--blu-spento); }
.voce.esaurito .rosone-bullet {
  --petalo: var(--blu-spento);
  --cuore: var(--blu-spento);
  opacity: .55;
}
.voce.esaurito .marcatore { --segno: var(--blu-spento); }
.esaurito-nota {
  display: inline-block;
  margin-left: 7px;
  font-size: .8rem;
  font-family: var(--titoli);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu-spento);
  vertical-align: 1px;
}

/* ---------- Allergeni: espansione al tap ---------- */
.voce-allergeni {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
  padding-left: 23px;
}
.voce[data-espansa='true'] .voce-allergeni { grid-template-rows: 1fr; }
.voce-allergeni > div { overflow: hidden; }

.allergeni-lista {
  margin: 0;
  padding: .42rem .6rem .5rem;
  border-left: 2px solid var(--oro);
  background: var(--smalto);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--blu-secondo);
  opacity: 0;
  transition: opacity 200ms ease;
}
.voce[data-espansa='true'] .allergeni-lista { opacity: 1; }
.allergeni-lista b {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu-cobalto);
  display: block;
  margin-bottom: .1rem;
}

/* ---------- Fregio divisore ---------- */
.fregio {
  display: block;
  width: 108px; height: 26px;
  margin: 2px auto;
  --tratto: var(--oro);
  --losanga: var(--blu-maiolica);
  --losanga-cuore: var(--crema);
}

/* ---------- Conchiglia ---------- */
.conchiglia {
  display: block;
  width: 74px; height: 40px;
  margin: 18px auto 0;
  --guscio: var(--smalto);
  --contorno: var(--blu-cobalto);
  --costole: var(--oro);
  --cerniera: var(--blu-maiolica);
}

/* ---------- Note di legge e piè di pagina ---------- */
.chiusura-sezione {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(211, 160, 41, .5);
}
.nota {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--blu-secondo);
  margin: 0 0 .6rem;
}
.nota .etichetta {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu-cobalto);
}
.coperto {
  font-size: .95rem;
  font-weight: 600;
  color: var(--blu-cobalto);
  margin: 0 0 .7rem;
}
.recensioni {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: .2rem 0 .5rem;
  font-size: .95rem;
  color: var(--blu-maiolica);
}
.recensioni:focus-visible { outline: 2px solid var(--blu-maiolica); outline-offset: 2px; }

.firma {
  margin: .6rem 0 .2rem;
  text-align: center;
  font-size: .87rem;
  color: var(--blu-secondo);
}
.firma a {
  display: inline-block;
  min-height: 44px;
  padding: 13px 6px;
  color: var(--blu-secondo);
  text-decoration-color: rgba(52, 85, 138, .45);
}
.firma a:focus-visible { outline: 2px solid var(--blu-maiolica); outline-offset: 2px; }

.stato {
  text-align: center;
  color: var(--blu-secondo);
  font-style: italic;
  padding: 2rem 1rem;
}

/* ---------- Barra fissa ---------- */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  background: var(--smalto);
  border-top: 2px solid var(--blu-cobalto);
  box-shadow: 0 -3px 12px var(--ombra);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 2px;
  height: 1px; background: var(--oro);
}

.barra-voce {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--barra-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 3px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu-maiolica);
  position: relative;
}
.barra-voce + .barra-voce::before {
  content: '';
  position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(211, 160, 41, .55);
}
.barra-voce .segno {
  width: 13px; height: 13px;
  --petalo: var(--blu-maiolica);
  --cuore: var(--blu-maiolica);
  opacity: .4;
  transition: opacity 250ms ease, transform 250ms ease;
}

/* La sezione attiva è marcata con l'oro; il testo resta cobalto per il contrasto. */
.barra-voce[aria-current='true'] {
  color: var(--blu-cobalto);
  background: var(--oro-velo);
  box-shadow: inset 0 -3px 0 var(--oro);
}
.barra-voce[aria-current='true'] .segno {
  --petalo: var(--oro);
  --cuore: var(--blu-cobalto);
  opacity: 1;
  transform: rotate(15deg);
}
.barra-voce:focus-visible { outline: 2px solid var(--blu-maiolica); outline-offset: -3px; }

/* ---------- Animazioni delle voci ---------- */
.anima .voce {
  opacity: 0;
  transform: translateY(8px);
}
.anima .voce.visibile {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease-out var(--ritardo, 0ms),
              transform 300ms ease-out var(--ritardo, 0ms);
}
.anima .voce .rosone-bullet {
  transition: transform 600ms ease-out var(--ritardo, 0ms);
}
.anima .voce.visibile .rosone-bullet { transform: rotate(15deg); }

/* ---------- Schermi stretti ---------- */
@media (max-width: 359px) {
  body { font-size: 17px; }
  :root { --gutter: 10px; }
  .voce-descrizione, .voce-meta { padding-left: 0; }
  .voce-allergeni { padding-left: 0; }
}

/* ---------- Rispetto delle preferenze di movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .anima .voce { opacity: 1; transform: none; }
  .cartiglio .filetto { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .rosone-bullet { transform: none !important; }
}