/*
Theme Name: Nuntius
Theme URI: https://nuntiusgames.com
Author: Nuntius Games
Author URI: https://nuntiusgames.com
Description: Tema próprio da Nuntius Games , publicadora brasileira de jogos. Escuro, moderno, com títulos em Oswald e o azul #9EDBFE como cor da marca. Depende do plugin nuntius-core para o conteúdo (catálogo da Steam, novidades e i18n).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nuntius
Tags: dark, custom-colors, custom-menu, translation-ready, responsive-layout
*/

/* =====================================================================
   1. TOKENS , dono único das cores, fontes e medidas (CONTRATO §7)
   Toda cor/medida do site sai daqui. Literal espalhado no CSS é como
   dois temas divergem. Extras (sombra, transição, alturas) também moram
   aqui para que o verificador de contrato ache toda var(--ng-*) usada.
   ===================================================================== */
:root {
	/* --- cores da marca (medidas do site atual, CONTRATO §7) --- */
	--ng-fundo:        #101012; /* fundo base, um passo mais escuro que o atual pro contraste subir */
	--ng-fundo-2:      #17171b; /* cartões e blocos */
	--ng-fundo-3:      #1f1f25; /* hover / borda de cartão */
	--ng-tinta:        #e8e8ec; /* texto normal (era #ccc , clareado pra passar no WCAG AA) */
	--ng-tinta-fraca:  #9a9aa6; /* texto secundário */
	--ng-branco:       #ffffff; /* títulos */
	--ng-destaque:     #9edbfe; /* A COR DA MARCA , do site atual */
	--ng-destaque-2:   #5fb8e8; /* variação para gradiente/hover */
	--ng-alerta:       #ff5470; /* promoção/desconto */
	--ng-ok:           #6ee7a8; /* disponível */

	/* --- fontes (CONTRATO §7) --- */
	--ng-titulo: 'Oswald', system-ui, sans-serif;
	--ng-corpo:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- medidas (CONTRATO §7) --- */
	--ng-raio: 14px;
	/*
	 * A LARGURA MÁXIMA ACOMPANHA A TELA GRANDE.
	 *
	 * 1280px fixos são metade de um monitor 2560 e um TERÇO de um 3840 , num 4K
	 * o site virava uma tira no meio com vão dos dois lados ("sobra espaço", o
	 * relato do dono).
	 *
	 * `max(1280px, min(50vw, 1920px))` é contínua de propósito: 50vw vale
	 * exatamente 1280px aos 2560px de largura, então ABAIXO disso o `max()`
	 * devolve o 1280 de sempre (zero mudança no que já foi aprovado) e ACIMA ela
	 * cresce mantendo a MESMA proporção de tela , 1280/2560 e 1920/3840 são os
	 * dois 50%. O teto de 1920px existe para 5K/ultrawide não esticarem a linha
	 * de texto além do legível.
	 */
	--ng-max:  max(1280px, min(50vw, 1920px));   /* largura máxima do conteúdo */
	--ng-gap:  clamp(16px, 3vw, 32px);

	/* --- extras usados pelo tema (definidos aqui de propósito) --- */
	--ng-raio-sm:      8px;
	--ng-raio-lg:      22px;
	--ng-raio-pill:    999px;
	--ng-container-pad: clamp(18px, 5vw, 40px);   /* respiro lateral do conteúdo */
	--ng-secao-pad:    clamp(56px, 9vw, 128px);   /* respiro vertical entre seções */
	--ng-nav-altura:   72px;                      /* altura do cabeçalho fixo */

	/*
	 * O respiro entre o CABEÇALHO de uma seção (kicker + título + subtítulo) e o
	 * conteúdo dela. Mora aqui porque tem DOIS consumidores em folhas diferentes
	 * — `.ng-titulo-secao` (componentes.css) e `.ng-socios__intro`
	 * (quemsomos.css), que se desloca por uma fração NEGATIVA deste mesmo valor.
	 * Enquanto eram dois literais, já tinham divergido (4vw contra 5vw).
	 */
	--ng-titulo-gap:   clamp(28px, 5vw, 52px);

	/* profundidade por sombra suave em vez de borda dura */
	--ng-sombra:        0 4px 20px -8px rgba(0, 0, 0, .55);
	--ng-sombra-forte:  0 24px 60px -20px rgba(0, 0, 0, .7);
	--ng-sombra-foco:   0 0 0 3px rgba(158, 219, 254, .45);
	--ng-borda:         rgba(255, 255, 255, .07);  /* filete quase invisível */
	--ng-borda-forte:   rgba(255, 255, 255, .12);

	/* superfícies translúcidas com blur (cabeçalho, gaveta) */
	--ng-flutuante:     rgba(16, 16, 18, .72);
	--ng-flutuante-2:   rgba(23, 23, 27, .9);
	--ng-veu:           rgba(6, 6, 8, .66);        /* cortina do menu/modal */

	/* movimento */
	--ng-transicao:     220ms cubic-bezier(.22, .61, .36, 1);
	--ng-transicao-lenta: 420ms cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
   2. FONTES LOCAIS , servidas do próprio tema (nada de Google Fonts CDN:
   é requisição a terceiro, custa LCP e é problema de LGPD/GDPR).
   Coloque os arquivos em assets/fontes/ , ver LEIA-ME.txt dessa pasta.
   font-display:swap = o texto aparece já na system-ui e troca sem sumir.
   ===================================================================== */
/*
 * Oswald é fonte VARIÁVEL: um arquivo só cobre os pesos 200 a 700.
 * Medido , os três arquivos que o Google entrega para os pesos 500, 600 e 700
 * têm o mesmo md5 (5f49329007f1e2c86462fd68a5f3affe). Declarar três @font-face
 * apontando para nomes diferentes faria o navegador baixar 21 KB três vezes,
 * porque o cache dele é por URL, não por conteúdo.
 *
 * Uma declaração só, com a FAIXA de pesos: o navegador interpola qualquer peso
 * entre 200 e 700 a partir deste arquivo.
 */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('assets/fontes/Oswald-variavel.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fontes/Poppins-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fontes/Poppins-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fontes/Poppins-600.woff2') format('woff2');
}

/* =====================================================================
   3. RESET , enxuto e moderno (box-sizing, margens, mídia fluida)
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
	/*
	 * A RAIZ DA ESCALA , é daqui que todo `rem` do tema sai.
	 *
	 * `clamp(15px, 1vw + 12px, 17px)` (que morava no body) bate o teto de 17px
	 * aos 500px de largura: daí para cima o rem ficava CONGELADO, e num monitor
	 * 4K cada medida do tema valia o mesmo que num notebook , era o "sobra
	 * espaço" do relato.
	 *
	 * A raiz vale 16px hoje (o padrão do navegador , nunca foi declarada), e é
	 * isso que todo `rem` do tema significa. A fórmula é contínua de propósito:
	 * `.625vw` vale exatamente 16px aos 2560px de largura, então ABAIXO disso o
	 * `max()` devolve os 16px de sempre , nada do que já foi aprovado muda um
	 * pixel, por aritmética e não por disciplina , e acima ela cresce até 24px
	 * num 3840, que são os mesmos 150% que ele teve de aplicar na mão.
	 *
	 * ⚠️ Mexer neste número mexe em TODA medida em `rem` do site.
	 */
	font-size: max(16px, min(.625vw, 24px));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* compensa o cabeçalho fixo ao pular por âncora */
	scroll-padding-top: calc(var(--ng-nav-altura) + 16px);
}

body {
	min-height: 100vh;
	/* clip (não hidden): impede a barra de rolagem horizontal que a gaveta
	   fora da tela criaria, SEM virar contêiner de rolagem , o header sticky
	   continua funcionando. */
	overflow-x: clip;
	background-color: var(--ng-fundo);
	color: var(--ng-tinta);
	font-family: var(--ng-corpo);
	/*
	 * O TEXTO CORRIDO tem fórmula própria, ancorada no valor dele (17px), pelo
	 * mesmo motivo e com o mesmo corte: `.664vw` vale 17px aos 2560px. Herdar a
	 * raiz aqui encolheria o texto de leitura de 17px para 16px em toda tela
	 * abaixo disso.
	 */
	font-size: max(clamp(15px, 1vw + 12px, 17px), min(.664vw, 26px));
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .01em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* imagem de fundo escura full-page, herança do site atual */
	background-image:
		radial-gradient(1200px 600px at 80% -5%, rgba(158, 219, 254, .06), transparent 60%),
		linear-gradient(180deg, rgba(16, 16, 18, .92), rgba(16, 16, 18, .98));
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* o fundo texturizado do site atual entra por trás de tudo, bem apagado */
body.ng-tem-fundo::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: var(--ng-fundo-img, none);
	background-size: cover;
	background-position: center;
	opacity: .10;
	pointer-events: none;
}

img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

svg { fill: currentColor; }

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a {
	color: var(--ng-destaque);
	text-decoration: none;
	transition: color var(--ng-transicao);
}
a:hover { color: var(--ng-branco); }

ul, ol { list-style: none; padding: 0; }

hr {
	border: none;
	border-top: 1px solid var(--ng-borda);
}

/* quebra de palavra longa (nome de jogo/estúdio grande não estoura layout) */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* =====================================================================
   4. TIPOGRAFIA , Oswald nos títulos (MAIÚSCULAS, peso alto, espaçado:
   a assinatura da marca), Poppins no corpo.
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ng-titulo);
	color: var(--ng-branco);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: .04em;
	text-transform: uppercase;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); letter-spacing: .05em; }

strong, b { font-weight: 600; color: var(--ng-branco); }

small { font-size: .82em; }

::selection {
	background: var(--ng-destaque);
	color: var(--ng-fundo);
}

/* =====================================================================
   5. ACESSIBILIDADE , foco visível sempre, pular pro conteúdo, sr-only
   Acessibilidade não é opcional num site comercial.
   ===================================================================== */
:focus-visible {
	outline: 3px solid var(--ng-destaque);
	outline-offset: 3px;
	border-radius: 4px;
}
/* remove o outline só quando o foco veio do mouse (mantém no teclado) */
:focus:not(:focus-visible) { outline: none; }

/* esconde visualmente mas mantém pro leitor de tela */
.ng-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* link "pular para o conteúdo" , aparece só no foco */
.ng-pular {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--ng-destaque);
	color: var(--ng-fundo);
	font-family: var(--ng-titulo);
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: var(--ng-raio-sm);
	transform: translateY(-150%);
	transition: transform var(--ng-transicao);
}
.ng-pular:focus {
	transform: translateY(0);
	color: var(--ng-fundo);
}

/* =====================================================================
   6. UTILITÁRIOS , layout mínimo compartilhado pelo tema inteiro
   ===================================================================== */

/* centraliza o conteúdo e dá respiro lateral responsivo */
.ng-container {
	width: 100%;
	max-width: var(--ng-max);
	margin-inline: auto;
	padding-inline: var(--ng-container-pad);
}
.ng-container--estreito { max-width: 820px; }

/* respiro vertical generoso entre seções */
.ng-secao {
	padding-block: var(--ng-secao-pad);
}
.ng-secao--compacta { padding-block: clamp(36px, 6vw, 72px); }

/* empurra o rodapé pra baixo mesmo com pouco conteúdo */
.ng-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.ng-conteudo { flex: 1 0 auto; }

/* utilitários de fluxo (ritmo vertical) */
.ng-fluxo > * + * { margin-top: var(--ng-fluxo, 1rem); }

/* helpers de alinhamento e texto */
.ng-centro { text-align: center; }
.ng-esconde { display: none !important; }
@media (max-width: 899px) { .ng-esconde\@mob { display: none !important; } }

/* =====================================================================
   7. ANIMAÇÃO DE ENTRADA , discreta, e só quando há JS.
   Sem JS, o conteúdo aparece normal (nunca some). Sob prefers-reduced-
   motion, tudo fica estático , o JS nem observa.
   ===================================================================== */
.js .ng-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--ng-transicao-lenta),
		transform var(--ng-transicao-lenta);
	will-change: opacity, transform;
}
.js .ng-reveal.is-visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .ng-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}