/*
Theme Name: newsup-child
Theme URI: https://jornalhoranews.com
Description: Tema filho do NewsUp para o Hora News — estética Band News / CNN Brasil
Author: Hora News
Template: newsup
Version: 2.0.0
Text Domain: newsup-child
*/

/* ================================================================
   HORA NEWS — TEMA FILHO NEWSUP v2
   Paleta:
     Vermelho:      #E8001C  (principal — "NEWS" na logo)
     Azul marinho:  #1B2A6B  (identidade — "HORA" na logo)
     Laranja:       #FF6B00  (acento — relógio na logo)
     Vermelho esc:  #CC2200  (hover / bordas)
     Header/footer: #1A1A1A
     Fundo geral:   #F4F4F4
     Texto:         #212121
     Metadados:     #757575
   Tipografia:
     Títulos:  Merriweather 700
     Nav/UI:   Roboto Condensed 600
     Corpo:    Georgia 400, 16px, line-height 1.8
     Meta:     Roboto 400, 12px
   ================================================================ */

/* ================================================================
   0. OVERRIDE VARIÁVEIS CSS DO NEWSUP (default.css define --pri-color: #1151d3)
   Carregamos DEPOIS do default.css via dependency em functions.php
   ================================================================ */

:root {
    --pri-color: #E8001C !important;
    --sec-color: #1B2A6B !important;
}

/* ── GOOGLE FONTS (carregadas via functions.php via wp_enqueue_style) ── */

/* ── RESET BASE ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: #F4F4F4;
    color: #212121;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.8;
}

a {
    color: #1B2A6B;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #E8001C;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 700;
    color: #1B2A6B;
    line-height: 1.3;
}

/* ================================================================
   1. BARRA SUPERIOR (Top Bar) — VERMELHA
   Seletores com especificidade >= default.css (.mg-headwidget .mg-head-detail)
   ================================================================ */

/* default.css usa: .mg-headwidget .mg-head-detail { background: #202f5b; } */
.mg-headwidget .mg-head-detail,
.mg-head-detail {
    background: #E8001C !important;
    background-color: #E8001C !important;
    color: #fff !important;
    padding: 6px 0 !important;
    border-bottom: none !important;
}

/* default.css usa: .mg-head-detail .info-left li, .mg-headwidget .mg-head-detail .info-left li a ... */
.mg-head-detail .info-left li,
.mg-headwidget .mg-head-detail .info-left li a,
.mg-headwidget .mg-head-detail li a i,
.mg-head-detail .info-left li span,
.mg-head-detail .info-left i {
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mg-head-detail .info-left li a:hover {
    color: #FFD0D0 !important;
}

/* ícones sociais no topo */
/* default.css usa: .mg-headwidget .mg-head-detail .info-right li a */
.mg-head-detail .info-right,
.mg-headwidget .mg-head-detail .info-right li a,
.mg-headwidget .mg-head-detail .info-right li a i,
.mg-head-detail .mg-social li a,
.mg-head-detail .mg-social li a i {
    color: #fff !important;
    font-size: 13px !important;
}

/* default.css usa: .mg-headwidget .mg-head-detail .info-right li a:hover */
.mg-headwidget .mg-head-detail .info-right li a:hover,
.mg-headwidget .mg-head-detail .info-right li a:focus,
.mg-head-detail .mg-social li a:hover {
    color: #FF6B00 !important;
}

.mg-head-detail .info-left li span.time {
    background: #CC2200 !important;
    color: #fff !important;
}

/* ================================================================
   2. HEADER PRINCIPAL — #1A1A1A
   Seletores reais: header.mg-headwidget, .mg-nav-widget-area-back .inner
   ================================================================ */

header.mg-headwidget {
    background-color: #1A1A1A !important;
}

/* default.css usa: .mg-headwidget.light .mg-nav-widget-area-back .inner { background: #fff; } */
.mg-nav-widget-area-back {
    background-color: #1A1A1A !important;
    background-image: none !important;
}

.mg-nav-widget-area-back .inner,
.mg-nav-widget-area-back .overlay,
.mg-headwidget.light .mg-nav-widget-area-back .inner {
    background-color: #1A1A1A !important;
    background: #1A1A1A !important;
    padding: 10px 0 !important;
}

/* ── Logo ── */
.site-logo .custom-logo-link img,
.site-logo .custom-logo,
.navbar-header .custom-logo-link img,
.navbar-header .custom-logo,
.custom-logo,
.custom-logo-link img {
    max-height: 80px !important;
    height: 80px !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    aspect-ratio: auto !important;
}

@media (max-width: 768px) {
    .site-logo .custom-logo-link img,
    .custom-logo,
    .custom-logo-link img {
        height: 55px !important;
        max-height: 55px !important;
    }
}

/* Ocultar texto do site (logo substitui) */
.site-branding-text .site-title,
.site-branding-text .site-description,
.site-branding-text {
    display: none !important;
}

/* ================================================================
   3. MENU PRINCIPAL — VERMELHO #E8001C
   Seletores com especificidade >= default.css (.mg-headwidget .navbar-wp)
   ================================================================ */

.mg-menu-full {
    background-color: #E8001C !important;
}

/* default.css usa: .mg-headwidget .navbar-wp { background: #202f5b; } */
.mg-headwidget .navbar-wp,
header.mg-headwidget .navbar-wp,
.navbar-wp {
    background: #E8001C !important;
    background-color: #E8001C !important;
    border: none !important;
    box-shadow: none;
    margin: 0 !important;
}

/* default.css usa: .mg-headwidget .navbar-wp .navbar-nav > li> a { color: rgba(255,255,255,0.71); } */
.mg-headwidget .navbar-wp .navbar-nav > li > a,
.navbar-wp .navbar-nav > li > a {
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 18px !important;
    line-height: 1.4 !important;
    border-bottom: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

/* default.css usa: .mg-headwidget .navbar-wp .navbar-nav > li > a:hover ... background: var(--pri-color) */
.mg-headwidget .navbar-wp .navbar-nav > li > a:hover,
.mg-headwidget .navbar-wp .navbar-nav > li > a:focus,
.mg-headwidget .navbar-wp .navbar-nav > .active > a,
.mg-headwidget .navbar-wp .navbar-nav > .active > a:hover,
.mg-headwidget .navbar-wp .navbar-nav > .active > a:focus,
.navbar-wp .navbar-nav > li > a:hover,
.navbar-wp .navbar-nav > li > a:focus,
.navbar-wp .navbar-nav > .active > a,
.navbar-wp .navbar-nav > .current-menu-item > a,
.navbar-wp .navbar-nav > .active > a:hover,
.navbar-wp .navbar-nav > .active > a:focus {
    background: #CC2200 !important;
    background-color: #CC2200 !important;
    color: #fff !important;
    border-bottom-color: #FF6B00 !important;
}

/* Submenu dropdown */
.navbar-wp .dropdown-menu {
    background-color: #1B2A6B !important;
    border-top: 3px solid #E8001C !important;
    border-radius: 0 !important;
}

.navbar-wp .dropdown-menu > li > a,
.navbar-wp .dropdown-menu > li > a:focus {
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.navbar-wp .dropdown-menu > li > a:hover {
    background-color: #E8001C !important;
    color: #fff !important;
}

/* Botão hambúrguer mobile */
.navbar-toggler .burger-line {
    background-color: #fff !important;
}

/* Search icon no menu */
.mg-search-box .msearch,
.mg-search-box .msearch i,
.desk-header .msearch,
.desk-header .msearch i,
.btn-bell {
    color: #fff !important;
}

.mg-search-box .msearch:hover i,
.btn-bell:hover {
    color: #FF6B00 !important;
}

/* ================================================================
   4. TICKER DE ÚLTIMAS NOTÍCIAS
   Seletores reais: .mg-latest-news-sec, .mg-latest-news, .bn_title .title
   ================================================================ */

.mg-latest-news-sec {
    background-color: #1B2A6B !important;
    box-shadow: none !important;
    border-bottom: 2px solid #E8001C;
}

.mg-latest-news {
    background-color: #1B2A6B !important;
    height: 42px !important;
}

.mg-latest-news .bn_title {
    background-color: #FF6B00 !important;
    height: 42px !important;
}

.mg-latest-news .bn_title .title {
    background-color: #FF6B00 !important;
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    line-height: 42px !important;
    height: 42px !important;
    padding: 0 16px !important;
}

.mg-latest-news .bn_title span {
    border-color: transparent transparent transparent #FF6B00 !important;
}

.mg-latest-news .mg-latest-news-slider a {
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.mg-latest-news .mg-latest-news-slider a:hover {
    color: #FF6B00 !important;
}

.mg-latest-news .mg-latest-news-slider a::before {
    color: #E8001C !important;
}

/* ================================================================
   5. BADGES DE CATEGORIA — VERMELHOS, BORDER-RADIUS 2px
   Seletores reais: .mg-blog-category a
   ================================================================ */

.mg-blog-category a {
    background-color: #E8001C !important;
    color: #fff !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    line-height: 12px !important;
    letter-spacing: 0.04em;
    transition: background 0.2s;
}

.mg-blog-category a:hover {
    background-color: #CC2200 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ================================================================
   6. METADADOS DE POST
   ================================================================ */

.mg-blog-meta,
.mg-blog-meta a,
.mg-blog-meta span,
.post-meta,
.entry-meta,
.posted-on,
.byline,
time.entry-date {
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    color: #757575 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mg-blog-meta a:hover {
    color: #E8001C !important;
}

/* ================================================================
   7. TÍTULOS DE POSTS — MERRIWEATHER
   Seletores reais: .mg-posts-sec-post-content .title, .entry-title
   ================================================================ */

.mg-posts-sec-post-content .title,
.mg-posts-sec-post-content .title a,
.mg-posts-sec-post-content h2,
.mg-posts-sec-post-content h3,
.entry-title,
.entry-title a,
h1.entry-title,
h2.entry-title,
h3.entry-title {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    line-height: 1.35 !important;
}

.mg-posts-sec-post-content .title a:hover,
.entry-title a:hover {
    color: #E8001C !important;
}

/* Títulos no small-list (lista lateral) */
.mg-posts-sec-inner .small-list-post .small-post .title,
.mg-posts-sec-inner .small-list-post .small-post .title a {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.mg-posts-sec-inner .small-list-post .small-post .title a:hover {
    color: #E8001C !important;
}

/* Títulos de seção/widget */
.mg-posts-sec .mg-sec-top-bar .title,
.mg-posts-sec .mg-sec-top-bar h2,
.widget-title,
.widgettitle,
.mg-widget .mg-widget-title {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    border-bottom: 3px solid #E8001C !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    text-transform: none;
}

/* ================================================================
   8. CARDS / THUMBNAILS
   ================================================================ */

.mg-posts-sec-post {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.mg-posts-sec-post:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}

.mg-post-thumb img,
.post-thumbnail img {
    transition: opacity 0.25s;
}

.mg-post-thumb img:hover,
.post-thumbnail img:hover {
    opacity: 0.88;
}

/* ================================================================
   9. LINK "LEIA MAIS"
   Seletores reais: .more-link
   ================================================================ */

.more-link,
a.more-link,
.post-btn a,
.mg-posts-sec-post-content .post-btn a {
    color: #fff !important;
    background-color: #E8001C !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    padding: 5px 14px !important;
    border-radius: 0 !important;
    display: inline-block;
    transition: background 0.2s;
}

.more-link:hover,
a.more-link:hover,
.post-btn a:hover {
    background-color: #CC2200 !important;
    color: #fff !important;
}

/* ================================================================
   10. BOTÕES GERAIS
   ================================================================ */

.btn,
.button,
.btn-default,
input[type="submit"],
.wp-block-button__link,
.btn-theme {
    background-color: #E8001C !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: background 0.2s;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.btn-theme:hover {
    background-color: #CC2200 !important;
    color: #fff !important;
}

/* ================================================================
   11. SIDEBAR
   ================================================================ */

.mg-sidebar .widget-title,
.mg-sidebar .widgettitle,
#secondary .widget-title,
#secondary .widgettitle {
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    border-bottom: 3px solid #E8001C !important;
    padding-bottom: 8px !important;
}

/* ================================================================
   12. PAGINAÇÃO
   ================================================================ */

.page-numbers,
.pagination a,
.nav-links a {
    border: 1px solid #E8001C !important;
    color: #E8001C !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 600;
}

.page-numbers.current,
.page-numbers:hover,
.pagination a:hover,
.nav-links a:hover {
    background-color: #E8001C !important;
    color: #fff !important;
}

/* ================================================================
   13. ARTIGO SINGULAR
   ================================================================ */

.single .entry-content,
.page .entry-content {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.8;
    color: #212121;
}

.single h1.entry-title,
.single .entry-title {
    font-family: 'Merriweather', Georgia, serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1B2A6B !important;
    margin-bottom: 16px;
}

.single .entry-content h2,
.single .entry-content h3 {
    font-family: 'Merriweather', Georgia, serif;
    color: #1B2A6B;
}

.single .entry-content a {
    color: #E8001C;
    text-decoration: underline;
}

.single .entry-content a:hover {
    color: #CC2200;
}

/* ================================================================
   14. RODAPÉ — #1A1A1A
   Seletores reais: footer.footer, .mg-footer-bottom-area, .mg-footer-copyright
   ================================================================ */

footer.footer,
footer.back-img {
    background-color: #1A1A1A !important;
    background-image: none !important;
    border-top: 3px solid #E8001C;
}

footer.footer .overlay,
footer.back-img .overlay {
    background-color: #1A1A1A !important;
}

footer.footer .widget-title,
footer.footer .widgettitle,
.mg-footer-widget-area .widget-title,
.mg-footer-widget-area .widgettitle {
    color: #fff !important;
    font-family: 'Merriweather', Georgia, serif !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #E8001C !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

footer.footer a,
.mg-footer-widget-area a {
    color: #CCCCCC !important;
    transition: color 0.2s;
}

footer.footer a:hover,
.mg-footer-widget-area a:hover {
    color: #E8001C !important;
}

footer.footer p,
footer.footer li,
footer.footer span,
.mg-footer-widget-area p,
.mg-footer-widget-area li {
    color: #CCCCCC;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}

/* Barra de copyright */
.mg-footer-bottom-area,
footer .mg-footer-bottom-area {
    background-color: #0f0f0f !important;
    border-top: 1px solid #333 !important;
}

.mg-footer-copyright,
footer .mg-footer-copyright {
    background-color: #0f0f0f !important;
}

.mg-footer-copyright p,
.mg-footer-copyright a,
footer .mg-footer-copyright p,
footer .mg-footer-copyright a {
    color: #888 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
}

.mg-footer-copyright a:hover {
    color: #E8001C !important;
}

/* Remover créditos ao tema/WordPress visualmente */
.mg-footer-copyright .site-info a[href*="wordpress.org"],
.mg-footer-copyright .site-info a[href*="newsup"],
.mg-footer-copyright .powered-by {
    display: none;
}

/* ================================================================
   15. FUNDO GERAL / CONTEÚDO
   ================================================================ */

#content,
.site-content,
#primary,
.content-area {
    background-color: #F4F4F4;
}

.mg-posts-sec,
.mg-posts-sec-inner {
    background-color: transparent;
}

/* ================================================================
   16. BUSCA
   ================================================================ */

.search-form input[type="search"],
.wp-block-search__input {
    border: 1px solid #ddd;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
}

.search-form input[type="submit"],
.wp-block-search__button {
    background-color: #E8001C !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* ================================================================
   17. RESPONSIVO
   ================================================================ */

@media (max-width: 991px) {
    /* Menu mobile */
    .mg-headwidget .navbar-collapse,
    #navbar-wp {
        background-color: #1B2A6B !important;
    }

    .navbar-wp .navbar-nav > li > a,
    .mg-headwidget .navbar-wp .navbar-nav > li > a {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding: 10px 16px !important;
    }

    .m-header {
        background-color: #E8001C !important;
    }
}

@media (max-width: 768px) {
    .site-logo .custom-logo {
        max-height: 60px !important;
        height: 60px;
    }

    .single h1.entry-title {
        font-size: 1.5rem !important;
    }

    .mg-latest-news .bn_title .title {
        font-size: 10px !important;
        padding: 0 10px !important;
    }
}

/* ================================================================
   18. SCROLL TO TOP
   ================================================================ */

.ta_upscr {
    background-color: #E8001C !important;
    color: #fff !important;
}

.ta_upscr:hover {
    background-color: #CC2200 !important;
}