/* «La Pala» — sito d'esempio (attivita' di fantasia). Una pizzeria d'asporto:
   si sceglie, si dice l'ora, si manda l'ordine. In alto il fuoco del forno;
   sotto, il menu' col piu' e il meno e la comanda di carta accanto.
   Anton per l'insegna e i prezzi, Manrope per leggere. */

@font-face{font-family:Anton;src:url(../font/anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(../font/manrope-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --carbone:#231A17;        /* la bocca del forno: testo 16,9:1 su bianco */
  --marmo:#F1F0EE;          /* il banco */
  --pomodoro:#B8321A;       /* 6,0:1 su bianco, 5,2:1 sul marmo */
  --basilico:#2E6A3A;
  --cenere:#6B625E;         /* testo secondario: 5,9:1 su bianco */
  --bianco:#FFFFFF;
  --insegna:Anton,Impact,"Arial Narrow",sans-serif;
  --testo:Manrope,system-ui,sans-serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:var(--bianco);color:var(--carbone);font:400 1.0625rem/1.6 var(--testo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--pomodoro)}
:focus-visible{outline:3px solid var(--pomodoro);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,.h1,h2,h3,h4{font-family:var(--insegna);font-weight:400;letter-spacing:.005em;line-height:1}
h2{font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);margin-bottom:1.4rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}

.fascia-esempio{background:var(--pomodoro);color:var(--bianco);font-size:.82rem;text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}
.testata{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;padding:1rem var(--bordo);background:var(--carbone);color:var(--bianco)}
.marchio{font:400 2rem/1 var(--insegna);color:var(--bianco);text-decoration:none;margin-right:auto;letter-spacing:.02em}
.testata nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.testata a{color:var(--bianco)}
.testata nav a{text-decoration:none;font-size:.95rem}
.testata nav a:hover{text-decoration:underline}
.t-tel{font-weight:700;text-decoration:none}

/* ── il fuoco ─────────────────────────────────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:end;
  background:var(--carbone);color:var(--bianco);padding-top:clamp(2rem,5vw,4rem)}
.h1{font-size:clamp(3.2rem,1.4rem + 6.4vw,7.4rem);line-height:.94;margin-bottom:1.6rem;max-width:12ch}
.sotto{font-size:1.15rem;max-width:40ch;margin-bottom:1.4rem;color:#EDE6E2}
.stato{display:inline-block;font-weight:700;border-left:4px solid var(--pomodoro);padding:.2rem 0 .2rem .9rem;margin-bottom:2rem;max-width:44ch}
.vai{display:inline-block;background:var(--pomodoro);color:var(--bianco);font-weight:800;text-decoration:none;padding:1rem 1.6rem;border-radius:6px}
.vai:hover{background:#9d2a15}
.fuoco img,.fuoco video{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:4px}
.fuoco .ferma{margin-top:.6rem}

/* ── il menu' e la comanda ────────────────────────────────────────────────── */
.menu{background:var(--marmo)}
.menu-testa{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 3rem;margin-bottom:1.6rem}
.menu-testa h2{margin-bottom:0}
.evito{border:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.evito legend{float:left;font-weight:700;margin-right:.6rem;padding:0}
.evito label{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border:1.5px solid #cfc9c4;border-radius:99px;background:var(--bianco);cursor:pointer;font-size:.95rem}
.evito label:has(input:checked){border-color:var(--carbone);background:var(--carbone);color:var(--bianco)}
.evito input{accent-color:var(--pomodoro)}
.menu-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,23rem);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.categoria{padding:0;margin-bottom:2.4rem}
.categoria h3{font-size:1.9rem;color:var(--pomodoro);padding-bottom:.5rem;border-bottom:3px solid var(--carbone)}
.categoria ul{list-style:none;padding:0}
.pizza{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.4rem 1.4rem;align-items:center;padding:1rem 0;border-bottom:1px solid #d9d4cf}
.pizza h4{font-size:1.7rem;margin-bottom:.25rem}
.p-ingr{color:var(--cenere);font-size:.98rem;max-width:46ch}
.p-al{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem;font-size:.78rem}
.al{display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;border:1.5px solid var(--cenere);border-radius:50%;
  font-weight:700;color:var(--cenere);font-size:.75rem;line-height:1}
.al-niente{color:var(--cenere)}
.p-avviso{font-weight:800;color:var(--pomodoro);font-size:.95rem}
.p-avviso:empty{display:none}
.pizza.contiene h4,.pizza.contiene .p-ingr{opacity:.5}
.p-prezzo{font:400 1.6rem var(--insegna);white-space:nowrap}
.passo{display:flex;align-items:center;gap:.35rem}
.passo button{width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid var(--carbone);background:var(--bianco);color:var(--carbone);
  font:700 1.4rem/1 var(--testo);cursor:pointer;display:grid;place-items:center}
.passo .piu{background:var(--carbone);color:var(--bianco)}
.passo .piu:hover{background:var(--pomodoro);border-color:var(--pomodoro)}
.passo .meno:disabled{opacity:.3;cursor:default}
.passo output{min-width:1.8ch;text-align:center;font:400 1.5rem var(--insegna)}

/* la comanda: un foglietto di carta, col bordo strappato */
.comanda{position:sticky;top:1rem;background:var(--bianco);padding:1.5rem 1.4rem 1.8rem;border-radius:3px 3px 0 0;
  box-shadow:0 1px 0 rgba(35,26,23,.06),0 22px 30px -24px rgba(35,26,23,.45);margin-bottom:12px}
.comanda::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  background:conic-gradient(from -45deg at 50% 100%,var(--bianco) 90deg,transparent 0) 0 0/16px 10px repeat-x}
.comanda h3{font-size:2rem;margin-bottom:1rem}
.righe{list-style:none;padding:0;margin-bottom:1rem;border-top:2px dashed #cfc9c4}
.righe li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid #ebe7e3;font-variant-numeric:tabular-nums}
.righe .vuota{color:var(--cenere);display:block}
.c-totale{display:flex;justify-content:space-between;align-items:baseline;font:400 1.9rem var(--insegna);margin-bottom:1.2rem}
.comanda form{display:grid;gap:.9rem}
.comanda label{display:grid;gap:.3rem;font-weight:700;font-size:.92rem}
.comanda input,.comanda select{font:400 1rem var(--testo);padding:.7rem .8rem;border:1.5px solid #bdb5af;border-radius:6px;background:var(--bianco);color:var(--carbone);min-height:2.9rem}
.comanda .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.88rem}
.comanda .spunta input{min-height:auto;width:1.15rem;height:1.15rem;margin-top:.2rem;flex:none}
.comanda button{font:800 1rem var(--testo);background:var(--basilico);color:var(--bianco);border:0;border-radius:6px;padding:.95rem 1rem;cursor:pointer}
.comanda button:hover{background:#24552e}
.esito{font-size:.95rem}
.esito:empty{display:none}
.esito blockquote{margin-top:.5rem;padding:.8rem 1rem;background:#E7F0E8;border-radius:12px 12px 12px 2px;font-weight:600}
.barra{display:none}

/* ── il forno ─────────────────────────────────────────────────────────────── */
.forno{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.forno figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.forno-testo p{max-width:40ch;margin-bottom:2rem;font-size:1.1rem}
.forno-testo img{width:100%;max-width:34rem;aspect-ratio:3/2;object-fit:cover;border-radius:4px}

.ritiro{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem 4rem;background:var(--carbone);color:var(--bianco)}
.ritiro a{color:var(--bianco);font-weight:700}
.ritiro p{max-width:38ch;margin-bottom:.8rem}
.orari div{display:flex;justify-content:space-between;max-width:24rem;padding:.6rem 0;border-bottom:1px solid #4a3d38;font-size:1.1rem}
.orari dd{font-weight:800}

.allergeni>p{max-width:62ch;margin-bottom:1.6rem}
.elenco{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem 2rem}
.elenco li{display:flex;align-items:center;gap:.7rem}
.piede{padding:2.5rem var(--bordo) 3rem;font-size:.9rem;color:var(--cenere);border-top:1px solid #e4dfda}
.piede p+p{margin-top:.3rem}

@media(max-width:900px){
  .apertura,.forno,.menu-griglia{grid-template-columns:1fr}
  .fuoco img,.fuoco video{aspect-ratio:4/3}
  .comanda{position:static}
  /* il conto sempre sotto il pollice, finche' la comanda e' lontana */
  .barra:not([hidden]){display:flex;justify-content:space-between;gap:1rem;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:5;
    background:var(--carbone);color:var(--bianco);font-weight:800;text-decoration:none;padding:.95rem 1.2rem;border-radius:10px;
    box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
  .barra.vicina{display:none}
}
@media(max-width:560px){
  .pizza{grid-template-columns:minmax(0,1fr) auto}
  .p-testo{grid-column:1/-1}
}

/* le scintille dal fuoco (pizzeria.js), finche' c'e' la foto e non il video */
.fuoco{position:relative}
.scintille{position:absolute;left:0;top:0;width:100%;aspect-ratio:4/5;pointer-events:none}
.ferma-moto{position:absolute;right:.8rem;bottom:.8rem;font:700 .8rem/1 var(--testo);color:var(--bianco);background:rgba(35,26,23,.7);
  border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.6rem .95rem;cursor:pointer}
@media(max-width:900px){.scintille{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.scintille,.ferma-moto{display:none}}

/* ── il video in cima: l'insegna in basso al centro ──────────────────────── */
.clip{--clip-velo:linear-gradient(0deg,rgba(35,26,23,.92) 0%,rgba(35,26,23,.5) 42%,rgba(35,26,23,.05) 75%);align-items:end;justify-items:center;text-align:center}
.clip{--velo-parole:rgba(35,26,23,.5)}   /* il velo sotto le parole (clip.css) */
.clip-parole{display:flex;flex-direction:column;align-items:center}
.clip-nome{font:400 clamp(4rem,2rem + 8vw,10rem)/.9 var(--insegna);text-transform:uppercase;letter-spacing:.02em}
.clip-frase{font:500 clamp(1.1rem,1rem + .5vw,1.4rem)/1.4 var(--testo)}
.clip-btn{background:var(--pomodoro);color:#fff;font-family:var(--testo)}

/* il secondo video (23/10): l'impasto, nel riquadro verticale della sezione del forno */
.forno figure .secondo{aspect-ratio:4/5;border-radius:4px}