/* ==========================================================================
   Acessibilidade - navegação por teclado (cabeçalho e menu principal)
   Carregado por último na library global-styling.
   ========================================================================== */

/* Compensa o cabeçalho fixo: o elemento focado não fica escondido atrás dele */
html {
    scroll-padding-top: 160px;
}

/* --- Foco visível ---------------------------------------------------------
   theme.css define "body a { outline: none !important; }". Aqui o contorno
   volta apenas para :focus-visible (teclado); o clique do mouse não muda. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible,
body [role="button"]:focus-visible {
    outline: 3px solid #103E66 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #fff;
}

/* Barra superior azul: contorno amarelo */
#jt-nav-header a:focus-visible,
#jt-nav-header button:focus-visible,
#jt-nav-header [role="button"]:focus-visible {
    outline-color: #FFD100 !important;
    box-shadow: none;
}

/* Rodapé (fundo azul/verde): contorno amarelo, como na barra superior */
#jt-rodape a:focus-visible,
#jt-rodape button:focus-visible,
#jt-rodape input:focus-visible,
#jt-rodape [role="button"]:focus-visible {
    outline-color: #FFD100 !important;
    box-shadow: none;
}

/* Ícones do rodapé: o link "inline" com imagem "block" partia o contorno */
#jt-rodape a:has(> img) {
    display: inline-block;
    vertical-align: middle;
}

/* Ícones de imagem dentro de links: o contorno precisa envolver a imagem */
#jt-nav-icons a,
#jt-header-social-media-links a,
#jt-header-img-logo a,
.region-selo .selo a {
    display: inline-block;
}

/* Campo e botão de busca (h.css removia o outline do botão) */
header .search-block-form input[type="submit"]:focus-visible,
header .search-block-form input[type="search"]:focus-visible {
    outline: 3px solid #103E66 !important;
    outline-offset: 2px;
}

/* Destinos dos atalhos ("Ir para o conteúdo/menu"): sem contorno ao receber foco programático */
#jt-conteudo:focus,
#jt-menu-principal:focus,
#jt-rodape:focus {
    outline: none;
}

/* --- Menu principal (desktop) ---------------------------------------------
   Submenus fechados ficam fora da ordem de Tab (visibility: hidden).
   O hover do mouse continua abrindo como antes. */
@media (min-width: 992px) {
    #header #mainNav > li.dropdown > .dropdown-menu {
        visibility: hidden;
    }

    #header #mainNav > li.dropdown:hover > .dropdown-menu,
    #header #mainNav > li.dropdown.jt-submenu-aberto > .dropdown-menu {
        visibility: visible;
    }

    /* Aberto pelo teclado: mesmo resultado visual do hover (efeito-1 do tema) */
    #header .header-nav-main nav > ul > li.dropdown.jt-submenu-aberto > .dropdown-menu {
        display: block;
        opacity: 1;
        top: auto;
        transform: none;
    }

    #header .header-nav-main nav > ul > li.dropdown.jt-submenu-aberto > .dropdown-menu li a {
        opacity: 1;
        transform: none;
    }
}

/* Botão-seta que abre/fecha o submenu */
#mainNav > li.dropdown {
    position: relative;
}

#mainNav .jt-submenu-toggle {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: 0;
    min-width: 24px;
    min-height: 24px;
    padding: 4px 6px;
    margin-left: -8px;
    color: #333;
    line-height: 1;
    cursor: pointer;
}

#mainNav .jt-submenu-toggle .fa {
    transition: transform .2s;
}

#mainNav .jt-submenu-toggle[aria-expanded="true"] .fa {
    transform: rotate(180deg);
}

/* O tema estiliza "#mainNav > li > a"; o link principal fica ao lado da seta */
@media (min-width: 992px) {
    #mainNav > li.dropdown {
        white-space: nowrap;
    }

    #mainNav > li.dropdown > a {
        display: inline-block;
    }

    /* Ordem visual: nome · seta · borda separadora. O separador (border-right
       do link em theme.css) passa para a seta, que fica entre o nome e a borda */
    #header .header-nav-main nav > ul > li.dropdown > a {
        border-right: 0;
        padding-left: 10px;
        padding-right: 2px;
    }

    #header #mainNav > li.dropdown > .jt-submenu-toggle {
        margin-left: 0;
        padding: 0 8px;
        border-right: 1.5px solid rgb(185, 185, 185);
    }

    /* Contorno para dentro: não encosta no nome do item */
    #header #mainNav > li.dropdown > .jt-submenu-toggle:focus-visible {
        outline-offset: -3px;
        box-shadow: none;
    }

    /* Itens com nome longo (Jurisprudência, Transparência) crescem em vez de
       transbordar a largura fixa de 10em do tema */
    #header .header-nav-main.header-nav-main-light #mainNav > li.dropdown {
        width: auto;
        min-width: 10em;
    }

    #mainNav > li.dropdown > .dropdown-menu {
        white-space: normal;
    }
}

/* Mobile: a seta fica à direita do item e o submenu abre pela classe do tema */
@media (max-width: 991px) {
    /* Mantém só o indicador antigo do tema (custom.js); o botão fica
       transparente por cima dele, recebendo toque e teclado */
    #mainNav > li.dropdown > .jt-submenu-toggle {
        position: absolute;
        right: 0;
        top: 0;
        width: 44px;
        height: 40px;
        padding: 0;
        margin: 0;
        z-index: 2;
    }

    #mainNav > li.dropdown > .jt-submenu-toggle .fa {
        visibility: hidden;
    }

    /* O contêiner do menu corta o que passa da borda: contorno para dentro */
    #mainNav a:focus-visible,
    #mainNav > li.dropdown > .jt-submenu-toggle:focus-visible {
        outline-offset: -3px;
        box-shadow: none;
    }

    #header #mainNav > li.dropdown.jt-submenu-aberto > .dropdown-menu {
        display: block;
    }
}

/* --- Página inicial: notícias x menu lateral -------------------------------
   No HTML as notícias vêm antes do menu (ordem do desktop). No celular o menu
   aparece primeiro; o JS também move o nó para o Tab seguir a tela, e esta
   regra garante o mesmo visual se o JS não carregar. */
@media (max-width: 991px) {
    #jt-body-bloco-1 {
        display: flex;
        flex-direction: column;
    }

    #jt-body-bloco-1 > #jt-body-bloco-1-menu {
        order: -1;
    }
}

/* Links que envolvem imagens nas notícias: "inline" deixava o contorno de
   foco como uma linha fina; inline-block faz o contorno envolver a foto */
#jt-body-bloco-1-noticias a:has(> img),
#jt-conteudo .region-content a:has(> img) {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

/* Modo alto contraste */
html .contrast #mainNav .jt-submenu-toggle {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
}

html .contrast a:focus-visible,
html .contrast button:focus-visible,
html .contrast input:focus-visible,
html .contrast [role="button"]:focus-visible {
    outline: 3px solid #FFD100 !important;
    box-shadow: none;
}