/* ═══════════════════════════════════════════════════════════════════════
   Cene a tema · Ristorante Passone
   Token dalla Style Guide v0.4 (00. ristorante-passone-astro-site/docs/
   style-guide-ristorante-passone.html). Quella è la fonte: se un valore
   cambia lì, si cambia qui. Non aggiungere colori fuori da questo blocco.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* firma del marchio */
  --oro:#8A6C36; --o-50:#F5F1E9; --o-200:#D6CAB5; --o-300:#BFAE8F; --o-400:#A38B60; --o-700:#685129;
  --amaranto:#66303A; --oro-luce:#E2CF9E; --champagne:#EADCB8; --bordeaux:#3B0A0C;
  --r-50:#F5ECE9; --r-700:#610508;
  /* spina condivisa */
  --inchiostro:#2E241E; --pietra:#A89C8D; --bordo-campo:#817A75;
  /* superfici */
  --avorio:#F8F5EF; --crema:#ECE5D5; --carta:#FDFBF7; --sabbia:#D9CAAB; --bianco:#FFFFFF;
  /* stati */
  --errore:#B5432B; --errore-fondo:#F6E9E3; --successo:#4C5F41; --successo-fondo:#E9EEE3;

  /* bottoni: gradienti ispirati al logo */
  --grad-oro-chiaro:linear-gradient(100deg,#C2A465 0%,#EADCB8 50%,#C2A465 100%);
  --grad-oro-scuro:linear-gradient(100deg,#8A6C36 0%,#A88B4E 50%,#8A6C36 100%);
  /* R-18 · bottoni sul chiaro, ancora aperto.
     Opzione A (attiva): oro scuro, testo bianco.
     Opzione B: oro chiaro, testo inchiostro → si prova con ?bottoni=b nell'URL,
     oppure scambiando le due righe qui sotto. */
  --btn-sfondo:var(--grad-oro-scuro); --btn-testo:var(--bianco);

  --f-display:"Marcellus",Georgia,"Times New Roman",serif;
  --f-testo:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --contenuto-max:1120px;
  --r-s:8px; --r-m:14px; --r-pill:999px;
  --bordo:1px solid color-mix(in srgb,var(--pietra) 50%,transparent);
  --t-micro:150ms; --t-entrata:400ms; --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-bottoni="b"]{ --btn-sfondo:var(--grad-oro-chiaro); --btn-testo:var(--inchiostro); }
/* sulle sezioni scure il bottone è sempre oro chiaro con testo scuro (deciso) */
.scura{ --btn-sfondo:var(--grad-oro-chiaro); --btn-testo:var(--inchiostro); }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--avorio); color:var(--inchiostro); font-family:var(--f-testo); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:400; color:var(--bordeaux); margin:0; text-wrap:balance}
h1{font-size:56px; line-height:1.06}
h2{font-size:38px; line-height:1.15}
h3{font-size:27px; line-height:1.2}
p{margin:0}
a{color:var(--o-700); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}
.scura :focus-visible{outline-color:var(--oro-luce)}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:1000px){ h1{font-size:44px} h2{font-size:32px} h3{font-size:24px} }
@media (max-width:700px){ h1{font-size:34px} h2{font-size:27px} h3{font-size:21px} }

.wrap{max-width:var(--contenuto-max); margin:0 auto; padding-inline:max(var(--s6),env(safe-area-inset-left,0px))}
@media (max-width:700px){ .wrap{padding-inline:max(var(--s4),env(safe-area-inset-left,0px))} }
.occhio{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--o-700); font-weight:600}
.lead{font-size:18px; line-height:1.6; max-width:52ch}
.attenuato{color:color-mix(in srgb,var(--inchiostro) 75%,var(--avorio))}

/* ══ sezioni scure ══ */
.scura{background:var(--amaranto); color:var(--avorio)}
.scura h1,.scura h2,.scura h3{color:var(--oro-luce)}
.scura .occhio{color:var(--champagne)}
.scura a{color:var(--champagne)}

/* ══ bottoni ══ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; min-width:256px; padding:0 28px; border-radius:var(--r-pill); border:none; font:inherit; font-size:16px; cursor:pointer; text-decoration:none!important;
  background:var(--btn-sfondo); background-size:200% 100%; background-position:0 0; color:var(--btn-testo)!important; transition:background-position var(--t-entrata) var(--ease)}
.btn:hover{background-position:100% 0}
.btn:disabled{opacity:.55; cursor:progress}
.btn-compatto{min-width:0; height:44px; padding:0 22px; font-size:15px}
.btn-secondario{background:transparent; color:var(--o-700)!important; border:1.5px solid var(--o-700); transition:background var(--t-micro) var(--ease)}
.btn-secondario:hover{background:var(--o-50)}
.scura .btn-secondario{color:var(--champagne)!important; border-color:var(--o-300)}
.scura .btn-secondario:hover{background:color-mix(in srgb,var(--o-300) 15%,transparent)}
@media (max-width:600px){ .btn:not(.btn-compatto){min-width:100%} }

/* ══ testata, sempre visibile ══ */
.testata{position:sticky; top:0; z-index:20; background:var(--avorio); border-bottom:var(--bordo); padding-top:env(safe-area-inset-top,0px)}
/* le ancore (#prenota, #menu) non finiscono sotto la testata */
section[id]{scroll-margin-top:96px}
/* stesso margine per i campi e la conferma quando ricevono il focus */
input,textarea{scroll-margin-top:120px}
.testata .wrap{display:flex; align-items:center; gap:var(--s5); min-height:80px}
.marchio{margin-right:auto; line-height:0}
.marchio img{height:64px; width:auto}
.testata .wrap{gap:var(--s3)}
@media (max-width:700px){ .marchio img{height:40px} .testata .wrap{gap:var(--s1)} }
.testata .btn-compatto{white-space:nowrap}
@media (max-width:420px){ .testata .btn-compatto{padding:0 14px; font-size:14px} }

/* icone telefono e WhatsApp: area di tocco 44×44, nome accessibile sul link */
.icona{flex:none; display:block}
.icona-link{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill); color:var(--o-700); transition:background var(--t-micro) var(--ease)}
.icona-link:hover{background:var(--o-50)}
.btn-icona{gap:10px}
.btn-icona .icona{width:20px; height:20px}

/* ══ apertura ══ */
/* senza foto: la serata si vede già nelle campagne, qui conta prenotare */
.apertura{position:relative}
.apertura .wrap{padding-block:var(--s8); position:relative}
.apertura::after{content:""; position:absolute; inset:16px; border:1px solid color-mix(in srgb,var(--o-300) 60%,transparent); pointer-events:none}
.apertura .testo{display:grid; gap:var(--s4); position:relative; z-index:1; max-width:760px}
.apertura .fila{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s2)}
@media (max-width:850px){ .apertura .wrap{padding-block:var(--s7)} }
/* su telefono la cornice si avvicina al bordo e il testo rientra, così non si toccano */
@media (max-width:700px){ .apertura::after{inset:8px} .apertura .wrap{padding-inline:max(var(--s5),env(safe-area-inset-left,0px))} }

.prezzo-eroe{font-size:16px; font-weight:600; color:var(--champagne)}
/* l'avviso compare solo quando i posti stanno finendo: vuoto non occupa spazio */
#s-avviso:empty,#f-avviso:empty{display:none}

/* ══ il menù della sera ══ */
.menu-sera{padding-block:var(--s8) var(--s6)}
.menu-sera .wrap{display:grid; gap:var(--s3)}
/* una sola colonna, una voce sotto l'altra con un filetto, come la voce di menù della guida */
.portate{list-style:none; margin:var(--s3) 0 0; padding:0; max-width:760px; border-top:1px solid color-mix(in srgb,var(--pietra) 30%,transparent)}
.voce{display:grid; gap:4px; padding-block:var(--s4); border-bottom:1px solid color-mix(in srgb,var(--pietra) 30%,transparent)}
.voce .tipo{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-700); font-weight:600}
.voce .piatti{display:grid; gap:2px}
.voce .piatto{font-family:var(--f-display); font-size:19px; line-height:1.3}
.voce .allergeni{font-family:var(--f-testo); font-size:13px; letter-spacing:.02em; color:var(--bordo-campo); white-space:nowrap}
.legenda-allergeni{font-size:13.5px; line-height:1.55; color:var(--bordo-campo); padding-top:var(--s2)}
.voce .vino{font-size:15px; font-style:italic; color:color-mix(in srgb,var(--inchiostro) 80%,var(--avorio))}
.vuoto{background:var(--carta); border:var(--bordo); border-radius:var(--r-m); padding:var(--s6); display:grid; gap:var(--s3)}

/* la serata in testa al modulo */
.serata-scelta{display:grid; gap:6px; padding-bottom:var(--s4); border-bottom:var(--bordo)}
.serata-scelta .t{font-family:var(--f-display); font-size:23px; line-height:1.2; color:var(--bordeaux)}
.campi{display:grid; gap:var(--s4)}
.obb{color:var(--errore); font-weight:700}
.legenda{margin:0}
.invio{display:grid; gap:var(--s2); justify-items:start}
.btn:disabled{opacity:.5; cursor:not-allowed}
.nota-piede{font-size:14px; color:color-mix(in srgb,var(--avorio) 80%,var(--amaranto)); margin-top:var(--s2)}

/* disponibilità: sempre icona e parola */
.dispo{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; border-radius:var(--r-pill); padding:5px 12px 5px 8px; width:fit-content}
.dispo i{font-style:normal; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:var(--carta); flex:none}
.dispo.pochi{background:var(--o-50); color:var(--o-700)} .dispo.pochi i{background:var(--o-700)}
.dispo.telefono{background:var(--r-50); color:var(--r-700)} .dispo.telefono i{background:var(--r-700)}
.dispo.completa{background:var(--crema); color:var(--inchiostro)} .dispo.completa i{background:var(--inchiostro)}

/* ══ prenotazione ══ */
.prenota{padding-block:var(--s8); border-top:var(--bordo)}
.prenota .wrap{display:grid; grid-template-columns:1fr 1.25fr; gap:var(--s7)}
@media (max-width:900px){ .prenota .wrap{grid-template-columns:1fr; gap:var(--s5)} }
.prenota .lato{display:grid; gap:var(--s4); align-content:start}
.modulo{background:var(--carta); border:var(--bordo); border-radius:var(--r-m); padding:var(--s6); display:grid; gap:var(--s4); align-content:start; min-width:0}
@media (max-width:700px){ .modulo{padding:var(--s5) var(--s4)} }
.campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo label,.campo .etichetta{font-size:14px; font-weight:600}
.opz{font-weight:400; color:color-mix(in srgb,var(--inchiostro) 75%,var(--carta))}
.campo input,.campo textarea{background:var(--carta); border:1px solid var(--bordo-campo); border-radius:var(--r-s); height:52px; padding:0 var(--s4); font:inherit; font-size:16px; color:var(--inchiostro); width:100%; transition:border-color var(--t-micro) var(--ease)}
.campo textarea{height:auto; min-height:96px; padding:var(--s3) var(--s4); resize:vertical}
.campo input:hover,.campo textarea:hover,.campo input:focus-visible,.campo textarea:focus-visible{border-color:var(--inchiostro)}
.aiuto{font-size:14px; color:color-mix(in srgb,var(--inchiostro) 78%,var(--carta))}
.campo.errato input{border:2px solid var(--errore); background:var(--errore-fondo)}
.msg-errore{display:none; gap:8px; align-items:flex-start; font-size:14px; color:var(--errore); font-weight:600}
.campo.errato .msg-errore,.spunta-campo.errato .msg-errore{display:flex}
.msg-errore::before{content:"!"; flex:none; width:18px; height:18px; border-radius:50%; background:var(--errore); color:var(--carta); display:grid; place-items:center; font-size:12px; margin-top:2px}
.due{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media (max-width:600px){ .due{grid-template-columns:1fr} }
.contatore{display:inline-flex; align-items:center; border:1px solid var(--bordo-campo); border-radius:var(--r-pill); background:var(--carta); height:52px; width:fit-content}
.contatore button{width:52px; height:52px; border:none; background:none; color:var(--o-700); cursor:pointer; border-radius:var(--r-pill); font-size:22px; font-family:inherit}
.contatore button:disabled{color:var(--inchiostro); opacity:.35; cursor:not-allowed}
.contatore output{min-width:44px; text-align:center; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
.spunta{display:flex; gap:var(--s3); align-items:flex-start; font-size:14px}
.spunta input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--o-700); flex:none}
.spunta-campo{display:grid; gap:6px}
.esca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.avviso{display:flex; gap:12px; align-items:flex-start; border-radius:var(--r-m); padding:var(--s4) var(--s5); font-size:15px; border:1px solid transparent}
.avviso > i{font-style:normal; font-weight:700; flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:var(--carta); margin-top:2px}
.avviso .corpo-avviso{display:grid; gap:6px}
.avviso.bene{background:var(--successo-fondo); border-color:color-mix(in srgb,var(--successo) 40%,transparent)} .avviso.bene > i{background:var(--successo)}
.avviso.info{background:var(--o-50); border-color:color-mix(in srgb,var(--o-400) 45%,transparent)} .avviso.info > i{background:var(--o-700)}
.avviso.tel{background:var(--r-50); border-color:color-mix(in srgb,var(--r-700) 30%,transparent)} .avviso.tel > i{background:var(--r-700)}
.avviso.male{background:var(--errore-fondo); border-color:color-mix(in srgb,var(--errore) 40%,transparent)} .avviso.male > i{background:var(--errore)}
.numero{font-family:var(--f-display); font-size:24px; color:var(--r-700); user-select:all}

.esito{display:grid; gap:var(--s4)}
.esito dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px var(--s4); font-size:15px; background:var(--carta); border:var(--bordo); border-radius:var(--r-m); padding:var(--s5)}
.esito dt{color:var(--o-700); font-weight:600}
.esito dd{margin:0; min-width:0; overflow-wrap:anywhere}

/* ══ piede ══ */
.piede .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s6); padding-block:var(--s7); font-size:15px}
@media (max-width:700px){ .piede .wrap{grid-template-columns:1fr} }
.piede h2{font-size:19px; margin-bottom:8px}
.piede .logo-piede{height:76px; width:auto; margin-bottom:var(--s3)}
.piede .legale{grid-column:1/-1; font-size:13px; color:color-mix(in srgb,var(--avorio) 75%,var(--amaranto)); border-top:1px solid rgba(191,174,143,.3); padding-top:var(--s4)}

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

/* ══ pagina di ringraziamento ══ */
.grazie .wrap{padding-block:var(--s8); display:grid; gap:var(--s5)}
.grazie .wrap > *{max-width:760px}
.grazie-testo{display:grid; gap:var(--s3)}
.riepilogo{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px var(--s4); font-size:15px; background:var(--carta); border:var(--bordo); border-radius:var(--r-m); padding:var(--s5)}
.riepilogo dt{color:var(--o-700); font-weight:600}
.riepilogo dd{margin:0; min-width:0; overflow-wrap:anywhere}

/* ══ contatti nel piede ══ */
.contatti-piede{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.contatti-piede a{display:inline-flex; align-items:center; gap:10px; min-height:44px}
.scura .icona{color:var(--oro-luce)}
.link-consenso{background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ══ banner del consenso ══ */
.consenso{position:fixed; z-index:30; left:max(var(--s4),env(safe-area-inset-left,0px)); right:max(var(--s4),env(safe-area-inset-right,0px)); bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));
  max-width:760px; margin-inline:auto; background:var(--carta); border:var(--bordo); border-radius:var(--r-m); box-shadow:0 18px 50px -18px rgba(0,0,0,.35);
  padding:var(--s4) var(--s5); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center; font-size:14px}
.consenso-corpo{flex:1 1 320px; display:grid; gap:4px}
.consenso-azioni{display:flex; gap:var(--s2); flex-wrap:wrap}