/* ===========================================================================
   SELETTORE DI LINGUA — foglio di stile
   ---------------------------------------------------------------------------
   Componente autonomo. Dipende da Bootstrap 5 (per il dropdown) e da niente
   altro: i colori stanno tutti nelle variabili qui sotto.

   Per portarlo in un altro progetto: copia questo file, cambia le variabili
   --sl-* e hai finito.
   =========================================================================== */

:root {
    /* --- i colori del componente ------------------------------------------
       Sono nove. Cambiando questi cambia tutto il selettore, senza toccare
       una sola regola. I valori di serie sono quelli di Villa Charm and
       Elegance. */
    --sl-fondo-menu  : #0F4C81;                 /* fondo della tendina       */
    --sl-testo       : #FFFFFF;                 /* testo sulla pillola       */
    --sl-testo-menu  : rgba(255, 255, 255, .9); /* voci non attive           */
    --sl-accento     : #5FDAE6;                 /* voce attiva, globo        */
    --sl-su-accento  : #0B2B45;                 /* testo sopra l'accento     */
    --sl-bordo       : rgba(95, 218, 230, .35);/* bordo della pillola       */
    --sl-velo        : rgba(18, 184, 200, .16);/* voce sotto il mouse       */
    --sl-ombra       : rgba(11, 43, 69, .38);
    --sl-carattere   : inherit;                 /* usa il font del sito      */

    /* misure */
    --sl-raggio-menu : 14px;
    --sl-altezza-menu: 22rem;   /* oltre questa altezza la tendina scorre    */
}

/* ---------------------------------------------------------------------------
   La pillola.

   Va messa FUORI dal menu di navigazione, come sua sorella e non come sua
   figlia. Motivo: su telefono il menu e' collassato dentro l'hamburger, e la
   lingua deve restare raggiungibile senza aprirlo.
   --------------------------------------------------------------------------- */
.selettore-lingua {
    display: flex;
    align-items: center;
    margin-left: 1.4rem;
    margin-right: 1.25rem;
}

.lingua-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid var(--sl-bordo);
    border-radius: 999px;
    color: var(--sl-testo);
    font-family: var(--sl-carattere);
    font-size: .82rem;
    letter-spacing: .05em;
    line-height: 1;
    padding: .62rem 1.05rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .3s ease, background-color .3s ease;
}

.lingua-toggle:hover,
.lingua-toggle[aria-expanded="true"] {
    border-color: var(--sl-accento);
    background: var(--sl-velo);
}

/* Globo e freccia sono immagini SVG usate come maschera, non SVG scritti
   nella pagina: Bootstrap Studio trasforma ogni <svg> inline in un blocco
   Custom Code. La maschera tiene il disegno, il colore resta quello del
   testo (currentColor), quindi anche le transizioni di colore restano. */
.lingua-globo,
.lingua-freccia {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.lingua-globo {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--sl-accento);
    -webkit-mask-image: url("../img/icone/lingua-globo.svg");
    mask-image: url("../img/icone/lingua-globo.svg");
}

/* La freccia ruota all'apertura: quando la tendina esce sotto il bordo dello
   schermo, e' l'unico segnale che dice "e' aperta". */
.lingua-freccia {
    flex: 0 0 auto;
    width: 10px;
    height: 7px;
    -webkit-mask-image: url("../img/icone/lingua-freccia.svg");
    mask-image: url("../img/icone/lingua-freccia.svg");
    margin-left: .15rem;
    color: rgba(255, 255, 255, .72);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), color .3s ease;
}

.lingua-toggle[aria-expanded="true"] .lingua-freccia {
    transform: rotate(180deg);
    color: var(--sl-accento);
}

.lingua-toggle:hover .lingua-freccia { color: var(--sl-accento); }

/* Sotto i 992px resta solo la sigla: "Nederlands" per esteso occupa 221px e
   manda a capo l'hamburger. */
.lingua-codice { display: none; }

/* ---------------------------------------------------------------------------
   La tendina.

   Non e' un <select>. Un <select> nativo apre una lista disegnata dal sistema
   operativo: non si puo' vestire, non si puo' arrotondare, non puo' avere i
   colori del sito, e su iPhone diventa una ruota che gira. Questo e' un
   dropdown di Bootstrap 5, cioe' HTML nostro.
   --------------------------------------------------------------------------- */
.lingua-menu {
    --bs-dropdown-min-width: 12.5rem;
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-bg: var(--sl-fondo-menu);
    --bs-dropdown-border-color: var(--sl-bordo);
    --bs-dropdown-border-radius: var(--sl-raggio-menu);
    --bs-dropdown-link-color: var(--sl-testo-menu);
    --bs-dropdown-link-hover-color: var(--sl-su-accento);
    --bs-dropdown-link-hover-bg: var(--sl-accento);
    --bs-dropdown-link-active-color: var(--sl-su-accento);
    --bs-dropdown-link-active-bg: var(--sl-accento);
    --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-item-padding-x: 1.1rem;
    max-height: var(--sl-altezza-menu);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 44px var(--sl-ombra);
    scrollbar-width: thin;
    scrollbar-color: var(--sl-accento) transparent;
    margin-top: .6rem !important;

    /* Da chiusa deve sparire dal flusso, non solo dalla vista.
       Con visibility:hidden la tendina restava larga 200px allineata a destra
       e sporgeva oltre il bordo: su telefono comparivano 23px di scorrimento
       orizzontale su tutte le pagine. Con display:none il problema non c'e',
       ma una transition non parte da display:none — per l'entrata serve una
       @keyframes. */
    display: none;
}

.lingua-menu.show {
    display: block;
    animation: linguaEntra .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes linguaEntra {
    from { opacity: 0; transform: translateY(-14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.lingua-menu::-webkit-scrollbar { width: 6px; }
.lingua-menu::-webkit-scrollbar-track { background: transparent; }
.lingua-menu::-webkit-scrollbar-thumb {
    background: var(--sl-accento);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   Le voci.

   Il problema iniziale era questo: la voce attiva e la voce sotto il mouse
   avevano lo stesso fondo pieno, quindi due voci vicine sembravano un blocco
   unico e non si capiva quale fosse selezionata.

   Ora la selezionata e' piena e ha la spunta; quella sotto il mouse e' solo
   accennata, con una barretta a sinistra. Il filo di spazio fra una voce e
   l'altra e' quello che le tiene separate a colpo d'occhio.
   --------------------------------------------------------------------------- */
.lingua-menu .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;

    /* larghezza piena meno i margini laterali. Con width:auto le voci si
       restringevano sul testo e la spunta finiva sopra l'ultima lettera. */
    width: calc(100% - .9rem);
    font-size: .88rem;
    border-radius: 8px;
    margin: 2px .45rem;
    padding-left: 1.35rem;
    padding-right: .95rem;
    background: transparent;
    transition: background-color .25s ease, color .25s ease;
}

.lingua-menu .dropdown-item::before {
    content: "";
    position: absolute;
    left: .55rem;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--sl-accento);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height .2s ease;
}

.lingua-menu .dropdown-item:hover,
.lingua-menu .dropdown-item:focus-visible {
    background: var(--sl-velo);
    color: var(--sl-testo);
}

.lingua-menu .dropdown-item:hover::before,
.lingua-menu .dropdown-item:focus-visible::before { height: 55%; }

.lingua-menu .dropdown-item.active,
.lingua-menu .dropdown-item.active:hover {
    background: var(--sl-accento);
    color: var(--sl-su-accento);
    font-weight: 500;
}

.lingua-menu .dropdown-item.active::before { height: 0; }

/* la spunta: due bordi ruotati di 45 gradi. Nessuna icona da caricare. */
.lingua-menu .dropdown-item.active::after {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 6px;
    margin-bottom: 3px;
    border-left: 2px solid var(--sl-su-accento);
    border-bottom: 2px solid var(--sl-su-accento);
    transform: rotate(-45deg);
}

.lingua-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--sl-accento);
    outline-offset: -2px;
}

/* arabo, ebraico e persiano si scrivono da destra */
.lingua-menu .dropdown-item[lang="ar"],
.lingua-menu .dropdown-item[lang="iw"],
.lingua-menu .dropdown-item[lang="fa"] { direction: rtl; }

/* ---------------------------------------------------------------------------
   GOOGLE TRANSLATE: si usa il motore, non la sua interfaccia.

   Il widget DEVE stare nella pagina per funzionare, ma tutto quello che
   disegna — la tendina "Powered by Google Traduttore", la barra grigia in
   cima, i fumetti al passaggio del mouse — resta fuori dalla vista.
   A schermo c'e' solo la nostra pillola.

   Se tocchi questo blocco, ricontrolla che "Powered by Google Traduttore"
   non ricompaia in alto a destra. Succede, ed e' brutto.
   --------------------------------------------------------------------------- */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-combo,
.goog-logo-link,
.goog-te-gadget-icon,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip *,
#goog-gt-tt,
#goog-gt-,
iframe.skiptranslate,
.skiptranslate > iframe {
    display: none !important;
    visibility: hidden !important;
}

/* la barra di Google spinge tutta la pagina giu' di 40px: va rimessa a posto */
html,
body,
body.translated-ltr,
body.translated-rtl {
    top: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}

/* il widget evidenzia in giallo le frasi tradotte: su un sito curato, no */
.goog-text-highlight,
font[style] {
    background: none !important;
    box-shadow: none !important;
}

/* Google avvolge il testo tradotto in <font> senza stile. Dentro componenti
   allineati (voci di menu, bottoni) mandano fuori registro il layout. */
font {
    font: inherit;
    color: inherit;
    background: none;
}

.lingua-menu font,
.lingua-toggle font,
.dropdown-item font {
    display: inline;
    vertical-align: baseline;
}

.notranslate { unicode-bidi: isolate; }

/* Titolo rimesso in chiaro per la traduzione (vedi titoli-animati.js): GSAP
   aveva nascosto i caratteri uno per uno, qui si riporta tutto visibile in
   un colpo solo. Serve solo se usi GSAP SplitText. */
.titolo-piatto,
.titolo-piatto * {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ---------------------------------------------------------------------------
   Barra che propone l'altra lingua.

   Compare solo se la lingua del browser non corrisponde a quella della
   pagina, e una volta chiusa non torna piu'. Non e' un reindirizzamento:
   mandare d'ufficio un visitatore su un'altra lingua confonde i crawler e
   irrita chi quella lingua l'aveva gia' scelta.
   --------------------------------------------------------------------------- */
.barra-lingua {
    position: relative;
    z-index: 200;
    background: var(--sl-accento);
    color: var(--sl-su-accento);
    padding: .6rem 0;
}

.barra-lingua[hidden] { display: none; }

.barra-lingua .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.barra-lingua-testo {
    margin: 0;
    font-size: .86rem;
    letter-spacing: .02em;
    text-align: center;
}

.barra-lingua-testo a {
    color: var(--sl-su-accento);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.barra-lingua-chiudi {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--sl-su-accento);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 .3rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .3s ease;
}

.barra-lingua-chiudi:hover { opacity: 1; }

/* se l'intestazione e' in position:absolute sopra l'hero, con la barra
   aperta va spostata sotto, altrimenti ci finisce sopra */
body.con-barra-lingua header { top: 44px; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .lingua-nome   { display: none; }
    .lingua-codice { display: inline; font-weight: 500; }

    .selettore-lingua {
        margin-left: auto;
        margin-right: .9rem;
    }

    .lingua-toggle { padding: .58rem .85rem; }
}

@media only screen and (max-width: 575px) {
    .lingua-menu {
        --bs-dropdown-min-width: 11rem;
        max-height: 60vh;
        margin-right: .25rem !important;
    }

    .barra-lingua-testo { font-size: .8rem; }
    body.con-barra-lingua header { top: 58px; }
}

@media only screen and (max-width: 400px) {
    .selettore-lingua { margin-right: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lingua-menu.show { animation: none; }
    .lingua-menu,
    .lingua-freccia { transition: none; }
}