/* =========================================================
   Menu di Fuori Corso — colazione, lunch, ape.

   Stessi font e stessi colori del sito: arrivano da stile-base.css,
   che carica anche la home. Non importa style.css, che porta con sé
   tutto il layout della home.

   Ogni pagina ha un colore di accento diverso, ripreso dalle tre
   card "i nostri menù" della home: grigio, rosa chiaro, rosa.
   ========================================================= */

/* ---------- token ---------- */

:root {
  --arancio-scuro: #b8431f;

  --testo: #2e2114;
  --testo-tenue: #6b5a45;
  --filo: #ded5c8;

  --accento: var(--grigio);
  --larghezza: 720px;
}

/* il colore cambia da pagina a pagina, come le card della home */
body[data-menu='colazione'] { --accento: #f7d2ad; }
body[data-menu='lunch']     { --accento: var(--rosa-chiaro); }
body[data-menu='ape']       { --accento: var(--rosa); }

body {
  background: var(--grigio);
  color: var(--testo);
  font-family: var(--corpo);
  overflow-x: hidden;
}

/* ---------- testata ---------- */

.testata {
  position: relative;
  padding: 22px 20px 0;
  background: var(--nero);
  overflow: hidden;
}

/* alone del colore della pagina, appena percepibile */
.testata::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -180px;
  right: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--accento);
  opacity: 0.16;
  filter: blur(40px);
  pointer-events: none;
}

.testata__interno {
  position: relative;
  z-index: 1;
  max-width: var(--larghezza);
  margin-inline: auto;
}

.torna {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: -0.16px;
  color: var(--grigio);
}

.torna::before {
  content: '\2039';
  font-size: 22px;
  line-height: 1;
}

.torna:hover { color: var(--arancio); }

/* il logo colorato del locale (cartella Drive del cliente) */
.marchio img {
  display: block;
  width: 64px;
  height: auto;
}

.marchio {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 30px;
  line-height: 30px;
  letter-spacing: 0.6px;
  color: var(--arancio);
}

.titolo {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 58px;
  line-height: 56px;
  letter-spacing: 1.16px;
  font-weight: 400;
  color: var(--grigio);
  text-transform: uppercase;
}

.orario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(239, 239, 239, 0.22);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.14px;
  color: var(--grigio);
}

.orario::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accento);
}

/* ---------- le tre linguette ---------- */

.tab {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab::-webkit-scrollbar { display: none; }

.tab__voce {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 18px 9px 12px;
  border-radius: 12px;
  background: rgba(239, 239, 239, 0.08);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: var(--grigio);
  transition: background 0.18s ease, color 0.18s ease;
}

.tab__voce:hover { background: rgba(239, 239, 239, 0.18); }

.tab__voce .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
}

/* la pagina in cui ci si trova: si salda al foglio del menu */
.tab__voce[aria-current='page'] {
  background: var(--accento);
  color: var(--marrone);
}

.tab__voce[aria-current='page'] .n {
  border-style: solid;
  opacity: 1;
}

/* ---------- barra delle categorie ---------- */

.barra-guscio {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--accento);
  box-shadow: 0 1px 0 rgba(37, 22, 4, 0.12);
}

.barra-guscio__interno {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding: 0 20px;
}

.barra {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.barra::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(37, 22, 4, 0.28);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.14px;
  color: var(--marrone);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.chip:hover { background: rgba(37, 22, 4, 0.09); }

.chip.attiva {
  background: var(--marrone);
  box-shadow: none;
  color: var(--grigio);
}

/* selettore di lingua: compare solo se il foglio ha le colonne in inglese */
.lingue {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.lingue:empty { display: none; }

.lingua {
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(37, 22, 4, 0.28);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--marrone);
}

.lingua.attiva {
  background: var(--marrone);
  box-shadow: none;
  color: var(--grigio);
}

/* ---------- corpo del menu ---------- */

.menu-corpo {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding: 8px 20px 40px;
}

.menu-vuoto {
  padding: 60px 0;
  font-size: 18px;
  color: var(--testo-tenue);
  text-align: center;
}

.gruppo {
  padding-top: 34px;
  scroll-margin-top: 64px;   /* la barra sticky non copre il titolo */
}

.gruppo__titolo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 34px;
  line-height: 36px;
  letter-spacing: 0.68px;
  font-weight: 400;
  color: var(--arancio);
  text-transform: uppercase;
}

/* filo che completa la riga del titolo fino al bordo */
.gruppo__titolo::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--filo);
}

.voci {
  display: flex;
  flex-direction: column;
}

.voce {
  padding: 14px 0;
  border-bottom: 1px solid var(--filo);
}

.voce:last-child { border-bottom: 0; }

/* la riga nome · · · · prezzo */
.voce__riga {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.voce__nome {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.17px;
  color: var(--marrone);
}

/* i puntini di guida: si allungano da soli fino al prezzo */
.voce__punti {
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  transform: translateY(-4px);
  background-image: radial-gradient(circle, var(--filo) 1px, transparent 1.4px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 center;
}

.voce__prezzo {
  flex: 0 0 auto;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  color: var(--arancio-scuro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voce__stella {
  font-size: 13px;
  color: var(--arancio);
  vertical-align: 1px;
}

.voce__desc {
  margin-top: 3px;
  padding-right: 76px;   /* non finisce sotto al prezzo */
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.16px;
  color: var(--testo-tenue);
}

.voce__alg {
  margin-top: 5px;
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #8a7862;
}

/* voce consigliata: un filo di colore sul lato, niente di più */
.voce--top {
  position: relative;
  padding-left: 13px;
}

.voce--top::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--arancio);
}

/* ---------- legenda allergeni ---------- */

.legenda {
  margin-top: 40px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px #e0d7c9;
}

.legenda__titolo {
  margin-bottom: 8px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--arancio-scuro);
}

.legenda__lista {
  font-size: 14px;
  line-height: 24px;
  color: var(--testo-tenue);
}

.legenda__nota {
  margin-top: 10px;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 21px;
  color: var(--testo-tenue);
}

/* ---------- piede ---------- */

.piede {
  padding: 30px 20px 34px;
  background: var(--arancio);
}

.piede__interno {
  max-width: var(--larghezza);
  margin-inline: auto;
}

.piede__marchio {
  font-family: var(--display);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.64px;
  color: var(--grigio);
}

.piede p {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 26px;
  letter-spacing: -0.15px;
  color: var(--grigio);
}

.piede__marchio + p { margin-top: 6px; }

.piede__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.piede__bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--grigio);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--grigio);
  transition: background 0.18s ease, color 0.18s ease;
}

.piede__bottone:hover { background: var(--grigio); color: var(--arancio); }

.piede__bottone--pieno {
  background: var(--grigio);
  color: var(--arancio);
}

.piede__bottone--pieno:hover { background: var(--marrone); color: var(--grigio); }

.piede__link {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 18px;
}

.piede__link a {
  font-family: var(--ui);
  font-size: 14px;
  line-height: 24px;
  color: var(--grigio);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.piede__link a:hover { color: var(--bianco); }

/* ---------- schermi larghi ---------- */

@media (min-width: 810px) {
  .testata { padding: 30px 40px 0; }

  .marchio { font-size: 36px; line-height: 36px; }

  .marchio img { width: 84px; }

  .titolo {
    font-size: 82px;
    line-height: 78px;
    letter-spacing: 1.64px;
  }

  .orario { font-size: 15px; }

  .tab__voce { font-size: 16px; padding: 10px 22px 10px 14px; }

  .barra-guscio__interno { padding: 0 40px; }

  .menu-corpo { padding: 8px 40px 60px; }

  .gruppo { padding-top: 44px; }

  .gruppo__titolo {
    font-size: 42px;
    line-height: 44px;
    letter-spacing: 0.84px;
  }

  .voce__nome { font-size: 19px; line-height: 28px; }
  .voce__prezzo { font-size: 19px; line-height: 28px; }
  .voce__desc { font-size: 17px; line-height: 28px; }

  .piede { padding: 38px 40px 42px; }
}

/* ---------- stampa: il menu su carta, senza cromature ---------- */

@media print {
  .barra-guscio,
  .tab,
  .torna,
  .piede__azioni { display: none; }

  body { background: var(--bianco); }

  .testata {
    padding: 0 0 12px;
    background: none;
    border-bottom: 2px solid var(--marrone);
  }

  .testata::after { display: none; }

  .marchio,
  .titolo { color: var(--marrone); }

  .orario { background: none; box-shadow: none; color: var(--marrone); }

  .gruppo { padding-top: 22px; break-inside: avoid; }

  .voce { break-inside: avoid; }

  .piede { background: none; }

  .piede__marchio,
  .piede p,
  .piede__link a { color: var(--marrone); }
}

@media (prefers-reduced-motion: reduce) {
  .barra { scroll-behavior: auto; }
}