/**
 * Nappheme 2
 * Accessibility.
 */


/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.nap-skip-link {
    position: fixed;
    z-index: 99999;

    top: 12px;
    left: 12px;

    padding: 10px 16px;

    background: #fff;
    color: #000;

    text-decoration: none;

    transform: translateY(-200%);

    transition: transform 0.15s ease;
}


.nap-skip-link:focus {
    transform: translateY(0);
}


/* ==========================================================================
   KEYBOARD FOCUS
   ========================================================================== */

/*
 * Non rimuoviamo MAI il focus senza sostituirlo.
 *
 * Il colore è una variabile così ogni Child
 * potrà adattarlo alla propria grafica.
 */

:root {
    --nap-focus-color: #005fcc;
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {

    outline: 3px solid var(--nap-focus-color);
    outline-offset: 3px;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .nap-skip-link,
    .nap-navigation__desktop .sub-menu,
    .nap-mobile-navigation__overlay,
    .nap-mobile-navigation__panel,
    .nap-mobile-submenu-toggle__icon::before,
    .nap-mobile-submenu-toggle__icon::after {

        transition-duration: 0.01ms !important;
    }

}