/*
 * Acessibilidade (Sprint 07). Carregado depois do CSS do tema; não altera a aparência em repouso.
 * P1 foco visível · P2 link "pular para o conteúdo" e contêiner principal · P5 áreas de toque.
 */

/* ---- P1: foco visível (o tema removia o contorno de todos os elementos) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.ah-serarch-icon:focus-visible,
.s-close:focus-visible {
    outline: 3px solid #eb7420 !important;
    outline-offset: 2px !important;
}

/* Fundos escuros (carrossel, cabeçalho, rodapé escuro): contorno claro */
.featured3-sec :focus-visible,
.featured1-sec :focus-visible,
.featured4-sec :focus-visible,
.ak-header-sec :focus-visible,
.search-popup :focus-visible {
    outline-color: #fff !important;
}

/* Elementos com fundo laranja: contorno escuro para ter contraste */
#submit-btn:focus-visible,
.nl-form input[type="submit"]:focus-visible,
.button-style:focus-visible {
    outline-color: #212121 !important;
}

/* O contêiner principal só recebe foco programático (link "pular"); sem contorno */
main#conteudo:focus {
    outline: 0 !important;
}

/* ---- P2: link "Pular para o conteúdo" ---- */
.skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 100000;
    padding: 12px 18px;
    background: #212121;
    color: #fff !important;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 8px;
    outline: 3px solid #eb7420 !important;
    outline-offset: 2px;
}

/*
 * O tema aplicava "body main { fundo; padding }" a um <main> vazio logo após o cabeçalho (um espaçador).
 * O <main> agora é o contêiner real do conteúdo (landmark), então o espaçador e as seções que usavam
 * <main> como moldura passam a usar a classe .main-like, que reproduz exatamente aquelas regras.
 */
body main#conteudo {
    background: transparent;
    padding: 0;
}

/* :where() zera a especificidade: como "body main" no original, perde para qualquer regra de classe (ex.: .body-style). */
:where(body .main-like) {
    display: block;
    background: #fbfbfb;
    padding-top: 50px;
    padding-bottom: 50px;
}

body.page-template-homepage-two .main-like,
body.page-template-homepage-three .main-like,
body.page-template-homepage-four .main-like,
body.single-post .main-like,
body.home .main-like {
    background: #fff;
    padding-top: 0;
}

/* ---- P5: áreas de toque (aumentam a área clicável sem mover o leiaute) ---- */
/* Só elementos que no tema são estáticos (position: static) recebem position: relative. */
.footer-links a,
.single-post-pagination .p-text {
    position: relative;
}

.footer-links a::after,
.single-post-pagination .p-text::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -12px;
    bottom: -12px;
}

.owl-dot {
    position: relative;
}

.owl-dot::after {
    content: "";
    position: absolute;
    left: -7px;
    right: -7px;
    top: -7px;
    bottom: -7px;
}

.navbar-toggler,
.ah-serarch-icon {
    position: relative;
}

.navbar-toggler::after,
.ah-serarch-icon::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

@media (max-width: 991.98px) {
    .footer-links a::after,
    .single-post-pagination .p-text::after {
        top: -14px;
        bottom: -14px;
    }
}