/* ==========================================================================
   mv3-site.css — CSS GLOBAL DO PROJETO
   Monumentos Virtuais v3 · criado em 10/08/2026

   POR QUE ESTE ARQUIVO EXISTE
   Até 10/08 a aparência do site inteiro (fundo escuro, cores, tipografia)
   vinha de `wp_options.ihaf_insert_header` — 34.969 bytes injetados por um
   plugin de headers. Esvaziar aquela opção deixava o site BRANCO.
   Este arquivo traz essa base para dentro do plugin, onde ela pertence.

   O bloco antigo tinha 690 linhas; apenas 27 sustentavam a aparência.
   As outras 658 eram CSS do protótipo one-page (.mon, .art, .proc, .inst,
   .drw…) — nenhuma toca as classes `.mv3-*`. São folha morta.

   ORDEM DE DESATIVAÇÃO DO BLOCO ANTIGO (não inverter):
   1. aplicar este arquivo   2. verificar no navegador
   3. só então: wp option update ihaf_insert_header ""
   Backup bom: ~/ihaf-header-original.txt (34970 bytes, via `wp option get`)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES — hospedadas localmente, não do Google
   Silkscreen está sob SIL Open Font License 1.1; o OFL.txt acompanha em
   assets/fonts/. Usar sem modificar não exige mais nada. Se alguém MODIFICAR
   a fonte, a derivada não pode carregar o nome reservado "Silkscreen".
   -------------------------------------------------------------------------- */

@font-face{
  font-family:'Silkscreen';
  /* woff2 primeiro: o navegador usa o primeiro formato que entende.
     8.136 bytes contra 30.384 do ttf — 73% menor, chega antes do primeiro
     desenho e evita o salto de fonte (FOUT) na marca do header.
     O ttf fica como fallback para navegador antigo. */
  src:url('fonts/Silkscreen-Bold.woff2') format('woff2'),
      url('fonts/Silkscreen-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   VARIÁVEIS
   Paleta conforme documentada no CONTINUIDADE (não a do bloco antigo, que
   divergia: usava #EDEAE3 texto e #C85A0C laranja).
   -------------------------------------------------------------------------- */

:root{
  /* superfícies */
  --mv-bg:#0a0a0a;
  --mv-surface:#141210;
  --mv-surface-2:#1c1815;

  /* acentos */
  --mv-accent:#C8702A;        /* monumento */
  --mv-accent-2:#C8A82A;      /* rótulos, detalhes */
  --mv-sticker:#E8C547;       /* PONTO DE ACESSO — o amarelo do sticker.
                                 Decisão de 10/08: substitui o #E8A462 claro
                                 definido em 09/08, que se confundia com o
                                 laranja do monumento. */

  /* texto e borda */
  --mv-text:#f2ede6;
  --mv-text-dim:#a89e92;
  --mv-border:#2a251f;

  /* tipografia */
  --mv-font:'Space Grotesk',system-ui,sans-serif;   /* texto, títulos, UI */
  --mv-font-mark:'Silkscreen',monospace;            /* marca e números */

  /* layout */
  --mv-nav-h:60px;
  /* ⚠️ 1080px é a largura do header (262), do rodapé (174) e do
     .mv3-single. O .mv3-wrap do mv3-map.css usava 1280px e o mapa ficava
     mais largo que o resto do site — descoberto em 11/08 comparando com a
     proposta visual. Unificado aqui. */
  --mv-max:1080px;
}

/* --------------------------------------------------------------------------
   BASE — é isto que impede o site de ficar branco
   -------------------------------------------------------------------------- */

body{
  background:var(--mv-bg);
  color:var(--mv-text);
  font-family:var(--mv-font);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ⚠️ `html body` e não só `body`: o twentytwentyfive emite
   `body { background-color: var(--wp--preset--color--base) }` nos global
   styles inline, que carregam DEPOIS do CSS do plugin (prioridade 5) e
   vencem por ordem, já que a especificidade é igual. `html body` sobe a
   especificidade e resolve sem !important.
   Verificado no inspetor em 11/08: as páginas de CPT ficavam brancas
   mesmo com o body pintado aqui. */
html,
html body,
html body .wp-site-blocks{
  background:var(--mv-bg);
}

body img{display:block;max-width:100%;height:auto}
body a{color:inherit;text-decoration:none}
body a:hover{color:var(--mv-accent)}

:focus-visible{outline:2px solid var(--mv-accent);outline-offset:3px}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--mv-surface)}
::-webkit-scrollbar-thumb{background:var(--mv-accent)}

/* --------------------------------------------------------------------------
   MARCA — Silkscreen, sempre bold, sempre curta
   -------------------------------------------------------------------------- */

.mv3-mark{
  font-family:var(--mv-font-mark);
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.28;
  text-transform:uppercase;
}
.mv3-mark__m{color:var(--mv-accent);display:block}
.mv3-mark__v{color:var(--mv-text-dim);display:block}

.mv3-mark--nav{font-size:11px}
.mv3-mark--hero{font-size:clamp(21px,4.4vw,34px);line-height:1.34}
.mv3-mark--hero .mv3-mark__v{color:var(--mv-text)}
.mv3-mark--footer{font-size:15px;line-height:1.32}

/* O hero usa a MESMA marca do header e do rodapé — decisão de 11/08.
   Antes era "Monu<em>men</em>tos" em Space Grotesk itálico, o que punha
   duas identidades tipográficas para o mesmo nome na mesma tela. */
h1.mv3-hero__title.mv3-mark{
  margin:0 0 18px;
  display:block;
}

/* --------------------------------------------------------------------------
   HERO DO MAPA — ajustes de ritmo (11/08)
   Comparação entre a proposta visual e o que estava no ar revelou quatro
   diferenças, todas de espaçamento.
   -------------------------------------------------------------------------- */

/* O template 265 zerou a margem do topo para não deixar vão sem o título
   do tema — mas zerou demais, e o conteúdo ficou colado no header. */
.mv3-hero{padding-top:44px}

/* O lede atravessava a tela inteira numa linha só. Limitar a largura faz
   ele quebrar em duas e dá ritmo, como na proposta. */
.mv3-hero__lede{
  max-width:440px;
  color:var(--mv-text-dim);
  line-height:1.68;
  margin:0;
}

/* Respiro entre os blocos de contagem e os filtros do mapa.
   ⚠️ Especificidade alta: o mv3-map.css carrega DEPOIS e define
   `.mv3-filters { margin-bottom: 20px }` — sem o seletor mais específico,
   a regra dele venceria a cascata. */
body .mv3-filters{margin-top:26px}

/* O mapa passa a ter a MESMA largura do header e do rodapé.
   O .mv3-wrap do mv3-map.css declara 1280px; esta regra alinha em 1080. */
body .mv3-wrap{max-width:var(--mv-max)}

/* --------------------------------------------------------------------------
   NAVEGAÇÃO DO HEADER
   O menu é um parágrafo com links, não um bloco de navegação — segue o
   padrão que o rodapé (template part 174) já estabeleceu. Cinco itens
   curtos não justificam menu hambúrguer; no celular eles quebram em duas
   linhas, o que é aceitável e evita JS.
   -------------------------------------------------------------------------- */

/* ⚠️ Especificidade alta de propósito: o twentytwentyfive estiliza links
   dentro de parágrafos de bloco e sobrescrevia estas regras. `p.mv3-nav a`
   vence sem precisar de !important. */

p.mv3-nav a{
  color:var(--mv-text);
  margin-right:22px;
  white-space:nowrap;
  text-decoration:none;
}
p.mv3-nav a:last-child{margin-right:0}
p.mv3-nav a:hover{color:var(--mv-accent)}
p.mv3-nav a.mv3-nav__cta{color:var(--mv-accent-2)}
p.mv3-nav a.mv3-nav__cta:hover{color:var(--mv-accent)}

/* --------------------------------------------------------------------------
   RÓTULO EDITORIAL — o dispositivo mais consistente do protótipo
   -------------------------------------------------------------------------- */

.mv3-eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mv-accent-2);
  margin-bottom:14px;
}

/* O rótulo do hero já existe no template (.mv3-hero__eyebrow) desde antes
   de 11/08 — só não tinha o tratamento editorial. Recebe o mesmo da classe
   genérica acima. */
p.mv3-hero__eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mv-accent-2);
  margin:0 0 16px;
}

/* --------------------------------------------------------------------------
   CONTAGENS DO HERO
   ⚠️ As classes vêm do shortcode [mv3_contagem] e são __num / __label —
   NÃO __n / __l. Conferidas no HTML servido antes de escrever estas regras.
   Nenhum PHP precisa mudar: a estrutura já separa número e rótulo.
   -------------------------------------------------------------------------- */

.mv3-hero__stats{
  display:grid;
  /* 4 colunas desde 11/08: o quarto bloco é "2019–26 / Realização" */
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--mv-border);
  border-top:1px solid var(--mv-border);
  border-bottom:1px solid var(--mv-border);
  /* ⚠️ Sem max-width: com 4 blocos, limitar a 560px espremia tudo à
     esquerda e fazia "PONTOS DE ACESSO" e "2019–26" quebrarem em duas
     linhas, desalinhando as colunas. */
  margin:32px 0 0;
}
.mv3-hero__stats .mv3-stat{
  background:var(--mv-bg);
  padding:18px 16px;
  display:block;
}
.mv3-hero__stats .mv3-stat__num{
  display:block;
  font-family:var(--mv-font-mark);
  font-weight:700;
  font-size:26px;
  line-height:1;
  color:var(--mv-accent);
}
/* O quarto bloco usa cor neutra: é contexto do projeto, não métrica. */
.mv3-hero__stats .mv3-stat__num--neutro{color:var(--mv-text)}
.mv3-hero__stats .mv3-stat__hifen{color:var(--mv-accent-2)}

.mv3-hero__stats .mv3-stat__label{
  display:block;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--mv-text-dim);
  margin-top:9px;
  white-space:nowrap;   /* "Pontos de Acesso" cabe em uma linha */
}
/* O número também não quebra: "2019–26" partido ao meio fica ilegível. */
.mv3-hero__stats .mv3-stat__num{white-space:nowrap}

/* --------------------------------------------------------------------------
   CONTAGENS — grade genérica (blocos fora do hero)
   -------------------------------------------------------------------------- */

.mv3-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--mv-border);
  border-top:1px solid var(--mv-border);
  border-bottom:1px solid var(--mv-border);
}
.mv3-stat{background:var(--mv-bg);padding:18px 14px}
.mv3-stat__n{
  font-family:var(--mv-font-mark);
  font-weight:700;
  font-size:25px;
  line-height:1;
  color:var(--mv-accent);
}
.mv3-stat__n--neutro{color:var(--mv-text)}
.mv3-stat__l{
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--mv-text-dim);
  margin-top:8px;
}

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */

.mv3-btn{
  display:inline-block;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:11px 20px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.mv3-btn--solid{background:var(--mv-accent);color:#2C1A08}
.mv3-btn--solid:hover{background:var(--mv-accent-2);color:#2C1A08}
.mv3-btn--ghost{border-color:var(--mv-border);color:var(--mv-text-dim)}
.mv3-btn--ghost:hover{border-color:var(--mv-accent);color:var(--mv-accent)}

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */

.mv3-wrap{
  max-width:var(--mv-max);
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
}
.mv3-rule{height:1px;background:var(--mv-border);border:0;margin:0}

/* --------------------------------------------------------------------------
   CELULAR
   -------------------------------------------------------------------------- */

@media(max-width:640px){
  body{font-size:14px}
  .mv3-stats{grid-template-columns:1fr 1fr}
  .mv3-stat__n{font-size:20px}
  .mv3-hero{padding-top:26px}
  /* 2x2 no celular: quatro colunas em 380px dariam números ilegíveis */
  .mv3-hero__stats{grid-template-columns:1fr 1fr;margin-top:26px}
  .mv3-hero__stats .mv3-stat{padding:14px 12px}
  .mv3-hero__stats .mv3-stat__num{font-size:21px}

  /* A marca colapsa para LINHA ÚNICA no celular.
     Empilhada ocupa duas linhas e, somada a cinco itens de menu, come
     metade da tela antes de qualquer conteúdo. Mesma fonte, mesmo peso —
     só a quebra muda. */
  .mv3-mark--nav{font-size:10px}
  .mv3-mark--nav .mv3-mark__m,
  .mv3-mark--nav .mv3-mark__v{display:inline}
  .mv3-mark--nav .mv3-mark__v::before{content:' '}

  .mv3-nav{font-size:13px !important;line-height:2.1}
  p.mv3-nav a{margin-right:16px}
}

/* --------------------------------------------------------------------------
   RÉGUA DE MARCAS (financiadores) — Processos, 11/08
   Sem máscara: tentou-se dissolver as laterais com mask-image e o
   resultado foi uma borda cinza suja, pior que a faixa lisa. O arquivo
   oficial do edital tem fundo bege e não há versão negativa disponível —
   a faixa aparece como é, o que é comum e às vezes exigido pelo manual.
   -------------------------------------------------------------------------- */
.mv3-regua{margin:44px 0 0}
.mv3-regua img{display:block;width:100%;height:auto}
.mv3-regua__label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mv-accent-2);
  margin:0 0 18px;
}

/* Lede das listagens (Monumentos, Artistas). O rótulo usa .mv3-eyebrow,

   que já existia no CSS e nenhum template usava. */

.mv3-lede{max-width:520px;color:var(--mv-text-dim);line-height:1.68;margin:0 0 28px}

/* Título de página que substitui o post-title do tema (Processos, 246).

   O template 272 remove o título do tema; este h1 vem do conteúdo. */

.mv3-page-title{font-size:clamp(26px,3.6vw,40px);line-height:1.18;letter-spacing:-.5px;max-width:16ch;margin:0 0 18px}

.mv3-page-title + .mv3-lede{max-width:520px;margin:0 0 34px}

/* Respiro no topo das páginas que usam título próprio (template 272).

   O .mv3-hero cobre só o mapa; aqui é o rótulo que abre a página. */

.mv3-eyebrow:first-child{margin-top:44px}

@media(max-width:640px){.mv3-eyebrow:first-child{margin-top:26px}}

/* ==========================================================================
   BORDA ESQUERDA ÚNICA + TÍTULOS NA FONTE DA MARCA — 11/08
   O tema centraliza CADA bloco pela largura dele, então blocos de larguras
   diferentes produziam margens esquerdas diferentes: rótulo, título e lede
   não se alinhavam entre si nem com a marca do header.
   Aqui o container vira uma caixa de 1080px e os filhos alinham à esquerda
   DELA. A legibilidade da prosa vem de max-width em ch, não de centralizar.
   ========================================================================== */
body .wp-block-post-content.is-layout-constrained{
  max-width:var(--mv-max);
  margin-inline:auto;
  padding-inline:20px;
}
body .wp-block-post-content.is-layout-constrained > *{
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
body .wp-block-post-content p:not(.mv3-eyebrow):not(.mv3-regua__label){max-width:62ch}
body .wp-block-post-content .mv3-lede{max-width:52ch}

/* Ritmo vertical idêntico em toda página */
body .mv3-eyebrow{margin:0 0 14px}
body .mv3-page-title{margin:0 0 18px}
body .mv3-page-title + .mv3-lede{margin:0 0 34px}

/* Títulos de seção na fonte da marca.
   ⚠️ CINZA CLARO, não laranja: a mesma fonte em toda parte, mas o laranja
   fica reservado ao NOME DO PROJETO (header e hero). Hierarquia por cor.
   ⚠️ Só serve para títulos CURTOS — a Silkscreen é larga e caixa-alta.
      Uma seção de nome longo quebraria; resolver pontualmente se surgir. */
body .mv3-page-title{
  font-family:var(--mv-font-mark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--mv-text);
  font-size:clamp(19px,2.8vw,30px);
  line-height:1.3;
  max-width:none;
}

/* ⚠️ O .mv3-lede na Processos não é filho DIRETO do container — o tema

   envolve alguns blocos numa camada extra, e a regra `> *` não alcança o

   neto, que volta a ser centralizado pela própria largura. Verificado no

   print de 11/08: o lede começava deslocado à direita do título. */

body .wp-block-post-content .mv3-lede,

body .wp-block-post-content .mv3-eyebrow,

body .wp-block-post-content .mv3-page-title{margin-left:0 !important;margin-right:auto !important}

/* ⚠️ O hero do mapa NÃO passa pelo .wp-block-post-content — vem do

   shortcode, dentro do .mv3-wrap, com padding próprio. Sem isto, a home

   começa numa vertical e as outras páginas noutra, e a troca de página dá

   sensação de pulo. Verificado nos prints de 11/08. */

body .mv3-wrap{padding-inline:20px}

body .mv3-hero{padding-inline:0}

/* ALINHAMENTO MEDIDO — 11/08, via getBoundingClientRect no console.

   Antes: marca 20px, home 76px, listagens 56px. Três posições, daí o pulo.

   O container do conteúdo e o do mapa recebem os MESMOS 20px do header,

   sem somar padding de camadas internas. */

body .mv3-wrap{padding-inline:0}

body .wp-block-post-content.is-layout-constrained{padding-inline:0}

body .wp-block-post-content.is-layout-constrained,

body .mv3-wrap{padding-left:20px;padding-right:20px}

/* MEDIDO na árvore de ancestrais (console, 11/08):

   entry-content pl:20 + wp-block-group pl:36.15 = 56.15px, contra 20px da

   marca. O `has-global-padding` do twentytwentyfive acrescenta padding em

   CADA grupo do template, e um deles não compensa com margin negativa.

   Zerar nos grupos e manter os 20px só no entry-content. */

body main.wp-block-group.has-global-padding,

body main .wp-block-group.has-global-padding{padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important}

/* MEDIDO: home 40px contra 20px da marca. O hero vem do shortcode dentro

   do .mv3-wrap, que soma 20px próprios aos 20px do container. As listagens

   ficaram em 20 porque não passam pelo .mv3-wrap. Zerar aqui. */

body .mv3-wrap{padding-left:0 !important;padding-right:0 !important}

/* RODAPÉ NO CELULAR — 11/08

   As quatro colunas (marca, Navegar, Redes, Acessibilidade) ficavam

   espremidas e desalinhadas em tela estreita. Empilham em uma coluna,

   alinhadas na mesma vertical de 20px do resto do site. */

@media(max-width:640px){

  body .wp-block-group.mv3-rodape-cols,

  body footer .wp-block-group{gap:26px}

  body footer .wp-block-group.is-layout-flex{flex-direction:column;align-items:flex-start}

  body footer{padding-left:20px !important;padding-right:20px !important}

}

/* A régua de 2026 (anexo 283) tem fundo TRANSPARENTE, e os logos escuros

   somem no fundo preto do site — Fundarpe e Governo ficavam ilegíveis.

   Faixa branca por trás: neutra, e é o fundo para o qual as marcas foram

   desenhadas. Melhor que o bege do arquivo anterior. */

.mv3-regua img{background:#fff;padding:22px 24px;border-radius:3px}

@media(max-width:640px){.mv3-regua img{padding:14px 12px}}

/* Fotos de artista: o recorte padrão centraliza e corta o rosto quando

   ele não está no centro do quadro. `top` privilegia a parte de cima,

   que é onde o rosto costuma estar em retrato. */

.mv3-artist__photo img,

.mv3-single__photo img{object-position:center 30%}

/* Retratos de artista: o recorte padrão centraliza e corta o rosto quando

   ele não está no meio do quadro — a foto da Soul Nascimento tinha a boca

   cortada. 30%% privilegia a parte de cima, onde o rosto costuma estar. */

.mv3-lede-nota{font-size:13px;color:var(--mv-text-dim);letter-spacing:.02em;margin:0 0 34px;padding-top:12px;position:relative}
.mv3-lede-nota::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--mv-accent)}
body .wp-block-post-content .mv3-lede{font-size:24px;font-weight:300;color:var(--mv-text);line-height:1.4;letter-spacing:-.4px;max-width:26ch}
body .wp-block-post-content .mv3-lede-nota{margin-left:0 !important;margin-right:auto !important;max-width:52ch}
.mv3-artist__photo img[src*="matheus"]{object-position:center 20%}