/* ==========================================================================
   InfoKaw - estilos do blog (gerado/mantido junto com blog-src/)
   Complementa css/style.css do tema; nao sobrescreve o tema fora do blog.
   ========================================================================== */

/* Barra de progresso de leitura */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 9999;
    background: linear-gradient(to right, #2f8fd4, #23ced5);
    transition: width .1s linear;
}

/* Titulo do post no header */
.post-title {
    font-size: 2.4rem;
    line-height: 1.25;
}
@media (max-width: 767px) {
    .post-title { font-size: 1.6rem; }
}

/* Tipografia do corpo do artigo -------------------------------------------- */
.post-resumo {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #3c3c3c;
    border-left: 4px solid #2f8fd4;
    padding-left: 18px;
    font-weight: 500;
}

.post-content {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #4b4b4b;
}
.post-content p { margin-bottom: 1.35rem; }
.post-content h2 {
    font-size: 1.7rem;
    line-height: 1.35;
    color: #1c1c1c;
    margin: 2.6rem 0 1.1rem;
    font-weight: 600;
}
.post-content h3 {
    font-size: 1.3rem;
    color: #1c1c1c;
    margin: 2rem 0 .9rem;
    font-weight: 600;
}
.post-content ul,
.post-content ol { margin: 0 0 1.5rem 1.1rem; }
.post-content li { margin-bottom: .6rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content a { color: #2f8fd4; text-decoration: underline; }
.post-content a:hover { color: #1d74b5; }
.post-content strong { color: #1c1c1c; }
.post-content blockquote {
    border-left: 4px solid #2f8fd4;
    background: #f3fafd;
    padding: 20px 24px;
    margin: 2rem 0;
    font-size: 1.08rem;
    font-style: italic;
    color: #333;
}
.post-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.5rem 0; }
.post-content code {
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: .92em;
    color: #c7254e;
}
.post-content pre {
    background: #23272b;
    color: #eaeaea;
    padding: 18px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.6rem 0;
}
.post-content pre code { background: none; color: inherit; padding: 0; }
.post-content table {
    width: 100%;
    margin: 1.8rem 0;
    border-collapse: collapse;
    font-size: .95rem;
}
.post-content table th,
.post-content table td {
    border: 1px solid #e3e3e3;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.post-content table th { background: #f6f6f6; color: #1c1c1c; font-weight: 600; }
.post-content table tr:nth-child(even) td { background: #fbfbfb; }
.post-content hr { margin: 2.4rem 0; border-color: #e6e6e6; }

/* Sumario ------------------------------------------------------------------ */
.post-sumario {
    background: #f7f9fb;
    border: 1px solid #e6ebf0;
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 2rem;
}
.post-sumario h5 { color: #1c1c1c; margin-bottom: 14px; font-weight: 600; }
.post-sumario ol { margin: 0 0 0 1.1rem; list-style: decimal; }
.post-sumario li { margin-bottom: .45rem; }
.post-sumario a { color: #4b4b4b; text-decoration: none; }
.post-sumario a:hover { color: #2f8fd4; }

/* CTA dentro do artigo ----------------------------------------------------- */
.post-cta {
    border-radius: 8px;
    padding: 34px 36px;
    margin: 2.8rem 0;
}
.post-cta .button { margin-top: 6px; }

/* Compartilhamento --------------------------------------------------------- */
.post-share .share-btn {
    display: inline-block;
    padding: 9px 16px;
    margin: 0 8px 10px 0;
    border-radius: 4px;
    color: #fff !important;
    font-size: .88rem;
    text-decoration: none;
    transition: opacity .2s;
}
.post-share .share-btn:hover { opacity: .85; color: #fff; }
.post-share .share-btn i { margin-right: 6px; }
.share-wa { background: #25d366; }
.share-li { background: #0a66c2; }
.share-fb { background: #1877f2; }
.share-tw { background: #111; }
.share-native { background: #2f8fd4; }

/* Caixa do autor ----------------------------------------------------------- */
.post-author {
    background: #f7f9fb;
    border-radius: 8px;
    padding: 26px;
}
.post-author .autor-foto {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 74px;
}

/* Cards da listagem -------------------------------------------------------- */
.blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.09); }
.blog-card .card-img { display: block; overflow: hidden; }
.blog-card .card-img img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .card-img img { transform: scale(1.05); }
.blog-card .card-body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-card h3 { font-size: 1.15rem; line-height: 1.4; margin-bottom: 12px; }
.blog-card h3 a { color: #1c1c1c; }
.blog-card h3 a:hover { color: #2f8fd4; }
.blog-card p { font-size: .95rem; line-height: 1.65; flex: 1 1 auto; }
.blog-card .card-meta { font-size: .82rem; color: #8a8a8a; margin-bottom: 10px; }
.blog-card .card-meta i { margin-right: 5px; }
.blog-card .cat-badge {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #e7f6fb;
    color: #2f8fd4;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Post em destaque --------------------------------------------------------- */
.post-destaque {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 45px;
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.post-destaque img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.post-destaque .destaque-body { padding: 38px; }
.post-destaque h2 { font-size: 1.8rem; line-height: 1.3; margin-bottom: 14px; }
.post-destaque h2 a { color: #1c1c1c; }
.post-destaque h2 a:hover { color: #2f8fd4; }
@media (max-width: 991px) {
    .post-destaque .destaque-body { padding: 26px; }
    .post-destaque h2 { font-size: 1.4rem; }
}

/* Widget de CTA na sidebar ------------------------------------------------- */
.widget-cta { border-radius: 6px; }
.widget-cta h4, .widget-cta p { color: #fff; }

/* Relacionados ------------------------------------------------------------- */
.related-posts .blog-card { box-shadow: 0 6px 18px rgba(0,0,0,.06); }

/* Ajustes do header do blog ------------------------------------------------ */
#main-banner-page.blog-detail-header .page-titles h1 { color: #fff; }
.badge.gradient-bg { font-size: .75rem; letter-spacing: 1px; }

/* Widget de CTA da sidebar: o .widget do tema forca fundo branco,
   entao o gradiente precisa ser reaplicado aqui. */
.sidebar .widget.widget-cta {
    background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%);
    background-size: 200% auto;
    border: 0;
}
.sidebar .widget.widget-cta h4,
.sidebar .widget.widget-cta p { color: #fff; }
.sidebar .widget.widget-cta .button.btnsecondary {
    background: #fff;
    border-color: #fff;
    color: #1d74b5;
}
.sidebar .widget.widget-cta .button.btnsecondary:hover { background: #0f1720; border-color: #0f1720; color: #fff; }

/* A badge de categoria tambem aparece no post em destaque */
.post-destaque .cat-badge,
.blog-card .cat-badge {
    display: inline-block;
    background: #e7f6fb;
    color: #1d74b5;
}

/* CTA dentro do artigo: garante o gradiente do tema e o contraste dos botoes */
.post-cta {
    background-image: linear-gradient(to right, #5192e1 0%, #23ced5 51%, #5192e1 100%);
    background-size: 200% auto;
}
.post-cta .button.btnsecondary { background: #fff; border-color: #fff; color: #1d74b5; }
.post-cta .button.btnsecondary:hover { background: #0f1720; border-color: #0f1720; color: #fff; }

/* Tabelas do artigo com texto mais legivel */
.post-content table td { color: #3f3f3f; }

/* A capa e 1200x630; no destaque a coluna e mais alta, entao ancoramos a
   esquerda para nao cortar o titulo que fica nesse lado da imagem. */
.post-destaque img { object-position: left center; }