/* Pizza Pazza: stile del sito. I colori arrivano da logo/palette.css */

*, *::before, *::after { box-sizing: border-box; }

/* Bangers: carattere "a fumetto" simile alla scritta PIZZA PAZZA del logo, usato solo per "a legna".
   Il file è nella cartella fonts/ (licenza libera OFL), così il sito non chiede nulla a Google */
@font-face {
  font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bangers.woff2") format("woff2");
}

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titoli: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --raggio: 14px;
  --bordo: color-mix(in srgb, var(--pp-testo) 12%, transparent);
  --ombra: 0 1px 2px rgb(42 33 28 / .06), 0 4px 16px rgb(42 33 28 / .06);
  --larghezza: 1080px;
  /* Altezza della barra fissa in alto (sul telefono comprende la zona di stato) */
  --topbar: calc(64px + env(safe-area-inset-top, 0px));
}

/* --strumenti è l'altezza della riga delle categorie del menù, aggiornata da app.js */
html { scroll-behavior: smooth; scroll-padding-top: var(--topbar); -webkit-text-size-adjust: 100%; }
.categoria, .menu__lista { scroll-margin-top: var(--strumenti, 120px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pp-testo);
  /* Lo sfondo generale è il crema della home: Safari su iPhone lo usa per colorare la barra di stato in alto.
     Il resto della pagina ha il suo crema più chiaro. */
  background: var(--pp-crema);
}
main, .footer { background: var(--pp-crema-chiaro); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pp-basilico-scuro); }
h1, h2, h3, h4 { font-family: var(--font-titoli); line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--pp-rosso); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--pp-basilico); outline-offset: 2px; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: background-color .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn svg { flex: none; }
.btn--rosso { background: var(--pp-rosso); color: #fff; }
.btn--rosso:hover { background: var(--pp-rosso-scuro); }
.btn--verde { background: var(--pp-basilico); color: #fff; }
.btn--verde:hover { background: var(--pp-basilico-scuro); }
.btn--bianco { background: #fff; color: var(--pp-testo); border-color: var(--bordo); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .95rem; }


/* ---------- Barra in alto ---------- */
/* Sul telefono: barra fissa con Chiama, Indicazioni e ricerca, nascosta finché si vede l'apertura */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: var(--topbar); padding: env(safe-area-inset-top, 0px) 16px 0;
  transition: transform .25s ease, visibility .25s;
  background: color-mix(in srgb, var(--pp-crema) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.hero-visibile .topbar { transform: translateY(-100%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.topbar__icone { display: flex; gap: 8px; }
.topbar__brand {
  display: none; align-items: center; gap: 8px; margin-right: auto;
  font: 800 1.15rem var(--font-titoli); color: var(--pp-rosso); text-decoration: none;
}
.topbar__nav { display: none; gap: 20px; }
.topbar__nav a { color: var(--pp-testo); text-decoration: none; font-weight: 600; }
.topbar__nav a:hover { color: var(--pp-rosso); }
.topbar .btn { display: none; }

/* ---------- Hero ---------- */
/* Logo grande al centro; sotto, i due adesivi (aperto/chiuso e indirizzo) distribuiti in larghezza.
   Adesivi, titolo e pulsante hanno lo stesso tratto del logo: contorno scuro e ombra piena in basso a destra */
.hero {
  /* Il rosso del pulsante e di "a legna" è un po' più scuro di quello del logo: è lo stesso colore,
     ma nel logo le lettere sono circondate dal contorno nero e sembrano più scure di una grande
     superficie rossa. Così all'occhio i tre rossi sembrano uguali */
  --rosso-logo: color-mix(in srgb, var(--pp-rosso) 70%, var(--pp-rosso-scuro));
  background: var(--pp-crema);
  padding: 24px 16px 40px;
  text-align: center;
  border-bottom: 1px solid var(--bordo);
  /* Sul telefono la prima schermata è alta quanto la parte visibile dello schermo: su iPhone finisce dove
     comincia la barra di Safari, come vuole Apple (la pagina non può arrivare al bordo del telefono) */
  min-height: 100vh; min-height: 100svh;
  padding-bottom: 24px;
}
.hero__marchio { max-width: 420px; margin: 0 auto; }
.hero__logo { width: 92%; margin: 0 auto; }
/* Due colonne uguali: adesivi della stessa larghezza e altezza, simmetrici rispetto al centro del logo */
.adesivi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 6px auto 0; padding: 0 6px; max-width: 340px; }
.adesivo {
  display: flex; flex-direction: column; padding: 8px 11px 9px; border-radius: 12px; /* quasi bianco come le schede Orari e Pagamenti, con un velo del crema della prima schermata */
  background: color-mix(in srgb, #fff 75%, var(--pp-crema)); text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--pp-testo) 40%, transparent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--pp-testo) 18%, transparent);
  font-size: .86rem; line-height: 1.25; color: var(--pp-testo-tenue); text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}
.adesivo b { display: block; color: var(--pp-testo); font: 800 1.05rem/1.15 var(--font-titoli); }
.adesivo--stato b { font-size: 1.28rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-basilico-scuro); }
.adesivo--chiuso b { color: var(--pp-rosso-scuro); }
.adesivo .riga-ico { display: flex; align-items: center; gap: 4px; }
.adesivo .riga-ico svg { flex: none; color: var(--pp-rosso); }
/* Invito con la freccia: dice che l'adesivo si tocca e cosa apre */
.adesivo .invito {
  display: flex; align-items: center; gap: 3px; margin-top: auto; padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--pp-testo) 25%, transparent);
  font-weight: 800; font-size: .9rem; color: var(--pp-basilico-scuro);
}
/* Spazio sopra la riga tratteggiata; l'invito va in fondo, così le righe dei due adesivi sono allineate */
.adesivo > :nth-last-child(2) { margin-bottom: 6px; }
/* Alla pressione l'adesivo scende sulla sua ombra, come un pulsante */
.adesivo--stato { --inclina: -1.5deg; }
.adesivo--luogo { --inclina: 1.5deg; }
.adesivo { transform: rotate(var(--inclina, 0deg)); }
.adesivo:active { transform: rotate(var(--inclina, 0deg)) translate(2px, 2px); box-shadow: none; }

/* Titolo e pulsante restano sotto la scritta del logo: è lei la cosa più grande della pagina */
.hero h1 { margin: 18px auto 0; font-size: clamp(1.45rem, 7vw, 2.4rem); font-weight: 800; }
.hero h1 .accento {
  display: inline-block; transform: rotate(-2deg); color: var(--rosso-logo);
  font-family: "Bangers", var(--font-titoli); font-weight: 400; font-size: 1.22em; letter-spacing: .03em;
  line-height: 1; vertical-align: -.04em;
  /* Solo il contorno nero, fatto con ombre sottili tutt'intorno senza spostamento
     (-webkit-text-stroke su Safari per iPhone dà problemi) */
  --c: var(--pp-testo);
  text-shadow:
    -1px -1px 0 var(--c), 1px -1px 0 var(--c), -1px 1px 0 var(--c), 1px 1px 0 var(--c),
    0 -1.2px 0 var(--c), 0 1.2px 0 var(--c), -1.2px 0 0 var(--c), 1.2px 0 0 var(--c);
}
.hero__azioni { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 18px auto 0; max-width: 300px; }
.hero__azioni .btn {
  min-height: 46px; border: 1.5px solid var(--pp-testo);
  font: 800 1rem var(--font-titoli); letter-spacing: .01em;
  transition: background-color .15s, transform .1s;
}
.hero__azioni .btn--rosso { background: var(--rosso-logo); }
.hero__azioni .btn--rosso:hover { background: var(--pp-rosso-scuro); }
/* Subito sotto il pulsante Chiama, fuori dal pulsante e più piccola, la riga su asporto e consegna */
.chiama { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.btn__testi { line-height: 1.15; text-align: center; }
.chiama__nota { margin: 0; font: 600 .8rem var(--font); text-align: center; color: var(--pp-testo); opacity: .75; }
.chiama__nota:empty { display: none; }
.hero__menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 6px 0;
  font: 800 .95rem var(--font-titoli); color: var(--pp-basilico-scuro); text-decoration: none;
}
.hero__menu:hover { color: var(--pp-basilico); }

/* Sul telefono lo spazio in più non va tutto sopra e sotto: si divide tra logo, adesivi, titolo e pulsante.
   Le righe "fr" vuote sono gli spazi. Gli elementi sono in gruppi ben separati:
   logo, titolo e adesivi (chi siamo, dove e quando) vicini tra loro, poi lo spazio più grande,
   il pulsante Chiama da solo, e "Guarda il menù" in fondo alla schermata, come invito a scorrere */
@media (max-width: 719.98px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: .5fr auto minmax(6px, .35fr) auto minmax(26px, .6fr) auto minmax(24px, 1.3fr) auto minmax(20px, 1fr) auto;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  /* Margini laterali stretti: logo, adesivi e pulsante usano quasi tutta la larghezza */
  /* Sui telefoni bassi il logo si rimpicciolisce perché tutta la prima schermata entri nella parte visibile:
     340px è l'altezza di tutto il resto (adesivi, titolo, pulsante, menù, margini minimi);
     1.135 è il rapporto larghezza/altezza del logo (640×564) */
  .hero .hero__logo {
    width: min(100%, calc((100svh - 340px - env(safe-area-inset-top, 0px)) * 1.135));
    justify-self: center;
  }
  .hero .adesivi { max-width: none; padding: 0 4px; gap: 32px; }
  .hero .hero__azioni { max-width: 340px; }
  .hero__marchio, .hero__text { display: contents; }
  .hero__logo { grid-row: 2; }
  .hero h1 { grid-row: 4; margin: 0 auto; }
  .adesivi { grid-row: 6; margin-top: 0; }
  .hero__azioni { grid-row: 8; margin-top: 0; width: 100%; }
  .hero__menu { grid-row: 10; justify-self: center; }
}

/* ---------- Menù ---------- */
.menu { max-width: var(--larghezza); margin: 0 auto; padding: 40px 0 24px; }
.menu__testa { padding: 0 16px; }
.menu__impasti { margin: 8px 0 0; color: var(--pp-testo-tenue); }
.impasto { color: var(--pp-testo); font-weight: 600; }

.menu__strumenti {
  position: sticky; top: var(--topbar); z-index: 20;
  background: var(--pp-crema-chiaro);
  padding: 2px 0 8px; margin-top: 12px;
  border-bottom: 1px solid var(--bordo);
}
.cerca {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; min-height: 46px;
  background: #fff; border: 1px solid var(--bordo); border-radius: 999px;
  color: var(--pp-testo-tenue);
}
.cerca:focus-within { border-color: var(--pp-basilico); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-basilico) 20%, transparent); }
.cerca input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--pp-testo);
}

/* Chiama e Indicazioni come simboli in alto a sinistra (solo telefono) */
.icona {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; color: #fff;
  transition: background-color .15s, transform .1s;
}
.icona:active { transform: scale(.94); }
.icona--rosso { background: var(--pp-rosso); }
.icona--rosso:hover { background: var(--pp-rosso-scuro); }
.icona--verde { background: var(--pp-basilico); }
.icona--verde:hover { background: var(--pp-basilico-scuro); }

.chips {
  position: relative;
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 10px 16px 4px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--bordo);
  color: var(--pp-testo); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.chip:hover { border-color: var(--pp-rosso); }
.chip--attivo { background: var(--pp-rosso); border-color: var(--pp-rosso); color: #fff; }

.menu__lista { padding: 0 16px; }
.caricamento, .vuoto { padding: 32px 16px; text-align: center; color: var(--pp-testo-tenue); }

/* Ogni categoria si apre e si chiude toccando il titolo */
.categoria { border-bottom: 1px solid var(--bordo); }
.categoria summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.categoria summary::-webkit-details-marker { display: none; }
.categoria summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2.5px solid var(--pp-rosso); border-bottom: 2.5px solid var(--pp-rosso);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.categoria[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.categoria summary:hover .categoria__titolo { color: var(--pp-rosso); }
.categoria__titolo {
  flex: 1; display: flex; align-items: baseline; gap: 10px;
  font-size: 1.3rem;
}
.categoria[open] .categoria__titolo { color: var(--pp-rosso); }
.categoria__corpo { padding-bottom: 20px; }
.categoria__descrizione { margin: 6px 0 0; color: var(--pp-testo-tenue); font-size: .95rem; }

.gruppo__titolo {
  margin: 18px 0 2px; padding: 4px 0;
  font: 800 .8rem var(--font); text-transform: uppercase; letter-spacing: .08em;
  color: var(--pp-basilico-scuro);
}
.gruppo__titolo span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--pp-testo-tenue); font-size: .85rem; }
.gruppo:first-of-type .gruppo__titolo { margin-top: 10px; }

/* Box "Gigante o da ½ metro" */
.formati {
  margin-top: 16px; padding: 16px 18px;
  background: var(--pp-crema); border-radius: var(--raggio);
  max-width: 480px;
}
.formati:empty { display: none; }
.formati h3 { font-size: 1.1rem; }
.formati p { margin: 4px 0 8px; color: var(--pp-testo-tenue); font-size: .92rem; }
.formati table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.formati th, .formati td { padding: 6px 0; text-align: right; }
.formati th[scope="row"] { text-align: left; font-weight: 600; }
.formati thead th { font-size: .8rem; color: var(--pp-testo-tenue); font-weight: 700; }
.formati tbody tr + tr > * { border-top: 1px dashed var(--bordo); }
.categoria__voci { list-style: none; margin: 0; padding: 0; }

.voce { padding: 12px 0; border-bottom: 1px dashed var(--bordo); }
.voce:last-child { border-bottom: 0; }
.voce__testa { display: flex; align-items: baseline; gap: 12px; }
.voce__nome { flex: 1; font: 700 1.05rem/1.3 var(--font); }
.voce__formato { font-weight: 400; color: var(--pp-testo-tenue); font-size: .9rem; }
.voce__prezzo { font-weight: 800; color: var(--pp-rosso); white-space: nowrap; font-variant-numeric: tabular-nums; }
.voce__ingredienti, .voce__base, .voce__nota { margin: 3px 0 0; color: var(--pp-testo-tenue); font-size: .95rem; }
.voce__base { color: var(--pp-basilico-scuro); font-weight: 600; font-size: .85rem; }
.voce__nota { font-style: italic; font-size: .88rem; }
.voce__ingredienti strong { color: var(--pp-testo); font-weight: 600; }
.voce__varianti { list-style: none; margin: 6px 0 0; padding: 0; }
.voce__varianti li { display: flex; justify-content: space-between; gap: 12px; color: var(--pp-testo-tenue); font-size: .95rem; padding: 2px 0; }

.supplementi {
  margin: 32px 16px 0; padding: 18px 20px;
  background: var(--pp-crema); border-radius: var(--raggio);
}
.supplementi:empty { display: none; }
.supplementi h3 { font-size: 1.15rem; margin-bottom: 8px; }
.supplementi ul { list-style: none; margin: 0; padding: 0; }
.supplementi li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.supplementi li + li { border-top: 1px dashed var(--bordo); }

/* ---------- Orari e pagamenti ---------- */
.info {
  max-width: var(--larghezza); margin: 0 auto; padding: 32px 16px;
  display: grid; gap: 16px;
}
.scheda {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 20px; box-shadow: var(--ombra);
}
.scheda h2 { font-size: 1.35rem; margin-bottom: 8px; }
.scheda p { margin: 0 0 8px; }
.scheda__evidenza { font-weight: 700; color: var(--pp-basilico-scuro); }

.orari, .pagamenti, .contatti, .social { list-style: none; margin: 0; padding: 0; }
.orari li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.orari li span:last-child { white-space: nowrap; }
.orari li + li { border-top: 1px dashed var(--bordo); }
.orari li.oggi { font-weight: 700; color: var(--pp-rosso); }
/* Ogni metodo: un disegnino semplice su un tondo crema, e il testo accanto */
.pagamenti li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.pagamenti li + li { border-top: 1px dashed var(--bordo); }
.pagamenti span:not(.pagamento__icona) { display: block; color: var(--pp-testo-tenue); font-size: .92rem; line-height: 1.3; }
.pagamento__icona {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--pp-crema);
}
.pagamento__icona svg { width: 28px; height: 24px; }

/* ---------- Dove siamo ---------- */
.dove { background: var(--pp-crema); }
.dove__testo { max-width: var(--larghezza); margin: 0 auto; padding: 40px 16px; }
.indirizzo { font-size: 1.2rem; font-weight: 700; margin: 8px 0 16px; }
.dove h3 { margin: 28px 0 8px; font-size: 1.15rem; }
.contatti li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--bordo); }
.contatti a { font-weight: 700; font-size: 1.1rem; color: var(--pp-rosso); text-decoration: none; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--bordo); text-decoration: none; font-weight: 600;
}

/* ---------- Allergeni ---------- */
.allergeni { max-width: var(--larghezza); margin: 0 auto; padding: 40px 16px; }
.allergeni h2 { font-size: 1.35rem; }
.allergeni p { color: var(--pp-testo-tenue); font-size: .95rem; }
.allergeni__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px;
  font-size: .92rem;
}
.allergeni__lista li { display: flex; align-items: center; gap: 8px; }
.num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--pp-crema); font-size: .75rem; font-weight: 700;
}

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 24px 16px; color: var(--pp-testo-tenue); font-size: .85rem; border-top: 1px solid var(--bordo); }
.footer p { margin: 0; }


.noscript { text-align: center; padding: 16px; background: var(--pp-crema); }

/* ---------- Schermi più grandi ---------- */
@media (min-width: 720px) {
  :root { --topbar: 60px; }
  .topbar { position: sticky; gap: 16px; padding: 0 24px; }
  .hero-visibile .topbar { transform: none; visibility: visible; }
  .topbar__icone { display: none; }
  .topbar__brand { display: flex; margin-right: 8px; }
  .topbar .cerca { flex: 0 1 320px; min-height: 40px; margin-right: auto; }
  .topbar__nav { display: flex; }
  .topbar .btn { display: inline-flex; }

  .hero {
    min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px;
    text-align: left; padding: 48px max(24px, calc((100% - var(--larghezza)) / 2));
  }
  .hero__marchio { margin: 0; }
  .hero h1 { margin: 0; }
  .hero__azioni { flex-direction: row; align-items: center; gap: 24px; max-width: none; margin-left: 0; }
  .hero__azioni .btn { padding: 0 28px; }

  .menu__testa, .menu__lista { padding: 0 24px; }
  .chips { padding: 10px 24px 4px; flex-wrap: wrap; }

  /* Due colonne di voci all'interno di ogni categoria */
  .categoria__voci { columns: 2; column-gap: 48px; }
  .voce { break-inside: avoid; }
  .voce:last-child { border-bottom: 1px dashed var(--bordo); }

  .supplementi { margin: 40px 24px 0; }
  .info { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; }
  .dove__testo, .allergeni { padding-left: 24px; padding-right: 24px; }
  .contatti { max-width: 420px; }
}