/**
 * Theme Name: MPCE Tema Alternative
 * Theme URI: https://www.mpce.mp.br
 * Author: Equipe MPCE
 * Description: Tema institucional para o Ministério Público do Estado do Ceará, refatorado para performance e manutenibilidade.
 * Version: 2.0.0
 * Requires at least: 5.8
 * Tested up to: 6.4
 * Requires PHP: 7.4
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: meu-tema
 * Tags: one-column, two-columns, accessibility-ready, custom-logo, custom-menu, post-formats, custom-background
 */

/* ==========================================================================
   1. RESET E ESTILOS GLOBAIS
   ========================================================================== */

:root {
    /* -- Esquema de Cores -- */
    --cor-primaria: #057048;
    --cor-primaria-escura: #183d2d;
    --cor-secundaria: #308867;
    --cor-texto: #333;
    --cor-texto-claro: #fff;
    --cor-fundo-claro: #f8f9fa;
    --cor-fundo-light: #f6f6f6;
    --cor-borda: #dee2e6;

    /* -- Tipografia -- */
    --fonte-principal: 'Open Sans', sans-serif;
    --fonte-titulos: 'Open Sans', sans-serif; /* Usando a mesma para consistência */
    --peso-regular: 400;
    --peso-bold: 700;
}

body {
    font-family: var(--fonte-principal );
    color: var(--cor-texto);
    line-height: 1.6;
    background-color: #fff; /* Fundo branco por padrão */
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cor-secundaria);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    font-weight: var(--peso-bold);
    color: var(--cor-primaria-escura);
}

hr {
    border-top: 1px solid var(--cor-borda);
    opacity: 0.5;
}

/* Remove a margem superior do WordPress admin bar */
html {
    margin-top: 0 !important;
}

/* ==========================================================================
   2. LAYOUT PRINCIPAL (HEADER, FOOTER, CONTENT)
   ========================================================================== */

/* --- Cabeçalho --- */
.site-header .header-top-bar {
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

.site-header .navbar {
    background-color: var(--cor-primaria-escura);
}
.custom-logo-link img {
    width: 150px;
    height: auto;
    padding: 10px;
}

.site-header .navbar-brand-wrapper .site-title a {
    color: var(--cor-texto-claro);
    text-decoration: none;
}
h1.entry-title.display-5.fw-bold {
    color: #222931;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 0px;
}

.site-header .navbar-brand-wrapper .site-description {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Conteúdo Principal --- */
.site-content {
    padding: 0;
}

/* --- Rodapé --- */
.site-footer .footer-widgets-area {
    background-color: var(--cor-fundo-claro);
}

.site-footer .widget-title {
    font-size: 1rem;
    color: var(--cor-primaria-escura);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 0.5rem;
}

.site-footer .widget ul {
    list-style: none;
    padding: 0;
}

.site-footer .widget ul li a {
    font-size: 0.9rem;
}

.site-footer .site-info-bar {
    background-color: var(--cor-primaria-escura);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.site-footer .footer-logo {
    max-height: 50px;
}
#menu-menu-footer a {
    color: var(--cor-texto-claro);
    padding: 0 10px;
}


.noticia-item-lista {
        border-bottom: 1px solid var(--cor-borda) !important;
        padding: 1rem 0;
        font-size: 0.8rem;
}
.noticia-item-lista:hover .noticia-titulo {
    color: var(--cor-primaria) !important;
}
.noticia-item-lista .noticia-titulo {
    transition: color 0.3s ease;
    line-height: 1.3;
}

/* Estilo para o card de destaques */
.card-destaques {
    border-radius: 10px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.destaque-item-lista {
    font-weight: 500;
    padding: 0.9rem 1.25rem;
    border-color: rgba(0,0,0,0.05) !important;
}
.destaque-item-lista i {
    font-size: 1.1rem;
}

.destaque-item-lista-home {
    padding: 0.75rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.destaque-item-lista-home:hover {
    background: var(--cor-primaria);
    color: #fff !important;
}

.news-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

/* ESTA É A PARTE MAIS IMPORTANTE PARA A IMAGEM */
.news-card-image {
    height: 220px; /* Defina uma altura fixa para todas as imagens dos cards */
    width: 100%;   /* Garante que a imagem ocupe toda a largura do card */
    object-fit: cover; /* Faz a imagem cobrir a área sem distorcer, cortando o excesso */
}

.news-card .entry-title a {
    transition: color 0.3s ease;
}

.news-card .entry-title a:hover {
    color: var(--cor-primaria) !important;
}

.news-card .entry-categories a {
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--cor-primaria);
}
.card-destaques span.destaque-titulo {
    font-size: 0.8rem;
}
.bloco-audios-home h6.audio-title.mb-2.fw-bold {
    font-size: 0.8rem;
}

/* style.css */

.card-link-cidadao .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-link-cidadao:hover .card {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.card-link-cidadao p {
    color: #212529; /* Cor de texto padrão para garantir a leitura */
    transition: color 0.2s ease-in-out;
}

.card-link-cidadao:hover p {
    color: #0a58ca; /* Cor de link do Bootstrap ao passar o mouse */
}

.bg-icones {
    color: #fff;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #057048;
    height: 190px;
    width: auto;
    padding: 20px;
    margin: 5px 0;
    border-radius: 10px;
    transition: all 0.4s ease 0s;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bg-icones a {
    color: #fff;
    font-size: 1em;
    transition: all 0.4s ease 0s;
}
.bg-icones h4 {
    font-size: clamp(0.8em, 0.9em + 1.2vw, 0.9em);
    font-weight: 700;
}
/* Usando :is() */
.bg-icones :is(h3, h4) {
    color: #fff;
}

/* ==========================================================================
   REFINAMENTO VISUAL - SEÇÃO NOTÍCIAS E DESTAQUES (HOME)
   ========================================================================== */

/* --- Lista de Notícias (à direita do slider) --- */
.noticia-item-lista-home {
    background-color: transparent !important; /* Garante que não haja fundo */
    border: none !important;
    border-bottom: 1px solid #e9ecef !important; /* Separador sutil */
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    border-radius: 0 !important;
}

.noticia-item-lista-home:last-of-type {
    border-bottom: none !important; /* Remove a borda do último item */
}

.noticia-item-lista-home .noticia-titulo-home {
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.2s ease-in-out;
}

.noticia-item-lista-home:hover .noticia-titulo-home {
    color: var(--cor-primaria);
    text-decoration: underline;
    position: relative;
}

.noticia-item-lista-home:hover .noticia-titulo-home::after {
    content: " →";
    color: var(--cor-primaria);
}

.noticia-item-lista-home .noticia-data {
    font-size: 0.8rem;
    color: #6c757d;
}

/* --- Lista de Destaques (barra lateral) --- */
.destaque-item-lista-home {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e9ecef !important; /* Mesmo separador */
    padding: 0.9rem 0.2rem !important; /* Padding vertical com pouco padding horizontal */
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--cor-texto);
    border-radius: 0 !important;
    transition: color 0.2s ease-in-out;
}

.destaque-item-lista-home:hover {
    color: var(--cor-primaria);
    text-decoration: none;
}

.destaque-item-lista-home:last-child {
    border-bottom: none !important;
}
span.destaque-titulo {
    font-size: 0.8rem;
    font-weight: 700;
}




/* ==========================================================================
   Layout e Sticky Footer
   ========================================================================== */

/* Garante que o html e o body ocupem toda a altura */
html, body {
    height: 100%;
}

/* Transforma o body em um container flexível e vertical */
body {
    display: flex;
    flex-direction: column;
    background-image: url(img/background/back-linhas.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}


/* Faz com que a área de conteúdo principal cresça para preencher o espaço */
.site-content {
    flex: 1 0 auto;
}

/* Garante que o header e o footer não encolham */
.site-header, .site-footer {
    flex-shrink: 0;
}


/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --- Menus de Navegação --- */
.navbar-nav .nav-link {
    color: var(--cor-texto-claro);
    font-weight: var(--peso-regular);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.current-menu-item > .nav-link {
    color: var(--cor-primaria);
}

.dropdown-menu {
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-item {
    color: var(--cor-primaria-escura);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
}

/* CSS para submenus de múltiplos níveis (do NavWalker) */
.dropdown-menu .dropdown-submenu { position: relative; }
.dropdown-menu .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; display: none; }
@media (min-width: 992px) {
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
.dropdown-menu .dropdown-item.dropdown-toggle::after {
    display: inline-block; width: 0; height: 0; margin-left: .255em; vertical-align: .255em; content: "";
    border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid;
    float: right; margin-top: .4em;
}

/* --- Títulos de Seção --- */
.title-section {
    margin-bottom: 1.5rem;
}
.title-section h4 {
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
    font-weight: var(--peso-bold);
    color: var(--cor-primaria-escura);
    margin: 0;
}
.title-section h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--cor-primaria);
    border-radius: 3px;
}
.title-section hr {
    margin-top: 0.5rem;
    border-top: 2px solid var(--cor-primaria);
    width: 50px;
}

/* --- Caixas de Destaque (Acesso Rápido, etc.) --- */
.box-sistemas {
    background-color: var(--cor-primaria-escura);
    color: var(--cor-texto-claro);
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.box-sistemas:hover {
    background-color: var(--cor-secundaria);
    transform: translateY(-5px);
    text-decoration: none;
}
.box-sistemas .box-sistemas-title {
    font-weight: var(--peso-bold);
    font-size: 0.9rem;
}
.box-sistemas .icon {
    color: var(--cor-texto-claro);
}

/* --- Card de Notícias/Rádio --- */
.noticia-item a, .radio-item a {
    text-decoration: none;
}
.noticia-item p, .radio-item p {
    color: var(--cor-texto);
}
.radio-item .audio-controls button,
.radio-item .audio-controls a {
    color: var(--cor-primaria);
    background: transparent;
    border: none;
    padding: 0.2rem;
}
.radio-item .audio-controls button:hover,
.radio-item .audio-controls a:hover {
    color: var(--cor-secundaria);
}

/* ==========================================================================
   4. PÁGINAS ESPECÍFICAS (FRONT PAGE)
   ========================================================================== */

/* Carrossel Principal */
#carouselTopHome .carousel-item img {
    height:auto;
    object-fit: cover;
    border-radius: 12px;
}
#pageCarousel img.d-block.w-100.wp-post-image {
    height: 100%;
}
#pageCarousel .carousel-caption {
    position: absolute;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
    bottom: 0;
    text-align: left;
    padding: 1.5rem;
    border-radius: 0 0 12px 12px;
    width: 100%;
    left: 0;
}
#carouselTopHome .carousel-caption h5 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}
#pageCarousel h5{
    color: #fff;
}

/* Card Defesa do Consumidor */
.card-consumidor {
    border: 3px solid var(--cor-primaria);
    transition: background-color 0.3s ease;
}
.card-consumidor a {
    color: var(--cor-texto);
}
.card-consumidor:hover {
    background-color: var(--cor-fundo-claro);
}

/* Parceiros */
.parceiros-section .box-parceiros img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}
.parceiros-section .box-parceiros:hover img {
    filter: grayscale(0%);
}

/* ==========================================================================
   ATUALIZAÇÃO VISUAL - SEÇÃO DEFESA DO CONSUMIDOR (Layout Xadrez)
   ========================================================================== */

.consumidor-grid-wrapper {
    border: 1px solid var(--cor-borda, #dee2e6);
    display: flex; /* Adicionado para garantir que os itens internos se comportem corretamente */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
}

.consumidor-item-box {
    width: 100%;
    height: 150px; /* Altura fixa para criar quadrados perfeitos */
    transition: all 0.3s ease;
}

/* Estilo A (Fundo Verde, Texto Branco) */
.consumidor-item--style-a {
    background-color: var(--cor-fundo-light, #057048);
    color: var(--cor-primaria, #057048);
}
.consumidor-item--style-a .icon-wrapper i {
    color: var(--cor-primaria, #fff);
}
.consumidor-item--style-a .consumidor-item-title {
    color: var(--cor-primaria, #fff);
}

/* Estilo B (Fundo Branco, Texto Verde) */
.consumidor-item--style-b {
    background-color: #fff;
    color: var(--cor-primaria-escura, #183d2d);
}
.consumidor-item--style-b .icon-wrapper i {
    color: var(--cor-primaria, #057048);
}
.consumidor-item--style-b .consumidor-item-title {
    color: var(--cor-primaria-escura, #183d2d);
}

/* Efeito de Hover Universal */
.consumidor-item-box:hover {
    transform: scale(1.03);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    filter: brightness(1.1); /* Deixa um pouco mais claro no hover */
}

/* Estilos para o ícone e título */
.consumidor-item-box .icon-wrapper {
    font-size: 2.2rem;
    line-height: 1;
}

.consumidor-item-box .consumidor-item-title {
    font-size: 0.9rem;
    line-height: 1.3;
}


/* ==========================================================================
   5. CLASSES UTILITÁRIAS
   ========================================================================== */

.margin-tb-10 { margin: 10px 0 !important; }
.margin-tb-15 { margin: 15px 0 !important; }
.margin-t-20 { margin-top: 20px !important; }

/* ==========================================================================
   6. MEDIA QUERIES (MOBILE-FIRST)
   ========================================================================== */

/* Estilos para telas menores (Mobile) */
@media (max-width: 767.98px) {
    .header-top-bar .quick-links,
    .header-top-bar .social-links {
        text-align: center !important;
        margin-top: 0.5rem;
    }

    #carouselTopHome .carousel-item img {
        height: 250px;
    }

    .title-section h4 {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    #carouselTopHome .carousel-item img {
        height: 250px;
    }

    .card-destaques {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .destaque-item-lista-home {
        border: 1px solid #e9ecef !important;
        border-radius: 8px;
        text-align: center;
    }
}



/* ==========================================================================
   6.3. Menu Lateral (Sidebar Nav) - VERSÃO FINAL COM SUBMENU ABAIXO
   ========================================================================== */

.sidebar-nav ul, 
.sidebar-nav ul .children {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0; /* Remove margem padrão da lista */
}
.sidebar-widget {
    border-radius: 8px;
    padding: 35px 30px;
    background: #fffffffc;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
}
.sidebar-widget .list-unstyled li {
    border-bottom: 1px solid #1a1a1a36;
    position: relative;
    padding-left: 20px;
    font-size: 0.9rem;
    margin-bottom: 15px !important;
    padding-bottom: 15px;
}

.sidebar-widget .list-unstyled li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* sólido */
    font-size: 18px;
    left: 0;
    position: absolute;
}

.sidebar-widget .list-unstyled li a{
   color: #454545; 
}

.sidebar-widget .list-unstyled li a:hover{
    text-decoration: none;
}

.sidebar-widget-title.h5 {
    line-height: 17px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
    font-weight: 700;
}

.sidebar-widget-title.h5::before {
    border: 1px solid #005f01;
}


/* 
 * O <li> é o contêiner principal.
 * Usamos flexbox para alinhar o link e o ícone, e 'wrap' para que o submenu quebre a linha.
 */
.sidebar-nav .page_item {
    display: flex;
    flex-wrap: wrap; /* ESSENCIAL: Permite que o submenu vá para a linha de baixo */
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef; /* Adiciona um separador sutil */
}

.sidebar-nav .page_item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

/* O link ocupa o espaço disponível à esquerda */
.sidebar-nav .page_item a {
    width: 80%;
    font-size: 0.9rem;
    flex-grow: 1;
    padding: 0.75rem 1rem;
    color: var(--cor-texto);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.sidebar-nav .page_item a:hover {
    background-color: #f8f9fa;
}

/* Estilo para o item ativo e seus pais */
.sidebar-nav .current_page_item > a,
.sidebar-nav .current_page_ancestor > a {
    color: var(--cor-primaria);
    font-weight: bold;
}

/* Ícone de Toggle */
.sidebar-nav .submenu-toggle {
    cursor: pointer;
    padding: 0.75rem 1rem;
    color: #6c757d; /* Cor mais sutil para o ícone */
    transition: transform 0.3s ease, color 0.2s ease;
}

.sidebar-nav .submenu-toggle:hover {
    color: var(--cor-primaria);
}

/* 
 * O submenu (classe .children)
 * Ocupa 100% da largura do <li> pai e fica escondido por padrão.
 */
.sidebar-nav .children {
    flex-basis: 100%; /* ESSENCIAL: Faz o submenu ocupar a linha inteira */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #f8f9fa; /* Fundo sutil para diferenciar do item pai */
}

/* Estilo para os itens dentro do submenu */
.sidebar-nav .children .page_item a {
    padding-left: 2.5rem; /* Adiciona indentação para indicar hierarquia */
}

/* Mostra o submenu quando o item pai tem a classe 'open' */
.sidebar-nav .has-children.open > .children {
    max-height: 1000px; /* Um valor alto para garantir que todo o conteúdo caiba */
}

/* Gira o ícone quando o menu está aberto */
.sidebar-nav .has-children.open > .submenu-toggle {
    transform: rotate(180deg);
    color: var(--cor-primaria);
}




/* ==========================================================================
   10. ESTILOS DE ACESSIBILIDADE (VERSÃO CORRIGIDA E MAIS ROBUSTA)
   ========================================================================== */

/* --- Acessibilidade de Fonte --- */

/* Nível 1: Aumenta a fonte em ~15% */
body.fonte-media,
body.fonte-media p,
body.fonte-media li,
body.fonte-media a,
body.fonte-media span,
body.fonte-media div {
    font-size: 1.15em !important;
}

body.fonte-media h1 { font-size: 2.3em !important; }
body.fonte-media h2 { font-size: 2.0em !important; }
body.fonte-media h3 { font-size: 1.8em !important; }
body.fonte-media h4 { font-size: 1.5em !important; }
body.fonte-media h5 { font-size: 1.3em !important; }
body.fonte-media h6 { font-size: 1.15em !important; }

/* Nível 2: Aumenta a fonte em ~30% */
body.fonte-grande,
body.fonte-grande p,
body.fonte-grande li,
body.fonte-grande a,
body.fonte-grande span,
body.fonte-grande div {
    font-size: 1.3em !important;
}

body.fonte-grande h1 { font-size: 2.6em !important; }
body.fonte-grande h2 { font-size: 2.3em !important; }
body.fonte-grande h3 { font-size: 2.0em !important; }
body.fonte-grande h4 { font-size: 1.8em !important; }
body.fonte-grande h5 { font-size: 1.5em !important; }
body.fonte-grande h6 { font-size: 1.3em !important; }


/* --- Acessibilidade de Contraste --- */
/* (O CSS de contraste permanece o mesmo, pois já usa !important) */

body.alto-contraste {
    background-color: #000 !important;
    color: #fff !important;
}

body.alto-contraste a {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

body.alto-contraste .btn,
body.alto-contraste .card,
body.alto-contraste .bg-light,
body.alto-contraste .list-group-item {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #FFFF00 !important;
}

body.alto-contraste h1, body.alto-contraste h2, body.alto-contraste h3,
body.alto-contraste h4, body.alto-contraste h5, body.alto-contraste h6 {
    color: #fff !important;
}

body.alto-contraste img, body.alto-contraste video {
    filter: grayscale(100%) contrast(200%);
}


/* ==========================================================================
   11.1. Widget de Mídias Sociais com Abas
   ========================================================================== */

/* Contêiner principal do widget */
.widget_meu_tema_midias_sociais .midias-sociais-tabs {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden; /* Garante que os cantos arredondados funcionem */
}

/* Estiliza a barra de abas (os ícones) */
.widget_meu_tema_midias_sociais .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center; /* Centraliza os ícones */
}

.widget_meu_tema_midias_sociais .nav-tabs .nav-item {
    margin-bottom: -1px; /* Alinha com a borda inferior */
}

/* Estiliza cada botão de aba (ícone) */
.widget_meu_tema_midias_sociais .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    color: var(--cor-texto-secundario);
    font-size: 1.5rem; /* Tamanho maior para os ícones */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Estilo do botão de aba ao passar o mouse */
.widget_meu_tema_midias_sociais .nav-tabs .nav-link:hover {
    background-color: #e9ecef;
    color: var(--cor-primaria);
}

/* Estilo do botão de aba ATIVO */
.widget_meu_tema_midias_sociais .nav-tabs .nav-link.active {
    color: var(--cor-primaria);
    background-color: #fff;
    border-bottom: 2px solid var(--cor-primaria);
    font-weight: bold;
}

/* Contêiner para o conteúdo das abas (os banners) */
.widget_meu_tema_midias_sociais .tab-content {
    padding: 0; /* Remove padding extra */
}

/* Cada painel de conteúdo de aba */
.widget_meu_tema_midias_sociais .tab-pane {
    /* A transição de fade já é controlada pelo Bootstrap via JS */
}

/* Garante que a imagem dentro do link ocupe todo o espaço */
.widget_meu_tema_midias_sociais .tab-pane a {
    display: block;
}

.widget_meu_tema_midias_sociais .tab-pane img {
    width: 100%;
    height: auto;
    display: block;
}


/*--------------------------------------------------------------
# Carrossel com Navegação por Miniaturas/Logos
--------------------------------------------------------------*/
.carousel-indicators-thumbnails {
    margin: 0;
    padding: 0;
    list-style: none;
}

.carousel-indicators-thumbnails button {
    flex: 1;
    max-width: calc(25% - 8px);
    height: 60px; /* Altura fixa para alinhar logos e ícones */
    margin: 0 4px;
    padding: 5px;
    background-color: #f8f9fa; /* Fundo cinza claro */
    border: 2px solid #dee2e6; /* Borda sutil */
    border-radius: 4px;
    opacity: 0.7;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-indicators-thumbnails button.active {
    opacity: 1;
    border-color: #198754; /* Cor de destaque verde */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Estilo para as logos dentro dos botões */
.carousel-indicators-thumbnails button img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que a logo caiba sem distorcer */
}

/* Estilo para os ícones dentro dos botões */
.carousel-indicators-thumbnails button i {
    font-size: 2rem; /* Tamanho grande para o ícone */
    color: #495057; /* Cor escura para o ícone */
}

.carousel-indicators-thumbnails button.active i {
    color: #198754; /* Cor de destaque para o ícone ativo */
}


/*--------------------------------------------------------------
# Correção de Aspect Ratio para Carrossel da Home
--------------------------------------------------------------*/

/* 
 * Alvo: O contêiner de cada slide dentro do carrossel específico.
 * A classe .carousel-item do Bootstrap já é responsiva.
*/
#carousel-cidadao .carousel-item {
    /* Você pode definir uma proporção de aspecto para o contêiner, se desejar.
       Por exemplo, 16/9 para um visual de vídeo, ou 4/3 para um visual mais quadrado.
       Se as suas imagens tiverem proporções muito diferentes, é melhor não definir isso. */
    /* aspect-ratio: 16 / 9; */
}

/* 
 * Alvo: A imagem DENTRO do slide do carrossel.
 * Esta é a regra mais importante.
*/
#carousel-cidadao .carousel-item img {
    width: 100%; 
    height: auto !important;     
    /* Garante que a imagem não ultrapasse o contêiner e se ajuste bem. */
    object-fit: cover; 
}



/* ==========================================================================
   Bloco de Notícias e Destaques da Home Page
   ========================================================================== */

/* --- Coluna de Notícias --- */

.noticia-principal-card .noticia-imagem-wrapper {
    overflow: hidden;
    border-radius: 0.375rem;
}

.noticia-principal-card .noticia-imagem-wrapper img {
    transition: transform 0.3s ease-in-out;
}

.noticia-principal-card:hover .noticia-imagem-wrapper img {
    transform: scale(1.05);
}

.noticia-principal-card:hover .noticia-titulo-principal {
    color: #198754 !important; /* Cor verde do Bootstrap (success) */
}

.noticia-item-secundaria {
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    transition: background-color 0.2s ease;
}

.noticia-item-secundaria:first-child {
    border-top: none !important;
    padding-top: 0 !important;
}

.noticia-item-secundaria:hover {
    background-color: #f8f9fa;
}

.noticia-item-secundaria:hover .noticia-titulo-secundaria {
    color: #198754 !important;
}

/* --- Coluna de Destaques --- */

.lista-destaques-wrapper {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.destaque-item-link {
    background-color: #fff;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.destaque-item-link:hover {
    border-color: #198754;
    transform: translateY(-2px);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.destaque-item-link .destaque-titulo {
    font-size: 0.9rem;
}

/* ==========================================================================
   Estilos da Página de Galeria
   ========================================================================== */

.gallery-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* A MÁGICA ACONTECE AQUI */
.gallery-card .card-img-top {
    height: 200px; /* Defina uma altura fixa para todas as imagens */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    width: 100%;
}

/* Estilização da Paginação (Bônus) */
.pagination .page-item .page-link {
    border-radius: 0.25rem;
    margin: 0 3px;
    border: 1px solid #dee2e6;
    color: #00692f; /* Cor verde do tema */
}

.pagination .page-item.active .page-link {
    background-color: #00692f; /* Cor verde do tema */
    border-color: #00692f;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
}