/* ==========================================================================
   1. CABEÇALHO (TOPO DO SITE) - FUNDO BRANCO E TEXTOS RECALIBRADOS
   ========================================================================== */
.mh-header-wrap,
.mh-header-area,
.mh-header-logo-area,
.mh-custom-header,
header[role="banner"] {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Título principal do site em vermelho destacado */
.mh-site-title a {
    color: #CC0000 !important;
    font-size: 32px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* Slogan institucional em cinza suave */
.mh-site-description {
    color: #666666 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
}

/* Barra de pesquisa alinhada com borda fina e botão de lupa vermelho */
.mh-header-search {
    float: right !important;
    margin-top: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.mh-header-search input[type="search"] {
    background: #FFFFFF !important;
    border: none !important;
    height: 38px !important;
    color: #333333 !important;
    padding-left: 10px !important;
}

.mh-header-search input[type="submit"] {
    background: #CC0000 !important;
    border: none !important;
    height: 38px !important;
    border-radius: 0 4px 4px 0 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   2. NAVEGAÇÃO (BARRA DO MENU) - VERMELHO VIVO COM LETRAS BRANCAS
   ========================================================================== */
#nav-main,
.mh-main-nav,
.mh-main-nav li,
.mh-main-nav-wrap {
    background: #CC0000 !important;
    background-color: #CC0000 !important;
}

#nav-main a,
.mh-main-nav li a {
    color: #FFFFFF !important;
}

/* ==========================================================================
   3. ÁREA DE CONTEÚDO E BARRA LATERAL - EQUILÍBRIO VISUAL (SEM EXCESSO VERMELHO)
   ========================================================================== */
/* Força o fundo da página e dos blocos a ficarem brancos */
.mh-wrapper,
.mh-content,
.mh-sidebar,
.widget {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Títulos das seções laterais: Fundo transparente com linha vermelha inferior (Estilo G1) */
.mh-widget-title,
.widget-title,
.mh-footer-widget .mh-widget-title {
    background: transparent !important;
    background-color: transparent !important;
    color: #CC0000 !important;
    border-bottom: 3px solid #CC0000 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding-left: 0 !important;
}

/* CORREÇÃO DEFINITIVA: Força o texto das matérias a reaparecer em cinza escuro */
.entry-title a,
.mh-loop-title a,
.mh-posts-grid-title a,
.mh-posts-lineup-title a,
.mh-custom-posts-small-title a,
.mh-widget li a,
.widget li a,
.mh-posts-list-title a,
.mh-posts-compact-title a {
    color: #222222 !important; 
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Links mudam para vermelho apenas quando passa o mouse por cima */
.entry-title a:hover,
.mh-loop-title a:hover,
.mh-posts-grid-title a:hover,
.mh-posts-lineup-title a:hover,
.mh-widget li a:hover,
.widget li a:hover,
.mh-posts-list-title a:hover,
.mh-posts-compact-title a:hover {
    color: #CC0000 !important;
}

/* ==========================================================================
   4. BOTÕES E COMPONENTES DE AÇÃO - VERMELHO SÓLIDO
   ========================================================================== */
.search-form input[type="submit"],
button[type="submit"],
.mh-search-form [type="submit"],
.search-button,
input[type="submit"],
.mh-more-link {
    background: #CC0000 !important;
    background-color: #CC0000 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    border: none !important;
}

/* ==========================================================================
   5. RODAPÉ INSTITUCIONAL - CINZA CLARO SUAVE (NÃO VERMELHO)
   ========================================================================== */
.mh-footer-area,
.mh-copyright-wrap,
footer {
    background: #F7F7F7 !important;
    background-color: #F7F7F7 !important;
    color: #666666 !important;
    border-top: 1px solid #E0E0E0 !important;
}

.mh-footer-area a,
.mh-copyright-wrap a {
    color: #333333 !important;
}
.mh-custom-logo img, .mh-header-logo img, img.custom-logo {
    max-width: 300px !important;
    height: auto !important;
}
@media (min-width: 768px) {
    .header-wrap, .mh-site-logo, .logo-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 30px !important;
    }
}
/* 1. Alarga o topo e o site inteiro para ocupar 96% da tela */
.mh-container, 
.mh-container-inner, 
.mh-header-inner, 
.mh-main-nav-inner {
    max-width: 96% !important;
    width: 96% !important;
}

/* 2. Remove as margens e joga o logotipo "GB3" totalmente para a esquerda */
.mh-site-logo, 
.mh-branding {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* 3. Ajusta o menu vermelho para esticar e começar colado na esquerda */
.mh-main-nav-wrap {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 4. Reduz sutilmente o espaço entre os botões do menu para ajudar a caber tudo */
.mh-main-nav li a {
    padding: 0 14px !important;
}
/* 1. Centraliza os itens do menu horizontalmente */
.mh-main-nav {
    text-align: center !important;
    float: none !important;
}

/* 2. Garante que os elementos internos se comportem como blocos alinhados */
.mh-main-nav ul {
    display: inline-block !important;
    float: none !important;
    vertical-align: middle !important;
}

.mh-main-nav li {
    float: none !important;
    display: inline-block !important;
}

/* 3. Aumenta o tamanho da fonte e ajusta o espaçamento */
.mh-main-nav li a {
    font-size: 16px !important; /* Aumenta a letra (o padrão é menor) */
    font-weight: bold !important; /* Deixa o texto mais marcante */
    padding: 0 18px !important; /* Dá espaço entre uma palavra e outra */
}
/* 1. Arredonda todas as imagens das notícias do site */
.mh-wrapper img, 
.mh-loop-thumb img, 
.mh-widget-posts-thumb img,
.entry-thumbnail img {
    border-radius: 12px !important; /* Controla o nível do arredondamento */
    transition: transform 0.3s ease; /* Efeito suave ao passar o mouse */
}

/* 2. Efeito visual: amplia levemente a imagem ao passar o mouse */
.mh-wrapper img:hover {
    transform: scale(1.02);
}

/* 3. Arredonda as caixas de postagens da seção "Mundo" na lateral */
.mh-custom-posts-item, 
.mh-posts-line-item {
    border-radius: 12px !important;
    overflow: hidden;
}
/* Centraliza o logotipo e os textos do cabeçalho apenas em celulares e tablets */
@media (max-width: 767px) {
    /* Força o contêiner do cabeçalho a alinhar os itens no meio */
    .mh-header-inner, 
    .mh-branding,
    .mh-site-logo {
        text-align: center !important;
        float: none !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
    }

    /* Centraliza a imagem do logo GB3 */
    .mh-site-logo img {
        margin: 0 auto 15px auto !important;
        display: block !important;
    }

    /* Centraliza o título principal GB3 BRASIL */
    .mh-site-title {
        text-align: center !important;
        float: none !important;
        font-size: 26px !important; /* Ajusta o tamanho da letra na tela pequena */
    }

    /* Centraliza o subtítulo PORTAL DE NOTÍCIAS... */
    .mh-site-description {
        text-align: center !important;
        float: none !important;
        margin: 5px auto 0 auto !important;
    }
}
/* Esconde a caixa de texto cinza e o texto descritivo */
.wp-block-search__label,
.wp-block-search__inside-wrapper input.wp-block-search__input {
    display: none !important;
}

/* Remove as bordas e o fundo do contêiner para não criar caixas vazias */
.wp-block-search,
.wp-block-search__inside-wrapper {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* Mantém apenas o botão vermelho com a lupa visível */
.wp-block-search__button {
    display: inline-block !important;
    margin: 0 !important;
    border-radius: 4px !important;
}
/* 1. Remove o fundo vermelho e deixa apenas o ícone da lupa escuro e discreto */
.wp-block-search__button {
    background: transparent !important;
    background-color: transparent !important;
    color: #333333 !important; /* Cor escura profissional */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

/* 2. Força o tamanho do ícone interno da lupa */
.wp-block-search__button svg {
    width: 22px !important;
    height: 22px !important;
    fill: #333333 !important;
}

/* 3. Posiciona a lupa no canto direito, logo abaixo do menu vermelho */
.wp-block-search {
    display: block !important;
    float: right !important; /* Força o alinhamento na direita */
    margin-top: 10px !important; /* Distância sutil abaixo do menu */
    margin-right: 20px !important; /* Afasta da borda direita da tela */
    margin-bottom: 15px !important; /* Afasta dos Destaques abaixo */
    width: auto !important;
    clear: both !important;
}
/* 1. Reativa e estiliza a caixinha de texto para ficar compacta */
.wp-block-search__inside-wrapper input.wp-block-search__input {
    display: inline-block !important;
    width: 150px !important; /* Tamanho pequeno e discreto para a barra */
    height: 32px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important; /* Cantos levemente arredondados */
    margin-right: 5px !important;
}

/* 2. Organiza a caixinha e a lupa lado a lado na horizontal */
.wp-block-search__inside-wrapper {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
}

/* 3. Ajusta o botão da lupa para ficar colado na caixinha */
.wp-block-search__button {
    background: #cc0000 !important; /* Vermelho do GB3 para destacar o botão */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    width: 35px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.wp-block-search__button svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
}

/* 4. Garante o posicionamento correto no canto direito abaixo do menu */
.wp-block-search {
    display: block !important;
    float: right !important;
    margin-top: 10px !important;
    margin-right: 20px !important;
    margin-bottom: 15px !important;
    width: auto !important;
    clear: both !important;
}
/* Aumenta o comprimento da barra de texto de pesquisa */
.wp-block-search__inside-wrapper input.wp-block-search__input {
    width: 220px !important; /* Deixa a caixinha mais extensa */
}
/* Centraliza a barra de pesquisa exclusivamente em celulares */
@media (max-width: 767px) {
    /* Remove a flutuação para a direita e centraliza o bloco na tela */
    .wp-block-search {
        float: none !important;
        margin: 15px auto !important; /* Cria um espaço equilibrado acima e abaixo */
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Alinha a estrutura interna no meio exato da tela do celular */
    .wp-block-search__inside-wrapper {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Garante que a barra de texto mantenha um tamanho bom na tela pequena */
    .wp-block-search__inside-wrapper input.wp-block-search__input {
        width: 200px !important; /* Tamanho ideal para telas de celular */
    }
}
/* Força o parágrafo de dentro das notícias a ficar maior e escuro */
body .entry-content p, 
body article p, 
body .post-content p {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: #222222 !important;
}
/* Une e centraliza o logotipo e o título na mesma linha (apenas no computador) */
@media (min-width: 768px) {
    /* Agrupa o cabeçalho inteiro */
    .mh-header-inner {
        position: relative !important;
        display: block !important;
    }

    /* Cria uma caixa centralizada para o Logo + Texto ficarem lado a lado */
    .mh-branding {
        display: flex !important;
        align-items: center !important; /* Alinha o texto no meio da altura do logo */
        justify-content: center !important; /* Move o conjunto para o meio da tela */
        float: none !important;
        margin: 15px auto !important;
        width: auto !important;
    }

    /* Ajusta o logotipo */
    .mh-site-logo {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ajusta o texto GB3 BRASIL para ficar colado do lado direito do logo */
    .mh-site-title {
        float: none !important;
        margin: 0 0 0 20px !important; /* Dá o espaço perfeito do logo */
        font-size: 36px !important; /* Tamanho imponente */
        font-weight: 900 !important; /* Letra bem grossa */
        line-height: 1 !important;
    }

    /* Mantém a barra de pesquisa fixa e protegida no canto direito */
    .wp-block-search {
        position: absolute !important;
        right: 20px !important;
        bottom: 12px !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }
}