/*
Theme Name: Mirai Wire
Theme URI: https://miraitech.com.br
Author: Mirai Tech
Description: Tema "wire service" (cara de agência — AP/Reuters) para o Portal Demo e o Blog de Autoridade da Mirai. Manchetes em grotesca quadrada (Archivo, cara AP — SEM serifa), rótulos em grotesca de redação (Libre Franklin), metadados em mono (IBM Plex Mono). Acento vermelho editorial. Selo/logo "powered by WireDesk".
Version: 0.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: mirai-wire
*/

/* ============================================================
   MIRAI WIRE — DESIGN SYSTEM
   Cara de agência de notícias. Preto + branco + UM vermelho.
   Serifa (gravidade) · Franklin (redação) · Mono (teletipo).
   Fonte única da verdade — templates e styleguide herdam daqui.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* cor */
  --paper:#ffffff;
  --paper-2:#f5f4f1;        /* off-white jornal */
  --paper-3:#ecebe6;
  --ink:#121212;            /* texto / manchete */
  --ink-soft:#3b3b38;
  --muted:#6c6c66;          /* metadados */
  --rule:#dedcd5;           /* fio fino */
  --rule-mid:#bdbbb2;
  --rule-strong:#121212;    /* fio pesado sob seção */
  --accent:#c8102e;         /* vermelho wire (urgência/seção) */
  --accent-dark:#9d0c24;
  --accent-soft:#fbe9eb;
  --mirai:#1a4fa0;          /* azul Mirai — só no selo WireDesk */
  --live:#c8102e;

  /* tipografia — SEM serifa: manchetes em grotesca quadrada (cara AP) */
  --head:"Archivo","Libre Franklin",-apple-system,Arial,sans-serif; /* manchetes/nameplate */
  --sans:"Libre Franklin",-apple-system,Arial,sans-serif;           /* rótulos/UI/corpo */
  --mono:"IBM Plex Mono",Consolas,monospace;                        /* metadados/teletipo */

  /* escala */
  --step--1:13px;
  --step-0:16px;
  --step-1:19px;
  --step-2:24px;
  --step-3:31px;
  --step-4:clamp(34px,4.4vw,52px);
  --step-5:clamp(44px,6vw,76px);

  /* layout */
  --max:1200px;
  --gap:24px;
  --pad:20px;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.55;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent)}
hr{border:0;border-top:1px solid var(--rule)}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.container--narrow{max-width:760px}

/* ---------- Tipografia: manchetes ---------- */
.headline,h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.06;letter-spacing:-.02em;font-weight:800}
.display{font-family:var(--head);font-size:var(--step-5);font-weight:800;line-height:1.0;letter-spacing:-.03em}
h1,.h1{font-size:var(--step-4);font-weight:800}
h2,.h2{font-size:var(--step-3)}
h3,.h3{font-size:var(--step-2)}
.headline--sans{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}

/* corpo de artigo */
.prose{font-size:var(--step-1);line-height:1.7;color:var(--ink-soft)}
.prose p{margin-bottom:1.1em}
.prose p:first-of-type{font-size:1.05em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* linha-fina / dek */
.dek{font-family:var(--sans);font-style:normal;font-weight:500;font-size:var(--step-1);color:var(--ink-soft);line-height:1.45}

/* ---------- Wire: kicker / seção ---------- */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  display:inline-block;margin-bottom:8px;
}
.kicker--ink{color:var(--ink)}

/* rótulo de seção com fio pesado (capa de editoria) */
.section-head{display:flex;align-items:baseline;gap:12px;border-top:3px solid var(--rule-strong);padding-top:8px;margin-bottom:16px}
.section-head__label{font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.section-head__label::before{content:"";display:inline-block;width:9px;height:9px;background:var(--accent);margin-right:8px;vertical-align:1px}
.section-head__more{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- Wire: metadados (mono) ---------- */
.meta{font-family:var(--mono);font-size:var(--step--1);color:var(--muted);letter-spacing:.01em}
.dateline{font-family:var(--mono);font-size:var(--step--1);font-weight:600;color:var(--ink)}
.dateline .place{text-transform:uppercase;letter-spacing:.04em}
.dateline .src{color:var(--accent)}
.byline{font-family:var(--mono);font-size:var(--step--1);color:var(--muted)}
.timestamp{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- Wire: plantão / breaking ---------- */
.breaking{display:flex;align-items:center;gap:12px;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:9px 14px}
.breaking__tag{font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.live-dot{width:9px;height:9px;border-radius:50%;background:#fff;position:relative;flex:none}
.live-dot--red{background:var(--live)}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.6;animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.live-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:6px}

/* ---------- Componente: card de notícia ---------- */
.story{display:block}
.story__media{position:relative;aspect-ratio:16/9;background:var(--paper-3);overflow:hidden;margin-bottom:12px}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__media .credit{position:absolute;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:2px 6px;text-transform:uppercase}
/* placeholder de foto (fallback raro — preferimos o cartão de texto) */
.story__media-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  background:repeating-linear-gradient(135deg,#ecebe6 0 14px,#e6e5df 14px 28px);
  font-family:var(--head);font-weight:800;color:#c9c7bf;font-size:clamp(13px,1.8vw,20px)}
.story__title{font-family:var(--head);font-weight:800;line-height:1.1;letter-spacing:-.02em;font-size:var(--step-2)}
.story:hover .story__title{color:var(--accent)}
.story__title--lg{font-size:var(--step-3)}
.story__title--xl{font-size:var(--step-4);line-height:1.0}
.story__dek{color:var(--ink-soft);font-size:15px;margin-top:8px;line-height:1.5}
.story__meta{margin-top:10px}

/* card SEM foto — estilo wire/AP: fio superior + manchete (sem caixa vazia) */
.story--text{border-top:3px solid var(--ink);padding-top:12px;display:flex;flex-direction:column}
.story--text .kicker{order:-1}
.story--text .story__title{font-size:var(--step-2)}
.story--text .story__dek{margin-top:10px}
/* na grade, o card de texto respira como um cartão completo */
.grid-3 .story--text,.grid-2 .story--text{height:100%}

/* lista "Últimas" (rail) */
.latest{list-style:none}
.latest__item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.latest__item:first-child{border-top:0;padding-top:0}
.latest__time{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;flex:none;width:46px}
.latest__title{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3}
.latest__title:hover{color:var(--accent)}

/* ---------- Componente: tile de serviço (rotina WireDesk) ---------- */
.service{border:1px solid var(--rule);padding:16px;text-align:center;background:var(--paper-2)}
.service__label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.service__value{font-family:var(--head);font-size:var(--step-3);font-weight:800;margin:6px 0 2px}
.service__sub{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- Botões / CTA (blog) ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14px;
  letter-spacing:.02em;padding:12px 22px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent);text-decoration:none}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn .arrow::after{content:"→";margin-left:2px}

/* pílula / tag */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--rule-mid);padding:4px 10px;border-radius:999px}

/* ---------- Selo "powered by WireDesk" ---------- */
.wiredesk-seal{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:var(--muted)}
.wiredesk-seal b{color:var(--mirai);font-weight:600}
.wiredesk-seal .pulse{width:7px;height:7px;border-radius:50%;background:var(--mirai)}

/* ---------- Utilitários de grade ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split-8-4{grid-template-columns:2fr 1fr}
.rule-top{border-top:1px solid var(--rule);padding-top:var(--gap)}
.stack-sm > * + *{margin-top:8px}
@media(max-width:900px){.grid-3,.grid-4,.split-8-4{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:620px){.util-ticker{display:none}}

/* ---------- Cabeçalho / masthead (esqueleto) ---------- */
.utility-bar{background:var(--ink);color:#cfcfca;font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase}
.utility-bar .container{display:flex;justify-content:space-between;align-items:center;height:34px}
.masthead{text-align:center;padding:22px 0 16px;border-bottom:1px solid var(--rule)}
.masthead__brand{display:inline-flex;flex-direction:column;align-items:center;gap:9px}
.masthead__mark{width:clamp(46px,7vw,62px);height:auto;display:block}
.masthead__title{font-family:var(--head);font-weight:900;font-size:clamp(32px,5.4vw,60px);letter-spacing:-.03em;color:var(--ink);line-height:1}
.masthead__brand:hover{text-decoration:none}
.masthead__brand:hover .masthead__title{color:var(--ink)}
/* lockup: "powered by WireDesk" limpo, logo abaixo do nome (um sobre o outro) */
.masthead__powered{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.masthead__powered b{color:var(--mirai);font-weight:600;letter-spacing:.04em}
.wd-link{color:inherit}
.wd-link:hover{text-decoration:none}
.wd-link:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mirai)}
.engine-dot{width:7px;height:7px;border-radius:50%;background:var(--mirai);position:relative;flex:none}
.engine-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--mirai);opacity:.6;animation:livepulse 1.8s ease-out infinite}
.masthead__tagline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.mainnav{border-bottom:2px solid var(--ink)}
.mainnav .container{display:flex;gap:22px;height:44px;align-items:center;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;overflow-x:auto}
.mainnav a{white-space:nowrap}
.mainnav a:hover{color:var(--accent);text-decoration:none}

/* ---------- Crawler de mercado (abaixo do menu) ---------- */
.market-crawler{background:var(--ink);color:#e8e8e4;overflow:hidden;white-space:nowrap;border-bottom:1px solid #000;position:relative}
.market-crawler__track{display:inline-flex;align-items:center;padding:7px 0;animation:mkt-scroll 55s linear infinite;will-change:transform}
.market-crawler:hover .market-crawler__track{animation-play-state:paused}
@keyframes mkt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mkt-item{display:inline-flex;align-items:baseline;gap:7px;padding:0 18px;border-right:1px solid #2a2f3a;font-family:var(--mono);font-size:12px}
.mkt-label{color:#aab1bd;letter-spacing:.04em;text-transform:uppercase}
.mkt-value{color:#fff;font-weight:600}
.mkt-pct{font-weight:600}
.mkt-pct.up{color:#3ddc84}
.mkt-pct.down{color:#ff5d5d}
.market-crawler__tag{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.market-crawler.has-tag{padding-left:96px}

/* ---------- Header condensado FIXO (aparece na rolagem) ---------- */
.sticky-header{position:fixed;top:0;left:0;right:0;z-index:60;transform:translateY(-100%);
  transition:transform .26s ease;box-shadow:0 2px 14px rgba(0,0,0,.13)}
.sticky-header.is-visible{transform:translateY(0)}
/* não anima a marquee enquanto o header está escondido (perf) */
.sticky-header:not(.is-visible) .market-crawler__track{animation-play-state:paused}
.sticky-burger{order:3}
.sticky-bar{position:relative;background:var(--paper);border-bottom:1px solid var(--rule)}
.sticky-bar__inner{display:flex;align-items:center;gap:14px;height:54px}
/* hambúrguer (3 linhas) */
.sticky-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;padding:6px;background:none;border:0;cursor:pointer;flex:none}
.sticky-burger span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;
  transition:transform .22s ease,opacity .22s ease}
.sticky-header.nav-open .sticky-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sticky-header.nav-open .sticky-burger span:nth-child(2){opacity:0}
.sticky-header.nav-open .sticky-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* selo + nome pequenos à esquerda */
.sticky-brand{display:inline-flex;align-items:center;gap:9px}
.sticky-brand:hover{text-decoration:none}
.sticky-brand__mark{width:30px;height:30px;display:block;flex:none}
.sticky-brand__name{font-family:var(--head);font-weight:900;font-size:20px;letter-spacing:-.025em;color:var(--ink);line-height:1}
.sticky-bar__live{margin-left:auto}
/* menu (dropdown) revelado pelo hambúrguer */
.sticky-nav{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--paper);
  border-bottom:2px solid var(--ink);box-shadow:0 14px 26px rgba(0,0,0,.16);
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:max-height .26s ease,opacity .2s ease,visibility .2s}
.sticky-header.nav-open .sticky-nav{max-height:78vh;overflow:auto;opacity:1;visibility:visible}
.sticky-nav .container{display:block;height:auto;padding-top:2px;padding-bottom:8px}
.sticky-nav li{display:block;list-style:none}
.sticky-nav a{display:block;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);padding:12px 6px;border-top:1px solid var(--rule)}
.sticky-nav a:hover{color:var(--accent);text-decoration:none}
/* crawler dentro do header fixo cola no topo, sem margem */
.sticky-header .market-crawler{border-bottom:1px solid #000}
@media(max-width:620px){.sticky-bar__live{display:none}.sticky-bar__inner{height:50px}.sticky-brand__name{font-size:18px}}

/* ---------- Slots de publicidade ---------- */
.ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:var(--paper-2);border:1px dashed var(--rule-mid);color:var(--muted);text-align:center;margin:0 auto;overflow:hidden}
.ad-slot__tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ad-slot__dim{font-family:var(--mono);font-size:9px;color:#b9bdc4}
.ad-leaderboard{max-width:970px;min-height:90px;margin:14px auto 0}
.ad-rectangle{width:100%;max-width:336px;min-height:280px;margin-top:16px}
.ad-inarticle{min-height:120px;margin:26px 0}
.ad-infeed{min-height:110px;margin:4px 0}

/* % alta/baixa no utility-bar e serviços */
.util-pct.up,.service__sub.up{color:var(--green)}
.util-pct.down,.service__sub.down{color:var(--red)}
.util-sep{opacity:.4;margin:0 6px}

/* ---------- Feed "Ler mais" (home) ---------- */
#mirai-feed{margin-top:8px}
#mirai-feed:empty{margin-top:0}
.feed-more{display:flex;justify-content:center;margin:26px 0 8px}
.feed-more .btn[disabled]{opacity:.55;cursor:default}
.feed-more .btn.is-loading::after{content:"";width:14px;height:14px;margin-left:4px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:mkt-spin .7s linear infinite}
@keyframes mkt-spin{to{transform:rotate(360deg)}}
.feed-end{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin:18px 0 6px}

/* rodapé */
.site-footer{background:var(--paper-2);border-top:3px solid var(--rule-strong);margin-top:48px;padding:36px 0}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* ---------- Publicidade sutil + cross-site (showroom = WireDesk ao vivo) ---------- */
.promo-bar{background:#0d0f13;color:#e8e8e4;font-family:var(--mono);font-size:12px;letter-spacing:.01em}
.promo-bar .container{display:flex;align-items:center;gap:10px;min-height:38px;padding-top:8px;padding-bottom:8px}
.promo-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:livepulse 1.8s ease-out infinite}
.promo-bar b{color:#fff;font-weight:600}
.promo-bar a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent);white-space:nowrap}
.promo-bar .x{margin-left:auto;cursor:pointer;color:#9aa1ad;background:none;border:0;font-size:18px;line-height:1;flex:none;padding:0 2px}
.promo-bar .x:hover{color:#fff}
@media(max-width:620px){.promo-bar{font-size:11px}.promo-bar .container{min-height:34px}}

.promo-pop{position:fixed;right:18px;bottom:18px;z-index:80;width:340px;max-width:calc(100vw - 36px);
  background:#fff;border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.24);padding:18px 18px 16px;transform:translateY(22px);opacity:0;
  transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.promo-pop.show{transform:translateY(0);opacity:1;pointer-events:auto}
.promo-pop .live-label{margin-bottom:9px}
.promo-pop h4{font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}
.promo-pop p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:14px}
.promo-pop .btn{font-size:13px;padding:11px 18px}
.promo-pop .x{position:absolute;top:8px;right:10px;cursor:pointer;background:none;border:0;color:var(--muted);font-size:19px;line-height:1}
.promo-pop .x:hover{color:var(--ink)}
@media(max-width:480px){.promo-pop{right:10px;left:10px;bottom:10px;width:auto}}