/*
Theme Name: FinançasMZ
Theme URI: https://financasmz.com
Author: FinançasMZ
Description: Tema tipo "painel de mercado" para portal de finanças moçambicano, com ticker de cotações e layout em duas colunas.
Version: 1.0
Text Domain: financasmz
*/

/* ============================================
   IDENTIDADE VISUAL — FinançasMZ
   Paleta: grafite escuro + azul eléctrico,
   verde/vermelho reservados só para indicadores
   Tipografia: Sora (títulos) + Inter (corpo) +
   JetBrains Mono (números/ticker)
   ============================================ */

:root {
  --grafite:      #1A1D23;
  --grafite-800:  #23272F;
  --azul:         #2F6FED;
  --azul-100:     #E8EFFD;
  --verde:        #16C784;
  --vermelho:     #E5484D;
  --bg:           #F4F5F7;
  --card:         #FFFFFF;
  --texto:        #14161A;
  --texto-mudo:   #6B7280;
  --borda:        #E4E6EA;
  --radius:       8px;
  --radius-lg:    14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
}
h1, h2, h3, h4, .logo { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; display: block; }

/* Ticker de mercado — elemento distintivo, sem equivalente nos outros sites */
.ticker-bar { background: var(--grafite); color: #fff; overflow: hidden; white-space: nowrap; padding: 9px 0; }
.ticker-track { display: inline-flex; gap: 36px; padding-left: 100%; animation: cir-scroll 38s linear infinite; }
.ticker-item { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px; color: #C7CCD6; }
.ticker-item .cat { color: #7C8698; }
@keyframes cir-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; padding-left: 20px; } }

/* Header */
.site-header { background: var(--card); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 60; }
.header-inner { display: flex; align-items: center; gap: 26px; padding: 14px 20px; }
.logo { font-size: 1.25rem; color: var(--grafite); }
.logo span { color: var(--azul); }
.main-nav { display: flex; gap: 20px; flex: 1; align-items: center; flex-wrap: wrap; }
.main-nav a { font-size: 0.9rem; font-weight: 500; color: var(--texto); }
.main-nav a:hover { color: var(--azul); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--grafite); }
.btn { display: inline-block; padding: 9px 16px; border-radius: var(--radius); font-weight: 600; font-size: 0.85rem; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--azul); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--borda); color: var(--texto); }

/* Dashboard header — em vez de "hero" fotográfico, um resumo tipo painel */
.dash-header { background: var(--grafite); color: #fff; padding: 30px 0; }
.dash-header h1 { font-size: 1.5rem; margin: 0 0 4px; }
.dash-header p { color: #9AA3B2; margin: 0; font-size: 0.92rem; }
.stat-strip { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.stat-strip .stat { background: var(--grafite-800); border-radius: var(--radius); padding: 10px 16px; }
.stat-strip .stat .label { font-size: 0.72rem; color: #7C8698; text-transform: uppercase; letter-spacing: .04em; }
.stat-strip .stat .value { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: #fff; margin-top: 2px; }

/* Layout em duas colunas — distinto da grelha de cartões usada nos outros sites */
.dashboard-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 30px; padding: 34px 0; }
@media (max-width: 900px) { .dashboard-layout { grid-template-columns: 1fr; } }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.section-head h2 { font-size: 1.2rem; margin: 0; }
.section-head a { font-size: 0.85rem; color: var(--azul); font-weight: 600; }

/* Feed principal: lista de manchetes, não cartões fotográficos */
.headline-list { display: flex; flex-direction: column; }
.headline-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.headline-row:first-child { padding-top: 0; }
.headline-thumb { width: 68px; height: 68px; border-radius: var(--radius); object-fit: cover; background: var(--azul-100); flex-shrink: 0; }
.headline-body { flex: 1; min-width: 0; }
.cat-tag { display: inline-block; background: var(--azul-100); color: var(--azul); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; margin-bottom: 6px; }
.headline-body h3 { font-size: 0.98rem; margin: 0 0 6px; line-height: 1.4; }
.headline-body .meta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--texto-mudo); }

/* Sidebar */
.sidebar-box { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; }
.sidebar-box h3 { font-size: 0.95rem; margin: 0 0 12px; }
.sidebar-box .cat-link-list a { display: block; padding: 7px 0; font-size: 0.88rem; border-bottom: 1px solid var(--borda); }
.sidebar-box .cat-link-list a:last-child { border-bottom: none; }
.sidebar-box .cat-link-list a:hover { color: var(--azul); }
.sidebar-cta { background: var(--grafite); color: #fff; }
.sidebar-cta p { color: #9AA3B2; font-size: 0.85rem; margin: 6px 0 14px; }

/* Single post */
.breadcrumb { font-size: 0.83rem; color: var(--texto-mudo); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--azul); }
.single-header h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 8px 0 12px; }
.single-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--texto-mudo); font-size: 0.85rem; margin-bottom: 22px; font-family: 'JetBrains Mono', monospace; }
.single-thumb { width: 100%; border-radius: var(--radius-lg); margin-bottom: 24px; }
.single-content { max-width: 720px; font-size: 1.02rem; }
.single-content h2 { margin-top: 28px; font-size: 1.2rem; }
.destaque-numero { background: var(--grafite); color: #fff; border-radius: var(--radius-lg); padding: 20px 24px; margin: 20px 0; }
.destaque-numero .valor { font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; color: var(--verde); }
.ad-slot { background: var(--azul-100); border: 1px dashed var(--azul); border-radius: var(--radius); padding: 12px; text-align: center; font-size: 0.78rem; color: var(--azul); margin: 22px 0; }
.share-row { display: flex; gap: 8px; margin: 24px 0; flex-wrap: wrap; align-items: center; }
.share-row a { border: 1px solid var(--borda); padding: 7px 13px; border-radius: 999px; font-size: 0.82rem; }

/* Pages */
.page-content { max-width: 720px; font-size: 1.02rem; }
.page-content h1 { font-size: 1.9rem; margin-bottom: 18px; }

/* Footer */
.site-footer { background: var(--grafite); color: #9AA3B2; padding: 44px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h3 { color: #fff; font-size: 0.9rem; margin-bottom: 10px; }
.footer-grid a, .footer-grid p { display: block; color: #7C8698; font-size: 0.85rem; margin-bottom: 7px; }
.footer-grid a:hover { color: var(--azul); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 26px; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: #62697A; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.not-found { text-align: center; padding: 70px 20px; }
.not-found h1 { font-size: 3.6rem; color: var(--azul); margin: 0; font-family: 'JetBrains Mono', monospace; }

@media (max-width: 860px) {
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); flex-direction: column; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid var(--borda); display: none; gap: 12px; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
}