/* Pizza Chic · grafica A «elegante scura» (tela Claude Design, scelta da Kevin il 05/11/2026) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("font/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("font/playfair-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("font/playfair-italic-latin.woff2") format("woff2");
}

:root {
  --fondo: #15110e;
  --testo: #f3ebdd;
  --grigio: #b5a793;
  --oro: #d6b36a;
  --linea: #2a221c;
  --bordo: #2c241e;
  --bordo-chiaro: #4a3d2c;
  --nav-h: 65px;
  --serif: "Playfair Display", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html {
  background: var(--fondo);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 6px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 1rem/1.45 var(--sans);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* testata */
.testata {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: calc(44px + env(safe-area-inset-top, 0px)) 24px 26px;
}
.testata .stemma { width: 34px; height: 34px; color: var(--oro); display: block; }
.testata h1 {
  font: 700 clamp(2.6rem, 12.3vw, 3.4rem)/1.05 var(--serif);
  letter-spacing: .5px;
  color: var(--testo);
}
.sotto {
  font-size: .75rem;
  letter-spacing: 5px;
  padding-left: 5px;
  text-transform: uppercase;
  color: var(--oro);
}
/* logo del biglietto da visita (scritta color crema per il fondo scuro) */
.testata .logo { line-height: 0; }
.testata .logo img { display: block; width: min(78vw, 340px); height: auto; }
/* sotto il logo i numeri del locale (Kevin 10/11: al posto delle quattro foto tonde) */
.testata .telefoni { margin-top: 16px; }
.testata .tel { min-height: 42px; padding: 0 14px; font-size: .9375rem; }

/* avviso in evidenza sotto il logo (lo cambia il bot: «📌 Coperto e avviso in alto») */
.avviso {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto 22px;
  padding: 12px 16px;
  border: 1px solid rgba(214, 179, 106, .55);
  border-radius: 14px;
  background: rgba(214, 179, 106, .08);
  color: var(--testo);
  font-size: .9375rem;
  line-height: 1.4;
}
.avviso .tv { flex: 0 0 auto; width: 28px; height: 28px; color: var(--oro); }
/* bollino ufficiale di Sky Sport: su fondo bianco, come i suoi colori originali */
.avviso .sky { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 6px 8px; background: #fff; border-radius: 8px; }
.avviso .sky img { display: block; width: auto; height: 20px; }
@media (max-width: 720px) { .avviso { margin-left: 16px; margin-right: 16px; } }

/* barra delle categorie */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  padding-top: env(safe-area-inset-top, 0px);
}
.barra ul {
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.barra ul::-webkit-scrollbar { display: none; }
.barra li:first-child { margin-left: auto; }
.barra li:last-child { margin-right: auto; }
.barra a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 999px;
  background: transparent;
  color: var(--testo);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.barra a[aria-current="true"] {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--fondo);
}
.barra a:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* sezioni */
.menu, .piede { max-width: 720px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 30px 0 4px;
}
.menu section:first-of-type .titolo { margin-top: 28px; }
h2 {
  font: italic 600 1.9375rem/1.15 var(--serif);
  color: var(--testo);
}
.titolo::after {
  content: "";
  order: 1;
  flex: 1 1 24px;
  height: 1px;
  background: var(--bordo-chiaro);
}
/* coperto in fondo alla riga del titolo di ogni sezione (Kevin 10/11); se il titolo è lungo va a capo, a destra */
.titolo .coperto {
  order: 2;
  margin-left: auto;
  white-space: nowrap;
  font-size: .8125rem;
  color: var(--grigio);
}
/* sotto il coperto, sempre su una riga sua e allineata a destra (Gabriele 10/11: «aggiunta/variazione +1 euro»);
   accanto al titolo non ci starebbe sul telefono */
.titolo .variazione {
  order: 3;
  flex: 1 0 100%;
  margin-top: -4px;
  text-align: right;
  white-space: nowrap;
  font-size: .8125rem;
  color: var(--grigio);
}
.titolo .coperto b, .titolo .variazione b { color: var(--oro); font-weight: 600; }
.nota {
  margin: 6px 0 4px;
  font-size: .90625rem;
  font-style: italic;
  color: var(--oro);
}

/* piatti */
.piatto {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--linea);
}
.piatto:last-child { border-bottom: 0; }
.piatto.con-foto { grid-template-columns: 78px 1fr auto; padding: 14px 0; }
.foto {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--linea);
  display: block;
}
.testo { min-width: 0; }
.nome { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--testo); }
.desc { margin-top: 4px; font-size: .875rem; line-height: 1.4; color: var(--grigio); }
.piatto:not(.con-foto) .desc { margin-top: 3px; }
.prezzo {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* piatto segnato «non disponibile» dal bot: resta nel menu, più spento, con l'etichetta
   (opacità scelte per restare sopra 4,5:1 di contrasto: si legge anche al sole) */
/* prodotti surgelati: asterisco dopo il nome e «* Prodotto surgelato» sul prodotto stesso (Kevin 10/11:
   la scritta va sul fritto misto, non in fondo alla sezione dove sembrava delle bruschette) */
.surg { margin-left: 3px; font-weight: 700; color: var(--oro); }
.surg-nota { margin-top: 3px; font-size: .78125rem; font-style: italic; line-height: 1.35; color: var(--grigio); }

.piatto.esaurito .foto { opacity: .4; }
.piatto.esaurito .nome { opacity: .62; }
.piatto.esaurito .desc, .piatto.esaurito .surg-nota { opacity: .75; }
.piatto.esaurito .prezzo { opacity: .7; }
.esaurito-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border: 1px solid rgba(214, 179, 106, .55);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--oro);
}

/* piede */
.piede { margin-top: 30px; padding-top: 22px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.piede .note { font-size: .8125rem; line-height: 1.5; color: var(--grigio); border-top: 1px solid var(--bordo); padding-top: 22px; }
/* indirizzo, telefoni e Facebook del biglietto da visita */
.contatti { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 24px; border-top: 1px solid var(--bordo); padding-top: 24px; }
.contatti a { color: var(--testo); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.contatti svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--oro); }
.indirizzo a { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; line-height: 1.35; text-align: left; }
.indirizzo span { text-decoration: underline; text-decoration-color: rgba(214, 179, 106, .5); text-underline-offset: 3px; }
.telefoni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 999px;
  color: var(--testo);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.tel svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--oro); }
.tel:focus-visible, .indirizzo a:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.facebook { font-size: .875rem; color: var(--grigio); }
.contatti + .note { border-top: 0; padding-top: 0; }

/* telefoni stretti (360 px e meno): pillole e margini più compatti */
@media (max-width: 380px) {
  .barra ul { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .barra a { padding: 0 12px; font-size: .9rem; }
  .menu, .piede { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 330px) {
  .barra a { padding: 0 9px; font-size: .85rem; }
  .piatto.con-foto { grid-template-columns: 64px 1fr auto; }
  .foto { width: 64px; height: 64px; }
}

@media (min-width: 720px) {
  .testata { padding-top: 60px; padding-bottom: 32px; }
  .piatto { padding: 16px 0; }
  /* sul computer le pillole vanno a capo invece di scorrere: si vedono tutte le categorie */
  .barra ul { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
  .barra li:first-child { margin-left: 0; }
  .barra li:last-child { margin-right: 0; }
}