/*
Theme Name: Serviços Online
Theme URI: https://servicosonline.tjba.jus.br
Author: Ative
Author URI: http://ative.ag
Maintainer: Antonio Paim (Núcleo de Desenvolvimento – PJBA)
Description: Tema desenvolvido para o portal dos Serviços Online, com ajustes de acessibilidade, responsividade e integração a serviços institucionais.
Version: 1.1.0
Text Domain: servicos-online
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

------------------------------------------------------------
BUILD INFORMATION
------------------------------------------------------------
Build: 2025-11-13
Build Type: Production
Build Maintainer: Antonio Paim
Compatibility: WordPress 5.8+, PHP 7.4+
Environment: TJBA – Servidores Linux / Apache

------------------------------------------------------------
CHANGELOG
------------------------------------------------------------
1.1.0 — 2025-11-13
- Inclusão de correções de acessibilidade WCAG 2.1 AA
- Ajuste de labels sr-only e aria-label em links com imagens decorativas
- Inclusão de role="presentation" via filtros automáticos
- Padronização da estrutura de tabelas (HTML Custom) para evitar erros do Gutenberg
- Implementação de figcaption acessível (sr-only)
- Correção de IDs duplicados gerados pelo Ultimate Blocks (Accordion)
- Correção de aria-expanded e role="button" nos toggles do plugin
- Otimização do script.js para centralizar patches de acessibilidade
- Revisão completa da galeria com imagens decorativas
- Melhoria de compatibilidade com CSS original e semântica WCAG

1.0.0 — Versão original Ative
- Implementação inicial do tema
- Estrutura visual, páginas base e integração padrão WP

------------------------------------------------------------
NOTES
------------------------------------------------------------
Este arquivo deve ser mantido como referência principal do build do tema.
A atualização deste cabeçalho não altera o funcionamento do site, mas garante:
- rastreabilidade
- governança técnica
- histórico de mudanças
- documentação interna
*/


*{
    margin: 0;
    border: 0;
    padding: 0;
    
}

a {
    color: #060b11;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto&display=swap');

html{
    scroll-behavior: smooth;
}
body{
    background-color: #fff;
    font-family: 'roboto', 'Open sans';
}
h1, h2, h3, h4{
    font-family: 'montserrat','roboto','opensans';
}
.container-page{
    min-height: 400px;
}

/* -- Acessibilidade --*/
#pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    visibility: visible;
    overflow: initial;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    padding: 5px !important;
}
#pojo-a11y-skip-content {
    position: absolute;
	margin-top: -50px;
}
pojo-a11y-skip-content
/* -- Fim Acessibilidade --*/


#topo1{
    padding: 20px;
}
#topo1 .row{
    align-items: center;
}
#menu{
    color: #fff;
    display: none;
    z-index: 999;
}
#control-nav{
    display: none;
}
nav a{
    color: #fff;
    padding: 10px;
    display: block;
}
nav a:hover{
    color: #fff;
    text-decoration: none;
}
nav li{
    border-left: 5px solid #004392;
}
nav li:hover{
    border-left: 5px solid #ff2020;
}
.sub-menu a:hover{
    border-left: none;
    background-color: #052041;
}
.sub-menu li:hover{
    border-left: none;
}
nav ul {
    margin-bottom: 0;
}
nav li {
    list-style: none;
}
header .control-nav {
    display: block;
    padding: 5px 10px;
    z-index: 2;
    cursor: pointer;
    font-size: 25px;
    background-color: #004392;
    width: fit-content;
    margin-bottom: 0;
    margin-left: 20px;
}
header nav {
    visibility: hidden;
    position: absolute;
    background-color: #004392;
    z-index: 2;
    min-width: 200px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    transform: translate(-200%, 0%);
}
label {
    display: block;
    margin-bottom: 0; 
}
#control-nav:checked ~ .control-nav-close {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}  
#control-nav:checked ~ nav {
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
.sub-menu{
    visibility: hidden;
    position: absolute;
    right: -155px;
    background-color: #0b3871;
    top: 0;
    min-width: 155px;
}
.sub-menu li{
    border-left: #0b3871;
}
.menu-item-has-children:hover .sub-menu{
    visibility: visible;
}
#logo{
    text-align: center;
}
#logo img{
    width: 160px;
}
#link-topo{
    text-align: right;
    position: absolute;
    right: 10px;
}
#link-topo a{
    color: #000;
    margin-right: 15px;
}
#link-topo a:last-child{
    color: #fff;
    margin-right: 15px;
    background-color: #004392;
    border-radius: 10px;
    padding: 15px;
    text-decoration: underline;
}
#link-topo a:hover{
    color: #ccc;
    text-decoration: none;
}
#link-topo a:last-child:hover{
    text-decoration: underline;
}
#topo2{
    background-image: url(assets/img/banner-topo.jpg);
    padding: 0px 15px 140px;
    padding-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    margin: 0 10px;
}
.categorias{
    background-color: #fff;
    padding: 20px 55px;
}
.categorias form {
    padding: 0 5px;
}
.categorias select {
    padding-left: 45px;
    border: 1px solid #dadada;
    background: url(../padrao/assets/img/angle-double-down-solid.svg) 95.5% 50% no-repeat;
    background-size: 8px;
    color: #999595;
    font-size: 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 40px;
    width: 100%;
}
.icone{
    border: 1px solid #dadada;
    color: #dadada;
    height: 40px;
    width: 40px;
    text-align: -webkit-center;
    padding-top: 7px;
    position: absolute;
    border-right: 1px solid;
}
.servicos {
    text-align: center;
    border: 1px solid #dadada;
    width: 100%;
    height: 320px;
    margin-bottom: 30px;
    border-bottom: 5px solid #ff2020;
}
.servicos:hover {
    background-color: #004392;
    background: linear-gradient(-180deg, #053168 80%, #052041 20%);
    color:#fff; 
    border-bottom: 5px solid #052041;
}
.servicos:hover > a{
    color:#fff; 
}
.servicos h4, .servicos .titulo-servico {
    color: #053168;
    font-weight: 700;
    font-size: 1.5rem;
}
.servicos:hover h4,.servicos:hover .titulo-servico  {
    color:#fff;
}
.servicos li {
   list-style: inside;
}
.servicos a {
   color: #000;
   text-decoration: none;
}
.servicos a:hover {
   color: #fff;
}
.conteudo {
    margin: 30px 10px;
}
.conteudo-servico {
    height: 80%;    
    padding: 10px;
    padding-top: 15px;
    font-size: 13px;
    font-family: 'montserrat','roboto','opensans';
    overflow: hidden;
}

.sofia-btn {
    max-width: 130px;
    max-height: 130px;
}

.sticky iframe {
    width: 400px !important;
}


.titulo-servico{
    margin-bottom: 20px;
}
.container-page .titulo-servicos{
    font-weight: 700;
}
.titulo-servicos{
    text-align: center;
}
.titulo-servicos h1{
    font-weight: 700;
}
.linha-titulo{
    background-color: #dadada;
    align-self: center;

}
.publico {
    bottom: 0;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #dadada;
    width: 100%;
}
.pjba{
    background-color: #fff;
    width: 85%;
    padding-top: 50px;
    margin: auto;
}
.pjba img{
    width: 80%;
    margin-left: -15px;
}
.pjba h1, .pjba span{
    color: #757878;
    font-weight: 300;
	font-family: 'montserrat','roboto','opensans';
	font-size: 2.5rem;
	line-height: 1.2;
}
.pjba p{
    color: #000;
}
.m-t-30{
    margin-top: 30px;
}
.consulta{
    padding: 30px 40px;
    color: #fff;
    width: 500px;
    background-color: #000d27;
    float: right;
    margin: 0 -13px;
}
.consulta .titulo-consulta{
	font-weight: lighter;
	font-size: 1.75rem;
	font-family: 'montserrat','roboto','opensans';	
}
#jtabk-menu li{
    display: inline-block;
    margin-right: 20px;
}
.jtabk-menu-mark {
    border-bottom: 2px solid red;
}
#jtabk input[type=text] {
    padding: 5px;
    width: 100%;
    margin-bottom: 20px;
}
.jtabk-active {
    text-align: right;
}
.jtabk-active button {
    margin-left: 5px;
}

.jtabk-active a {
    padding: 10px;
    color: #fff;
    display: block;
    background-color: #cc0000; /* contraste acessível */
}

.jtabk-active a:hover {
    text-decoration: none;
}
footer{
    background-color: #002356;
    color: #fff;
    border-bottom: 5px solid #ff2e34;
}
footer a:hover{
    color: #005584;
}
.rodape1{
    align-items: center;
    text-align-last: center;
    
}
.linha-rodape{
    border-bottom: 1px solid #dadada;
}
.selo {
    width: 100%;
    padding: 20px;
}
.logo-rodape {
    /* width: 100%; */
    padding: 20px;
}
.rodape2{
    display: block;
    text-align-last: center;
    padding: 40px 0 30px;
}
.rodape2 a {
    margin: 0 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}
.copyright {
    text-align: center;
    font-size: 11px;
    padding: 20px;
}
.scroll {
    background-color: red;
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
    position: relative;
    top: -30px;
    cursor: pointer;
    right: -86%;
    text-align-last: center;
}
.scroll a {
    color: #fff;
    display: block;
    padding: 8px;
}
.g-recaptcha {
    visibility: hidden;
}
.processo {
    display: flex;
}
.processo iframe body{
    background-color: #fff !important;
}
.m-b-30{
    margin-bottom: 30px;
}
#topo1-responsivo{
    display: none;
}

#misha_loadmore {
    text-align: center;
    text-transform: uppercase;
    width: 300px;
    background-color: #004392;
    color: #fff;
    border-radius: 20px;
    padding: 10px;
    font-weight: 700;
    margin: 0 auto;
    cursor: pointer;
}
#misha_loadmore:hover {
    background-color: #002356;
}

@media (max-width: 997px){
    #topo1-responsivo {
        display: block;
        padding: 20px;
    }
    #link-topo{
        display: none;
    }
    #link-topo-responsivo {
        display: inline;
        position: absolute;
        top: 0;
        right: 10px;
    } 
    #topo2 {
        background-image: none;
        text-align-last: center;
        padding-bottom: 0;
        background-color: #fff;
    }
    #logo {
        text-align: center;
        padding: 30px 0 0;
        width: auto;
        flex: auto;
        max-width: 100%;
    }
    #link-topo-responsivo a {
        font-size: 13px;
        display: inline-block;
        background-color: #042855;
        color: #fff;
        padding: 10px;
        text-decoration: underline;
    }
    #link-topo a:last-child {
        color: #fff;
        margin-right: 15px;
        background-color: #042855;
        border-radius: 0;
        padding: 10px;
        text-decoration: underline;
    }
    nav{
        z-index: 999;
    }
    .menu-item-has-children:hover .sub-menu{
        visibility: visible;
        position: relative;
        right: 0px;
        max-height: max-content;
        transition: all .5s ease;
    }
    .menu-responsivo {
        position: absolute;
        top: 155px;
        left: -15px;
    }
    .pjba {
        padding-top: 20px;
    }
    .pjba h1 {
        font-size: 18px;
    }
    header nav {
        min-width: 290px;
    }
    .categorias {
        background-color: transparent;
        padding: 20px 0;
        margin: 0;
        flex: auto;
        max-width: 100%;
    }
    .consulta {
        padding: 30px 0;
        color: #fff;
    }
    .consulta h3 {
        font-weight: lighter;
        font-size: 26px;
    }
    .jtabk-active a {
        font-size: 14px;
    }
    .categorias option {
        color: #999595;
    }
    #jtabk input[type=text] {
        width: 80%;
    }
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}


@media (max-width: 814px){

    #topo2 {
        background-image: none;
        text-align-last: center;
        padding-bottom: 0;
        background-color: #fff;
        background: linear-gradient(-180deg, #fff 69%, #133f76 30%);
    }
    .categorias {
        background-color: transparent;
        padding: 20px 0;
        margin: 0;
    }
    .categorias select {
        background: url(../padrao/assets/img/angle-double-down-solid.svg) 95.5% 50% no-repeat;
        background-size: 8px;
        color: #fff;
    }
    .consulta{
        display: none;
    }
    #topo2 .col-md-5 {
        flex: auto;
        max-width: 100%;
    }
    #topo2 .col-md-7 {
        flex: auto;
        max-width: 100%;
    }
}

@media (max-width: 767px){

    #topo2 {
        background-image: none;
        text-align-last: center;
        padding-bottom: 0;
        background-color: #fff;
        background: linear-gradient(-180deg, #fff 50%, #133f76 30%);
    }

}

@media (max-width: 588px){

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    
}


/* ============================================
   BOTÕES DE CONSULTA PROCESSUAL — CORRIGIDO
   Mantém classes originais e alinha na mesma linha
   ============================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}


/* Botões lado a lado */
.jtabk-active .enviarconsproc,
.jtabk-active .enviar-consulta {
  display: inline-block !important;
  vertical-align: middle;
  white-space: nowrap;
  margin-right: 10px;
  background-color: #cc0000;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
}

.jtabk-active .enviarconsproc:hover,
.jtabk-active .enviar-consulta:hover,
.jtabk-active .enviarconsproc:focus-visible,
.jtabk-active .enviar-consulta:focus-visible {
  background-color: #a60000;
  outline: 2px solid #000;
  outline-offset: 2px;
}

.jtabk-active .enviar-consulta { margin-right: 0; }

/* =========================================================
   ACESSIBILIDADE — FOCO VISÍVEL PARA TECLADO
   Mantém contorno visível em links e botões ao navegar com TAB.
   Conforme WCAG 2.1 (Critério 2.4.7 – Focus Visible)
   ========================================================= */

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  border-radius: 2px;
}

/* ============================================
   SOFIA — BOTÃO FIXO ACESSÍVEL
   ============================================ */

.sofia-wrapper {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.sofia-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.sofia-btn img {
    width: 80px;
    height: auto;
}

.sofia-iframe {
    display: none;
    width: 380px;
    height: 740px;
    max-height: 800px;
    border: none;
    margin-top: 10px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}

.sofia-close-btn {
    display: none;
    margin-top: 5px;
    background: #C10000;
    color: #fff;
    border: none;
    font-size: 22px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
}

.sofia-btn:focus-visible,
.sofia-close-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

.label-minimal {
  font-size: 14px;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.table-caption-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}