/*
Theme Name: Natália Dantas
Theme URI: https://mombacaonline.com.br
Author: Natália Dantas / ProveNET
Author URI: https://mombacaonline.com.br
Description: Tema personalizado de Natália Dantas — Mais que jornalismo, informação. Baseado em News Talk (child theme de Newsup).
Version: 1.1
Requires PHP: 7.0
Tested up to: 6.5.5
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: newsup
Text Domain: natalia-dantas
Tags: blog, news, magazine, responsive, custom-colors, custom-logo, featured-images, footer-widgets, rtl-language-support
*/

/* ===========================================================
   PALETA DE CORES — IDENTIDADE VISUAL NATÁLIA DANTAS
   Primary:      #CA2189  (rosa/magenta — cor do logotipo)
   Primary Dark: #A01870  (hover / estados ativos)
   Primary Pale: #F5D0EA  (fundo suave / badges claros)
   Dark BG:      #141414  (header, footer)
   Dark Mid:     #1E1E1E  (elementos escuros secundários)
   Text:         #1A1A1A  (texto principal)
   Muted:        #666666  (texto secundário / datas)
   Border:       #E0E0E0  (bordas e separadores)
   Light BG:     #F7F7F7  (fundo de seções claras)
   White:        #FFFFFF
=========================================================== */

:root {
    --nd-primary:      #CA2189;
    --nd-primary-dark: #A01870;
    --nd-primary-pale: #F5D0EA;
    --nd-dark:         #141414;
    --nd-dark-mid:     #1E1E1E;
    --nd-text:         #1A1A1A;
    --nd-muted:        #666666;
    --nd-border:       #E0E0E0;
    --nd-light:        #F7F7F7;
    --nd-white:        #FFFFFF;
    --nd-radius:       3px;
    --nd-transition:   0.2s ease;
}

/* ===========================================================
   BASE
=========================================================== */
a { color: var(--nd-primary); transition: color var(--nd-transition); }
a:hover, a:focus { color: var(--nd-primary-dark); text-decoration: none; }

/* ===========================================================
   HEADER / NAVBAR
=========================================================== */
.mg-top-bar, .mg-nav-bar, .navbar-wp, .mg-headwidget .navbar-wp {
    background-color: var(--nd-dark) !important;
    border-bottom: 2px solid var(--nd-primary) !important;
}
.navbar-wp .navbar-nav > li > a {
    color: var(--nd-white) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: color var(--nd-transition), background-color var(--nd-transition);
}
.navbar-wp .navbar-nav > li > a:hover,
.navbar-wp .navbar-nav > li.active > a,
.navbar-wp .navbar-nav > li:focus > a {
    color: var(--nd-primary) !important;
    background-color: transparent !important;
}
.navbar-wp .dropdown-menu {
    border-top: 2px solid var(--nd-primary);
    background-color: var(--nd-dark-mid);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.navbar-wp .dropdown-menu > li > a {
    color: var(--nd-white) !important;
    font-size: 13px;
    padding: 8px 16px;
    transition: background-color var(--nd-transition);
}
.navbar-wp .dropdown-menu > li > a:hover {
    background-color: var(--nd-primary) !important;
    color: var(--nd-white) !important;
}
.navbar-toggler, .navbar-wp .navbar-toggler { border-color: var(--nd-primary) !important; }
.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='%23CA2189' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-wp .dropdown-menu.searchinner .btn, .mg-search-box .btn {
    background-color: var(--nd-primary);
    border-color: var(--nd-primary);
    color: var(--nd-white);
    height: 40px;
    line-height: 25px;
    padding: 5px 15px;
    transition: background-color var(--nd-transition);
}
.navbar-wp .dropdown-menu.searchinner .btn:hover, .mg-search-box .btn:hover {
    background-color: var(--nd-primary-dark);
    border-color: var(--nd-primary-dark);
}
.mg-headwidget.center .heacent { margin-top: unset !important; color: var(--nd-white); }
.mg-headwidget.center .logo-center,
.mg-headwidget.center .navbar-header,
.mg-headwidget.center .site-branding-text { float: none; text-align: center; }
.mg-headwidget.center .navbar-brand { float: none; display: inline-block; margin: 8px auto 0 auto; font-weight: bold; }
.mg-search-box .dropdown-toggle::after { display: none; }
.m-header { display: none; }
.desk-header { display: flex; }
.mobilehomebtn { width: 30px; text-align: center; line-height: 30px; height: 30px; }

/* ===========================================================
   BREAKING NEWS
=========================================================== */
.mg-breaking-news, .breaking-news-section {
    background-color: var(--nd-dark);
    border-bottom: 1px solid var(--nd-primary);
}
.mg-breaking-news .mg-breaking-label, .mg-breaking-news .breaking-label {
    background-color: var(--nd-primary) !important;
    color: var(--nd-white) !important;
    font-weight: 700;
    text-transform: uppercase;
}
.mg-breaking-news a { color: var(--nd-white); }
.mg-breaking-news a:hover { color: var(--nd-primary-pale); }
span.time {
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: var(--nd-radius);
    font-size: 12px;
    font-weight: 700;
    line-height: 35px;
    background-color: var(--nd-primary);
    color: var(--nd-white);
}

/* ===========================================================
   CATEGORIAS / BADGES
=========================================================== */
.mg-blog-categories a, .post-categories a, .cat-links a,
.mg-blog-post .categories a, .mg-cat-badge a,
.mg-blog-category a {
    background-color: var(--nd-primary) !important;
    color: var(--nd-white) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--nd-radius);
    text-decoration: none !important;
    display: inline-block;
    transition: background-color var(--nd-transition);
}
.mg-blog-categories a:hover, .post-categories a:hover, .cat-links a:hover {
    background-color: var(--nd-primary-dark) !important;
}

/* ===========================================================
   CARDS DE POSTS
=========================================================== */
.mg-blog-post.md { width: 49.8%; float: left; height: 236px; }
.mg-blog-post.md .bottom h4 { font-size: 26px; margin: 0 0 10px 0; }
.mb1px { margin-bottom: 1px; }
.mg-blog-post.lg.mins { width: 100%; height: 222.5px; margin-bottom: 30px; }
.mg-blog-post.lg.mins h4.title { font-size: 22px; }
.mg-blog-post .bottom h4 { margin: 0 0 10px 0; }

/* ===========================================================
   WIDGETS
=========================================================== */
.mg-widget .widget-title, .mg-widget h2.widget-title,
.widget-title, .widgettitle, .mg-widget .wp-block-group h2 {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--nd-dark);
    border-left: 4px solid var(--nd-primary);
    padding-left: 10px;
    margin-bottom: 16px;
    position: relative;
}
.wp-block-search .wp-block-search__label::before,
.mg-widget .wp-block-group h2::before {
    width: 0;
    position: absolute;
    right: -30px;
    top: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 0 30px;
    border-color: transparent transparent transparent var(--nd-primary);
    content: "";
}
.mg-widget .mg-blog-post h4 a { color: var(--nd-text) !important; font-size: 14px; line-height: 1.4; }
.mg-widget .mg-blog-post h4 a:hover { color: var(--nd-primary) !important; }

/* ===========================================================
   PAGINAÇÃO
=========================================================== */
.page-numbers, .mg-pagination a, .nav-links a {
    border: 1px solid var(--nd-border);
    color: var(--nd-text);
    padding: 6px 12px;
    border-radius: var(--nd-radius);
    text-decoration: none;
    transition: all var(--nd-transition);
    display: inline-block;
}
.page-numbers:hover, .mg-pagination a:hover, .nav-links a:hover {
    background-color: var(--nd-primary);
    border-color: var(--nd-primary);
    color: var(--nd-white);
}
.page-numbers.current, .mg-pagination .current {
    background-color: var(--nd-primary);
    border-color: var(--nd-primary);
    color: var(--nd-white);
    font-weight: 700;
}

/* ===========================================================
   COMENTÁRIOS
=========================================================== */
#cancel-comment-reply-link, .comment-reply-link {
    text-decoration: underline;
    color: var(--nd-primary);
}
.comment-reply-link:hover { color: var(--nd-primary-dark); }
.comment-form .submit, #commentform .submit {
    background-color: var(--nd-primary);
    border: none;
    color: var(--nd-white);
    padding: 10px 24px;
    border-radius: var(--nd-radius);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--nd-transition);
}
.comment-form .submit:hover { background-color: var(--nd-primary-dark); }

/* ===========================================================
   CONTEÚDO DO POST
=========================================================== */
.post-items ul:not(.post-categories) li a,
.post-items ol:not(.post-categories) li a,
.post-items table a, strong a, blockquote a, code a, p a,
span:not(.author-name):not(.comments-link):not(.posted-on):not(.post-list) a {
    text-decoration: underline;
    color: var(--nd-primary);
}
blockquote {
    border-left: 4px solid var(--nd-primary);
    background-color: var(--nd-light);
    padding: 16px 20px;
    margin: 20px 0;
}
blockquote p { color: var(--nd-text); font-style: italic; }

/* ===========================================================
   BOTÕES GLOBAIS
=========================================================== */
.btn-primary, .wp-block-button__link,
input[type="submit"], button[type="submit"],
.btn-theme, .more_btn, .more-link {
    background-color: var(--nd-primary) !important;
    border-color: var(--nd-primary) !important;
    color: var(--nd-white) !important;
    border-radius: var(--nd-radius);
    font-weight: 700;
    transition: background-color var(--nd-transition), border-color var(--nd-transition);
}
.btn-primary:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
    background-color: var(--nd-primary-dark) !important;
    border-color: var(--nd-primary-dark) !important;
}
.more-link { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.more-link:hover { color: var(--nd-white) !important; }

/* ===========================================================
   BUSCA
=========================================================== */
.search-form input[type="search"], .wp-block-search__input {
    border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius) 0 0 var(--nd-radius);
    padding: 8px 12px;
    outline: none;
    transition: border-color var(--nd-transition);
}
.search-form input[type="search"]:focus, .wp-block-search__input:focus {
    border-color: var(--nd-primary);
    box-shadow: 0 0 0 2px rgba(202,33,137,0.15);
}

/* ===========================================================
   TAGS
=========================================================== */
.tags-links a, .wp-block-tag-cloud a {
    background-color: var(--nd-light);
    border: 1px solid var(--nd-border);
    color: var(--nd-text);
    padding: 3px 10px;
    border-radius: var(--nd-radius);
    font-size: 12px;
    display: inline-block;
    margin: 2px;
    transition: all var(--nd-transition);
    text-decoration: none !important;
}
.tags-links a:hover, .wp-block-tag-cloud a:hover {
    background-color: var(--nd-primary);
    border-color: var(--nd-primary);
    color: var(--nd-white);
}

/* ===========================================================
   SCROLLBAR
=========================================================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: var(--nd-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nd-primary-dark); }

/* ===========================================================
   SOCIAL ICONS
=========================================================== */
.mg-social a, .social-icons a, .mg-top-social a {
    color: var(--nd-white);
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--nd-transition);
    font-size: 13px;
}
.mg-social a:hover, .social-icons a:hover { background-color: var(--nd-primary); }

/* ===========================================================
   FOOTER
=========================================================== */
.mg-footer, .site-footer, footer {
    background-color: var(--nd-dark) !important;
    color: var(--nd-white);
    border-top: 3px solid var(--nd-primary);
}
.mg-footer a, .site-footer a, footer a {
    color: rgba(255,255,255,0.8);
    transition: color var(--nd-transition);
}
.mg-footer a:hover, .site-footer a:hover, footer a:hover {
    color: var(--nd-primary);
    text-decoration: none;
}
.mg-footer .widget-title, .site-footer .widget-title, .mg-footer h3 {
    color: var(--nd-white) !important;
    border-left-color: var(--nd-primary) !important;
}
.mg-footer-bottom, .site-info, .mg-footer-copyright {
    background-color: var(--nd-dark-mid) !important;
    border-top: 1px solid rgba(202,33,137,0.3);
    color: rgba(255,255,255,0.6) !important;
    padding: 12px 0;
    font-size: 13px;
}
.mg-footer-bottom a, .mg-footer-copyright a {
    color: var(--nd-primary) !important;
}
footer .mg-widget ul li a:hover, footer .mg-widget ul li a:focus {
    color: var(--nd-primary) !important;
}

/* ===========================================================
   ACESSIBILIDADE
=========================================================== */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--nd-primary);
    outline-offset: 2px;
}

/* ===========================================================
   RESPONSIVIDADE
=========================================================== */
@media screen and (max-width: 767px) and (min-width: 240px) {
    .mg-headwidget .navbar-wp .navbar-nav > li > a {
        position: relative;
        border-bottom: 1px solid rgba(202,33,137,0.3);
        padding: 10px 15px;
    }
    .mg-fea-area .mr-bot60 { margin-bottom: 20px; }
    .mg-blog-post.lg { margin-bottom: 20px; }
    blockquote::before { margin: 6px 0; }
    .mg-blog-post.md { width: 100%; float: none; height: auto; }
    .mg-blog-post.md .bottom h4 { font-size: 20px; }
}

@media (max-width: 991px) {
    .navbar-wp .navbar-nav > li > a i { display: none; }
}

@media (min-width: 1200px) {
    .mg-blog-post.md .bottom h4 { max-height: 65px; overflow: hidden; }
}

@media (max-width: 991.98px) {
    #menu-primary li.active.home { display: none; }
    .m-header {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .desk-header { display: none; }
    .mobilehomebtn { width: 34px; height: 34px; line-height: 34px; }
}

@media (min-width: 508px) and (max-width: 991px) {
    blockquote::before { width: 10%; }
    blockquote p { width: 90%; }
    .mg-nav-widget-area .site-title a { font-size: 30px; }
}

@media only screen and (max-width: 640px) {
    .site-branding-text .site-title a { font-size: 28px; }
}

@media screen and (max-width: 991.98px) and (min-width: 767px) {
    .wp-block-search__inside-wrapper { display: flex; flex-wrap: wrap; justify-content: center; }
    .pulse.animated .mg-blog-meta .mg-blog-date { font-size: 11px; margin-right: 10px; }
    .pulse.animated .mg-blog-meta a { font-size: 11px; }
    .pulse.animated .post-edit-link i { margin-left: 10px; }
}

@media screen and (max-width: 767px) and (min-width: 576px) {
    .mg-fea-area .col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .mg-fea-area .col-md-3 { display: flex; }
    .mg-fea-area .mg-blog-post.lg.mins { margin: 0 5px 20px 0; }
    .mg-fea-area .col-md-3.col-sm-6 { display: block; }
}

@media (max-width: 400px) {
    .mg-blog-post.lg.mins { height: auto; }
    .mg-blog-post.lg.mins h4.title { font-size: 18px; }
}

@media print {
    .mg-top-bar, .navbar-wp, .mg-footer, .sidebar { display: none !important; }
    a { color: var(--nd-text) !important; }
}