/* ===== Ajustes customizados do Forum Cidadao ===== */
/* Este arquivo eh carregado depois de style.css e sobrescreve o tema sem editar o CSS minificado. */

/* ----- Alinhamento do botao sanduiche no header vermelho (mobile) ----- */
@media (max-width: 767px) {
    .header-bottom .row.align-items-center {
        position: relative;
    }
    /* O tema deixa .col-12 com position:relative, o que faz o menu mobile
       se posicionar relativo a essa coluna (que tem altura zero, pois so
       contem um elemento absoluto). Neutraliza para o container correto
       ser a .row (altura real da barra vermelha). */
    .header-bottom .col-12 {
        position: static;
    }
    /* top:0 fixo (em vez de top:50% + transform) porque o transform recalcula
       com base na altura total do .mobile_menu -- ao abrir o menu, o dropdown
       (.slicknav_nav) some a altura da caixa e o translateY(-50%) empurra tudo
       para cima, sumindo parte do menu no topo da tela. Com top:0 fixo, o menu
       cresce para baixo sem nunca deslocar o botao. */
    .mobile_menu {
        position: absolute;
        top: 0;
        right: 15px;
        left: auto;
    }
    .mobile_menu .slicknav_menu {
        margin: 0 !important;
    }
    .mobile_menu .slicknav_menu .slicknav_btn {
        position: static;
        top: auto;
        right: auto;
        margin: 8px 0 0 !important;
    }
    .sticky-logo {
        display: flex !important;
        align-items: center;
    }
    /* O line-height padrao do "FC" deixa mais espaco embaixo do texto do que
       em cima, entao mesmo centralizado por flex ele parece mais alto que o
       botao sanduiche. Zerando o line-height, o texto centraliza de verdade. */
    .sticky-logo a {
        line-height: 27px;
    }
}

/* ----- Pagina de artigo no celular: gap enorme antes da imagem e widget
   de categorias fora do lugar (o usuario pediu para tirar so no mobile) ----- */
@media (max-width: 767px) {
    .single-post-area.section-padding {
        padding-top: 20px;
    }
    .single-post-area .post_category_widget {
        display: none;
    }
}

/* ----- Titulo das manchetes: nao encostar na borda da imagem ----- */
.trending-area .trending-main .trending-top .trend-top-img .trend-top-cap {
    left: 36px;
    right: 36px;
}
.whats-news-area .most-recent-area .most-recent .most-recent-img .most-recent-cap {
    left: 20px;
    right: 20px;
}
@media (max-width: 575px) {
    .trending-area .trending-main .trending-top .trend-top-img .trend-top-cap {
        left: 14px;
        right: 14px;
    }
    .whats-news-area .most-recent-area .most-recent .most-recent-img .most-recent-cap {
        left: 12px;
        right: 12px;
    }
}

/* ----- Icones de compartilhar: sem vermelho no hover e sem delay ----- */
.navigation-top .social-icons li a,
.navigation-top .social-icons li a i {
    transition: none !important;
}
.navigation-top .social-icons li a:hover i {
    color: #999999 !important;
}

/* ----- Acabamento visual de "Ultimas Noticias" e "Em Destaque" -----
   Escopado a .whats-news-area para nao afetar section-tittle/small-tittle
   usados em outras paginas (about, contato, footer). */

/* .most-recent-area */
.whats-news-area .whats-news-wrapper,
.whats-news-area {
    box-shadow: 0 2px 14px rgba(20, 20, 40, 0.07);
}
.whats-news-area .most-recent-area {
    background: transparent;
}
.whats-news-area .section-tittle,
.whats-news-area .small-tittle {
    border-left: 4px solid #ff2143;
    padding-left: 12px;
}
.whats-news-area .most-recent-single,
.whats-news-area .whats-right-single {
    padding-bottom: 14px;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #ececec;
}
.whats-news-area .most-recent-single:last-of-type,
.whats-news-area .whats-right-single:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0 !important;
}
/* Tag de categoria da lista "Ultimas Noticias" usava azul (.colorb) fora do
   tema vermelho do site -- alinha com a identidade visual. */
.whats-news-area .whats-right-cap .colorb {
    color: #ff2143;
}