/* La barra in cima al sito. UN SOLO FILE, per tutte le pagine.
 *
 * [8/8/2026] PERCHE' ESISTE. La barra era scritta DUE volte: a mano nelle home
 * italiana e inglese, che sono HTML statico, e in React nel componente
 * SiteHeader per tutte le altre pagine. Due copie vuol dire due aspetti
 * diversi, e infatti lo erano: logo di misure diverse, bottoni di altezze
 * diverse, spazi diversi. Il titolare l'ha detto chiaro: nessun sito al mondo
 * ha il menu diverso da pagina a pagina.
 *
 * Adesso l'aspetto sta qui e basta. Le due tecnologie restano (l'HTML statico
 * non puo' montare un componente React), ma disegnano lo stesso identico
 * risultato perche' leggono lo stesso file.
 *
 * LE MISURE SONO SCRITTE UNA VOLTA SOLA, in cima, e tutto il resto le usa: se
 * si cambia l'altezza dei bottoni si cambia in un posto e vale ovunque.
 */

:root {
  --barra-alt-bottone: 38px;   /* altezza IDENTICA per lingua e «Inizia gratis» */
  --barra-pad-y: 14px;         /* aria sopra e sotto: uguale, cosi' sono centrati */
  --barra-pad-x: 28px;         /* distanza dal bordo della finestra */
  /* [8/8/2026] 40 -> 46 -> 53 -> 64. Oltre non ha senso alzare: il disegno e'
     fatto di 12 forme piene e le sue parti sottili (gambe del tavolo, filo
     dell'ellisse) sotto i 64px scendono sotto il pixel e il browser le rende
     come sfumature grigie. A 64 il filo arriva a circa 1,2 px, cioe' il minimo
     per essere una linea invece di un'ombra. */
  --barra-logo: 64px;
  --barra-testo: 14.5px;
  --barra-verde-a: #4a7c59;
  --barra-verde-b: #2d4a3a;
}

.mt-head {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(135deg, var(--barra-verde-a) 0%, var(--barra-verde-b) 100%);
  transition: box-shadow .25s ease;
}
.mt-head.attaccato { box-shadow: 0 6px 24px rgba(8,20,14,.28); }

/* padding UGUALE sopra e sotto: e' cio' che centra davvero i bottoni.
   Prima c'era `padding:16px 0 0`, cioe' 16 sopra e 0 sotto: i bottoni
   sembravano incollati al bordo inferiore. */
.mt-head .barra-interno {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
  padding: var(--barra-pad-y) var(--barra-pad-x);
  box-sizing: border-box;
}

.mt-head .barra-logo { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.mt-head .barra-logo img {
  height: var(--barra-logo); width: auto; display: block;
  /* [8/8/2026] NIENTE filtro qui. `brightness(0) invert(1)` serviva a far
     diventare bianco il logo nero, ma un filtro CSS obbliga il browser a
     RASTERIZZARE l'immagine, e su un SVG senza dimensione propria la
     rasterizza a una misura di ripiego e poi la ingrandisce: da qui il logo
     sgranato, che ingrandendolo peggiorava. Adesso si carica direttamente
     mee-table-logo-barra.svg, gia' bianco e con width/height dichiarati:
     resta vettoriale a qualsiasi misura. */
  transition: height .25s ease;
}
.mt-head.attaccato .barra-logo img { height: calc(var(--barra-logo) - 6px); }

.mt-head .barra-link {
  color: #fff; font-size: var(--barra-testo); font-weight: 600; text-decoration: none;
  opacity: .92; white-space: nowrap;
}
.mt-head .barra-link:hover { opacity: 1; }

/* I DUE BOTTONI: stessa altezza, stesso modo di centrare il contenuto.
   Prima uno era un <button> e l'altro un <a> con padding diverso, e nelle
   pagine React il selettore delle lingue e' un componente a se' che usciva
   42px contro 38: la barra risultava due pixel piu' alta su /pricing che
   sulla home. Qui la misura la danno queste righe, a tutti e tre. */
.mt-head .barra-bottone,
.mt-head .barra-lingua,
.mt-head .langdd > button {
  height: var(--barra-alt-bottone);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; border-radius: 10px;
  font-size: var(--barra-testo); font-weight: 700; line-height: 1;
  box-sizing: border-box; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.mt-head .barra-bottone {
  background: #fff; color: #2c3418; border: 1px solid #fff; text-decoration: none;
}
.mt-head .barra-lingua,
.mt-head .langdd > button {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.45);
}
.mt-head .langdd { position: relative; }

/* [9/8/2026] NON SI NASCONDE PIU' TUTTO SOTTO I 900px.
   La regola di prima faceva sparire «Arrivi da Quandoo?», «Blog» e «Prezzi»
   e non metteva niente al loro posto: bastava avere il browser non a tutto
   schermo su un portatile e il link del listino non esisteva piu'. Il
   titolare se n'e' accorto dal desktop, non dal telefono.
   Ordine di importanza commerciale: PREZZI e QUANDOO restano, il BLOG cede
   per primo, perche' il blog non vende e la scadenza Quandoo si', e perche'
   il prezzo e' la prima cosa che un ristoratore vuole sapere.
   Invece di nascondere, prima si stringe: caratteri e spazi piu' piccoli. */
@media (max-width: 900px) {
  .mt-head .barra-interno { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .mt-head .barra-secondario { font-size: 13px; padding-left: 4px; padding-right: 4px; }
}

/* Sotto i 700px il blog esce: le altre due voci ci stanno ancora. */
@media (max-width: 700px) {
  .mt-head .barra-secondario.barra-blog { display: none; }
  .mt-head .barra-interno { gap: 8px; }
  .mt-head .barra-secondario { font-size: 12.5px; }
}

/* Sul telefono restano PREZZI, la lingua e il bottone. «Arrivi da Quandoo?»
   diventa la sola parola «Quandoo», che si capisce lo stesso e occupa un
   terzo: sparire del tutto sarebbe peggio, visto che e' la ragione per cui
   in questi due mesi la gente ci arriva. */
@media (max-width: 520px) {
  .mt-head .barra-interno { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .mt-head .barra-secondario { font-size: 12px; padding-left: 2px; padding-right: 2px; }
  .mt-head .barra-quandoo { font-size: 0; }
  .mt-head .barra-quandoo::after { content: 'Quandoo'; font-size: 12px; }
}