/*
|--------------------------------------------------------------------------
| Accessibilità pubblica
|--------------------------------------------------------------------------
|
| Miglioramenti comuni senza JavaScript:
| - focus da tastiera ben visibile;
| - navigazione disponibile anche su schermi piccoli;
| - rispetto della preferenza reduced motion;
| - evidenza coerente dei campi non validi.
|
*/

:where(
    a,
    button,
    input,
    textarea,
    select,
    [tabindex]
):focus-visible {
    outline:
        3px solid
        #7560d8;

    outline-offset:
        3px;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color:
        #a62f5b !important;

    box-shadow:
        0 0 0 3px
        rgba(
            166,
            47,
            91,
            0.14
        );
}

.information-field-error,
.document-field-error {
    display: block;

    color: #a62f5b;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 0.76rem;
    font-weight: 900;

    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Navigazione responsive senza JavaScript
|--------------------------------------------------------------------------
|
| site.css nasconde la navigazione sotto i 1000 px.
| La rendiamo nuovamente disponibile e scorrevole
| orizzontalmente quando lo spazio non è sufficiente.
|
*/

@media(max-width: 1000px) {
    header .nav {
        min-height: auto;

        padding:
            10px 0 9px;

        flex-direction: column;

        align-items: stretch;

        gap: 8px;
    }

    header .brand {
        align-self: flex-start;
    }

    header nav {
        display: flex;

        width: 100%;

        flex-wrap: nowrap;

        gap: 4px;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 4px;

        scrollbar-width: thin;

        -webkit-overflow-scrolling: touch;
    }

    header nav a {
        min-height: 44px;

        flex:
            0 0 auto;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding:
            10px 12px;
    }
}

/*
|--------------------------------------------------------------------------
| Movimento ridotto
|--------------------------------------------------------------------------
*/

@media(prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    .world:hover {
        transform: none;
    }
}