/* ==========================================================================
   custom.css  —  Campanha da Responsabilidade Social (ABMES)
   Criado em 31/07/2026.  Ultima revisao: 31/07/2026.

   POR QUE ESTE ARQUIVO EXISTE
   O Helix3 carrega automaticamente templates/shaper_helix3/css/custom.css
   (plugins/system/helix3/core/helix3.php, generatelayout()) e o ignora em
   silencio se ele nao existir. Apagar este arquivo devolve o site ao estado
   anterior, sem tocar em mais nada.

   NAO EDITAR template.css NEM OS .less — o Helix3 os recompila e qualquer
   alteracao ali se perde.

   ONDE MAIS EXISTE CSS NESTE SITE (importante para entender as regras abaixo)
   1. bootstrap.min.css        <- do Bootstrap 5
   2. template.css             <- gerado pelo Helix3 a partir dos .less
   3. presets/preset3.css      <- as cores do tema
   4. ESTE ARQUIVO
   5. <style> embutido na pagina  <- campo "Custom CSS" das Opcoes do Template
      Esse bloco 5 carrega DEPOIS deste arquivo. Por isso, sempre que a regra
      disputa com ele, aqui se usa um seletor MAIS ESPECIFICO — nunca
      !important, para nao endurecer o site.

   PALETA
   #1d3c31  verde escuro (rodape, paginacao ativa, menu lateral)
   #64a314  verde dos botoes
   #3c9625  verde de links e realce
   ========================================================================== */


/* ==========================================================================
   1. PAGINACAO
   ========================================================================== */

/* 1.1 Centralizar em TODAS as paginas.
   Ha duas marcacoes diferentes no site:
     paginas internas -> <nav class="pagination-wrapper"><ul class="pagination">
     home (featured)  -> <div class="pagination">        <ul class="pagination">
   No segundo caso o proprio involucro tem a classe .pagination, que no
   Bootstrap e display:flex — o que colocava a lista e o contador lado a lado.
   Empilhar e centralizar o invólucro resolve a home; centralizar o <ul>
   resolve as duas. */
div.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* As duas margens PRECISAM de !important. A lista vem com a classe .ms-0 do
   Bootstrap, que e { margin-left: 0 !important }. Sem !important aqui, sobrava
   margem esquerda 0 com margem direita automatica — e no flexbox a margem
   automatica consome o espaco livre e ANULA o align-items naquela direcao,
   empurrando a lista para a esquerda. Era isso que mantinha a paginacao da
   home desalinhada enquanto a das paginas internas ficava centralizada.
   (Nas internas o involucro e um <nav> comum, nao flex, e quem centraliza e
   o justify-content abaixo.) */
ul.pagination {
    justify-content: center;
    flex-wrap: wrap;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pagination-counter,
.pagination .counter,
.pagination-wrapper .counter {
    text-align: center;
    width: 100%;
}

/* 1.2 Cor da pagina selecionada.
   O azul vem do Bootstrap: .page-item.active .page-link (0,3,0) = #0d6efd.
   O tema tenta pintar de verde com .pagination > .active > a (0,2,1), que
   perde por especificidade — e alem disso mira <a>, enquanto o item ativo
   e um <span>. Os seletores abaixo tem (0,4,0) e (0,5,0), vencendo ambos. */
.pagination .page-item.active > .page-link,
.pagination .page-item.active > .page-link:hover,
.pagination .page-item.active > .page-link:focus,
.pagination .page-link[aria-current="true"],
.pagination .page-link[aria-current="true"]:hover,
.pagination .page-link[aria-current="true"]:focus {
    background-color: #1d3c31;
    border-color: #1d3c31;
    color: #fff;
}

/* 1.3 Em telas pequenas: quebrar em varias linhas e garantir alvo de toque
   de 40px, em vez de a barra estourar a largura. */
@media (max-width: 575.98px) {
    ul.pagination {
        row-gap: 6px;
    }

    ul.pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding: 4px 8px;
        font-size: 14px;
    }
}


/* ==========================================================================
   2. SEPARADORES <hr> — apenas na home
   O modulo mod-custom116 (conteudo: <hr />) e renderizado em DUAS secoes
   <section id="sp-hr">, uma antes e outra depois de #sp-video-youtube. Na
   home elas separam o video; nas demais paginas nao separam nada.
   A home e a unica pagina com view-featured (item de menu 101, "Campanha").

   Duas regras SEPARADAS de proposito: se o navegador nao entender :has(),
   ele descarta so a segunda. Se estivessem na mesma lista, a regra inteira
   seria descartada e nada funcionaria.

   POR QUE AQUI TEM !important (31/07/2026)
   A primeira das duas secoes vem com as classes "d-md-none d-lg-block". No
   Bootstrap, .d-lg-block e { display: block !important }. Sem !important do
   nosso lado, essa secao continuava aparecendo em telas >= 992px — era a
   unica linha cinza que restava. Nao ha como vencer !important sem !important.
   ========================================================================== */
body:not(.view-featured) section#sp-hr {
    display: none !important;
}

body:not(.view-featured) section:has(#mod-custom116) {
    display: none !important;
}


/* ==========================================================================
   3. MENU LATERAL (offcanvas) — celular e tablet
   ========================================================================== */

/* 3.1 Cor: sai do azul #5281aa (vem do campo Custom CSS do template) e entra
   o verde escuro da paleta. Tres seletores porque ha tres regras concorrentes:
     .offcanvas-menu                      (0,1,0)  <- Custom CSS embutido
     .slide-top-menu .offcanvas-menu      (0,2,0)  <- template.css, pinta de preto
   Os daqui tem (0,1,1) e (0,2,1) e vencem os dois, sem !important. */
body .offcanvas-menu,
.slide-top-menu .offcanvas-menu,
body.slide-top-menu .offcanvas-menu {
    background-color: #1d3c31;
}

/* 3.2 Contraste interno: as bordas e o fundo dos submenus foram desenhados
   para um fundo preto translucido. Sobre o verde escuro precisam de ajuste
   para continuarem visiveis. */
body .offcanvas-menu .offcanvas-inner .sp-module ul > li {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body .offcanvas-menu .offcanvas-inner .sp-module ul > li ul {
    background: rgba(0, 0, 0, 0.22);
}

body .offcanvas-menu .offcanvas-inner .sp-module .sp-module-title {
    color: #fff;
    opacity: 0.85;
}

/* 3.3 Item "Home" (item-194): o conteudo do link e apenas a imagem
   icon-home3.png (25x23 px). Com o link em bloco, o icone caía para a linha
   de baixo. Em flex, ele fica na mesma linha e centralizado na vertical.
   Os pseudo-elementos sao anulados para remover a seta ao lado do icone. */
.offcanvas-menu .offcanvas-inner .sp-module ul > li.item-194 > a {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.item-194 > a > img {
    display: block;
    width: 25px;
    height: auto;
    margin: 0;
    border: 0;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.item-194 > a::before,
.offcanvas-menu .offcanvas-inner .sp-module ul > li.item-194 > a::after {
    content: none;
    display: none;
}

/* 3.4 Alvo de toque do "abrir submenu" (a setinha da direita): 56x48 px,
   em vez da area apertada de antes. */
body .offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 48px;
    padding: 0 18px;
}

/* 3.5 Botao de fechar: 32x32 px, tambem por causa do toque. */
body .close-offcanvas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}

/* 3.6 Nada dentro do painel pode transbordar a largura de 320px. */
body .offcanvas-menu img,
body .offcanvas-menu table {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   4. BOTAO HAMBURGUER
   O campo Custom CSS do template deixa #offcanvas-toggler com line-height 0
   e padding-bottom 10px, o que resulta numa area de toque de ~30 px — abaixo
   do minimo recomendado. Aqui vira 44x44 px, so nas larguras em que ele
   aparece. O seletor leva "body" na frente para vencer o CSS embutido.
   ========================================================================== */
@media (max-width: 991.98px) {
    body #offcanvas-toggler {
        display: inline-block;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        margin-right: 8px;
        line-height: 24px;
        text-align: center;
    }
}


/* ==========================================================================
   5. RESPONSIVO GERAL
   ========================================================================== */

/* 5.1 Nenhuma imagem estoura a largura da tela.
   Escopo restrito ao conteudo, rodape e menu: o slide (camera_wrap) e
   controlado por JavaScript, que calcula as dimensoes sozinho — mexer nas
   imagens dele quebraria o componente. */
#sp-main-body img,
#sp-bottom img,
#sp-footer img {
    max-width: 100%;
    height: auto;
}

/* 5.1-b PADRONIZAR O ESPACAMENTO DA IMAGEM DAS MATERIAS  (31/07/2026)
   A imagem de introducao e colada dentro do texto pelo editor, com estilo
   inline proprio de cada materia. Comparando as paginas:

     Releases (certo) -> style="margin: 5px 20px 5px 5px; float: left;"
     Clipping (errado)-> style="float: left;"        (sem margem)

   Sem a margem direita, o texto e o botao "Leia mais..." encostam na imagem.
   A regra .article img do campo Custom CSS nao resolve porque no listado do
   blog a classe do item e "item", nao "article".

   Aqui o espacamento das Releases vira o padrao de todas. Precisa de
   !important porque estilo escrito no atributo style do HTML so cede a
   !important. O seletor exige style*="float" para atingir apenas a imagem
   flutuante da materia — icones e imagens em linha nao sao afetados. */
#sp-main-body .item img[style*="float: left"],
#sp-main-body .item img[style*="float:left"],
#sp-main-body .item-page img[style*="float: left"],
#sp-main-body .item-page img[style*="float:left"] {
    margin: 5px 20px 5px 5px !important;
}

#sp-main-body .item img[style*="float: right"],
#sp-main-body .item img[style*="float:right"],
#sp-main-body .item-page img[style*="float: right"],
#sp-main-body .item-page img[style*="float:right"] {
    margin: 5px 5px 5px 20px !important;
}

/* O paragrafo do botao ganha uma folga do texto acima, igual em toda materia. */
#sp-main-body .item p.readmore,
#sp-main-body .item-page p.readmore {
    margin-top: 12px;
}


/* 5.2 Video do YouTube.
   O modulo traz width="100%" e height="415" fixo. No computador isso da o
   enquadramento correto (~1140x415) e NAO deve ser mexido — uma versao
   anterior deste arquivo aplicava aspect-ratio 16/9 em todas as larguras, o
   que em 1140px forcava 641px de altura e deixava o video grande demais.
   A proporcao so entra em telas estreitas, onde 415px fixos ficariam altos
   demais para a largura disponivel. */
#sp-video-youtube iframe {
    max-width: 100%;
}

#sp-main-body iframe {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    #sp-video-youtube iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* 5.3 O slide nao pode gerar barra de rolagem horizontal. */
#sp-slideshow {
    overflow: hidden;
}

/* 5.4 Tabelas e caminho de navegacao. */
#sp-main-body table {
    max-width: 100%;
}

#sp-breadcrumb .breadcrumb {
    flex-wrap: wrap;
}

/* 5.5 Ate 991,98 px (tablet em pe e abaixo): folga menor na caixa do conteudo. */
@media (max-width: 991.98px) {
    .fundo_component_area {
        padding: 22px 18px;
        margin: 12px auto 48px auto;
    }
}

/* 5.6 Ate 767,98 px (celular e tablet pequeno). */
@media (max-width: 767.98px) {
    /* A imagem de introducao das materias e colada dentro do texto pelo editor,
       com "float: left" no atributo style. Em tela estreita isso espreme o
       texto numa coluna de poucos caracteres. Aqui ela passa a ocupar a
       propria linha, centralizada.
       O seletor exige style*="float" para atingir SO as imagens flutuantes —
       icones pequenos e imagens em linha continuam como estao. */
    #sp-main-body .item img[style*="float"],
    #sp-main-body .item-page img[style*="float"],
    #sp-main-body .article img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto 15px auto !important;
    }

    .fundo_component_area {
        padding: 18px 14px;
        margin: 10px auto 40px auto;
        border-radius: 16px;
    }

    #sp-main-body .entry-header h2 {
        font-size: 19px;
        line-height: 1.35;
    }

    #sp-main-body .article-info {
        padding-top: 12px;
    }

    /* Palavras longas (URLs, nomes de arquivo) nao podem alargar a pagina. */
    #sp-main-body .item,
    #sp-main-body .item-page {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}