/* Birroteca Mercury — menù pubblico.
   Il locale ha 466 voci fra cucina e birre: la pagina è costruita attorno al
   trovare in fretta (sezioni sempre a portata, ricerca su tutto il menù). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* una regola di classe batterebbe l'attributo */

:root {
  --fondo: #14181c;
  --superficie: #1b2027;
  --alto: #232a32;
  --testo: #f4eee3;
  --muto: #a2abb4;
  --ambra: #e0a45e;
  --bordo: rgba(244, 238, 227, .12);
  --raggio: 12px;
  --colonna: 46rem;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 400 1rem/1.5 Barlow, system-ui, sans-serif;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--ambra); outline-offset: 2px; }

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

.testata {
  padding: clamp(2rem, 7vw, 3.5rem) 1.25rem 1.5rem;
  text-align: center;
}

.testata-logo {
  width: min(19rem, 68vw);
  height: auto;
  margin-inline: auto;
}

/* ----------------------------------------------------------------- barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo);
}

.barra-riga {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: var(--colonna);
  margin-inline: auto;
  padding: .5rem .75rem;
}

.lente {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--muto);
}
.lente:hover { color: var(--testo); background: var(--alto); }

.sezioni, .categorie {
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.sezioni::-webkit-scrollbar, .categorie::-webkit-scrollbar { display: none; }

.sezioni button, .categorie button {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color .15s, color .15s;
}

.sezioni button {
  padding: .5rem .85rem;
  font: 500 .8125rem/1 Oswald, system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muto);
}
.sezioni button:hover { color: var(--testo); }
.sezioni button[aria-current="true"] { background: var(--testo); color: var(--fondo); }

.categorie {
  max-width: var(--colonna);
  margin-inline: auto;
  padding: 0 .75rem .5rem;
}
.categorie button {
  padding: .3125rem .6875rem;
  font-size: .875rem;
  color: var(--muto);
  border: 1px solid var(--bordo);
}
.categorie button:hover { color: var(--testo); }
.categorie button[aria-current="true"] { background: var(--alto); color: var(--testo); border-color: transparent; }

/* --------------------------------------------------------------- ricerca */

.cerca { display: flex; flex: 1; align-items: center; gap: .5rem; }

.cerca input {
  flex: 1;
  min-width: 0;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 999px;
}
.cerca input::placeholder { color: var(--muto); }
.cerca input:focus { outline: none; border-color: var(--ambra); }
.cerca input::-webkit-search-cancel-button { display: none; }

/* ------------------------------------------------------------------ menù */

main { max-width: var(--colonna); margin-inline: auto; padding: 0 .75rem 4rem; }

.gruppo + .gruppo { margin-top: 2.5rem; }

.gruppo h2 {
  margin: 0 0 .25rem;
  font: 600 1.375rem/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.gruppo-nota {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--muto);
}

.gruppo ul { margin: 0; padding: 0; list-style: none; }

.voce {
  display: flex;
  gap: .875rem;
  width: 100%;
  padding: .875rem .5rem;
  text-align: left;
  border-top: 1px solid var(--bordo);
}
.voce:hover { background: var(--superficie); }

.voce-foto {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  padding: .25rem;
  background: var(--testo);
  border-radius: 8px;
}

.voce-corpo { flex: 1; min-width: 0; }

.voce-titolo {
  display: flex;
  align-items: baseline;
  gap: .625rem;
}

.voce-nome {
  font: 500 1.0625rem/1.3 Barlow, system-ui, sans-serif;
  letter-spacing: .01em;
}

.voce-punti {
  flex: 1;
  height: 1px;
  margin-bottom: .25rem;
  background: repeating-linear-gradient(to right, var(--bordo) 0 2px, transparent 2px 6px);
}

.voce-prezzo {
  flex: 0 0 auto;
  font: 500 1rem/1.3 Oswald, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.voce-prezzo small { font-size: .75em; color: var(--muto); }

.gf {
  flex: 0 0 auto;
  padding: 0 .25rem;
  font: 500 .625rem/1.5 Oswald, system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--ambra);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ambra) 40%, transparent);
  border-radius: 4px;
}

.voce-ingr {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .1875rem;
  font-size: .9375rem;
  color: var(--muto);
}

.bollo {
  display: inline-block;
  margin-top: .375rem;
  padding: .125rem .5rem;
  font: 500 .6875rem/1.5 Oswald, system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ambra);
  border: 1px solid color-mix(in srgb, var(--ambra) 45%, transparent);
  border-radius: 999px;
}

.vuoto { padding: 3rem 1rem; text-align: center; color: var(--muto); }

/* ---------------------------------------------------------------- scheda */

.scheda {
  width: min(30rem, calc(100vw - 1.5rem));
  padding: 0;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.scheda::backdrop { background: rgba(6, 8, 10, .72); }

.scheda-chiudi {
  position: absolute;
  top: .375rem;
  right: .625rem;
  padding: .25rem .5rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muto);
}
.scheda-chiudi:hover { color: var(--testo); }

.scheda-corpo { padding: 1.5rem; }

.scheda-foto {
  display: block;
  width: 100%;
  max-height: 13rem;
  object-fit: contain;
  padding: 1rem;
  background: var(--testo);
  border-radius: var(--raggio) var(--raggio) 0 0;
}

.scheda h3 {
  margin: 0 0 .25rem;
  font: 600 1.5rem/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .02em;
}

.scheda-dove { margin: 0 0 1rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muto); }

.scheda-ingr { margin: 0 0 1.25rem; }

.formati { display: grid; gap: .5rem; margin: 0; }

.formato {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem .75rem;
  background: var(--alto);
  border-radius: 8px;
}
.formato dt { flex: 1; font-size: .9375rem; color: var(--muto); }
.formato dd {
  margin: 0;
  font: 500 1.0625rem/1 Oswald, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.tecnica {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .0625rem .75rem;
  margin: 1.25rem 0 0;
  font-size: .9375rem;
}
.tecnica > div { display: contents; }
.tecnica dt {
  font: 500 .75rem/1.7 Oswald, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muto);
}
.tecnica dd { margin: 0; }

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

.piede {
  padding: 3rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--bordo);
}
.piede img { width: 11rem; opacity: .55; }
.piede-riga { margin: .75rem 0 0; }
.piede-riga a { color: inherit; }
.piede-firma { margin: 1.5rem 0 0; font-size: .8125rem; color: var(--muto); }