/* ============================================================
   ZENITH — IL PULSANTE DELLA LINGUA
   12 settembre 2026

   COME FUNZIONA, E PERCHE' COSI'
   Il pulsante NON traduce col JavaScript: porta a una pagina vera
   in romeno, con il suo indirizzo. E' l'unico modo per cui una
   ricerca in romeno possa trovare il sito — una traduzione fatta
   dal browser, Google non la vede nemmeno.

   Compare SOLO sulle pagine che hanno davvero la gemella tradotta.
   Un pulsante che porta a una pagina in italiano e' peggio che
   nessun pulsante.

   IL PUNTO DI INNESTO: una pagina tradotta in piu' = due righe di
   hreflang nelle due gemelle, e il pulsante compare da se'.
   ============================================================ */

.lingua{
  display:inline-flex; align-items:stretch; flex:0 0 auto;
  border:1px solid var(--linea); border-radius:99px; overflow:hidden;
  background:var(--bianco); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; line-height:1;
}
.lingua a,
.lingua span{
  display:flex; align-items:center; gap:5px;
  padding:8px 11px; text-decoration:none; color:var(--grigio);
  transition:background .22s ease, color .22s ease;
}
/* quella in cui sei: piena, e non si clicca */
.lingua .qui{
  background:var(--oro-sf); color:var(--oro-sc);
  cursor:default;
}
.lingua a:hover,
.lingua a:focus-visible{ background:var(--carta); color:var(--ink); }
.lingua .sep{ width:1px; padding:0; background:var(--linea); }

/* la bandierina: due rettangoli, disegnati col CSS.
   Non un'emoji: su Windows le bandiere non si vedono. */
.lingua .bnd{
  width:15px; height:11px; border-radius:2px; flex:0 0 auto;
  border:1px solid rgba(29,26,22,.18);
  background-size:100% 100%;
}
/* Italia: verde, bianco, rosso */
.lingua .bnd--it{
  background-image:linear-gradient(90deg,
    #008C45 0 33.33%, #F4F5F0 33.33% 66.66%, #CD212A 66.66% 100%);
}
/* Romania: blu, giallo, rosso */
.lingua .bnd--ro{
  background-image:linear-gradient(90deg,
    #002B7F 0 33.33%, #FCD116 33.33% 66.66%, #CE1126 66.66% 100%);
}

@media (max-width:1100px){
  /* sul telefono resta, ma stretto: la lingua e' la prima cosa che
     serve a chi arriva dalla Romania, non si nasconde nel menu */
  .lingua{ font-size:.63rem; }
  .lingua a, .lingua span{ padding:7px 9px; gap:4px; }
  .lingua .bnd{ width:13px; height:10px; }
}
@media (max-width:420px){
  /* solo le bandiere: le due sigle si capiscono dal colore */
  .lingua .sigla{ display:none; }
  .lingua a, .lingua span{ padding:7px 10px; }
  /* IN QUALE DELLE DUE SEI. Senza le sigle restavano due bandierine
     affiancate e identiche, e non dicevano niente: quella della lingua
     in cui sei si vede piena, col filo d'oro attorno e un pelo piu'
     grande; l'altra e' un filo piu' spenta, cioe' si capisce che e' da
     toccare. */
  .lingua .qui{ background:var(--oro-sf); box-shadow:inset 0 0 0 1px var(--oro); }
  .lingua .qui .bnd{ transform:scale(1.1); }
  .lingua a .bnd{ opacity:.6; }
  .lingua a:hover .bnd,
  .lingua a:focus-visible .bnd{ opacity:1; }
}

/* nel menu laterale, la stessa cosa ma larga */
.menu-lato .lingua{
  width:100%; margin:0 0 14px;
  border-radius:12px;
}
.menu-lato .lingua a,
.menu-lato .lingua span{ flex:1; justify-content:center; padding:10px 8px; }
.menu-lato .lingua .sigla{ display:inline; }
