/* SALVETTA — pagine delle etichette elettroniche (QR sulle bottiglie).
   Stesso aspetto del sito, ma pagine volutamente isolate: il Reg. (UE)
   2021/2117 vuole che la dichiarazione nutrizionale fornita per via
   elettronica non compaia insieme a informazioni commerciali e che non si
   raccolgano dati degli utenti. Per questo qui non c'e' menu, negozio,
   social, statistiche, ne' alcuna richiesta verso servizi esterni: anche i
   caratteri sono ospitati nel progetto invece che da Google Fonts, che
   riceverebbe l'indirizzo IP di chi apre la pagina.
   Tutti i percorsi sono assoluti dalla radice (/assets/...): queste pagine
   rispondono anche agli indirizzi del vecchio sito, come /nosiola-2023 o
   /node/index/220, e con un percorso relativo le risorse non si
   troverebbero piu'. */

@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/cinzel.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-600.woff2) format("woff2")}

/* gli stessi valori di css/style.css */
:root{
  --bg:#0a0908;
  --bg-2:#100e0b;
  --bg-3:#15120c;
  --cream:#e7ddca;
  --cream-soft:#cdc2aa;
  --gold:#dcc389;
  --line:rgba(220,195,137,.26);
  --line-soft:rgba(220,195,137,.12);
  --serif:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --brand:"Cinzel","Cormorant Garamond",Georgia,serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);
  font-family:var(--serif);font-size:15px;line-height:1.65}

.etichetta{max-width:780px;margin-inline:auto;padding:clamp(28px,6vw,64px) clamp(18px,5vw,40px) 56px;
  display:flex;flex-direction:column;gap:clamp(26px,4vw,38px)}

/* ---------- testata ---------- */
.testata{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.testata img{width:112px;height:auto;display:block}
.testata h1{margin:6px 0 0;font-family:var(--brand);font-weight:600;
  font-size:clamp(1.35rem,4.4vw,2rem);letter-spacing:.08em;line-height:1.2;text-wrap:balance}
.annata{margin:0;padding-top:12px;border-top:1px solid var(--line);align-self:stretch;
  font-size:1rem;color:var(--gold);letter-spacing:.04em}

/* la frase in apertura, come nella scheda PDF: fra due filetti verticali */
.presentazione{margin:0;padding:6px clamp(16px,4vw,32px);border-inline:1px solid var(--line);
  text-align:center;font-style:italic;color:var(--cream-soft)}
.presentazione p{margin:0}
.presentazione p + p{margin-top:.8em}

/* ---------- filtro fra le annate: lo stesso della pagina Vini ---------- */
.chips{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chip{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 28px;border:1px solid var(--line-soft);color:var(--gold);text-decoration:none;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
@media (hover:hover){a.chip:hover{color:var(--gold);border-color:var(--gold)}}
a.chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:var(--bg)}

/* ---------- sezioni ---------- */
section{display:flex;flex-direction:column;gap:14px}
h2{margin:0;font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.02em;
  color:var(--gold);padding-left:12px;border-left:3px solid var(--gold);line-height:1.3}

/* tabella nutrizionale */
table{width:100%;border-collapse:collapse;border:1px solid var(--line);font-variant-numeric:tabular-nums}
caption{text-align:left;padding:11px 14px;background:var(--bg-3);border:1px solid var(--line);
  border-bottom:0;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--gold)}
th,td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;font-size:.93rem}
th{text-align:left;font-weight:400;color:var(--cream)}
td{text-align:right;font-weight:600;white-space:nowrap;color:var(--cream)}

/* riquadri con bordo: ingredienti, dati tecnici */
.riquadro{border:1px solid var(--line);padding:12px 14px}
.riquadro p{margin:0}
.riquadro p + p{margin-top:2px}
.nota{font-style:italic;color:var(--cream-soft);font-size:.9rem}
/* valore analitico non ancora disponibile per l'annata: si vede che manca,
   cosi' nessuno lo scambia per un dato dichiarato */
.attesa{font-style:italic;color:var(--cream-soft);opacity:.85}
strong{font-weight:600;color:var(--cream)}
/* 'solfiti' e' un allergene: la normativa chiede di evidenziarlo */
.allergene{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:3px}

.tecnici{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.tecnici > div{padding:10px 14px;border-top:1px solid var(--line);font-size:.93rem}
.tecnici > div:nth-child(-n+2){border-top:0}
.tecnici > div:nth-child(odd){border-right:1px solid var(--line)}
.tecnici p{margin:0}
.tecnici p + p{margin-top:2px}

/* ---------- smaltimento degli imballaggi (D.Lgs. 116/2020) ---------- */
.smaltimento{border:1px solid var(--gold);border-radius:6px;padding:18px clamp(12px,3vw,22px) 14px;
  display:flex;flex-direction:column;gap:14px}
.componenti{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.componenti li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  padding:0 8px}
.componenti li + li{border-left:1px dashed var(--line)}
.codice{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.04em;
  border:1.5px solid var(--cream-soft);border-radius:5px;padding:7px 12px;margin-bottom:8px;
  color:var(--cream)}
.componente{font-family:var(--sans);font-weight:600;letter-spacing:.06em;color:var(--cream)}
.materiale{font-size:.88rem;color:var(--cream-soft)}
.raccolta{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.06em;color:var(--gold)}
.avvertenza{margin:0;text-align:center;font-style:italic;font-size:.8rem;color:var(--cream-soft)}

/* ---------- scaricamento del PDF e piede ---------- */
.pdf{align-self:center;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:3px}
@media (hover:hover){.pdf:hover{border-bottom-color:var(--gold)}}
.pdf:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

footer{border-top:1px solid var(--line);padding-top:14px;text-align:center;
  font-size:.78rem;color:var(--cream-soft);line-height:1.6}
footer p{margin:0}

@media (max-width:620px){
  body{font-size:14px}
  .chip{padding:12px 22px;font-size:.72rem}
  .tecnici{grid-template-columns:1fr}
  .tecnici > div:nth-child(2){border-top:1px solid var(--line)}
  .tecnici > div:nth-child(odd){border-right:0}
  .componenti li{padding:0 4px}
  .codice{font-size:.9rem;padding:6px 8px}
}

@media (prefers-reduced-motion:reduce){.chip{transition:none}}

/* stampa: fondo bianco e testo scuro, per chi vuole la scheda su carta */
@media print{
  body{background:#fff;color:#111}
  .etichetta{max-width:none;padding:0}
  .chips,.pdf{display:none}
  .testata h1,th,td,strong,.componente,.codice{color:#111}
  .annata,h2,caption,.raccolta{color:#4b5a2a}
  .presentazione,.nota,.materiale,.avvertenza,.attesa,footer{color:#333}
  caption{background:#eee8dc}
  table,caption,.riquadro,.tecnici,.tecnici > div,th,td{border-color:#ccc}
  .smaltimento{border-color:#4b5a2a;break-inside:avoid}
  .codice{border-color:#666}
}