/* Justificar texto nas páginas internas */
#content p {
    text-align: justify;
    }

/* Muda a cor dos títulos dos posts na página inicial (Recent Posts) e na listagem do blog */
.box-image-text.blog h4 a, 
.post h2 a {
    color: #4a90e2 !important; /* Azul exato do style="blue" do hugo-universal-theme */
}

/* Opcional: Escurece um pouco o azul quando você passa o mouse por cima do título */
.box-image-text.blog h4 a:hover, 
.post h2 a:hover {
    color: #3371b6 !important;
}

/* Altera a cor de fundo do banner das páginas internas para azul */
#heading-breadcrumbs {
    background-color: #4a90e2 !important;
    background-blend-mode: multiply !important; /* Mistura a cor azul com a imagem do banner */
}

/* Garante que o texto (títulos e links) dentro do banner azul fique branco para dar contraste */
#heading-breadcrumbs h1, 
#heading-breadcrumbs a, 
#heading-breadcrumbs ul.breadcrumb li {
    color: #ffffff !important; /* #ffffff é a cor BRANCA, usada apenas nas letras do texto */
}

/* Altera a cor de fundo da seção de Depoimentos (Testimonials) da página inicial para azul */
.custom-testimonials,
.bar:has(.testimonials) {
    background-color: #4a90e2 !important;
    background-blend-mode: multiply !important; /* Mantém o desenho de fundo e mistura com a cor azul */
}

/* Garante que o título principal e o subtítulo da seção de Depoimentos fiquem brancos */
.custom-testimonials .heading h2,
.custom-testimonials p.lead,
.bar:has(.testimonials) .heading h2,
.bar:has(.testimonials) p.lead {
    color: #ffffff !important;
}

/* ==================================================================
   Ajustes para o carrossel da página inicial
   ================================================================== */

/* Transforma a linha do carrossel em flexbox para alinhar melhor o espaço */
#homepage-slider .item .row {
    display: flex !important;
    align-items: center;
}

/* Dá mais espaço (largura) para a área de texto */
#homepage-slider .item .col-sm-7,
#homepage-slider .item .col-md-7 {
    flex: 1.5; /* Aumenta a proporção do texto em relação à imagem */
    padding-right: 30px; /* Dá uma margem para o texto não encostar na imagem */
}

/* Empurra a área da imagem mais para a direita e ajusta seu tamanho */
#homepage-slider .item .col-sm-5,
#homepage-slider .item .col-md-5 {
    flex: 1; /* Proporção menor para a imagem */
    display: flex;
    justify-content: flex-end; /* Empurra a figura totalmente para a direita */
}

/* Controla a altura máxima do carrossel */
#homepage-slider,
#homepage-slider .item {
    max-height: 350px !important; /* Ajuste este valor para diminuir ou aumentar a altura */
    min-height: auto !important;
    overflow: hidden; /* Evita que o conteúdo vaze caso seja maior que a altura */
}

/* Ajusta a imagem para não estourar a nova altura */
#homepage-slider .item img {
    max-height: 250px !important; /* Deve ser ligeiramente menor que o valor acima */
    object-fit: contain; /* Garante que a imagem não fique distorcida */
}

/* ==================================================================
   Ajustes de Fonte para os Cartões do Blog
   ================================================================== */

/* Altera a família da fonte dos títulos dos cartões do blog */
.box-image-text.blog h4,
.box-image-text.blog h4 a,
.post h2,
.post h2 a {
    font-family: "Arial", sans-serif !important; /* Mude "Arial" para a fonte que desejar */
    font-size: 14px !important; /* Ajuste o tamanho do título aqui */
    text-align: left !important; /* Alinha o texto à esquerda */
    color: #000000 !important; /* Define a cor do texto para preto */
}

/* Altera a família da fonte dos textos de descrição/resumo dos cartões do blog */
.box-image-text.blog p.intro,
.box-image-text.blog p {
    font-family: "Verdana", sans-serif !important; /* Mude "Verdana" para a fonte que desejar */
    font-size: 13px !important; /* Ajuste o tamanho da descrição aqui */
    text-align: left !important; /* Alinha o texto à esquerda */
    color: #000000 !important; /* Define a cor do texto para preto */
}

/* ==================================================================
   Banner de Temporalidade (Última Atualização)
   ================================================================== */
.last-updated-banner {
    background-color: #f4f8fd; /* Fundo azul bem claro */
    color: #3371b6; /* Azul do texto (hover do tema) */
    padding: 10px 15px;
    border-left: 4px solid #4a90e2; /* Azul principal do tema */
    font-size: 13px;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
    display: inline-block;
}
/* ==================================================================
   Ajustes de Tamanho para as Barras Superiores (Topbar e Navbar)
   ================================================================== */

/* Aumenta a altura da barra mais ao topo (geralmente onde ficam as redes sociais e contatos) */
#top {
    padding-top: 15px !important;    /* Aumente ou diminua este valor */
    padding-bottom: 15px !important; /* Aumente ou diminua este valor */
}

/* Caso você também queira deixar a barra de menu principal (onde fica a logo) maior */
.navbar {
    padding-top: 2px !important;    /* Ajuste este valor: diminua (ex: 0px) ou aumente (ex: 20px) */
    padding-bottom: 2px !important; /* Ajuste este valor: diminua (ex: 0px) ou aumente (ex: 20px) */
    /* min-height: 100px !important; Opcional: define uma altura mínima forçada */
}

/* ==================================================================
   Alinhamento Vertical do Menu Principal
   ================================================================== */
@media (min-width: 768px) {
    /* Cria uma "caixa" central invisível de mesma largura para alinhar as duas barras */
    #top .container-fluid,
    #navbar .container-fluid {
        max-width: 1450px !important; /* Aumente para separar mais o menu do logo */
        margin: 0 auto !important;    /* Centraliza a caixa na tela */
    }

    /* Transforma a barra num contêiner flexível centralizado */
    #navbar .container-fluid {
        display: flex !important;
        justify-content: flex-start; /* Alinha o mascote na reta exata do Topbar */
        align-items: center;
    }

    /* Garante que a área das logos se comporte corretamente no centro */
    #navbar .navbar-header {
        float: none !important;
    }

    /* Empurra e centraliza verticalmente os itens do menu em relação à altura da logo */
    #navbar .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end; /* Alinha o conteúdo interno à direita */
        padding-left: 10px !important; /* Reduzido para dar o máximo de espaço possível ao menu */
        margin-left: auto !important; /* Empurra o menu inteiro para a extrema direita */
        width: auto !important; /* Impede que o menu expanda demais, permitindo a centralização geral */
    }
    #navbar .navbar-nav {
        float: none !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap; /* Impede que o menu quebre em duas linhas */
        justify-content: flex-end;
    }
}

/* Garante que os submenus do final da barra abram para a esquerda, evitando vazar a tela */
#navbar .navbar-nav > li:last-child .dropdown-menu,
#navbar .navbar-nav > li:nth-last-child(2) .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* ==================================================================
   Tamanho da Fonte e Espaçamento do Menu Principal (Responsivo)
   ================================================================== */

/* 1. Regra base e Celulares (telas menores que 768px - menu hambúrguer) */
#navbar .navbar-nav > li > a {
    white-space: nowrap !important;
    font-size: 16px !important; 
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. Tablets (telas entre 768px e 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #navbar .navbar-nav > li > a {
        font-size: 11px !important;      /* Fonte reduzida para garantir o encaixe em 1 linha */
        padding-left: 5px !important;    /* Espaçamento mínimo */
        padding-right: 5px !important;
    }
}

/* 3. Notebooks Menores e Tablets deitados (telas entre 992px e 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #navbar .navbar-nav > li > a {
        font-size: 13px !important;
        padding-left: 8px !important;    /* Espaçamento reduzido */
        padding-right: 8px !important;
    }
}

/* 4. Notebooks Padrão (telas entre 1200px e 1399px, ex: 1366x768) */
@media (min-width: 1200px) and (max-width: 1399px) {
    #navbar .navbar-nav > li > a {
        font-size: 13px !important;      /* Reduzido ainda mais para não vazar */
        padding-left: 10px !important;   /* Espaçamento menor para acomodar todos os itens */
        padding-right: 10px !important;
    }
}

/* 5. Monitores Grandes (telas a partir de 1400px) */
@media (min-width: 1400px) {
    #navbar .navbar-nav > li > a {
        font-size: 16px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ==================================================================
   Ocultar a data padrão ("solta") gerada automaticamente pelo tema
   ================================================================== */
#content p.text-muted,
#blog-post p.text-muted,
.post p.date {
    display: none !important;
}

/* ==================================================================
   Espaçamento vertical igual para os links de Publicações Recentes
   ================================================================== */
/* Define um espaço vertical uniforme e exato entre cada post */
.blog-entries .item,
.widget_recent_entries ul li {
    margin-bottom: 15px !important; 
}

/* Remove o espaçamento do último item para manter o bloco alinhado */
.blog-entries .item:last-child,
.widget_recent_entries ul li:last-child {
    margin-bottom: 0 !important;
}

/* ==================================================================
   Ajuste do Rodapé (Footer) para 3 Colunas com Espaçamento Igual
   ================================================================== */
@media (min-width: 992px) {
    /* Desativa as travas do Bootstrap na linha principal */
    #footer .container > .row::before,
    #footer .container > .row::after {
        display: none !important;
    }

    #footer .container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* Força brutalmente que CADA UMA das 3 colunas ocupe exatamente 33.33% da tela */
    #footer .container > .row > div {
        float: none !important;
        flex: 1 !important;
        width: 33.333% !important;
        max-width: 33.333% !important;
    }

    /* Coluna do Meio (Publicações Recentes): Centraliza o conteúdo geral */
    #footer .container > .row > div:nth-child(2) {
        text-align: center !important;
    }
    #footer .container > .row > div:nth-child(2) ul {
        display: inline-block !important; /* Faz a lista inteira se comportar como um bloco centralizável */
        text-align: left !important;      /* Mas mantém os textinhos alinhados à esquerda bonitinhos */
    }

    /* Coluna da Direita (Contato): Alinha tudo lá pro canto direito */
    #footer .container > .row > div:nth-child(3),
    #footer .container > .row > div:nth-child(3) p,
    #footer .container > .row > div:nth-child(3) address {
        text-align: right !important;
    }
}

/* ==================================================================
   Remover caixa alta e adicionar sombra no Carrossel
   ================================================================== */
.home-carousel h1,
.home-carousel h2,
.home-carousel p,
.home-carousel ul,
.home-carousel li {
    text-transform: none !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    text-align: left !important;
}

.home-carousel h1 {
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* ==================================================================
   Linhas separadoras no menu
   ================================================================== */
#navbar .dropdown-menu > li:has(a[href="/governanca/politicas_normas_diretrizes"]),
#navbar .dropdown-menu > li:has(a[href="/governanca/governanca-dados"]) {
    border-bottom: 2px solid #999999 !important; /* Torna a linha padrão mais grossa (negrito) e escura */
}

/* ==================================================================
   Data de Última Atualização no Rodapé
   ================================================================== */
.footer-last-update {
    font-size: 12px;
    color: #cccccc;
    text-align: center;
    width: 100%;
    clear: both;
}

/* Adiciona um espaço entre o ícone e o texto da data no rodapé */
.footer-last-update i {
    margin-right: 6px; /* Aumente ou diminua este valor para ajustar o espaço */
}

/* ==================================================================
   Padronização de Fontes e Cores do Rodapé (Baseado na coluna Sobre Nós)
   ================================================================== */
/* Textos gerais e links das 3 colunas */
#footer .col-md-4 p,
#footer .col-md-4 span,
#footer .col-md-4 li,
#footer .col-md-4 a {
    color: #eeeeee !important;
    font-size: 14px !important;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-weight: normal; /* Garante que sigam o texto leve da coluna Sobre Nós */
}

/* Garante que o negrito original (usado nos títulos DINIT da primeira coluna) funcione */
#footer .col-md-4 strong,
#footer .col-md-4 strong a {
    font-weight: bold !important;
}

/* Mantém os links sublinhados para facilitar a navegação */
#footer .col-md-4 a {
    text-decoration: underline !important;
}

/* Efeito visual opcional ao passar o mouse sobre os links */
#footer .col-md-4 a:hover {
    color: #4a90e2 !important; /* Azul do tema */
    text-decoration: none !important;
}

/* Tamanho da fonte dos títulos das colunas do rodapé */
#footer .col-md-4 h4 {
    font-size: 15px !important; /* Ajuste para o tamanho desejado (ex: 16px, 18px, 20px) */
}

/* ==================================================================
   Reduzir o tamanho da logo em dispositivos móveis
   ================================================================== */
@media (max-width: 767px) {
    .navbar-brand img {
        max-height: 30px !important; /* Ajuste este valor conforme achar melhor */
    }
}