/*
 * =================================================================================================
 * Codice CSS riscritto per massima compatibilità con browser datati (Legacy Browser Support)
 *
 * NOTE:
 * - Variabili CSS (--var) sostituite con valori statici.
 * - Funzioni moderne (clamp(), color-mix()) sostituite con valori fissi e media query.
 * - CSS Grid layout sostituito con Flexbox per una maggiore compatibilità.
 * =================================================================================================
 */

/* Tema chiaro */
html {
  height: 100%;
  scroll-behavior: auto; /* 'smooth' non è supportato ovunque */
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Prefisso per vecchi Firefox */
  -webkit-box-sizing: border-box; /* Prefisso per vecchi Chrome/Safari */
}

body, button, input, select, textarea {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  color: #0f172a; /* Fallback per --text */
}

body {
  min-height: 100%;
  background: #fff; /* Fallback per --surface */
 background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23008c95' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

* {
  text-transform: none !important; /* :where() rimosso per compatibilità */
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 980px; /* Fallback per --maxw */
  margin: 0 auto;
  /* Fallback per clamp(12px,3vw,28px) con un valore fisso ragionevole */
  padding: 16px 20px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #008c95;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  /* Fallback per clamp(70px,28vw,70px) */
  width: 70px;
  border-radius: 12px;
}

.brand-title {
  /* Fallback per clamp(18px,2.8vw,22px) */
  font-size: 20px;
  margin: 0;
  letter-spacing: .2px;
}

.actions {
  display: flex;
  gap: 10px;
}

/* Pulsante leggero (niente ombre/trasformazioni) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 18px;
  border-radius: 12px;
  /* Fallback per --bd (color-mix con trasparenza) -> rgba */
  border: 1px solid rgba(100, 116, 139, 0.16);
  color: #0f172a; /* Fallback per --text */
  font-weight: 600;
  background: #fff; /* Fallback per --surface */
  transition: background-color .15s ease, border-color .15s ease;
}

.btn:hover {
  /* Fallback per color-mix(...) -> un colore statico leggermente accentato */
  background: #f2f9fc;
}

/* :focus-visible sostituito con :focus per compatibilità */
.btn:focus {
  outline: none;
  /* Fallback per --ring (color-mix) -> colore statico pre-calcolato */
  box-shadow: 0 0 0 3px #93d4f1;
}

.section-head {
  display: block; /* 'grid' potrebbe non essere supportato, 'block' è sicuro */
  padding: 16px 0 8px;
}

.title {
  /* Fallback per clamp(24px, 4.8vw, 36px) con media query */
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

/* Aumenta la dimensione del font su schermi più grandi */
@media (min-width: 768px) {
  .title {
    font-size: 36px;
  }
}

.muted {
  color: #64748b; /* Fallback per --muted */
}

/*
 * FALLBACK PER CSS GRID USANDO FLEXBOX
 * Flexbox è molto più supportato di Grid nei browser datati.
 * La tecnica del margine negativo simula la proprietà 'gap'.
 */
.dish-list {
  display: -webkit-box; /* Vecchia sintassi Flexbox */
  display: -ms-flexbox; /* Sintassi IE10 */
  display: flex; /* Sintassi moderna */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 16px -8px 24px -8px; /* Margine negativo = metà del "gap" desiderato */
}

@media (max-width: 720px) {
  .dish-list {
    display: block; /* Ritorna al layout a colonna singola */
    margin: 16px 0 24px;
  }
}

.dish-card {
  background: #fff; /* Fallback per --surface */
  /* Fallback per --bd (color-mix con trasparenza) -> rgba */
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 16px; /* Fallback per --radius */
  padding: 18px; /* Valore statico intermedio per --pad */
  
  /* Logica per le colonne in Flexbox */
  width: calc(50% - 16px); /* 100% / 2 colonne - gap totale (8px * 2) */
  margin: 8px; /* Spaziatura tra le card (il nostro "gap") */
}

/* Su mobile, le card occupano tutta la larghezza */
@media (max-width: 720px) {
  .dish-card {
    width: auto;
    margin: 0 0 16px 0; /* Margine solo in basso */
  }
  .dish-card:last-child {
    margin-bottom: 0;
  }
}

.dish-main {
  /* Usiamo flex anche qui per un allineamento robusto */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}

.dish-name {
  /* Fallback per clamp(17px,3.2vw,20px) */
  font-size: 18px;
  letter-spacing: .2px;
  font-weight: 700;
  line-height: 1.25;
}

.dish-price {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: #0f172a; /* Fallback per --text */
  -ms-flex-negative: 0;
      flex-shrink: 0; /* Impedisce al prezzo di andare a capo */
}

.allergens {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.allergen-ico {
  width: 28px;
  height: 28px;
}

/* Testi legali */
.legal {
  margin-top: 8px;
}

.legal-text {
  color: #64748b; /* Fallback per --muted */
  font-size: .95rem;
}

.site-footer {
  padding: 8px 0 28px;
}

.footer-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

/* Riduci animazioni dove richiesto dal sistema */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
    -webkit-transition: none !important; /* Prefisso per compatibilità */
    -moz-transition: none !important;
    -o-transition: none !important;
  }
}

/* Tocco mobile: niente flash al tap, ma senza hack pesanti */
a, button, .btn, .ghost {
  -webkit-tap-highlight-color: transparent;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}