/* =========================================================================
 * inoltre-theme — IL SELETTORE DELLA LINGUA (dalla 0.37.0)
 * =========================================================================
 *
 * Un bottone a spigolo vivo con il globo e la sigla della lingua in cui si
 * legge; sotto, una tendina con le cinque lingue e l'avviso della traduzione
 * automatica. La marcatura e' in template-parts/lingue.php, il comportamento
 * in assets/js/lingue.js.
 *
 * IL MOVIMENTO. La tendina non compare a scatto: si srotola dall'alto come un
 * foglio (clip-path), scendendo di pochi pixel mentre prende corpo, e le
 * lingue arrivano una dopo l'altra, a quaranta millesimi di distanza. Si
 * chiude piu' in fretta di come si apre: chi chiude ha gia' deciso, e
 * aspettare l'animazione sarebbe un costo. Chi ha chiesto meno movimento vede
 * solo una dissolvenza.
 *
 * Tutti i valori vengono dai token di tokens.css: nessun colore scritto qui.
 */

.in-lingua {
    /* La curva morbida del sito, la stessa dei pannelli e della ricerca, e una
     * seconda piu' «elastica» per l'apertura. */
    --in-lingua-curva: cubic-bezier(0.22, 0.61, 0.36, 1);
    --in-lingua-curva-apri: cubic-bezier(0.16, 1, 0.3, 1);
    --in-lingua-larghezza: 16.5rem;

    position: relative;
    flex: 0 0 auto;
    font-family: var(--in-interfaccia);
}

/* ------------------------------------------------------------- il bottone */

.in-lingua-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 1.75rem;
    padding: 0 0.625rem;
    border: 1px solid var(--in-bordo-forte);
    border-radius: var(--in-raggio);
    background: transparent;
    color: var(--in-testo);
    font-family: var(--in-interfaccia);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition:
        border-color 240ms var(--in-lingua-curva),
        background-color 240ms var(--in-lingua-curva),
        color 240ms var(--in-lingua-curva);
}

.in-lingua-bottone:hover,
.in-lingua-bottone:focus-visible,
.in-lingua.is-aperta .in-lingua-bottone {
    border-color: var(--in-testo);
    background: var(--in-fondo);
}

/* La sigla: larghezza fissa, cosi' passando da «IT» a «FR» il bottone non
 * cambia misura. */
.in-lingua-sigla {
    display: inline-block;
    min-width: 2.1ch;
    text-align: center;
    /* Le maiuscole spaziate lasciano un vuoto a destra: lo si recupera. */
    margin-right: -0.12em;
}

.in-lingua-globo,
.in-lingua-freccia {
    flex: 0 0 auto;
    display: block;
}

.in-lingua-globo { color: var(--in-testo-tenue); transition: color 240ms var(--in-lingua-curva); }

.in-lingua-bottone:hover .in-lingua-globo,
.in-lingua-bottone:focus-visible .in-lingua-globo,
.in-lingua.is-aperta .in-lingua-globo { color: var(--in-marchio); }

/* Il globo che gira: il meridiano centrale si stringe e si riallarga, come
 * un globo visto ruotare di un quarto di giro. Una volta, al passaggio. */
.in-lingua-globo-meridiano {
    transform-box: fill-box;
    transform-origin: center;
}

.in-lingua-freccia {
    color: var(--in-testo-tenue);
    transition: transform 360ms var(--in-lingua-curva-apri), color 240ms var(--in-lingua-curva);
}

.in-lingua.is-aperta .in-lingua-freccia {
    transform: rotate(180deg);
    color: var(--in-testo);
}

@media (prefers-reduced-motion: no-preference) {
    .in-lingua-bottone:hover .in-lingua-globo-meridiano,
    .in-lingua-bottone:focus-visible .in-lingua-globo-meridiano {
        animation: in-lingua-giro 900ms var(--in-lingua-curva) 1;
    }
}

@keyframes in-lingua-giro {
    0%   { transform: scaleX(1); }
    45%  { transform: scaleX(0.08); }
    55%  { transform: scaleX(0.08); }
    100% { transform: scaleX(1); }
}

/* ------------------------------------------------------------ la tendina */

.in-lingua-pannello {
    position: absolute;
    top: calc(100% + 0.625rem);
    right: 0;
    z-index: 60;
    width: min(var(--in-lingua-larghezza), calc(100vw - var(--in-margine-laterale) * 2));
    border-top: 3px solid var(--in-marchio);
    background: var(--in-fondo);
    color: var(--in-testo);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-shadow:
        0 0 0 1px rgb(22 19 15 / 0.06),
        0 24px 48px -16px rgb(22 19 15 / 0.30),
        0 6px 14px -6px rgb(22 19 15 / 0.12);

    /* Chiusa: arrotolata verso l'alto, trasparente, un filo piu' su. Il
     * ritaglio lascia margine ai lati e sopra, cosi' l'ombra non si taglia. */
    visibility: hidden;
    opacity: 0;
    translate: 0 -0.5rem;
    clip-path: inset(-3rem -3rem 100% -3rem);
    transition:
        opacity 180ms ease-in,
        translate 220ms var(--in-lingua-curva),
        clip-path 220ms var(--in-lingua-curva),
        visibility 0s linear 220ms;
}

.in-lingua.is-aperta .in-lingua-pannello {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    clip-path: inset(-3rem -3rem -4rem -3rem);
    transition:
        opacity 240ms ease-out,
        translate 520ms var(--in-lingua-curva-apri),
        clip-path 560ms var(--in-lingua-curva-apri),
        visibility 0s linear 0s;
}

/* Il titolo della tendina: piccolo, spaziato, come le testatine del sito. */
.in-lingua-titolo {
    margin: 0;
    padding: 0.875rem 1.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--in-testo-tenue);
}

.in-lingua-elenco {
    list-style: none;
    margin: 0;
    padding: 0 0 0.375rem;
}

/* Le lingue arrivano una dopo l'altra. */
.in-lingua-voce {
    --i: 0;
    opacity: 0;
    translate: 0 0.375rem;
    transition: opacity 120ms ease-in, translate 120ms ease-in;
}

.in-lingua-voce:nth-child(2) { --i: 1; }
.in-lingua-voce:nth-child(3) { --i: 2; }
.in-lingua-voce:nth-child(4) { --i: 3; }
.in-lingua-voce:nth-child(5) { --i: 4; }
.in-lingua-voce:nth-child(6) { --i: 5; }
.in-lingua-voce:nth-child(7) { --i: 6; }
.in-lingua-voce:nth-child(8) { --i: 7; }

.in-lingua.is-aperta .in-lingua-voce {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity 320ms ease-out calc(90ms + var(--i) * 40ms),
        translate 480ms var(--in-lingua-curva-apri) calc(90ms + var(--i) * 40ms);
}

.in-lingua-voce a {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    color: var(--in-testo);
    text-decoration: none;
}

/* Il passaggio del mouse: una velatura che si stende da sinistra, nella tinta
 * chiara della stagione (il grigio caldo con le stagioni spente). */
.in-lingua-voce a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--in-stagione-chiaro, var(--in-fondo-tenue));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms var(--in-lingua-curva);
}

/* La lingua attuale: un filetto rosso sul bordo sinistro. */
.in-lingua-voce a::after {
    content: "";
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: 0;
    width: 3px;
    background: var(--in-marchio);
    transform: scaleY(0);
    transition: transform 380ms var(--in-lingua-curva-apri);
}

.in-lingua-voce a:hover::before,
.in-lingua-voce a:focus-visible::before { transform: scaleX(1); }

.in-lingua-voce a:focus-visible {
    outline: 2px solid var(--in-fuoco);
    outline-offset: -2px;
}

.in-lingua-voce-sigla {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--in-testo-tenue);
    transition: color 240ms var(--in-lingua-curva);
}

.in-lingua-voce-nome {
    font-family: var(--in-titoli);
    font-size: 1.0625rem;
    line-height: 1.2;
    transition: translate 380ms var(--in-lingua-curva);
}

.in-lingua-voce a:hover .in-lingua-voce-sigla,
.in-lingua-voce a:focus-visible .in-lingua-voce-sigla { color: var(--in-marchio); }

.in-lingua-voce a:hover .in-lingua-voce-nome,
.in-lingua-voce a:focus-visible .in-lingua-voce-nome { translate: 0.1875rem 0; }

.in-lingua-voce-segno {
    color: var(--in-marchio);
    opacity: 0;
    transition: opacity 240ms var(--in-lingua-curva);
}

.in-lingua-voce.is-attuale a { cursor: default; }
.in-lingua-voce.is-attuale a::after { transform: scaleY(1); }
.in-lingua-voce.is-attuale .in-lingua-voce-sigla { color: var(--in-marchio); }
.in-lingua-voce.is-attuale .in-lingua-voce-nome { font-weight: 600; }
.in-lingua-voce.is-attuale .in-lingua-voce-segno { opacity: 1; }

/* ------------------------------------------- l'avviso della traduzione */

.in-lingua-avviso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 0.75rem 1.125rem 0.875rem;
    border-top: 1px solid var(--in-bordo);
    background: var(--in-fondo-tenue);
    color: var(--in-testo-tenue);
    font-size: 0.75rem;
    line-height: 1.45;
}

.in-lingua-avviso p { margin: 0; grid-column: 2; }

.in-lingua-avviso-segno {
    grid-row: 1;
    margin-top: 0.1rem;
    color: var(--in-marchio);
}

/* Una frase sola: quella giusta per la lingua in cui si legge. */
.in-lingua-avviso-traduzione { display: none; }
.in-lingua.is-tradotta .in-lingua-avviso-originale { display: none; }
.in-lingua.is-tradotta .in-lingua-avviso-traduzione { display: block; }

/* Sulle pagine tradotte l'avviso conta di piu': prende il colore del testo. */
.in-lingua.is-tradotta .in-lingua-avviso { color: var(--in-testo); }

/* --------------------------------------------- nella barra, scorrendo */

/* Nella barra la ricerca e il selettore stanno affiancati. */
.in-barra-cerca {
    display: flex;
    align-items: center;
}

/* Il selettore della barra c'e' solo con la testata assottigliata, quando la
 * banda alta e' sparita. Compare allargandosi come l'icona del sito a
 * sinistra, con gli stessi tempi: le due cose arrivano insieme. Finche' e'
 * nascosto e' `visibility: hidden`, quindi niente tabulatore e niente
 * lettori di schermo. */
.in-lingua--barra {
    width: 0;
    margin-inline-end: 0;
    opacity: 0;
    visibility: hidden;
    overflow: clip;
    transition:
        width 320ms var(--in-lingua-curva),
        margin-inline-end 320ms var(--in-lingua-curva),
        opacity 200ms ease,
        visibility 0s linear 320ms;
}

.in-testata-ridotta .in-lingua--barra {
    width: 4.5rem;
    margin-inline-end: var(--in-s3);
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transition:
        width 320ms var(--in-lingua-curva),
        margin-inline-end 320ms var(--in-lingua-curva),
        opacity 240ms ease 80ms,
        visibility 0s linear 0s;
}

/* Alto come il bottone tondo della ricerca, cosi' stanno sulla stessa riga. */
.in-lingua--barra .in-lingua-bottone {
    width: 4.5rem;
    height: 2.25rem;
    border-color: var(--in-testo);
}

.in-lingua--barra .in-lingua-pannello { top: calc(100% + 0.75rem); }

/* Nella banda alta, assottigliandosi la testata, il selettore se ne va con la
 * banda: lo si toglie anche dal tabulatore. */
.in-testata-ridotta .in-lingua--servizio { visibility: hidden; }

/* -------------------------------------------------------- sullo stretto */

@media (max-width: 61.99rem) {
    .in-lingua--servizio .in-lingua-bottone { padding-inline: 0.5rem; gap: 0.35rem; }

    .in-testata-ridotta .in-lingua--barra { margin-inline-end: var(--in-s2); }
}

/* ------------------------------------------------- senza JavaScript */

/* Senza script il bottone non saprebbe aprire niente: si nasconde, e le
 * sigle restano in fila, come collegamenti semplici. */
html:not(.in-js) .in-lingua-bottone,
html:not(.in-js) .in-lingua-titolo,
html:not(.in-js) .in-lingua-voce-nome,
html:not(.in-js) .in-lingua-voce-segno,
html:not(.in-js) .in-lingua-avviso,
html:not(.in-js) .in-lingua--barra { display: none; }

html:not(.in-js) .in-lingua-pannello {
    position: static;
    width: auto;
    visibility: visible;
    opacity: 1;
    translate: none;
    clip-path: none;
    border: 0;
    background: none;
    box-shadow: none;
}

html:not(.in-js) .in-lingua-elenco { display: flex; gap: var(--in-s3); padding: 0; }
html:not(.in-js) .in-lingua-voce { opacity: 1; translate: none; }
html:not(.in-js) .in-lingua-voce a { display: inline-block; padding: var(--in-s2) 0; }
html:not(.in-js) .in-lingua-voce a::after { display: none; }

/* --------------------------------------------- meno movimento, chiesto */

@media (prefers-reduced-motion: reduce) {
    .in-lingua-pannello,
    .in-lingua.is-aperta .in-lingua-pannello {
        translate: none;
        clip-path: none;
        transition: opacity 160ms ease, visibility 0s linear 160ms;
    }

    .in-lingua.is-aperta .in-lingua-pannello { transition: opacity 160ms ease, visibility 0s; }

    .in-lingua-voce,
    .in-lingua.is-aperta .in-lingua-voce {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .in-lingua-freccia,
    .in-lingua-voce a::before,
    .in-lingua-voce a::after,
    .in-lingua-voce-nome,
    .in-lingua--barra,
    .in-testata-ridotta .in-lingua--barra { transition-duration: 1ms; transition-delay: 0s; }
}