/* Solo Pizza, Nettuno - palette and hand-lettered category labels are taken from the
   pizzeria's own printed flyer, the only piece of design the business owns. */

:root {
  --paper: #FBF7F0;
  --paper-scuro: #F3EBDD;
  --inchiostro: #241F1B;
  --inchiostro-tenue: #5C544C;
  --corallo: #C9503F;
  --corallo-chiaro: #F6E3DE;
  --basilico: #6FB566;
  --basilico-chiaro: #E6F1E3;
  --mare: #9CBFC7;
  --mare-chiaro: #E8F0F2;
  --ambra: #E9A93C;
  --ambra-chiaro: #FBEEd8;
  --bordo: #E2D8C7;
  --raggio: 14px;
  --colonna: 1080px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--inchiostro);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: Fraunces, Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1em; }
a { color: var(--corallo); }

.riga {
  width: 100%;
  max-width: var(--colonna);
  margin-inline: auto;
  padding-inline: 22px;
}

.salta {
  position: absolute;
  left: -9999px;
  background: var(--inchiostro);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 50;
}
.salta:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--corallo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- header ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 247, 240, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}

.testata__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-family: Caveat, cursive;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.marchio img { width: 34px; height: 34px; }

.menu {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-size: .93rem;
}
.menu a {
  color: var(--inchiostro-tenue);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--inchiostro); border-bottom-color: var(--corallo); }

@media (max-width: 900px) { .menu { display: none; } }

/* ---------- buttons ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  border: 2px solid var(--corallo);
  transition: background-color .18s ease, color .18s ease;
}
.bottone--pieno { background: var(--corallo); color: #fff; }
.bottone--pieno:hover { background: #A93F31; border-color: #A93F31; }
.bottone--vuoto { background: transparent; color: var(--corallo); }
.bottone--vuoto:hover { background: var(--corallo-chiaro); }

.testata .bottone { padding: 9px 18px; }
@media (max-width: 520px) { .testata .bottone { padding: 8px 14px; font-size: .9rem; } }

/* ---------- hero ---------- */

.apertura { padding: clamp(38px, 7vw, 80px) 0 clamp(30px, 5vw, 56px); }

.apertura__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
/* fr columns only hold if the children are allowed to shrink below their content width */
.apertura__in > * { min-width: 0; }
@media (max-width: 900px) { .apertura__in { grid-template-columns: 1fr; } }

.occhiello {
  font-family: Caveat, cursive;
  font-size: 1.5rem;
  color: var(--corallo);
  margin-bottom: .2em;
}

.guida { font-size: 1.06rem; color: var(--inchiostro-tenue); max-width: 46ch; }

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.4em 0 1.6em;
}

.dati {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--bordo);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 460px) { .dati { grid-template-columns: 1fr 1fr; } }
.dati li { display: flex; flex-direction: column; }
.dati b { font-family: Fraunces, Georgia, serif; font-size: 1.28rem; font-weight: 600; }
.dati .su { font-size: .8rem; color: var(--inchiostro-tenue); font-weight: 400; }
.dati span { font-size: .84rem; color: var(--inchiostro-tenue); }

.apertura__foto {
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(36, 31, 27, .16);
  rotate: -1.2deg;
}
.apertura__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- generic section ---------- */

.sezione { padding: clamp(40px, 6vw, 76px) 0; }
.sezione--carta { background: var(--paper-scuro); }

.etichetta {
  font-family: Caveat, cursive;
  font-size: 1.55rem;
  color: var(--corallo);
  margin: 0 0 .1em;
}

.intro { max-width: 58ch; color: var(--inchiostro-tenue); }

/* ---------- il forno ---------- */

.forno__griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
@media (max-width: 820px) { .forno__griglia { grid-template-columns: 1fr; } }

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 22px 24px;
}
.scheda h3 { margin-bottom: .35em; }
.scheda p { margin: 0; color: var(--inchiostro-tenue); font-size: .96rem; }

.galleria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 820px) { .galleria { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .galleria { grid-template-columns: 1fr; } }

.galleria img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--bordo);
}

/* ---------- la carta ---------- */

.carta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
  align-items: start;
}
@media (max-width: 860px) { .carta { grid-template-columns: 1fr; } }

.pannello {
  background: #fff;
  border-radius: var(--raggio);
  overflow: hidden;
  border: 1px solid var(--bordo);
}

.pannello__testa {
  padding: 14px 24px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.pannello__testa h3 {
  font-family: Caveat, cursive;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.pannello__testa span { color: rgba(255, 255, 255, .88); font-size: .82rem; }

.pannello--bianche .pannello__testa { background: var(--basilico); }
.pannello--rosse   .pannello__testa { background: var(--corallo); }
.pannello--calzoni .pannello__testa { background: var(--mare); }
.pannello--calzoni .pannello__testa h3,
.pannello--calzoni .pannello__testa span { color: var(--inchiostro); }
.pannello--panuozzi .pannello__testa { background: var(--ambra); }
.pannello--panuozzi .pannello__testa h3,
.pannello--panuozzi .pannello__testa span { color: var(--inchiostro); }

.listino { list-style: none; margin: 0; padding: 8px 24px 22px; }
.listino li { padding: 9px 0; border-bottom: 1px dashed var(--bordo); }
.listino li:last-child { border-bottom: 0; }

.piatto {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
}
.piatto__punti {
  flex: 1;
  border-bottom: 1px dotted var(--bordo);
  transform: translateY(-3px);
}
.piatto__prezzo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ingredienti { display: block; font-size: .88rem; color: var(--inchiostro-tenue); }

.nota-carta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gettone {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .9rem;
}
.gettone b { font-weight: 600; }

/* ---------- asporto ---------- */

.asporto__griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
@media (max-width: 820px) { .asporto__griglia { grid-template-columns: 1fr; } }

.evidenza {
  background: var(--corallo-chiaro);
  border: 1px solid #EBCEC7;
  border-radius: var(--raggio);
  padding: 22px 24px;
}
.evidenza h3 { color: var(--corallo); }
.evidenza p { margin: 0; font-size: .96rem; }

/* ---------- contatti ---------- */

.contatti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 30px;
}
@media (max-width: 820px) { .contatti { grid-template-columns: 1fr; } }

.orari { list-style: none; margin: 0 0 18px; padding: 0; }
.orari li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordo);
}
.orari li:last-child { border-bottom: 0; }
.orari b { font-weight: 600; }

.avviso {
  background: var(--mare-chiaro);
  border-left: 3px solid var(--mare);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  font-size: .94rem;
  color: var(--inchiostro-tenue);
}
.avviso p:last-child { margin-bottom: 0; }

.recapiti { list-style: none; margin: 0; padding: 0; }
.recapiti li { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.recapiti li:last-child { border-bottom: 0; }
.recapiti span { display: block; font-size: .8rem; color: var(--inchiostro-tenue); }
.recapiti a { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; text-decoration: none; }
.recapiti a:hover { text-decoration: underline; }

/* ---------- footer ---------- */

.piede {
  background: var(--inchiostro);
  color: #D8D0C6;
  padding: 46px 0 34px;
  margin-top: clamp(40px, 6vw, 70px);
  font-size: .92rem;
}
.piede__in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.piede a { color: #F0B9AE; }
.piede .marchio { color: var(--paper); }
.piede p { margin: 0 0 .4em; }
.piede__nota { color: #9B9188; font-size: .84rem; }