/* San Gallo Bistrot — sito ponte
   Crema, rosso insegna, tipografia serif. Due sole famiglie, self-hosted. */

/* ---------- font (self-hosted, nessuna terza parte) ----------
   Variabili sull'asse peso: un file copre tutti i pesi della famiglia.
   Sottoinsieme latin: sufficiente per l'italiano. Licenza SIL OFL,
   testo integrale in assets/fonts/LICENSE-*.txt */

@font-face{
  font-family:"EB Garamond";
  src:url(/assets/fonts/eb-garamond-latin-wght-normal.woff2) format("woff2-variations");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Jost";
  src:url(/assets/fonts/jost-latin-wght-normal.woff2) format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"EB Garamond";
  src:url(/assets/fonts/eb-garamond-latin-wght-italic.woff2) format("woff2-variations");
  font-weight:400 800;
  font-style:italic;
  font-display:swap;
}

/* ---------- token ---------- */

:root{
  /* colore */
  --crema:      #FDF8E7;
  --crema-scura:#F3E9D8;
  --rosso:      #C8393E;
  --rosso-cupo: #8E1B1F;
  --rosso-scuro:#761518;
  --ink:        #2B2320;
  --ink-soft:   #6E6058;
  --ink-medio:  #57493F;
  --riga:       rgba(43,35,32,.14);
  --riga-lieve: rgba(43,35,32,.07);

  /* tipografia — EB Garamond regge sia il testo corrente sia i titoli;
     Jost per etichette e interfaccia. */
  --display:   "EB Garamond", Georgia, "Times New Roman", serif;
  --testo:     "EB Garamond", Georgia, serif;
  --etichette: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* scala tipografica fluida: nessun salto tra 320px e 1440px */
  --step--2: clamp(.72rem, .69rem + .16vw, .8rem);
  --step--1: clamp(.82rem, .78rem + .22vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
  --step-1:  clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --step-2:  clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);

  /* spaziatura fluida, stessa logica */
  --space-2xs: clamp(.3rem, .28rem + .1vw, .4rem);
  --space-xs:  clamp(.5rem, .45rem + .25vw, .7rem);
  --space-s:   clamp(.75rem, .65rem + .5vw, 1.1rem);
  --space-m:   clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --space-l:   clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --space-xl:  clamp(2.5rem, 1.8rem + 3.4vw, 4rem);

  /* dimensioni icone */
  --icona-xs: clamp(.85rem, .82rem + .18vw, .95rem);
  --icona-s:  clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --icona-m:  clamp(1.6rem, 1.45rem + .7vw, 2.05rem);
  --icona-l:  clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --icona-xl: clamp(2.25rem, 2rem + 1.4vw, 3rem);
  --marchio:  clamp(3rem, 2.6rem + 1.6vw, 4rem);

  --wrap: 58rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* ---------- base ---------- */

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

body{
  margin:0;
  min-height:100svh;
  position:relative;
  background:var(--crema);
  color:var(--ink);
  font-family:var(--testo);
  font-size:var(--step-0);
  line-height:1.6;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}

/* Galletto decorativo in basso a sinistra.
   position:fixed non partecipa all'overflow del documento, quindi non
   serve overflow-x:hidden sul body per contenerlo. */
body::after{
  content:"";
  position:fixed;
  z-index:0;
  bottom:-4rem;
  left:-15rem;
  width:min(48vw,40rem);
  height:min(48vw,40rem);
  pointer-events:none;
  background:url(/assets/img/galletto.svg) bottom left / contain no-repeat;
  opacity:.10;
}

.page{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--rosso); outline-offset:4px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  padding:var(--space-xs) var(--space-s);
  background:var(--ink); color:var(--crema);
}
.skip:focus{ left:0; }

/* ---------- testata: logo e navigazione ---------- */

.site-head{
  max-width:var(--wrap);
  margin:0 auto;
  padding:var(--space-xl) var(--gutter) 0;
}

.logo{ margin:0 0 var(--space-l); }
.logo img{
  display:block;
  width:clamp(240px,26vw,400px);
  height:auto;
  margin:0 auto;
}

.site-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-xs) clamp(1.5rem,5vw,3.25rem);
  font-family:var(--etichette);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rosso);
}
.site-nav a{
  padding-bottom:var(--space-2xs);
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.site-nav a:hover,
.site-nav a[aria-current]{ border-color:var(--rosso); }

/* ---------- informazioni pratiche ---------- */

.info{
  max-width:var(--wrap);
  margin:0 auto;
  padding:var(--space-xl) var(--gutter) var(--space-l);
  display:grid;
  gap:var(--space-l);
}

/* Qui il breakpoint serve davvero: non cambia solo il numero di colonne,
   cambia la direzione dei separatori (da orizzontali a verticali), cosa
   che auto-fit non può esprimere. Una sola media query, mobile-first. */
.info-blocco + .info-blocco{
  border-top:1px solid var(--riga);
  padding-top:var(--space-l);
}
@media (min-width:48rem){
  .info{ grid-template-columns:repeat(3,1fr); gap:0; }
  .info-blocco{ padding-inline:clamp(1rem,3vw,2rem); }
  .info-blocco + .info-blocco{
    border-top:0;
    border-left:1px solid var(--riga);
    padding-top:0;
  }
}

.info-icona{
  display:block;
  width:var(--icona-m);
  aspect-ratio:1;
  margin:0 auto var(--space-s);
  color:var(--rosso);
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.info-blocco h2{
  font-family:var(--etichette);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rosso);
  margin:0 0 var(--space-s);
}
.info-blocco p{ margin:0 0 var(--space-2xs); line-height:1.5; }
.info-chiusura{ margin-top:var(--space-s); }
.info-chiusura strong{ font-weight:600; }

/* ---------- link con freccia ---------- */

.link-azione{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2xs);
  margin-top:var(--space-s);
  font-family:var(--etichette);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rosso);
}
.link-azione svg{
  width:var(--icona-xs); height:var(--icona-xs);
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.link-azione:hover svg{ transform:translateX(.25rem); }

/* ---------- etichette ---------- */

.etichetta{
  font-family:var(--etichette);
  font-size:var(--step-0);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rosso);
  margin:0 0 var(--space-s);
}

/* ---------- blocco invito (usato dalla 404) ---------- */

.cta{
  max-width:var(--wrap);
  margin:0 auto;
  padding:var(--space-xl) var(--gutter);
  border-top:1px solid var(--riga);
}
.cta h1{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.15;
  letter-spacing:-.005em;
  margin:0 0 var(--space-m);
}

/* ---------- bottoni pillola ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  padding:var(--space-s) var(--space-m);
  border-radius:999px;
  font-family:var(--etichette);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.01em;
  border:1.5px solid var(--rosso-cupo);
  background:var(--rosso-cupo);
  color:#fff;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* La freccia si sposta con transform: non altera il layout del bottone.
   Animare il gap lo allargava, mandando l'etichetta a capo e innescando
   un loop hover on/off quando il bottone è vincolato in larghezza. */
.btn svg{
  width:var(--icona-xs); height:var(--icona-xs);
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.btn:hover{ background:var(--rosso-scuro); border-color:var(--rosso-scuro); }
.btn:hover svg{ transform:translateX(.3rem); }

/* ---------- fascia azioni (home) ---------- */

/* Qui invece auto-fit basta: cambia solo il numero di colonne.
   Sotto ~20rem di spazio per colonna la griglia si impila da sola. */
.azioni{
  width:calc(100% - var(--gutter) * 2);
  max-width:64rem;
  margin:var(--space-xl) auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
padding-block: 0 var(--space-l);
}

.azione{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-m);
  padding:var(--space-l);
  text-align:left;
  border:1px solid var(--rosso-cupo);
  color:var(--rosso-cupo);
  transition:background-color .25s ease;
}
.azione--piena{
  background:var(--rosso-cupo);
  color:#fff;
}
.azione:not(.azione--piena):hover{ background:rgba(142,27,31,.055); }
.azione--piena:hover{ background:var(--rosso-scuro); }

.azione-icona{
  width:var(--icona-l);
  aspect-ratio:1;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.azione-titolo{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  max-width:10ch;
  text-wrap:balance;
}
/* Tutta la card è cliccabile, ma il nome accessibile resta il titolo. */
.azione-titolo a::after{ content:""; position:absolute; inset:0; }

.azione-invito{
  margin:auto 0 0;
  font-family:var(--etichette);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.azione-invito::before{
  content:"";
  display:block;
  width:2.75rem;
  border-top:1px solid currentColor;
  opacity:.55;
  margin-bottom:var(--space-s);
}
.azione-invito svg{
  width:1.15em; height:1.15em;
  margin-left:.5em;
  vertical-align:-.2em;
  stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease;
}
.azione:hover .azione-invito svg{ transform:translateX(.35rem); }

/* Il focus va mostrato sulla card, non sul solo testo del titolo. */
@supports selector(:has(*)){
  .azione:has(a:focus-visible){ outline:2px solid var(--rosso-cupo); outline-offset:3px; }
  .azione--piena:has(a:focus-visible){ outline-color:var(--rosso); }
  .azione-titolo a:focus-visible{ outline:none; }
}

/* ---------- pagina menù ---------- */

.menu-page{
  max-width:46rem;
  margin:0 auto;
  padding:var(--space-xl) var(--gutter) var(--space-l);
}
.aggiornato{
  font-family:var(--etichette);
  font-size:var(--step--2);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

.portata{
  max-width:40rem;
  margin:0 auto;
  padding-top:var(--space-l);
  scroll-margin-top:var(--space-m);
  text-align:left;
}
.portata h2{
  font-family:var(--etichette);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rosso);
  margin:0 0 var(--space-m);
}
.piatti{ list-style:none; margin:0; padding:0; }
.piatto{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-m);
  padding:var(--space-xs) 0;
}
/* Il nome resta in italiano, la spiegazione va sotto in corsivo.
   Corpo un gradino sopra --step--1 e tono piu' scuro di --ink-soft:
   il corsivo si legge sempre peggio del tondo alla stessa dimensione,
   quindi va compensato invece di trattarlo come una nota di servizio. */
.piatto-nota{
  display:block;
  margin-top:.3em;
  font-size:clamp(.92rem, .87rem + .22vw, 1.02rem);
  line-height:1.45;
  color:var(--ink-medio);
}
.piatto + .piatto{ border-top:1px solid var(--riga-lieve); }
.prezzo{ flex:0 0 auto; color:var(--ink-soft); font-variant-numeric:lining-nums; }

/* ---------- scambio lingua ---------- */

/* In flusso e allineato a destra, non in posizione assoluta: a 320px
   un elemento sovrapposto finirebbe addosso al logo centrato. */
.lingua{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:0 0 var(--space-m);
  font-family:var(--etichette);
  font-size:var(--step--2);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.lingua > *{ padding-inline:var(--space-xs); }
.lingua > * + *{ border-left:1px solid var(--riga); }
.lingua a{ color:var(--ink-soft); transition:color .2s ease; }
.lingua a:hover{ color:var(--rosso); }
.lingua [aria-current]{ color:var(--rosso); }

/* ---------- invito a cambiare lingua ---------- */

/* Suggerisce, non reindirizza: un redirect automatico farebbe vedere a
   Googlebot una sola versione e l'altra non verrebbe mai indicizzata. */
.invito-lingua{
  background:var(--crema-scura);
  padding:var(--space-xs) var(--gutter);
  font-family:var(--etichette);
  font-size:var(--step--2);
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.invito-lingua p{ margin:0; }
.invito-lingua a{
  color:var(--rosso-cupo);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* ---------- carta dei vini ---------- */

.carta-vini{
  container-type:inline-size;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-m);
  max-width:46rem;
  margin:var(--space-xl) auto 0;
  /* --space-l (fino a 52px) lasciava al contenuto meno di quanto la riga
     richiede: a schermo largo il bottone finiva a capo per 3px. */
  padding:var(--space-m);
  border-radius:clamp(.75rem,1.5vw,1.25rem);
  background:var(--crema-scura);
  text-align:left;
  scroll-margin-top:var(--space-m);
}

/* Unica icona piena del sito: fill invece di stroke. */
.carta-vini-icona{
  flex:0 0 auto;
  width:var(--icona-xl);
  aspect-ratio:1;
  color:var(--rosso);
  fill:currentColor;
  stroke:none;
}

/* Il testo si restringe fino a 10rem; sotto, la fascia si impila da sola. */
.carta-vini-testo{ flex:1 1 10rem; }
.carta-vini-testo h2{
  font-family:var(--etichette);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rosso);
  margin:0 0 var(--space-xs);
}
/* Misura corta: la descrizione forma un blocchetto su due righe invece
   di allungarsi fino al bottone. text-wrap:balance le pareggia. */
.carta-vini-testo p{
  margin:0;
  max-width:30ch;
  color:var(--ink-soft);
  line-height:1.5;
  text-wrap:balance;
}

.carta-vini-azione{
  flex:0 1 auto;
  max-width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-xs);
}
/* Su schermi stretti il bottone si restringe e il testo va a capo,
   invece di sbordare dalla card. */
.carta-vini-azione .btn{
  max-width:100%;
  padding-inline:clamp(1.25rem,4vw,2rem);
  text-align:center;
}
.carta-vini-peso{
  font-family:var(--etichette);
  font-size:var(--step--2);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Quando la fascia si impila, il blocco azione va a tutta larghezza.
   Altrimenti il bottone si allineerebbe all'icona invece che al testo,
   creando un terzo bordo sinistro. Container query e non media query:
   dipende dalla larghezza della card, non da quella dello schermo. */
@container (max-width: 30rem){
  .carta-vini-azione{ flex-basis:100%; align-items:stretch; }
  .carta-vini-peso{ text-align:center; }

  /* Card impilata: icona, testo, bottone e peso condividono lo stesso
     asse centrale. Il testo va su una riga propria (flex-basis 100%),
     cosi' l'icona resta sola sulla sua e si centra. Il margin-inline:auto
     sul paragrafo serve perche' ha un max-width: senza, resterebbe
     incollato a sinistra anche con il testo centrato. */
  /* L'icona si centra con i margini automatici e non con justify-content:
     una container query non puo' stilizzare il contenitore stesso, quindi
     una regola su .carta-vini qui dentro verrebbe semplicemente ignorata. */
  .carta-vini-icona{ margin-inline:auto; }
  .carta-vini-testo{ flex-basis:100%; text-align:center; }
  .carta-vini-testo p{ margin-inline:auto; }

  /* A bottone pieno l'icona esce dal flusso e si ancora a destra:
     cosi' e' la scritta a essere centrata, non il gruppo scritta+icona.
     Centrando il gruppo il testo risulta otticamente spostato a sinistra. */
  .carta-vini-azione .btn{ position:relative; justify-content:center; }
  .carta-vini-azione .btn svg{
    position:absolute;
    right:var(--space-m);
    margin-left:0;
  }
}

/* ---------- pagina di solo testo (privacy) ---------- */

.pagina-testo{
  max-width:44rem;
  margin:0 auto;
  padding:var(--space-xl) var(--gutter) var(--space-l);
  text-align:left;
}
.pagina-testo h1{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.15;
  margin:0 0 var(--space-xs);
}
.pagina-testo h2{
  font-family:var(--etichette);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rosso);
  margin:var(--space-l) 0 var(--space-s);
}
.pagina-testo p,
.pagina-testo li{ margin:0 0 var(--space-s); line-height:1.65; }
.pagina-testo ul{ margin:0 0 var(--space-s); padding-left:1.2em; }
.pagina-testo li{ margin-bottom:var(--space-2xs); }
.pagina-testo a{ color:var(--rosso-cupo); text-decoration:underline; text-underline-offset:.2em; }

.riquadro{
  background:var(--crema-scura);
  border-radius:clamp(.75rem,1.5vw,1.25rem);
  padding:var(--space-m);
  margin:var(--space-m) 0;
}
.riquadro :last-child{ margin-bottom:0; }

/* ---------- piede ---------- */

/* Il piede esce dalla misura del contenuto: e' una fascia a tutta
   larghezza, con il filetto che attraversa lo schermo da bordo a bordo.
   Il cap a 96rem evita che su monitor molto larghi le tre colonne
   finiscano a distanze innaturali. */
.site-foot{
  width:100%;
  /* L'elemento resta a tutta larghezza (il filetto attraversa lo schermo
     da bordo a bordo), ma il contenuto si ferma a 90rem: su monitor molto
     larghi le colonne non finiscono a distanze innaturali. */
  padding-block:var(--space-l);
  padding-inline:max(var(--gutter), (100% - 90rem) / 2);
  border-top:1px solid var(--riga);
  font-family:var(--etichette);
  font-size:var(--step--1);
  line-height:1.7;
  color:var(--ink-soft);
  display:grid;
  gap:var(--space-m);
}
.site-foot p{ margin:0; }
.site-foot a{ transition:color .2s ease; }
.site-foot a:hover{ color:var(--rosso); }

.site-foot-identita{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-s);
}
.marchio{
  display:block;
  width:var(--marchio);
  height:auto;
}

.site-foot-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2xs);
}


/* Le tre colonne usano il breakpoint di .info, cosi' tutta la pagina
   cambia impaginazione nello stesso punto. Serve una query perche' non
   cambia il numero di colonne ma l'allineamento: in colonna unica resta
   tutto centrato. Deve stare DOPO le regole base: stessa specificita',
   vince l'ultima dichiarata. */
@media (min-width:48rem){
  .site-foot{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:var(--space-m) var(--space-l);
  }
  .site-foot-identita{ justify-content:flex-start; }
  .site-foot-legale{ text-align:right; }
}

/* ---------- preferenze utente ---------- */

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

@media print{
  body::after, .site-nav, .btn{ display:none; }
  body{ background:#fff; font-size:11pt; }
  .azione--piena{ background:none; color:inherit; }
  .azione-invito{ display:none; }
}