/* ==========================================================================
   BARRA DELLE LINGUE  (markup: common/lang_bar.php)
   --------------------------------------------------------------------------
   Un tondo con le due lettere della lingua, al posto delle bandiere
   (images/flag_<id>.png, una per sito e per lingua). La lingua attiva e'
   piena nel colore del sito, le altre sono contornate: si leggono sia sul
   bianco sia su una testata scura, perche' il tondo porta con se' il proprio
   fondo.

   La POSIZIONE di #flag resta del sito, nel suo screen.css; qui solo
   l'aspetto delle voci. Le regole partono da #flag per battere quelle dei
   siti su `#flag ul.lang li.flag`.

   Variabili lette, con ripiego:
     --awv-lingua-bg     fondo della lingua attiva  <- --color-accent <- #444
     --awv-lingua-text   testo della lingua attiva                    <- #fff
   ========================================================================== */

/* Sopra la testata. Su Demo la testata copriva la barra: i tondi si vedevano
   velati e NON si potevano cliccare (il clic arrivava al logo). 1002 e' un
   gradino sopra la barra dell'utente (#session, 1001), lo stesso valore che
   TonerFirenze aveva gia' messo nel suo screen.css. La posizione resta del
   sito: z-index vale solo se il sito posiziona #flag, come fanno tutti. */
#flag { z-index: 1002; }

#flag ul.lang {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    list-style: none;
}
#flag ul.lang li.flag {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
}
#flag ul.lang li.flag::before { content: none; }

#flag .awv-lingua {
    --awv-l-bg: var(--awv-lingua-bg, var(--color-accent, #444));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--awv-l-bg);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--awv-l-bg);
    font: 700 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s, color .15s, transform .15s;
}
#flag .awv-lingua:hover,
#flag .awv-lingua:focus-visible {
    background: var(--awv-l-bg);
    color: var(--awv-lingua-text, #fff);
    transform: translateY(-1px);
}
#flag .awv-lingua--attiva {
    background: var(--awv-l-bg);
    color: var(--awv-lingua-text, #fff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* il nome completo, per i lettori di schermo: a video basta la sigla, e il
   nome compare comunque al passaggio del mouse (title) */
#flag .awv-lingua-nome {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}