/*
Theme Name: Nervos de Aço
Theme URI: https://perlingeiro.com.br
Author: Alexandre Perlingeiro Mentoring
Description: Tema-bloco do site perlingeiro.com.br. Aplica o Design System Nervos de Aço v2 (21/07/2026) - sobriedade, tensão tipográfica, zero ornamento. Construído sem tema comprado, sem page builder.
Requires at least: 6.5
Requires PHP: 8.0
Version: 0.2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nervos-de-aco
*/

/* =========================================================
   Tokens - Design System Nervos de Aço v2, seção 7 (literal)
   ========================================================= */
:root {
  /* neutros */
  --ink-900:#0E0E10; --ink-800:#16171A; --ink-700:#212328;
  --ink-600:#2E3840; --steel-500:#6B7A86; --steel-300:#9AA5B1;
  --silver-100:#C8D0D8; --white:#FFFFFF;

  /* acento */
  --crimson-600:#7A1525; --crimson-500:#8B1A2A; --crimson-400:#A52535;

  /* modo claro */
  --paper:#FAFAFA; --paper-alt:#F1F2F4;
  --ink-on-paper:#1A1A1E; --muted-on-paper:#4A5A68; --rule-on-paper:#DEDEDE;

  /* tipografia - famílias */
  --font-display:'Rajdhani',system-ui,sans-serif;
  --font-accent:'Cormorant Garamond',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* tipografia - tracking (v2, calibrado) */
  --track-display:-0.02em;   /* adaptado de -0.04em medido; Rajdhani é condensada */
  --track-h1:-0.015em;       /* adaptado */
  --track-label:0.16em;      /* escolha nossa - caixa alta pequena */

  /* tipografia - line-height */
  --lh-display:1.05; --lh-h1:1.1; --lh-h2:1.2; --lh-h3:1.3;
  --lh-body:1.6;             /* adaptado; medida 1.4-1.5, +respiro p/ modo escuro */

  /* espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --section-y:var(--s9);        /* 96px - adaptado (medida Huberman 80) */
  --section-y-hero:var(--s10);  /* 128px - escolha nossa */

  /* estrutura */
  --container:1200px;        /* medido (~1216-1232) */
  --measure:64ch;            /* adaptado (medida ~57-61ch) */
  --radius:4px;              /* escolha nossa, contra os 8px de Mochary */

  /* movimento */
  --dur-ui:200ms;            /* adaptado; era 160ms */
  --dur-enter:400ms;         /* medido/confirmado */
  --ease-enter:cubic-bezier(0.165,0.84,0.44,1); /* medido - Huberman */
  --ease-ui:cubic-bezier(0.2,0,0,1);            /* escolha nossa */
}

/* =========================================================
   Base
   ========================================================= */
body {
  -webkit-font-smoothing: antialiased;
}

/* Largura de leitura: parágrafos nunca atravessam a tela */
.entry-content p,
.entry-content ul,
.entry-content ol {
  max-width: var(--measure);
}

/* Padding lateral do container: 24 mobile / 64 desktop */
@media (min-width: 768px) {
  .has-global-padding {
    padding-left: var(--s8);
    padding-right: var(--s8);
  }
}

/* Ritmo vertical de seção */
.na-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.na-section--hero {
  padding-top: var(--section-y-hero);
  padding-bottom: var(--section-y-hero);
}
@media (max-width: 767px) {
  .na-section { padding-top: var(--s8); padding-bottom: var(--s8); }
  .na-section--hero { padding-top: 72px; padding-bottom: 72px; }
}

/* Foco visível - obrigatório, não remover */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--crimson-400);
  outline-offset: 3px;
}

/* =========================================================
   Tipografia - papéis especiais
   ========================================================= */

/* Display: H1 de hero, um por página (classe na-display no bloco) */
.na-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--white);
}

/* Rótulo de seção. Decisão de 24/07/2026 (Parte 8): steel-300, não crimson.
   Motivo: crimson-500 sobre ink-900 = 2.09:1 (calculado) - reprova o 4.5:1
   do DS e derrubaria o gate Lighthouse A11y >= 95 da Fase 5. O gesto de
   marca do rótulo é tipográfico (Rajdhani caixa alta, tracking 0.16em);
   a presença constante do crimson fica com o botão do header. */
.na-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: var(--s3);
}

/* Citação Cormorant - uma frase por seção */
.na-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--quote);
  line-height: 1.35;
  color: var(--silver-100);
  max-width: var(--measure);
}
@media (max-width: 767px) {
  .na-quote { line-height: 1.4; }
}

/* Texto secundário e metadado */
.na-small { font-size: 15px; line-height: 1.5; color: var(--steel-300); }

/* =========================================================
   Botões
   ========================================================= */

/* Primário: padrão do tema (theme.json). Altura 52/48. */
.wp-block-button__link,
.wp-element-button {
  min-height: 52px;
  transition: background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
@media (max-width: 767px) {
  .wp-block-button__link, .wp-element-button { min-height: 48px; }
}

/* Secundário: transparente, borda 1px ink-700 */
.is-style-na-secundario .wp-block-button__link {
  background: transparent;
  color: var(--silver-100);
  border: 1px solid var(--ink-700);
}
.is-style-na-secundario .wp-block-button__link:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--steel-500);
}

/* Terciário: link de navegação, sublinhado no hover */
.na-terciario a,
a.na-terciario {
  color: var(--steel-300);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-ui);
}
.na-terciario a:hover,
a.na-terciario:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================================
   Cards
   ========================================================= */
.na-card {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: var(--s6);
}

/* Card de depoimento */
.na-card-depoimento .na-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.na-card-depoimento .na-nome {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: var(--lh-h3);
  color: var(--white);
  margin: var(--s4) 0 var(--s1);
}
.na-card-depoimento .na-ficha {
  font-size: 15px;
  color: var(--steel-300);
  margin: 0 0 var(--s4);
}
.na-card-depoimento hr {
  border: 0;
  border-top: 1px solid var(--ink-700);
  margin: 0 0 var(--s4);
}
.na-card-depoimento .na-citacao {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--silver-100);
  margin: 0 0 var(--s4);
}
.na-card-depoimento .na-video-link a {
  font-size: 15px;
  color: var(--steel-300);
}
.na-card-depoimento .na-video-link a:hover {
  color: var(--white);
}

/* Card de episódio - o sintoma vem antes do título */
.na-card-episodio .na-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
}
.na-card-episodio .na-sintoma,
.na-sintoma {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--steel-300); /* mesma decisão do .na-label (contraste) */
  margin: var(--s4) 0 var(--s2);
}
/* O rótulo de sintoma é gerado por core/post-terms, ou seja, os termos saem
   como LINKS - e link herdava o crimson global. Medido no ar em 28/07/2026,
   com os primeiros episódios publicados: crimson-500 sobre o fundo do card
   dava 2.49:1, contra o piso de 4.5:1 do critério F8 e o gate de A11y >= 95
   da Fase 5. É a mesma decisão de 24/07 sobre o rótulo, que na época só
   alcançou o parágrafo porque nenhum arquivo tinha post. steel-300 sobre
   ink-800 dá 7.16:1 (medido, não estimado); o sublinhado no hover mantém a
   afordância de link. */
.na-sintoma a,
.na-card-episodio .na-sintoma a {
  color: inherit;
  text-decoration: none;
}
.na-sintoma a:hover,
.na-card-episodio .na-sintoma a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.na-card-episodio .na-titulo {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: var(--lh-h3);
  color: var(--white);
  margin: 0 0 var(--s2);
}
.na-card-episodio .na-titulo a { color: inherit; text-decoration: none; }
.na-card-episodio .na-titulo a:hover { color: var(--silver-100); }
.na-card-episodio .na-meta {
  font-size: 15px;
  color: var(--steel-300);
  margin: 0;
}

/* Linha de dor das portas (Home) - Inter, não Cormorant:
   preserva a regra "Cormorant uma frase por seção" */
.na-linha-dor {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: var(--lh-h3);
  color: var(--white);
  margin: var(--s2) 0 var(--s3);
}

/* Linha do pior dia (Biblioteca) */
.na-pior-dia {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--silver-100);
  margin: var(--s2) 0 var(--s5);
}

/* =========================================================
   Divisor
   ========================================================= */
.entry-content hr,
hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--ink-700);
  height: 0;
  background: none;
}

/* =========================================================
   Formulário
   ========================================================= */
.na-form label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--silver-100);
  margin-bottom: var(--s2);
}
.na-form input[type="text"],
.na-form input[type="email"],
.na-form input[type="search"],
.wp-block-search__input {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  height: 52px;
  padding: 0 var(--s4);
  color: var(--silver-100);
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.na-form input:focus,
.wp-block-search__input:focus {
  border-color: var(--crimson-500);
  outline: none;
}
/* Erro: o sinal crimson fica na borda do campo; o texto explicativo é legível
   (crimson-400 como texto sobre ink-900 daria 2.68:1 - mesma família da
   decisão do rótulo). Cumpre o DS: nunca só a borda, sempre texto. */
.na-form input[aria-invalid="true"] {
  border-color: var(--crimson-400);
}
.na-form .na-erro {
  color: var(--silver-100);
  font-size: 15px;
  margin-top: var(--s2);
}
.wp-block-search__button {
  margin-left: var(--s3);
}

/* =========================================================
   Header e footer
   ========================================================= */
.na-header {
  border-bottom: 1px solid var(--ink-700);
}
.na-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.na-wordmark em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}
.na-header .wp-block-navigation a {
  color: var(--steel-300);
  font-size: 15px;
}
.na-header .wp-block-navigation a:hover,
.na-header .wp-block-navigation a[aria-current="page"] {
  color: var(--white);
}
.na-footer {
  border-top: 1px solid var(--ink-700);
}
.na-footer a { color: var(--steel-300); text-decoration: none; }
.na-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.na-aviso { font-size: 15px; color: var(--steel-300); } /* steel-500 daria 4.36:1 sobre ink-900 - reprova no 4.5 verificado */

/* =========================================================
   Modo claro (leitura longa: peça da biblioteca / artigo)
   ========================================================= */
.na-claro {
  background: var(--paper);
  color: var(--ink-on-paper);
}
.na-claro h1, .na-claro h2, .na-claro h3 { color: var(--ink-on-paper); }
.na-claro .na-small, .na-claro .na-meta { color: var(--muted-on-paper); }
.na-claro hr { border-top-color: var(--rule-on-paper); }
.na-claro .na-quote, .na-claro .na-citacao { color: var(--ink-on-paper); }
.na-claro a { color: var(--crimson-500); }

/* Botão dentro do papel claro. Medido no ar em 28/07/2026, com os primeiros
   episódios publicados: a regra acima pinta TODO <a> de crimson, e o botão
   é um <a> - resultado, texto crimson sobre fundo crimson, contraste 1.0 e
   rótulo invisível nas 13 páginas de episódio. Não é estética, é defeito.
   O botão mantém o texto branco (9.21:1 medido) e o secundário fica em
   tinta sobre papel. */
.na-claro .wp-block-button__link,
.na-claro .wp-element-button {
  color: var(--white);
}
.na-claro .is-style-na-secundario .wp-block-button__link {
  color: var(--ink-on-paper);
  border-color: var(--rule-on-paper);
}

/* Link de texto no modo escuro - decorrência direta da decisão de 24/07/2026
   sobre o rótulo. Medido: crimson-500 sobre ink-900 = 2.68:1 e crimson-400
   sobre ink-800 = 2.49:1, ambos abaixo do piso de 4.5:1 do critério F8.
   Nenhum crimson passa sobre fundo escuro - foi exatamente por isso que o
   rótulo saiu do crimson. O acento continua vivo onde o contraste permite:
   o botão (branco sobre crimson) e o anel de foco. Link de texto vira
   silver-100 com sublinhado, que é a afordância de link de todo modo. */
main a:not(.wp-block-button__link):not(.wp-element-button):not(.na-terciario),
footer a:not(.wp-block-button__link):not(.wp-element-button):not(.na-terciario) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Alvo de toque do menu mobile. Medido em 390px em 28/07/2026: o botão de
   abrir do core/navigation sai 24x24, contra os 44px do critério F9 - e no
   celular ele é o único caminho para o menu inteiro, porque os 5 itens ficam
   escondidos. O ícone continua de 24; o que cresce é a área de toque. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   Movimento - entrada de seção (JS adiciona .na-reveal)
   ========================================================= */
.na-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter);
}
.na-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .na-reveal { opacity: 1; transform: none; }
}