/* ================================================= */
/* == TEMA DIÁRIO DE MINAS - CORES PERSONALIZADAS == */
/* ================================================= */

/* Cores principais */
:root {
    --cor-principal-azul: #00305f;
    --cor-destaque-laranja: #ff4500;
    --cor-hover-azul: #4364F7; /* Um azul mais claro e vibrante para o hover */
}

/* Estilo geral do corpo da página */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f0f0f0; 
}

/* Barra de Menu */
.main-menu-bar-wrapper {
   background-color: var(--cor-principal-azul); /* <<< MUDANÇA AQUI */
   padding: 0.1rem 0;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-menu-bar .nav-link {
    color: #f8f9fa;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    transition: color 0.2s ease-in-out;
}

/* CORREÇÃO AQUI: Efeito de hover e link ativo no menu agora são LARANJA */
.main-menu-bar .nav-link:not(.active):hover,
.main-menu-bar .nav-link.active {
    color: var(--cor-destaque-laranja);
}

/* Botão de busca */
.btn-outline-danger {
    --bs-btn-color: var(--cor-destaque-laranja);
    --bs-btn-border-color: var(--cor-destaque-laranja);
    --bs-btn-hover-bg: var(--cor-destaque-laranja);
    --bs-btn-hover-border-color: var(--cor-destaque-laranja);
    --bs-btn-active-bg: var(--cor-destaque-laranja);
    --bs-btn-active-border-color: var(--cor-destaque-laranja);
}

/* Tags de categoria nos cards de notícia */
.badge.bg-danger {
    background-color: var(--cor-destaque-laranja) !important;
}

/* Paginação */
.pagination .page-link {
    color: var(--cor-destaque-laranja);
}
.pagination .page-item.active .page-link {
    background-color: var(--cor-destaque-laranja);
    border-color: var(--cor-destaque-laranja);
}

/* Título do post no hover */
.post-card-horizontal .card-title a:hover {
    color: var(--cor-destaque-laranja);
}

/* Categoria nos destaques da home */
.featured-item-content .featured-category {
    background-color: var(--cor-destaque-laranja);
    /* ... (resto do estilo) ... */
}

/* Rodapé */
.site-footer {
    background-color: var(--cor-principal-azul);
    /* ... (resto do estilo) ... */
}

/* Estilo geral do corpo da página */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f0f0f0; 
}

/* Ajuste nos links dos títulos dos artigos */
article h3 a {
    color: #333;
    text-decoration: none;
}
article h3 a:hover {
    color: #d10000;
}

/* ================================================= */
/* == ESTILOS DO MENU DE LARGURA TOTAL == */
/* ================================================= */

/* A faixa do cabeçalho que ocupa 100% da largura */
.full-width-header {
    background-color: #fff; /* Fundo branco para a área do título */
    padding-top: 1rem;
}

/* A faixa da barra de navegação */
.main-menu-bar-wrapper {
    background-color: var(--cor-principal-azul);
    padding: 0.1rem 0; /* <<<-- ALTURA REDUZIDA */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-menu-bar .nav-link {
    color: #f8f9fa;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    transition: color 0.2s ease-in-out;
}

/* O efeito ao passar o mouse sobre um link que NÃO está ativo */
.main-menu-bar .nav-link:not(.active):hover {
    color: var(--cor-destaque-laranja);
}

/* O estilo para o link da página ATIVA (cor travada) */
.main-menu-bar .nav-link.active {
    color: var(--cor-destaque-laranja);
    font-weight: 700;
    background-color: transparent;
}


/* ================================================= */
/* == ESTILO FINAL PARA O CARD DE NOTÍCIA HORIZONTAL == */
/* ================================================= */

/* A imagem à esquerda */
.post-card-horizontal .card-img-left {
    width: 100%;
    height: 100%; /* Esta é a regra chave: força a imagem a ter a altura do seu container */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

/* O corpo do card, onde fica o texto */
.post-card-horizontal .card-body {
    padding: 0.75rem 1rem; /* Padding geral (vertical | horizontal) */
}

/* O título da notícia */
.post-card-horizontal .card-title {
    font-size: 1.15rem; /* Fonte menor */
    margin-bottom: 0.2rem; /* Espaço menor abaixo */
}

/* Os parágrafos (autor e resumo) */
.post-card-horizontal .card-text {
    font-size: 0.85rem; /* Fonte menor */
    line-height: 1.4; /* Linhas mais próximas */
    margin-bottom: 0.4rem; /* Espaço menor abaixo */
}

/* Container para a imagem com efeito hover */
.post-image-container {
overflow: hidden; /* Garante que o zoom não vaze do container */
}

.post-image-container .card-img-left {
transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave para o efeito */
}

.post-image-container:hover .card-img-left {
transform: scale(1.05); /* Aumenta a imagem em 10% ao passar o mouse */
}

/* Ajuste para o botão do menu mobile em fundo escuro */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================================================= */
/* == FAZ O MENU DROPDOWN ABRIR COM O MOUSE  == */
/* ================================================= */

/* Este truque só se aplica a telas grandes (desktops), onde o hover faz sentido */
@media (min-width: 992px) {

    /* Esconde o submenu por padrão */
    .dropdown .dropdown-menu {
        display: none;
        margin-top: 0; /* Remove a margem padrão do Bootstrap para um visual mais limpo */
    }

    /* A mágica: Mostra o submenu quando o mouse passa sobre o item pai */
    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* Opcional: Garante que o link pai não mude de cor no hover quando o dropdown está aberto */
    .dropdown:hover > .nav-link {
        color: #f8f9fa;
    }
}

.main-menu-bar .dropdown-toggle::after {
    display: none;
}

/* ================================================= */
/* == GRADE DE NOTÍCIAS EM DESTAQUE (ESTILO G1) == */
/* ================================================= */

.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de largura igual */
    grid-template-rows: 1fr 1fr;    /* <<< MUDANÇA 1: Duas linhas de altura igual */
    gap: 10px;
    margin-bottom: 2rem;
    height: 500px;                  /* <<< MUDANÇA 2: Altura total fixa da grade */
}

.featured-item {
    position: relative; /* Essencial para posicionar o texto sobre a imagem */
    overflow: hidden; /* Garante que o zoom do hover não vaze */
    border-radius: 0.25rem; /* Cantos arredondados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* O post grande ocupa toda a altura da grade */
.featured-item-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* Os dois posts pequenos */
.featured-item-small-top {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.featured-item-small-bottom {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.featured-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A imagem cobre todo o espaço sem distorcer */
    transition: transform 0.4s ease;
}

/* Efeito de zoom na imagem ao passar o mouse */
.featured-item:hover img {
    transform: scale(1.05);
}

/* O degradê escuro que fica sobre a imagem */
.featured-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%; /* Altura do degradê */
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    z-index: 1;
}

/* O texto que fica sobre a imagem e o degradê */
.featured-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    z-index: 2; /* Garante que o texto fique acima do degradê */
}

.featured-item-content .featured-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.featured-item-small-top .featured-title,
.featured-item-small-bottom .featured-title {
    font-size: 1.1rem; /* Fonte um pouco menor para os destaques pequenos */
}

.featured-item-content .featured-category {
    color: #fff;
    background-color: #e63946; /* Vermelho */
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
}

/* ============================================== */
/* == ESTILO PARA A DATA ATUAL NO CABEÇALHO  == */
/* ============================================== */

.header-date {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d; /* Um cinza escuro, cor padrão de texto secundário do Bootstrap */
    text-transform: capitalize; /* Deixa a primeira letra de cada palavra maiúscula */
}

/* ============================================== */
/* == BARRA SUPERIOR (COM A DATA)            == */
/* ============================================== */

.top-bar {
    background-color: #f8f9fa; /* Um cinza bem claro, padrão do Bootstrap */
    padding: 0.25rem 0; /* Um padding vertical bem pequeno para a barra ficar fina */
    font-size: 0.85rem; /* Fonte pequena e discreta */
    color: #6c757d;
    border-bottom: 1px solid #dee2e6; /* Uma linha divisória sutil */
    text-transform: capitalize;
}

/* ============================================== */
/* == ESTILO DO WIDGET FINANCEIRO            == */
/* ============================================== */
.finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas */
    gap: 0.75rem; /* Espaço entre os blocos */
}
.finance-widget {
    background-color: #fff;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}
.finance-widget .name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}
.finance-widget .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #212529;
}
.finance-widget .variation {
    font-size: 0.85rem;
    font-weight: 600;
}
.variation-positive { color: #198754; /* Verde */ }
.variation-negative { color: #dc3545; /* Vermelho */ }

/* ================================================= */
/* == LAYOUT DA TABELA DO DASHBOARD              == */
/* ================================================= */

.table-fixed-layout {
    table-layout: fixed; /* Força a tabela a obedecer as larguras definidas */
    width: 100%;
}

/* Define a largura de cada coluna */
.table-fixed-layout th:nth-child(1) { width: 40%; } /* Coluna Título */
.table-fixed-layout th:nth-child(2) { width: 15%; } /* Coluna Site */
.table-fixed-layout th:nth-child(3) { width: 15%; } /* Coluna Autor */
.table-fixed-layout th:nth-child(4) { width: 12%; } /* Coluna Status */
.table-fixed-layout th:nth-child(5) { width: 18%; } /* Coluna Ações */

/* Controla o texto longo na coluna do título */
.table-fixed-layout td:nth-child(1) {
    white-space: nowrap; /* Impede que o texto quebre a linha */
    overflow: hidden; /* Esconde o que não couber */
    text-overflow: ellipsis; /* Adiciona os "..." no final */
}

/* Garante que os botões de ação não se quebrem em telas menores */
.table-fixed-layout .btn {
    white-space: nowrap;
}

/* ================================================= */
/* == BARRA DE NOTÍCIAS (NEWS TICKER) FINAL     == */
/* ================================================= */
.news-ticker-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0;
    overflow: hidden;
}

.news-ticker-swiper .swiper-slide {
    width: auto;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap; 
}

.news-ticker-swiper .swiper-slide a {
    text-decoration: none;
    color: #212529;
    transition: color 0.2s ease;
}

.news-ticker-swiper .swiper-slide a:hover {
    color: #e63946;
}

/* Estilo para a paginação */
.pagination .page-link {
    color: var(--cor-principal-azul);
}
.pagination .page-item.active .page-link {
    background-color: var(--cor-principal-azul);
    border-color: var(--cor-principal-azul);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
}

.list-group-item a:hover {
    color: #d10000 !important;
}

/* ======================================= */
/* == WIDGET DE POSTS NA SIDEBAR      == */
/* ======================================= */

.sidebar-post-image {
    width: 60px;  /* Largura da miniatura */
    height: 60px; /* Altura da miniatura */
    object-fit: cover; /* Corta a imagem para caber, sem distorcer */
}

.sidebar-post-title {
    line-height: 1.2; /* Melhora a leitura de títulos com mais de uma linha */
}

/* Efeito de hover no link da lista */
.list-group-item a:hover .sidebar-post-title {
    color: #d10000; /* Deixa o título vermelho no hover */
}

/* ============================================== */
/* == WIDGET DE PREVISÃO DO TEMPO (DESIGN NOVO) == */
/* ============================================== */
/* Remove o fundo da regra principal */
.weather-widget-new {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Estilo para o widget durante o DIA */
.weather-widget-new.day {
    background: linear-gradient(160deg, #2563eb 0%, #60a5fa 100%);
}

/* Estilo para o widget durante a NOITE */
.weather-widget-new.night {
    background: linear-gradient(160deg, #0b1a3e 0%, #1e3a8a 100%);
}

/* Título e localização com contraste máximo e tipografia legível */
.weather-widget-new h4,
.weather-widget-new h5,
.weather-widget-new .weather-widget-title {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0.85rem !important;
    letter-spacing: 0.2px;
}

.weather-widget-new h4 strong,
.weather-widget-new h5 strong,
.weather-widget-new .weather-city-name {
    color: #ffffff !important;
    font-weight: 700;
}

.weather-widget-new .bi-geo-alt-fill,
.weather-widget-new .weather-icon-pin {
    color: #67e8f9 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    font-size: 1.05rem;
    vertical-align: -1px;
}

.weather-widget-new .weather-geo-refresh-btn {
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent !important;
    border: none !important;
    padding: 2px 6px !important;
    border-radius: 4px;
    font-size: 0.9rem !important;
    transition: all 0.25s ease-in-out;
}

.weather-widget-new .weather-geo-refresh-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    transform: rotate(180deg);
}

.weather-widget-new .current-temp-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.weather-widget-new .current-temp-desc {
    font-size: 1rem;
    font-weight: 500;
    margin-top: -5px; /* Sobe um pouco a descrição */
}

.weather-widget-new .min-max-temp {
    font-size: 0.9rem;
    opacity: 0.9;
}

.weather-widget-new .weather-icon img {
    width: 80px; /* Aumenta o ícone principal */
    height: 80px;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2)); /* Sombra no ícone */
}

.mini-forecast-wrapper {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.mini-forecast-item {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.9;
}

.mini-forecast-item .temp {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

.weather-widget-new .weather-icon .wi {
    font-size: 4rem; /* Tamanho do ícone principal */
    line-height: 1;
}
.mini-forecast-item .wi {
    font-size: 2rem; /* Tamanho dos ícones pequenos da previsão */
    display: block;
    margin: 5px 0;
}

.mini-forecast-wrapper {
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex; /* Mantém os itens em linha */
    /* overflow-x: auto; A MÁGICA: Adiciona a barra de rolagem horizontal se necessário */
    padding-top: 0.75rem;
    /* Adiciona um efeito de "fade out" no final para indicar que há mais itens */
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* Garante que os itens não quebrem a linha */
.mini-forecast-item {
    flex-shrink: 0; /* Impede que os itens encolham */
    padding: 0 10px; /* Adiciona um espaçamento horizontal */
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* ================================================= */
/* == ESTILO DA MANCHETE (TÍTULO PRINCIPAL) == */
/* ================================================= */
.container > header h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400; /* Lancelot só tem o peso 400 (normal) */
    font-size: 4.5rem; /* Tamanho que ajustamos para ela */
    color: #000;
    margin-bottom: 0; 
}



/* ADICIONE ESTA NOVA REGRA */
.header-title-link,
.header-title-link:hover {
    text-decoration: none; /* Remove o sublinhado */
    color: inherit; /* Faz o link herdar a cor do h1 (preto) */
}

/* ================================================= */
/* == ESTILOS DO RODAPÉ PERSONALIZADO          == */
/* ================================================= */

.site-footer {
    background-color: #00305f;
    color: #adb5bd; /* Define a cor cinza padrão para todo o texto do rodapé */
    padding: 3rem 0;
    margin-top: 3rem;
}

.footer-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
}
.footer-title:hover {
    color: #f8f9fa;
}

/* Regra final para os links de texto */
.footer-links {
    color: inherit; /* Faz o link "herdar" a cor do texto pai (o cinza) */
    text-decoration: none; /* Adiciona um sublinhado para indicar que é um link */
    transition: opacity 0.2s; /* Efeito suave ao passar o mouse */
}

/* Ao passar o mouse, o link não muda de cor, apenas fica um pouco transparente */
.footer-links:hover {
    color: inherit;
    opacity: 0.6;
}

/* ================================================= */
/* == EFEITO HOVER PARA TÍTULOS DE NOTÍCIAS     == */
/* ================================================= */

/* Cor padrão dos títulos nos cards com fundo claro */
.post-card-horizontal .card-title a,
.related-post-card .related-post-title a {
    color: #212529;
    transition: color 0.2s ease-in-out;
}

/* CORREÇÃO: Aplica o HOVER AZUL CLARO para os títulos em fundo claro */
.post-card-horizontal:hover .card-title a,
.related-post-card:hover .related-post-title a {
    color: var(--cor-hover-azul) !important;
}

/* Destaques da Home (fundo escuro) */
.featured-item-content .featured-title {
    color: #fff;
    transition: color 0.2s ease-in-out;
}
.featured-item a:hover .featured-title {
    color: var(--cor-destaque-laranja);
}

/* ======================================= */
/* == WIDGET DE POSTS NA SIDEBAR      == */
/* ======================================= */

/* ... (estilos da imagem e do título) ... */

/* CORREÇÃO: Efeito de hover no link da lista da sidebar */
.list-group-item a:hover .sidebar-post-title {
    color: var(--cor-hover-azul);
}

/* ================================================= */
/* == NOVO LAYOUT DO CABEÇALHO (HEADER V2)      == */
/* ================================================= */

.main-header {
    border-bottom: 1px solid #dee2e6;
}

.header-logo img {
    max-height: 80px; /* Ajuste a altura do logo como preferir */
    width: auto;
}

/* Estilos para a Previsão do Tempo Horizontal */
.weather-widget-horizontal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.weather-widget-horizontal .current-weather {
    display: flex;
    align-items: center;
    border-right: 1px solid #dee2e6;
    padding-right: 1rem;
    margin-right: 1rem;
}

.weather-widget-horizontal .current-weather .wi {
    font-size: 2.5rem;
    margin-right: 0.5rem;
    color: #0052D4;
}

.weather-widget-horizontal .current-temp {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.weather-widget-horizontal .current-desc {
    font-size: 0.8rem;
    color: #6c757d;
}

.weather-widget-horizontal .mini-forecast-items {
    display: flex;
    gap: 1rem;
}

.weather-widget-horizontal .mini-forecast-item {
    text-align: center;
}
.weather-widget-horizontal .mini-forecast-item .wi {
    font-size: 1.5rem;
}

/* Cor de destaque para títulos de página */
.text-highlight {
    color: var(--cor-destaque-laranja);
}

.mini-forecast-item .temp {
    font-weight: 600;
    font-size: 0.9rem; /* Ajustei um pouco o tamanho */
}

.weather-widget-horizontal .mini-forecast-item .temp {
    color: #212529; /* Cor de texto escura padrão */
    font-weight: 600;
    font-size: 0.9rem;
}