/* Santé — identità di marca.
   ⚠️ 21/09, secondo giro: la veste era verde scuro. Sbagliato, e la prova è il
   loro stesso menu di carta — è CREMA con verde e oro. Il verde bottiglia è il
   fondo del LOGO, non del menu. Qui si legge anche al sole, che a Tenerife non
   è un dettaglio: il chiaro riflette meno del nero su uno schermo di telefono.

   I colori vengono dal logo e dalle fotografie del menu stampato. Un posto solo. */

@import url("stile/caratteri.css");

:root {
  /* La carta */
  --carta:      #F7F4EA;  /* il foglio: crema caldo, non bianco */
  --carta-alta: #FFFFFF;  /* le superfici rialzate: schede, carte */
  --sabbia:     #EFE7D6;  /* i riquadri caldi del menu stampato */
  --riga:       #E2D9C3;  /* filetti chiari, bordi discreti */

  /* I verdi (dal logo) — ora sono l'INCHIOSTRO, non il fondo */
  --verde:        #14362A;  /* testo principale, e fondo delle fasce scure */
  --verde-alto:   #1E4A38;
  --verde-medio:  #2F6049;
  --verde-tenue:  #3A5546;  /* testo secondario — 7,6:1 sul bianco.
                               ⚠️ era #5A7A69: passava il minimo di legge (4,3:1)
                               e NON bastava al sole. Lo dice controlla-leggibilita.mjs. */
  --salvia:       #8AA68E;  /* ornamenti, bordi vegetali */

  /* Gli ori (dalla scritta del logo) */
  --oro:        #B79A3F;  /* filetti, ornamenti, cose grandi */
  --oro-scuro:  #7A631F;  /* ⚠️ l'UNICO oro ammesso sul testo piccolo (5,3:1) */
  --oro-chiaro: #E0CE85;  /* solo sopra il verde scuro */

  /* Il regalo (25/09): la carta rossa di un pacco di Natale, col nastro d'oro.
     Solo per il regalo — il bottone della prima schermata e «apri il tuo regalo».
     Sul rosso ci va solo la crema, e grande: lo controlla controlla-leggibilita.mjs. */
  --natale:       #A8132B;
  --natale-alto:  #CC1F38;
  --natale-scuro: #7A0C1E;

  /* Misure */
  --raggio:   16px;
  --raggio-s: 11px;
  --gutter:   18px;
  --ombra:      0 2px 10px rgba(20, 54, 42, .07);
  --ombra-alta: 0 14px 40px rgba(20, 54, 42, .16);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* ── La scala ──────────────────────────────────────────────────────────────
   Un totem si legge in tre secondi da un metro di distanza. La gerarchia si fa
   con la GRANDEZZA e col PESO, mai con un carattere «elegante»: il serif a
   contrasto alto che c'era prima aveva le aste sottili, e al sole sparivano.
   Le misure sono minimi misurati, non gusti — vedi controlla-leggibilita.mjs. */
:root {
  --t-reparto:  clamp(27px, 7.4vw, 34px);  /* il titolo di un reparto */
  --t-nome:     19px;                      /* il nome di un piatto */
  --t-prezzo:   19px;
  --t-corpo:    17px;
  --t-desc:     15px;                      /* mai sotto: e' il minimo leggibile */
  --t-micro:    11px;                      /* solo maiuscoletto spaziato */
  --dito:       48px;                      /* bersaglio del dito, non 44 */
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--verde);
  font: 400 var(--t-corpo)/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* i numeri dei prezzi tutti della stessa larghezza: una colonna di prezzi
     storta si legge peggio, e su un menu i numeri contano */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: inherit;
  font-weight: 800;
  color: var(--verde);
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0 0 .5rem;
}

a { color: var(--oro-scuro); text-decoration: none; }

/* La nota del padrone di casa.
   ⚠️ Prima era in corsivo a mano (Caveat). Bello su un biglietto d'auguri,
   illeggibile su un menu che si guarda in piedi: e' stato il primo pezzo che il
   capo ha bocciato. Ora e' testo normale, con il peso a fare il mestiere che
   faceva lo stile. */
.nota-casa {
  font-size: var(--t-desc);
  font-weight: 500;
  line-height: 1.5;
  /* ⚠️ Non oro: l'oro su fondo chiaro sta a 5,3:1, sotto la soglia che ci siamo
     dati per il testo corrente. L'accento della marca resta nella freccina
     dorata accanto, che e' un disegno e non deve essere letta. */
  color: var(--verde-tenue);
}

.filetto { width: 3.5rem; height: 1px; background: var(--oro); border: 0; margin: 1.25rem auto; }

/* L'ornamento della marca: un filetto d'oro con un rombo al centro, come i
   separatori stampati sul menu. Si usa sopra i titoli dei reparti. */
.ornamento {
  display: flex; align-items: center; gap: 10px;
  color: var(--oro); margin: 0 0 .55rem;
}
.ornamento::before, .ornamento::after {
  content: ""; height: 1px; background: currentColor; flex: 1; opacity: .5;
}
.ornamento span {
  width: 6px; height: 6px; background: currentColor;
  transform: rotate(45deg); flex: none;
}

/* C'è per chi legge con la voce, non si vede sullo schermo */
.solo-voce {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Il fondo ─────────────────────────────────────────────────────────────
   Non più aurore: due veli caldissimi, sabbia e salvia, che danno alla carta
   la profondità di un foglio vero senza chiedere niente al telefono. */
.aurora { position: fixed; inset: 0; z-index: -2; background: var(--carta); }
.aurora::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(72rem 46rem at 18% -8%, rgba(183,154,63,.13), transparent 62%),
    radial-gradient(60rem 42rem at 96% 104%, rgba(138,166,142,.16), transparent 62%);
}

/* Il ramo d'ulivo del menu stampato, in un angolo. È la loro firma. */
.ramo {
  position: fixed; z-index: -1; width: min(46vw, 230px); opacity: .18;
  pointer-events: none; color: var(--salvia);
}
.ramo-alto { top: -12px; left: -26px; transform: rotate(-8deg); }
.ramo-basso { bottom: -18px; right: -30px; transform: rotate(168deg); }

.icona { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

/* Il bersaglio del dito: 44px è il minimo, sotto si sbaglia a premere. */
button, .bottone { font-family: inherit; min-height: var(--dito); cursor: pointer; }
:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 3px; border-radius: 6px; }

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


/* ⚠️ 21/09 — QUESTE REGOLE STAVANO IN porta.css, E IL MENU NON LO CARICA.
   Risultato: il cassetto delle lingue si apriva col riquadro nero del browser
   e le righe sballate. Un pezzo usato da due pagine non puo' stare nel foglio
   di UNA delle due. Qui e' in comune, e chi aggiunge una terza pagina lo trova.

   Stessa forma per la lingua e per la storia: un gesto solo da imparare. */
.cassetto {
  width: 100%; max-width: 31rem; margin: auto auto 0;
  border: 0; border-radius: var(--raggio) var(--raggio) 0 0;
  background: var(--carta-alta); color: var(--verde);
  padding: 10px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  box-shadow: var(--ombra-alta);
  animation: sali .28s cubic-bezier(.2,.9,.3,1);
  max-height: 88svh; overflow-y: auto;
}
.cassetto::backdrop { background: rgba(20, 54, 42, .42); backdrop-filter: blur(3px); }
@keyframes sali { from { transform: translateY(100%); } to { transform: translateY(0); } }

.maniglia {
  display: block; width: 42px; height: 4px; margin: 4px auto 16px;
  border: 0; border-radius: 3px; background: var(--riga); padding: 0; min-height: 4px;
}
.cassetto h2 { font-size: 22px; text-align: center; margin-bottom: 1rem; }

/* Con nove lingue l'elenco a una colonna diventa un rotolo: due colonne e si
   vedono quasi tutte senza scorrere. */
.righe-lingua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 359px) { .righe-lingua { grid-template-columns: 1fr; } }
.riga-lingua {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 13px; border-radius: var(--raggio-s);
  background: var(--carta); border: 1px solid var(--riga); color: var(--verde);
  font-size: 16px; font-weight: 600; text-align: left; min-height: var(--dito);
}
.riga-lingua .bandiera { font-size: 1.15rem; line-height: 1; flex: none; }
.riga-lingua .nome-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-lingua[aria-current="true"] { border-color: var(--oro); background: var(--sabbia); font-weight: 600; }
.riga-lingua .segno { color: var(--oro-scuro); flex: none; }

.storia { font-size: 16px; line-height: 1.7; color: var(--verde); }
.firma { text-align: right; margin-top: 1rem; font-size: 17px; font-weight: 700; color: var(--oro-scuro); }