/* ==========================================================================
   MEW Despacho - Acessibilidade da Home
   ========================================================================== */

/*
 * Atalhos de salto:
 * ficam fora da tela durante o uso comum e aparecem ao receber foco via Tab.
 */
.mew-skip-links {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.mew-skip-links a {
    position: relative;
    max-width: min(92vw, 360px);
    padding: 10px 14px;
    color: #ffffff;
    background: #071733;
    border: 2px solid #93c5fd;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .30);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-140%);
    transition:
        opacity .16s ease,
        transform .16s ease;
    pointer-events: none;
}

.mew-skip-links a:focus,
.mew-skip-links a:focus-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    outline: 3px solid #facc15;
    outline-offset: 3px;
}

/*
 * Foco de teclado claro sem interferir com cliques de mouse em navegadores
 * que oferecem suporte a :focus-visible.
 */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
    border-radius: 6px;
}

/*
 * Alvos dos atalhos recebem destaque somente quando o foco é enviado para
 * eles. Isso ajuda o usuário a perceber em que ponto da página chegou.
 */
#conteudoPrincipal:focus,
#buscaPrincipal:focus,
#categoriasPrincipal:focus,
#mewTodosProdutos:focus {
    outline: 3px solid rgba(37, 99, 235, .72);
    outline-offset: 5px;
}

#conteudoPrincipal,
#buscaPrincipal,
#categoriasPrincipal,
#mewTodosProdutos {
    scroll-margin-top: 20px;
}

/*
 * Melhora a indicação visual quando controles de formulário recebem foco.
 */
.hero-search input:focus-visible,
.filters input:focus-visible,
.filters select:focus-visible {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}

/*
 * Usuários que pedem menos movimento no sistema operacional continuam
 * recebendo todo o conteúdo e as cotações atualizadas, porém sem animações
 * decorativas intensas.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .ticker-track {
        transform: none !important;
    }

    .card:hover .card-img,
    .mew-trust-card:hover,
    .mew-category-card:hover,
    .mew-nearby-card:hover,
    .mew-recent-card:hover {
        transform: none !important;
    }
}