/* ============================================================
   Santallegria: palette e caratteri dal menù e dalla carta vini stampati (2026).
   Crema #ffdeb8, pesca #fcb86f, terracotta #c1513d, oliva #8a862e,
   bordeaux #7b1221 (lo stesso del logo e dell'icona), giallo #ede253,
   oro #b69924 e rosa #ff66c4 della carta vini, inchiostro #231f20.
   Logo e foto del locale restano quelli di prima.
   L'area gestione resta scura: è uno strumento di lavoro, non la vetrina.
   Caratteri: Archivo Black e Archivo, la coppia già servita da fonts.css
   (il menù stampato usa Gotham, che è commerciale: questi sono i più vicini
   e sono SIL Open Font License 1.1). I vecchi Titan One/Raleway restano
   nella cartella del cliente ma non si dichiarano più.
============================================================ */

:root{
  /* le tinte del menù stampato, in chiaro: servono anche da sole
     (bande, titoli di sezione, segni) oltre che dentro i token del tema */
  --crema:#ffdeb8;
  --pesca:#fcb86f;
  --terracotta:#c1513d;
  --oliva:#8a862e;
  --giallo:#ede253;
  --oro-vini:#b69924;
  /* fondo e inchiostro: la crema e il nero caldo del menù stampato */
  --bg:#ffdeb8;
  --panel:rgba(255,255,255,.55);       /* le carte sono i fogli bianchi della carta vini */
  --line:rgba(35,31,32,.22);
  --text:#231f20;
  --muted:#6f5340;
  /* accenti: terracotta del menù (un filo più profondo per il testo chiaro
     sopra i pulsanti) e bordeaux del logo, come i titoli della carta vini */
  --accent:#b24a35;
  --accent2:#7b1221;
  --accent-rgb:178,74,53;
  --accent2-rgb:123,18,33;
  --su-accento:#fff6e6;
  --gold:#8a6d12;                      /* l'oro della carta vini, scurito per leggerlo */
  /* campi moduli, barre e pillole: carta chiara, non più notte */
  --campo:#fff6e8;
  --sfondo-alto:#fff0d8;
  --velatura:rgba(255,255,255,.42);
  --velatura-forte:rgba(255,247,232,.92);
  --schema-colori:light;
  --ombra-logo:drop-shadow(0 14px 34px rgba(60,10,16,.45));
  --ombra:0 26px 60px -34px rgba(123,18,33,.4);
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --alza:-4px;
  --ombra-testo:0 2px 14px rgba(46,10,10,.75);
  --velo-hero:linear-gradient(to bottom, rgba(40,10,12,.58), rgba(40,10,12,.26) 40%, rgba(40,10,12,.5) 76%, rgba(40,10,12,.7));
  --raggio:14px;
  --etichetta-peso:700;
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-sans:'Archivo',system-ui,sans-serif;
  --font-mono:'Archivo',system-ui,sans-serif;   /* come sul menù: cifre e targhette in Archivo */
}

/* Archivo Black ha un peso solo: niente grassetto finto sui titoli */
html .logo .nome,html .brand-hero .nome,
html .ccard h2,html .menu-intro h2,html .sec-head h2,html .menu-cta h2,
html .ord-title,html .ord-modal-box h3,html .err-popup-box h3,
html .page-head h1,html .sez-titolo{font-weight:400}
/* cifre a larghezza fissa dove conta l'incolonnamento (prezzi, contatori) */
html .price,html .li-price,html .ord-price,html .ord-total,html .ord-qty,
html .stats b,html .alle-num,html .sec-num,html .fatti b,html .punt{font-variant-numeric:tabular-nums}

/* il logo scritto prende il posto del nome grande, in home e nel menù */
.logo img[data-brand-logo],.brand-hero img[data-brand-logo]{width:min(460px,84vw) !important}

/* la fascia di parole in home scorre in una riga sola (su telefono andava a
   capo e le parole venivano tagliate) */
:root{
  --nastro-moto:scroll 40s linear infinite;
  --nastro-larghezza:max-content;
  --nastro-a-capo:nowrap;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* con "riduci animazioni" (molti telefoni lo hanno attivo) il nastro non parte
   da solo, ma resta una riga sola che si sfoglia con il dito */
@media (prefers-reduced-motion:reduce){
  :root{--nastro-larghezza:max-content;--nastro-a-capo:nowrap;--nastro-sfumatura:none}
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee .track{justify-content:flex-start;animation:none;flex-wrap:nowrap !important;width:max-content !important}
}

/* ============================================================
   LA PRIMA SCHERMATA — due disegni, uno per pagina:
   - il menù (e i browser senza :has) tengono l'aurora di campi colore;
   - la home senza video mostra la copertina del menù stampato:
     su schermi larghi l'illustrazione sta a destra e i testi a
     sinistra sul bordeaux; su schermi stretti o in verticale la
     copertina è a tutta altezza e stato/scelte stanno in basso,
     sul mantello scuro. Con il video attivo la copertina sparisce.
============================================================ */
html .scene{background-color:#47181c}

/* home, schermi larghi: copertina a destra, testi a sinistra */
@media (min-width:820px) and (min-aspect-ratio:1/1){
  html body:has(.stage):not(:has(.scene.has-video)) .scene{background-image:none}
  html body:has(.stage):not(:has(.scene.has-video)) .scene::before{
    inset:auto;top:7vh;right:4vw;width:auto;height:86vh;aspect-ratio:1100/1905;
    background:url('/assets/img/madonna-pizza.webp') center/contain no-repeat;
    filter:drop-shadow(0 30px 55px rgba(15,3,5,.55));
    animation:none;transform:none;border-radius:10px;
  }
  html body:has(.stage):not(:has(.scene.has-video)) .veil{
    background:linear-gradient(to right, rgba(40,10,12,.82), rgba(40,10,12,.42) 38%, rgba(40,10,12,.06) 62%, rgba(40,10,12,0) 72%);
  }
  html body:has(.stage) .stage{
    align-items:flex-start;text-align:left;
    padding:92px 5vw 44px 7vw;
    padding-right:calc(4vw + 49.6vh + 40px);
  }
  /* i titoli delle scelte un filo più piccoli: la colonna di testo accanto
     alla copertina è più stretta e "Il Menù" andava a capo */
  html body:has(.stage) .choice .ccard h2{font-size:clamp(2rem,3.6vw,3.1rem)}
}
/* home, schermi stretti o in verticale: copertina a tutta altezza,
   stato e scelte in basso; la firma nell'illustrazione fa da logo */
@media (max-width:819px), (max-aspect-ratio:1/1){
  html body:has(.stage):not(:has(.scene.has-video)) .scene{
    background-image:url('/assets/img/madonna-pizza.webp');
    background-size:auto 100%;background-position:center top;background-repeat:no-repeat;
  }
  html body:has(.stage):not(:has(.scene.has-video)) .scene::before{display:none}
  /* il velo diventa pieno sotto la metà: la copertina si vede in alto
     (colombe e volto) e i testi stanno sul bordeaux pieno, senza che la
     firma dell'illustrazione si sovrapponga a "Il Menù" */
  html body:has(.stage):not(:has(.scene.has-video)) .veil{
    background:linear-gradient(to bottom,
      rgba(40,10,12,0) 0%,
      rgba(40,10,12,0) 28%,
      rgba(40,10,12,.55) 40%,
      rgba(40,10,12,.96) 50%,
      rgba(40,10,12,.995) 58%,
      rgba(40,10,12,1) 100%);
  }
  /* il kicker lo dice già la copertina; la firma script invece resta,
     appoggiata in basso sopra il bordeaux pieno */
  html body:has(.stage):not(:has(.scene.has-video)) .kicker{display:none}
  html body:has(.stage):not(:has(.scene.has-video)) .stage{justify-content:flex-end;padding-bottom:38px}
}
/* MENÙ — la copertina intera e centrata come fondale, con la riga
   d'apertura in basso sulla sfumatura. Senza video la copertina è
   l'illustrazione ferma; col video (copertina animata o video del locale)
   prende il suo posto, nella stessa inquadratura. Vale a ogni misura:
   il menù resta centrato come il menù di carta. */
html body:has(#hero) .scene{background-image:none}
html body:has(#hero):not(:has(.scene.has-video)) .scene::before{
  inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;filter:none;
  background:url('/assets/img/madonna-pizza.webp') center top/contain no-repeat;
  animation:none;transform:none;
}
/* il video della testata: su schermi larghi la copertina animata resta
   intera e centrata (contain), sul telefono riempie (cover) */
html body:has(#hero) .scene video{object-fit:cover;background:#47181c}
@media (min-width:820px) and (min-aspect-ratio:1/1){
  html body:has(#hero) .scene video{object-fit:contain}
}
html body:has(#hero) .hero-veil{
  background:linear-gradient(to bottom,
    rgba(40,10,12,0) 0%,
    rgba(40,10,12,0) 62%,
    rgba(40,10,12,.34) 82%,
    rgba(40,10,12,.60) 100%);
}
html body:has(#hero) .scene{
  align-items:flex-end;justify-content:center;text-align:center;
  padding:0 5vw clamp(64px,10vh,96px);
}
/* la firma e il motto li porta la copertina (ferma o animata): qui non si
   ripetono, resta la riga d'apertura sul bordeaux in basso */
html body:has(#hero) .brand-hero{padding:0}
html body:has(#hero) .brand-hero img,
html body:has(#hero) .brand-hero .nome,
html body:has(#hero) .brand-hero .sub{display:none}
html body:has(#hero) .brand-hero .kicker{
  font-size:13px;letter-spacing:calc(var(--etichetta-larga) * 1.4);
  text-shadow:0 2px 14px rgba(20,4,6,.9);
}
html .scene::before{
  content:"";position:absolute;inset:-28% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(252,184,111,.90), rgba(252,184,111,0)),
    radial-gradient(closest-side, rgba(193,81,61,.85), rgba(193,81,61,0)),
    radial-gradient(closest-side, rgba(138,134,46,.55), rgba(138,134,46,0)),
    radial-gradient(closest-side, rgba(237,226,83,.45), rgba(237,226,83,0));
  background-size:55% 62%,62% 72%,48% 56%,38% 46%;
  background-position:18% 22%,84% 16%,10% 84%,42% 78%;
  background-repeat:no-repeat;
  filter:blur(34px) saturate(1.12);
  transform:translate3d(0,0,0) scale(1.06);
  animation:scena-deriva 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes scena-deriva{
  0%{transform:translate3d(-3%,-2%,0) scale(1.06)}
  55%{transform:translate3d(2.5%,3%,0) scale(1.13)}
  100%{transform:translate3d(4%,-3.5%,0) scale(1.07)}
}
@media (prefers-reduced-motion:reduce){html .scene::before{animation:none}}
/* il velo: una tenda verticale, non più l'ellisse scura al centro */
html .veil{
  background:linear-gradient(to bottom, rgba(40,10,12,.52), rgba(40,10,12,.24) 36%, rgba(40,10,12,.46) 70%, var(--bg));
  opacity:1;
}
html .stage .kicker{color:#ffdeb8}
html .logo .nome,html .logo .sub,
html .brand-hero .nome,html .brand-hero .sub{color:#fff2df}
html .brand-hero .kicker{color:#fcb86f}
html .punt,html .video-loading,html .scrollhint,html .scroll-cue{color:#f6d8b4}
html .punt b{color:#fcb86f}
html .scroll-cue:hover{color:#fcb86f}
/* lo stato aperto/chiuso: pillola chiara, così regge anche sopra il video.
   Il padding e il bordo servono anche su telefono: la regola mobile della
   pagina li azzera (testo a filo del bordo) e questa specificità li rimette. */
html .status{color:#5b3a2c;background:rgba(255,247,232,.94);border:1px solid rgba(35,31,32,.25);padding:8px 16px}
html .status b{color:#231f20}
html .status .now-txt{color:#7b1221}
/* il campo del "menù" al passaggio: pesca del menù sull'inchiostro */
html .choice .ccard.pieno h2{color:#fcb86f}
/* le due scelte della home stanno sopra la scena: restano crema come i testi
   dell'hero (l'inchiostro del tema vale solo sotto, sul crema) */
html .choice .ccard{color:#fff2df}
html .choice .ccard p{color:#f2cfae}
html .choice .ccard.pieno::before{background:#2b0d08}

/* la fascia di parole: la banda pesca del menù stampato */
html .marquee{background:var(--pesca);border-color:rgba(35,31,32,.25)}
html .marquee span{color:#23180f}
html .marquee span b{color:#7b1221}

/* ============================================================
   TESTATE DI PRENOTA E INFO — bordeaux della carta vini,
   perché il logo del locale è bianco e sul crema sparirebbe.
============================================================ */
html .sticky-head{background:linear-gradient(180deg,#7b1221,#732c2d);border-bottom-color:rgba(255,222,184,.3)}
html .sticky-head .marchio{color:#ffdeb8}
html .sticky-head nav.mainnav a{color:#f0cda6;border-color:rgba(255,222,184,.32)}
html .sticky-head nav.mainnav a:hover{color:#fff6e6;border-color:#fcb86f}
html .sticky-head nav.mainnav a.on{color:#fff6e6;border-color:#fcb86f;background:rgba(252,184,111,.18)}
html .sticky-head .toc a{color:#f0cda6;border-color:rgba(255,222,184,.3)}
html .sticky-head .toc a:hover,html .sticky-head .toc a.on{color:#fff6e6;border-color:#fcb86f;background:rgba(252,184,111,.18)}
html .sticky-head .btn-back{color:#ffdeb8;border-color:rgba(252,184,111,.65);background:rgba(252,184,111,.14)}
html .sticky-head .btn-back:hover{background:#fcb86f;color:#4a1210;border-color:#fcb86f}

/* ============================================================
   MENÙ PUBBLICO — ritocchi per il tema chiaro e i colori
   delle sezioni, ripresi uno a uno dal menù stampato.
============================================================ */
#dalla-cucina .sec-head h2,#i-nostri-ciccio .sec-head h2{color:#8a862e}
#pizze-rosse .sec-head h2,#birre .sec-head h2{color:#b3261e}
#pizze-bianche .sec-head h2,#vini-bianchi .sec-head h2{color:#231f20}
#pizze-gialle .sec-head h2{color:#a86a06}
#padellini .sec-head h2{color:#b24a35}
#dessert .sec-head h2,#bevande .sec-head h2,#vini-rossi .sec-head h2{color:#7b1221}
#vini-rosati .sec-head h2{color:#c0448f}
#bollicine .sec-head h2{color:#8a6d12}

/* filigrane e tratteggi: da bianco a inchiostro */
html .dots,html .li-dots{border-bottom-color:var(--line)}
html .list-row{border-bottom-color:rgba(35,31,32,.10)}
html .bar i{background:rgba(35,31,32,.15)}
/* le schede senza foto non si stirano per riempire la riga di una con foto */
html .grid{align-items:start}
/* numeri di sezione e etichette piccole: sotto il terracotta servono più scuri */
html .sec-num{color:#8a3a28}
html .menu-intro .stat b{color:var(--accent2)}
html .photo{border-bottom-color:var(--line);
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(var(--accent-rgb),.10), transparent 55%),
    linear-gradient(160deg, rgba(35,31,32,.035), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(45deg, rgba(35,31,32,.02) 0 12px, transparent 12px 24px)}
html .ph-icon{color:rgba(35,31,32,.32)}
/* un piatto senza foto è una voce del menù di carta, non una cornice vuota:
   la foto c'è solo dove il locale l'ha data (le quattro pizze) */
html .card .photo:has(> .ph-icon){display:none}
/* senza la foto il "+" resta in alto a destra: il testo si ferma prima,
   così non finisce sopra il prezzo */
html .card:has(.photo > .ph-icon) .card-body{padding-right:58px}
/* il "+" della lista ordinazione: crema sul cerchio terracotta */
html .ord-add,html .li-add{color:#fff6e6}
/* avvisi, ricerca e conferme: testo scuro sui fogli chiari */
html .toast{color:var(--text);border-color:rgba(35,31,32,.18)}
html .toast.err{border-color:rgba(168,58,42,.55)}
html .toast.err .toast-ico{color:#a83a2a;background:rgba(168,58,42,.12)}
html .err-popup-icon,html .err-popup-icon .ico{color:#a83a2a}
html .err-popup-icon{border-color:rgba(168,58,42,.5);background:rgba(168,58,42,.10)}
html .err-popup-box p{color:var(--muted)}
html .psearch{border-color:var(--line)}
html .psearch input{color:var(--text)}
html .ord-btn.danger:hover,html .ord-del:hover{color:#a83a2a;border-color:rgba(168,58,42,.5)}
html .ord-person::placeholder{color:color-mix(in srgb, var(--muted) 65%, transparent)}

/* ============================================================
   PRENOTA — stati di caricamento ed errori sul tema chiaro.
============================================================ */
html .form-err,html .slots-msg.err{color:#a83a2a}
html .btn.copy{color:var(--text);border-color:var(--line)}
html .cal-day.loading::after,html .slot.skel{
  background:linear-gradient(100deg,var(--campo) 40%,#f2dcb6 50%,var(--campo) 60%);
  background-size:200% 100%;
}
html .steps.err .steps-fill{background:#a83a2a !important}
html .slot .cap{background:rgba(35,122,66,.14);color:#237a42}
html .slot .cap.low{background:rgba(138,109,18,.18);color:#7a5a08}

/* ============================================================
   INFO — il nome dell'allergene segue il testo del tema.
============================================================ */
html .alle-name{color:var(--text)}

/* ============================================================
   IL SIMBOLO DEL LOCALE — la madonna con la pizza, ritagliata dalla
   copertina del menù stampato: chiude la home. Nel menù la copertina
   sta in sottofondo alla testata (vedi sopra), quindi qui non si ripete.
============================================================ */
html #finale .wrap::before{
  content:"";display:block;aspect-ratio:1100/1905;float:right;
  width:min(300px,30vw);margin:0 0 24px clamp(24px,4vw,56px);
  background:url('/assets/img/madonna-pizza.webp') center/contain no-repeat;
  filter:drop-shadow(0 18px 36px rgba(60,10,16,.25));
}
@media (max-width:720px){
  html #finale .wrap::before{float:none;width:min(230px,58vw);margin:0 auto 26px}
}

/* ============================================================
   AREA GESTIONE — resta scura (strumento di lavoro): il bordeaux
   del menù con la pesca e il giallo del nuovo marchio.
============================================================ */
html[data-area="gestione"]{
  --bg:#5f2021;
  --panel:rgba(0,0,0,.24);
  --line:rgba(255,222,184,.30);
  --text:#ffdeb8;
  --muted:#e5bd97;
  --accent:#fcb86f;
  --accent2:#f0d27a;
  --accent-rgb:252,184,111;
  --accent2-rgb:240,210,122;
  --su-accento:#4a1718;
  --gold:#e0b64e;
  --campo:#4a1718;
  --sfondo-alto:#6d2627;
  --velatura:rgba(74,23,24,.60);
  --velatura-forte:rgba(58,16,18,.94);
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.6));
  --ombra:0 30px 70px -30px rgba(0,0,0,.6);
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,222,184,.02));
  --alza:-4px;
  --ombra-testo:0 2px 14px rgba(0,0,0,.55);
  --raggio:20px;
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-sans:'Archivo',system-ui,sans-serif;
  --font-mono:'Archivo',system-ui,sans-serif;
}