/**
 * BlockTrends theme.css — base global + dark/light vars unificadas
 *
 * Carregado depois de editorial.css. É o último a falar.
 */

/* ====================================================== */
/* DARK / LIGHT VARS — fonte unica da verdade            */
/* ====================================================== */
:root {
    color-scheme: dark;
    --bt-bg:        #0A0A0F;
    --bt-bg-2:      #15151F;
    --bt-bg-3:      #1F1F2E;
    --bt-bg-elev:   #15151F;
    --bt-bg-muted:  #15151F;
    --bt-fg:        #FAFAFC;
    --bt-fg-2:      #A8A8B5;
    --bt-fg-3:      #6F6F80;
    --bt-ink:       #FAFAFC;
    --bt-ink-2:     #A8A8B5;
    --bt-ink-3:     #6F6F80;
    --bt-accent:    #6F4EFF;
    --bt-accent-2:  #5A3FE6;
    --bt-line:      rgba(255,255,255,0.08);
    --bt-divider:   rgba(255,255,255,0.08);
}

html[data-bt-theme="light"] {
    color-scheme: light;
    --bt-bg:        #FAFAF7;
    --bt-bg-2:      #F2F1EC;
    --bt-bg-3:      #E8E6DF;
    --bt-bg-elev:   #F2F1EC;
    --bt-bg-muted:  #F4F2EE;
    --bt-fg:        #0E0E14;
    --bt-fg-2:      #4A4A55;
    --bt-fg-3:      #7C7C88;
    --bt-ink:       #0E0E14;
    --bt-ink-2:     #4A4A55;
    --bt-ink-3:     #7C7C88;
    --bt-accent:    #5A3FE6;
    --bt-accent-2:  #4A33C2;
    --bt-line:      rgba(14,14,20,0.10);
    --bt-divider:   rgba(14,14,20,0.10);
}

/* ====================================================== */
/* BASE                                                   */
/* ====================================================== */
html { scroll-behavior: smooth; }
body {
    background: var(--bt-bg);
    color: var(--bt-fg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }

/* Tailwind utility-color overrides para light */
html[data-bt-theme="light"] .bg-bt-bg      { background-color: #FAFAF7 !important; }
html[data-bt-theme="light"] .bg-bt-bg-2    { background-color: #F2F1EC !important; }
html[data-bt-theme="light"] .bg-bt-bg-3    { background-color: #E8E6DF !important; }
html[data-bt-theme="light"] .text-bt-fg    { color: #0E0E14 !important; }
html[data-bt-theme="light"] .text-bt-fg-2  { color: #4A4A55 !important; }
html[data-bt-theme="light"] .text-bt-fg-3  { color: #7C7C88 !important; }
html[data-bt-theme="light"] .text-bt-accent{ color: #5A3FE6 !important; }
html[data-bt-theme="light"] .bg-bt-accent  { background-color: #5A3FE6 !important; }
html[data-bt-theme="light"] .border-bt-divider { border-color: rgba(14,14,20,0.10) !important; }
html[data-bt-theme="light"] .divide-bt-divider > * + * { border-color: rgba(14,14,20,0.10) !important; }
html[data-bt-theme="light"] .bg-bt-bg\/80 { background-color: rgba(250,250,247,0.85) !important; }
html[data-bt-theme="light"] .bg-bt-bg\/95 { background-color: rgba(250,250,247,0.95) !important; }
html[data-bt-theme="light"] .brand-logo { color: #0E0E14; }

/* Reading bar comum */
#reading { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--bt-accent), #8B6FFF); width: 0%; z-index: 80; transition: width .12s linear; }

/* Ticker */
.ticker-track { display: flex; gap: 0; animation: tk 60s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; }
[data-reveal].in { opacity: 1; transform: none; }

/* Image placeholders */
.img-ph {
    background: linear-gradient(135deg, var(--bt-bg-3) 0%, var(--bt-bg-2) 100%);
    color: var(--bt-fg-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.08em;
    position: relative;
}
.img-ph::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(111,78,255,0.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(111,78,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px; pointer-events: none;
}
html[data-bt-theme="light"] .img-ph::before {
    background-image: linear-gradient(rgba(90,63,230,0.07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(90,63,230,0.07) 1px, transparent 1px);
}

/* Brand rule */
.brand-rule { box-shadow: 0 3px 0 0 var(--bt-accent); padding-bottom: 2px; }
.bt-svg-logo { display: block; flex-shrink: 0; }

/* Header sticky shrink */
header.shrunk .nav-pill {
    padding-top: .5rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--bt-divider);
}

/* Logo brand — feedback iterativo do Marcelo:
 *   1.2.4: 76px (2,3x do h-8 original)
 *   1.2.7: 65px (85% do 76)
 *   1.4.1: 52px (Marcelo viu o tamanho pré-scroll grande demais, gostou
 *          do shrunk size 41px que ficava mais elegante. Reduzir base
 *          pra 52px deixa visual mais próximo do shrunk em tamanho idle).
 *   Shrunk passa pra 32px (idle visualmente 1.6x mais discreto que antes).
 */
.bt-brand-svg,
.h-\[76px\],
.h-\[65px\],
.h-\[52px\] {
    height: 52px !important;
    width: auto !important;
    display: block;
}
header.shrunk .bt-brand-svg {
    /* 1.4.6: 32px → 44px. Marcelo achou shrunk pequeno demais comparado
     * com o idle (52px). Agora a redução é só ~15% (em vez de ~38% de
     * antes), preservando legibilidade da marca enquanto ainda dá
     * sinal visual de "scrolled". */
    height: 44px !important;
}
@media (max-width: 768px) {
    .bt-brand-svg,
    .h-\[76px\],
    .h-\[65px\],
    .h-\[52px\] {
        height: 36px !important;
    }
    header.shrunk .bt-brand-svg {
        height: 26px !important;
    }
}

/* 1.2.6: Mais classes arbitrary do Tailwind que aparecem no markup
 * mas podem não estar compiladas. Hardcode como defesa. */
.h-\[52px\] { height: 52px !important; }
.h-\[120px\] { height: 120px !important; }
.max-h-\[120px\] { max-height: 120px !important; }
.max-h-\[200px\] { max-height: 200px !important; }
.text-\[64px\] { font-size: 64px !important; line-height: 1; }
.text-\[80px\] { font-size: 80px !important; line-height: .98; }
.text-\[88px\] { font-size: 88px !important; line-height: .98; }
.text-\[112px\] { font-size: 112px !important; line-height: .95; }
.text-\[128px\] { font-size: 128px !important; line-height: .95; }
.text-\[140px\] { font-size: 140px !important; line-height: .92; }
.text-\[160px\] { font-size: 160px !important; line-height: .9; }
.text-\[200px\] { font-size: 200px !important; line-height: .88; }
.tracking-\[-0\.03em\] { letter-spacing: -0.03em !important; }
.tracking-\[-0\.035em\] { letter-spacing: -0.035em !important; }
.tracking-\[0\.1em\] { letter-spacing: 0.1em !important; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em !important; }
.tracking-\[0\.08em\] { letter-spacing: 0.08em !important; }
.tracking-\[0\.06em\] { letter-spacing: 0.06em !important; }
.leading-\[0\.9\] { line-height: 0.9 !important; }
.leading-\[0\.92\] { line-height: 0.92 !important; }

/* 1.2.8: aspect-ratio arbitrary do Tailwind hardcoded */
.aspect-\[3\/2\] { aspect-ratio: 3 / 2 !important; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3 !important; }
.aspect-\[16\/8\] { aspect-ratio: 16 / 8 !important; }

/* 1.3.4: line-clamp arbitrary classes — Tailwind purge pode não ter compilado */
.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* 1.2.4: DEFENSA CONTRA ÍCONES ÓRFÃOS GIGANTES.
 *
 * Plugins externos (back-to-top, share buttons, cookie banner, OneSignal,
 * etc) podem injetar SVGs no body sem width/height nem classes Tailwind.
 * Resultado: SVG ocupa 100% do container e fica do tamanho de uma página.
 *
 * Esta regra LIMITA qualquer SVG fora de header/main/article/footer
 * conhecido. SVGs do tema têm classes Tailwind (h-X w-X) ou attrs
 * width/height — esses não são afetados pelo seletor :not().
 */
body > svg,
body > div:not([class]) > svg,
footer ~ svg,
footer ~ * svg:not([width]):not([class*="h-"]):not([class*="w-"]) {
    max-width: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
}

/* SVGs órfãos em containers de plugin (sem class do tema) também limitados */
[class*="back-to-top"] svg,
[class*="share-button"] svg,
[class*="onesignal"] svg,
[id*="back-to-top"] svg,
[id*="scroll-top"] svg {
    max-width: 24px !important;
    max-height: 24px !important;
}

/* ============================================================
 * 1.2.5: COOKIE BANNER LGPD — override estilo BT
 *
 * Cobre seletores dos plugins mais comuns no WP-BR:
 *   - CookieYes (.cky-consent-bar, .cky-btn)
 *   - Complianz (#cmplz-cookiebanner, .cmplz-btn)
 *   - Cookie Notice (#cookie-notice, .cn-button)
 *   - GDPR Cookie Consent (#wt-cli-cookie-bar, .wt-cli-element)
 *
 * Estratégia: aplicar tokens BT (bg, fg, accent) + tipografia Inter +
 * botão Aceitar como pill accent. Mantém funcionalidade do plugin.
 * ============================================================ */

/* Container do banner */
.cky-consent-bar,
#cmplz-cookiebanner,
#cookie-notice,
#wt-cli-cookie-bar,
.cli-modal-content,
[class*="cookie-consent"][class*="banner"],
[id*="cookie"][id*="banner"] {
    background: var(--bt-bg-2) !important;
    border-top: 1px solid var(--bt-accent) !important;
    color: var(--bt-fg-2) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 16px 24px !important;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.15) !important;
}

/* Texto interno */
.cky-consent-bar p,
#cmplz-cookiebanner p,
#cookie-notice .cookie-notice-container,
.wt-cli-cookie-content,
[class*="cookie"] [class*="message"],
[class*="cookie"] [class*="text"] {
    color: var(--bt-fg-2) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Botão Aceitar (primary) */
.cky-btn-accept,
.cky-btn.cky-btn-accept,
.cmplz-btn.cmplz-accept,
.cn-button.cn-accept,
.wt-cli-accept-btn,
[class*="cookie"] [class*="accept"],
[class*="cookie"] button[class*="primary"] {
    background: var(--bt-accent) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 9999px !important;
    padding: 8px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.cky-btn-accept:hover,
.cmplz-btn.cmplz-accept:hover,
.cn-button.cn-accept:hover,
.wt-cli-accept-btn:hover,
[class*="cookie"] [class*="accept"]:hover {
    background: var(--bt-accent-2) !important;
    box-shadow: 0 0 0 1px rgba(111,78,255,0.5), 0 6px 24px rgba(111,78,255,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Botão Reject/Customizar (ghost) */
.cky-btn-reject,
.cmplz-btn.cmplz-deny,
.cn-button.cn-button-deny,
[class*="cookie"] [class*="reject"],
[class*="cookie"] [class*="settings"] {
    background: transparent !important;
    color: var(--bt-fg-2) !important;
    border: 1px solid var(--bt-divider) !important;
    border-radius: 9999px !important;
    padding: 8px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: border-color .2s ease, color .2s ease !important;
}
.cky-btn-reject:hover,
.cmplz-btn.cmplz-deny:hover,
[class*="cookie"] [class*="reject"]:hover {
    border-color: var(--bt-fg) !important;
    color: var(--bt-fg) !important;
}

/* Link "Política de Privacidade" */
.cky-consent-bar a,
#cmplz-cookiebanner a,
#cookie-notice a,
[class*="cookie"] a:not([class*="btn"]):not([class*="button"]) {
    color: var(--bt-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    position: relative !important;
}
.cky-consent-bar a:hover,
#cmplz-cookiebanner a:hover,
[class*="cookie"] a:not([class*="btn"]):hover {
    color: var(--bt-accent-2) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Editorial prose color tweaks light */
html[data-bt-theme="light"] .editorial-prose { color: #2A2A33; }
html[data-bt-theme="light"] .editorial-prose h2,
html[data-bt-theme="light"] .editorial-prose h3,
html[data-bt-theme="light"] .editorial-prose h4,
html[data-bt-theme="light"] .editorial-prose strong,
html[data-bt-theme="light"] .editorial-prose em,
html[data-bt-theme="light"] .editorial-prose blockquote { color: #0E0E14; }

/* 1.2.4: Mega tagline degradê. Usa var(--bt-fg) e var(--bt-accent)
 * que trocam automaticamente entre dark e light theme.
 *
 * Dark: branco #FAFAFC + lilás #6F4EFF + accent-2 #5A3FE6
 * Light: preto #0E0E14 + lilás escuro #5A3FE6 + accent-2 #6F4EFF
 *
 * Cada linha tem uma personalidade visual diferente:
 *   - bt-mega-fg:     fg→accent (sólido pra accent, edição visual)
 *   - bt-mega-accent: accent→accent-2→fg (3 stops, mais dinâmico)
 *   - bt-mega-blend:  accent→fg (inverso do fg, fecha o ciclo)
 */
.bt-mega-fg {
    background: linear-gradient(135deg, var(--bt-fg) 0%, var(--bt-fg) 55%, var(--bt-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bt-mega-accent {
    background: linear-gradient(135deg, var(--bt-accent) 0%, var(--bt-accent-2) 50%, var(--bt-fg) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bt-mega-blend {
    background: linear-gradient(135deg, var(--bt-accent) 0%, var(--bt-fg) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Premium bg */
.premium-bg {
    background:
      radial-gradient(ellipse at 0% 0%, rgba(111,78,255,0.22) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(111,78,255,0.12) 0%, transparent 50%),
      linear-gradient(180deg, var(--bt-bg-2) 0%, var(--bt-bg) 100%);
}

/* Pill premium */
.pill-premium { transition: box-shadow .2s ease, background .2s ease; }
.pill-premium:hover {
    background: var(--bt-accent-2);
    box-shadow: 0 0 0 1px rgba(111,78,255,0.5), 0 8px 32px rgba(111,78,255,0.35);
}

/* Eyebrow — 1.4.4: forçar Inter !important + cobrir os níveis hN.
 * Regra global em components.css força Fraunces em h1/h2/h3 com
 * !important, então .eyebrow precisa de !important pra vencer
 * quando aplicado em <h2 class="eyebrow"> (caso do "MAIS LIDAS"
 * no sidebar do front-page.php que estava saindo serifado).
 * Trocou JetBrains Mono → Inter pra alinhar com o menu/nav. */
.eyebrow,
h1.eyebrow,
h2.eyebrow,
h3.eyebrow,
h4.eyebrow,
h5.eyebrow,
h6.eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-variation-settings: normal !important;
    font-optical-sizing: auto !important;
}

/* Focus visible */
:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; border-radius: 4px; }

/* Line clamps */
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* Logo brand underline (lilás 3px) — canônico v1.html linha 78. Adicionado em 1.2.0. */
.brand-rule { box-shadow: 0 3px 0 0 var(--bt-accent, #6F4EFF); padding-bottom: 2px; display: inline-block; }

/* Suprime resíduos do tema antigo se vazarem */
#wpadminbar,
.bt-tv-ticker,
.tradingview-widget-container:not(.btv6-keep),
.bt-top-ad-wrap,
.bt-sidebar-overlay,
body > .bt-tv-ticker,
body > [class*="ad-wrap"],
body > [class*="sidebar-overlay"] { display: none !important; }
html { margin-top: 0 !important; }

/* ====================================================== */
/* QR ASSET SPONSOR PILLS                                 */
/* ====================================================== */
:root { --bt-asset: #00B86B; }

.qr-etf-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bt-fg);
    background: transparent;
    border: 1px solid var(--bt-fg);
    border-radius: 9999px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    text-decoration: none;
}
.qr-etf-pill:hover {
    color: var(--bt-asset);
    border-color: var(--bt-asset);
}

/* No light mode, border preta default */
html[data-bt-theme="light"] .qr-etf-pill {
    color: var(--bt-fg);
    border-color: var(--bt-fg);
}
html[data-bt-theme="light"] .qr-etf-pill:hover {
    color: var(--bt-asset);
    border-color: var(--bt-asset);
}

/* Hover do texto "QR Asset Management" e "Investir Agora →" */
.hover\:text-bt-asset:hover { color: var(--bt-asset); }

/* ====================================================== */
/* LOGO SVG SWITCH dark/light                             */
/* ====================================================== */
.bt-logo-img { display: block; }
html[data-bt-theme="dark"] .bt-logo-light  { display: none !important; }
html[data-bt-theme="dark"] .bt-logo-dark   { display: block !important; }
html[data-bt-theme="light"] .bt-logo-dark  { display: none !important; }
html[data-bt-theme="light"] .bt-logo-light { display: block !important; }