/*
Theme Name:  theCredito1
Theme URI:   https://thecredito.com
Description: Tema independente theCredito — Vue 3 (CDN) + Tailwind CSS 4 (CDN). Design personalizado com foco em finanças pessoais, crédito e investimentos. HTML5 semântico, SEO otimizado, Core Web Vitals.
Author:      Camillo Dantas
Author URI:  https://camillodantas.com.br
Version:     4.0.0
Text Domain: thecredito
*/

/* ============================================================
   FONTES — carregadas de forma não-bloqueante via functions.php
   (Resource hint preload + media=print trick)
   NÃO usar @import aqui — bloqueia o render-path crítico!
   ============================================================ */

/* font-display: swap é garantido pelo parâmetro ?display=swap na URL da Google Fonts */

/* ============================================================
   VARIÁVEIS GLOBAIS
   ============================================================ */
:root {
    --tc-navy:       #2E3159;
    --tc-pink:       #D93C76;
    --tc-purple:     #67376A;
    --tc-gray-900:   #111827;
    --tc-gray-700:   #4B5563;
    --tc-gray-500:   #9CA3AF;
    --tc-gray-200:   #E5E7EB;
    --tc-gray-100:   #F3F4F6;
    --tc-gray-50:    #F9FAFB;
    --tc-white:      #FFFFFF;
    --tc-badge-bg:   #FDF2F6;
    --tc-badge-txt:  #D93C76;
    --tc-ok-bg:      #ECFDF5;
    --tc-ok-txt:     #059669;
    --tc-radius-sm:  12px;
    --tc-radius-md:  16px;
    --tc-radius-lg:  24px;
    --tc-radius-xl:  32px;
    --tc-radius-pill:100px;
    --tc-font:       'Poppins', sans-serif;
    /* legado (mantido para compatibilidade) */
    --color-primary:    #D93C76;
    --color-primary-bg: #FDF2F6;
    --color-dark-navy:  #2E3159;
    --color-text-dark:  #1a1a1a;
    --color-text-mid:   #6b7280;
    --color-text-light: #8b95a1;
    --color-border:     #e5e7eb;
    --color-bg-card:    #f7f7f8;
}

/* ============================================================
   RESET GLOBAL MÍNIMO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--tc-font);
    color: var(--tc-gray-900);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

img { max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--tc-gray-200);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
.header-inner,
.header-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    height: 76px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.site-logo { display: flex; align-items: center; }
.tc-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.tc-logo-text {
    font-size: 26px;
    letter-spacing: -0.05em;
    font-weight: 800;
    display: flex;
    align-items: baseline;
}
.logo-part-the    { color: var(--tc-pink); }
.logo-part-credito{ color: var(--tc-navy); }

/* Nav desktop */
.main-navigation.desktop-nav { flex-grow: 1; display: flex; justify-content: center; }
.main-navigation.desktop-nav .menu {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.main-navigation.desktop-nav .menu li a {
    display: block;
    text-decoration: none;
    color: var(--tc-gray-700);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: var(--tc-radius-pill);
    transition: all 0.2s;
}
.main-navigation.desktop-nav .menu li a:hover,
.main-navigation.desktop-nav .menu li.current-menu-item > a,
.main-navigation.desktop-nav .menu li.current_page_item > a {
    background: var(--tc-gray-100);
    color: var(--tc-gray-900);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tc-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s;
}
.icon-btn:hover { color: var(--tc-gray-900); }
.icon-btn svg { width: 22px; height: 22px; }

/* Mobile menu */
#tc-mobile-menu-btn { display: none; }
.mobile-nav-overlay {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--tc-gray-200);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.05);
    padding: 16px 24px 24px;
    z-index: 999;
}
.mobile-nav-overlay .mobile-menu,
.mobile-nav-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.mobile-nav-overlay .mobile-menu li a,
.mobile-nav-overlay a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--tc-gray-100);
    color: var(--tc-gray-900);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}
#tc-search-overlay.is-open { display: block !important; }
#tc-mobile-nav.is-open     { display: flex  !important; }

@media (max-width: 900px) {
    #site-navigation { display: none !important; }
    #tc-mobile-menu-btn { display: flex !important; }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.tc-site-footer {
    background: var(--tc-gray-50);
    border-top: 1px solid var(--tc-gray-200);
    padding: 60px 24px 0;
    margin-top: 60px;
    font-family: var(--tc-font);
}
.tc-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 40px;
}
.tc-footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 280px; }
.tc-footer-brand .tc-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.tc-footer-desc { font-size: 14px; color: var(--tc-gray-700); line-height: 1.6; margin: 0; }
.tc-footer-nav  { }
.tc-footer-menu, .tc-footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tc-footer-menu li a, .tc-footer-menu a {
    font-size: 14px;
    color: var(--tc-gray-700);
    text-decoration: none;
    transition: color 0.2s;
}
.tc-footer-menu li a:hover, .tc-footer-menu a:hover { color: var(--tc-gray-900); }
.tc-footer-social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tc-social-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tc-gray-200);
    color: var(--tc-gray-700);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tc-social-icon-btn:hover { background: var(--tc-navy); color: #fff; }
.tc-footer-bottom {
    border-top: 1px solid var(--tc-gray-200);
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    color: var(--tc-gray-500);
}
.tc-footer-bottom a { color: var(--tc-gray-500); text-decoration: none; }
.tc-footer-bottom a:hover { color: var(--tc-gray-900); }

/* ============================================================
   BREADCRUMB (compartilhado)
   ============================================================ */
.tc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tc-gray-500);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tc-breadcrumb a { color: var(--tc-gray-500); text-decoration: none; transition: color 0.2s; }
.tc-breadcrumb a:hover { color: var(--tc-pink); }
.tc-breadcrumb .current { color: var(--tc-gray-900); font-weight: 500; }
.tc-breadcrumb svg { flex-shrink: 0; }

/* ============================================================
   DIVIDER
   ============================================================ */
.tc-divider {
    border: none;
    border-top: 1px solid var(--tc-gray-200);
    margin: 32px 0;
}

/* ============================================================
   STAT PILL (compartilhado)
   ============================================================ */
.tc-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tc-gray-100);
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 13px;
    color: var(--tc-gray-700);
}
.tc-stat-pill svg { width: 14px; height: 14px; }

/* ============================================================
   TC POST CATEGORY BADGE (compartilhado)
   ============================================================ */
.tc-post-category-badge,
.category-badge {
    display: inline-block;
    background-color: var(--tc-badge-bg);
    color: var(--tc-badge-txt);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 12px;
    width: fit-content;
}

/* ============================================================
   MAGAZINE BLOCKS (FRONT-PAGE)
   ============================================================ */
.tc-magazine-section {
    position: relative;
    width: 100%;
}

.tc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.tc-section-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--tc-gray-900);
    margin: 0;
    letter-spacing: -0.03em;
}
.tc-see-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--tc-pink);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.tc-see-all:hover { opacity: 0.8; }

/* Editor's Pick Grid */
.tc-editors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.tc-editor-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.tc-editor-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    background: var(--tc-gray-100);
}
.tc-editor-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.tc-editor-card:hover .tc-editor-img-wrap img {
    transform: scale(1.05);
}
.tc-editor-meta {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tc-editor-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px 0;
    color: var(--tc-gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tc-editor-author {
    font-size: 13px;
    color: var(--tc-gray-500);
}

/* Magazine Split (2 Cols) */
.tc-mag-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.tc-mag-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--tc-gray-100);
    padding-bottom: 12px;
}
.tc-mag-col-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: var(--tc-gray-900);
    position: relative;
}
.tc-mag-col-title::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--tc-gray-900);
}

/* Large Card inside Mag Col */
.tc-mag-large-card {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 24px;
}
.tc-mag-large-img {
    width: 100%;
    height: 260px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}
.tc-mag-large-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.tc-mag-large-card:hover .tc-mag-large-img img { transform: scale(1.03); }
.tc-mag-large-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--tc-gray-900);
    line-height: 1.3;
}

/* List Items inside Mag Col */
.tc-mag-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tc-mag-list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tc-gray-100);
}
.tc-mag-list-item:last-child { border: none; }
.tc-mag-list-number {
    font-size: 24px;
    font-weight: 800;
    color: var(--tc-gray-200);
    line-height: 1;
}
.tc-mag-list-content { flex: 1; }
.tc-mag-list-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--tc-gray-900);
    line-height: 1.4;
}
.tc-mag-list-date {
    font-size: 12px;
    color: var(--tc-gray-500);
}

@media (max-width: 1024px) {
    .tc-editors-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-mag-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .tc-editors-grid { grid-template-columns: 1fr; }
}