/*
Theme Name:  Teyvat Brasil
Theme URI:   https://teyvatbrasil.com.br/
Author:      Andrey
Description: Tema clássico do portal Teyvat Brasil — fã-site brasileiro de Genshin Impact, Honkai: Star Rail e Wuthering Waves. Sem editor de blocos, sem construtor de páginas, sem jQuery. Todo o CSS é escrito à mão sobre variáveis, para que qualquer desenvolvedor consiga dar manutenção sem ferramenta de build.
Version:     0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teyvat
Tags:        blog, news, custom-menu, translation-ready
*/

/* =========================================================================
   1. FONTES
   Arquivos .woff2 hospedados no próprio tema. Nada é carregado de servidor
   externo em tempo de execução — isso atende ao aviso de cookies/LGPD e
   evita depender da disponibilidade de terceiros.

   Corpo de texto: Poppins — está no conjunto TEXTO enviado pela cliente e
   tem licença SIL OFL, que permite o uso na web.
   Títulos: Chakra Petch — substituto próximo do conjunto TÍTULO. As fontes
   originais de título são de licença comercial, que cobre a criação de
   imagens mas não o uso incorporado em site.
   ========================================================================= */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/chakrapetch-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/chakrapetch-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/chakrapetch-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/chakrapetch-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. TOKENS
   Valores fixados na seção 7 do briefing. O dourado pertence exclusivamente
   à marca: nenhuma tag de jogo ou categoria pode usá-lo, senão o destaque
   deixa de significar "Teyvat Brasil".
   ========================================================================= */

:root {
	/* Dourados — três, não um. Um único tom não serve a um filete de seção
	   e a um link de 13px ao mesmo tempo. */
	--gold:        #D4AF37;  /* acento principal: botões, nav ativo, filetes */
	--gold-bright: #F2DFA0;  /* textos pequenos e links sobre fundo escuro   */
	--gold-deep:   #8C6F1F;  /* apenas bordas e divisórias — nunca em texto  */

	/* Base — preto com profundidade, não preto puro: #000 achata e a
	   cliente pediu sofisticação. */
	--bg:      #0B0B0E;
	--surface: #14141A;
	/* Mais escuro que a própria página, para o rodapé fechar o site com um
	   degrau para baixo em vez de uma faixa mais clara. Pedido dela. */
	--bg-deep: #07070A;

	/* Texto */
	--text:       #E8E8EA;
	--text-muted: #9C9CA8;

	/* Superfícies e bordas derivadas */
	--border:       rgba(140, 111, 31, 0.30);
	--border-soft:  rgba(255, 255, 255, 0.08);
	--header-bg:    rgba(15, 15, 20, 0.72);
	--header-bg-up: rgba(11, 11, 14, 0.90);

	/* Métricas */
	--wrap:      1320px;
	--wrap-text: 780px;
	/* Altura ditada pela marca, não o contrário: o lockup precisa de 54px de
	   altura para o nome ficar legível, e 80px dá a folga em volta. */
	--header-h:  80px;
	--gutter:    clamp(1rem, 4vw, 2.5rem);
	--radius:    14px;
	--radius-sm: 9px;

	/* Tipografia */
	--font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Chakra Petch', 'Poppins', system-ui, sans-serif;

	/* Movimento */
	--ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
	--speed: 240ms;

	/* Camadas */
	--z-header: 100;
	--z-drawer: 120;
}

@media (max-width: 900px) {
	:root { --header-h: 64px; }
}

/* =========================================================================
   3. RESET E BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/*
 * O atributo 'hidden' esconde de verdade.
 *
 * O navegador já traz [hidden] { display: none }, mas essa regra é fraca:
 * qualquer 'display' declarado numa classe do tema ganha dela. Foi o que
 * aconteceu com o botão "Fim", que tem .botao { display: inline-flex } e
 * aparecia mesmo marcado como escondido, ao lado do "Carregar mais".
 *
 * Uma regra geral aqui, e não um remendo por componente. Sem ela, todo
 * elemento que o JS esconde precisa lembrar de trazer o seu próprio
 * [hidden] junto — e um dia alguém esquece. O !important é o único jeito
 * de vencer a especificidade de qualquer classe futura.
 */
[hidden] { display: none !important; }

html {
	scroll-behavior: smooth;
	/* Impede que o cabeçalho fixo cubra o alvo de âncoras internas. */
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* A gaveta do menu fica fora da tela à direita quando fechada, e isso
	   criaria uma área rolável horizontal.
	   Aqui no <body> isto é seguro para o cabeçalho fixo: como o <html> está
	   com overflow visível, o valor do <body> é repassado para a janela e o
	   próprio <body> continua sem virar contêiner de rolagem. Em qualquer
	   elemento no meio do caminho, a mesma regra quebraria o position:sticky. */
	overflow-x: hidden;

	/* O cabeçalho é fixo, então saiu do fluxo. Este espaço é o lugar dele. */
	padding-top: var(--header-h);
}

/*
 * Na home o carrossel começa colado no topo e passa POR BAIXO do cabeçalho.
 *
 * Só a partir do desktop. Ela pediu o menu sobreposto falando do computador, e
 * disse à parte que no celular gostou do jeito que estava. No celular a arte
 * 2:1 tem cerca de 195px de altura: um cabeçalho de 64px por cima comeria um
 * terço dela e não sobraria espaço para a etiqueta e o título.
 */
@media (min-width: 901px) {
	body.tem-heroi {
		padding-top: 0;
	}
}

/* Profundidade sutil no fundo. Duas manchas radiais muito suaves dão a
   "magia neutra" pedida sem recorrer ao céu estrelado, que foi vetado. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.07), transparent 70%),
		radial-gradient(ellipse 60% 40% at 90% 10%, rgba(120, 90, 200, 0.05), transparent 70%);
}

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

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 0.6em;
}

button { font: inherit; color: inherit; }

/* Foco visível e consistente — exigência de acessibilidade e também de
   navegação por teclado no carrossel. */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 3px;
}

/* =========================================================================
   4. UTILITÁRIOS
   ========================================================================= */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Texto visível apenas para leitores de tela. */
.screen-reader-text {
	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ó ao receber foco. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--gold);
	color: #0B0B0E;
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	left: 0;
	color: #0B0B0E;
}

.site-main { min-height: 50vh; }

/* -------------------------------------------------------------------------
   Etiquetas coloridas

   Seção 7 do briefing: etiqueta de jogo é contornada, etiqueta de categoria é
   preenchida. É o que separa o roxo da Eneba do violeta de Honkai sem depender
   da diferença de tom.

   Vivem aqui, e não numa folha de componente, porque aparecem no carrossel,
   nos parceiros, nas notícias e nos posts — ou seja, em toda página do site.
   ---------------------------------------------------------------------- */

.etiqueta {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	/*
	 * Uma linha só, e cortada se passar da largura disponível.
	 *
	 * O texto da etiqueta é editável por ela no painel. Sem o teto, um nome
	 * comprido viraria uma pílula mais larga que a tela no celular e empurraria
	 * o desenho do slide.
	 */
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.etiqueta--jogo {
	color: var(--etiqueta-cor);
	border: 1px solid var(--etiqueta-cor);
	background: rgba(11, 11, 14, 0.45);
}

.etiqueta--categoria {
	color: #0B0B0E;
	border: 1px solid var(--etiqueta-cor);
	background: var(--etiqueta-cor);
}

/* -------------------------------------------------------------------------
   Botão

   Uma das três aplicações permitidas do dourado (seção 7): logo, títulos de
   seção e botão principal. Por isso existe um só, e não uma família.
   ---------------------------------------------------------------------- */

.botao {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--gold-deep);
	border-radius: 999px;
	background: transparent;
	color: var(--gold-bright);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

.botao:hover,
.botao:focus-visible {
	background: var(--gold);
	border-color: var(--gold-bright);
	color: #0B0B0E;
}

/*
 * A setinha sobe um fio para fechar com o texto.
 *
 * O texto do botão é todo em maiúsculas, e a caixa da linha reserva espaço
 * para as descidas de letras como o "g" — que não existem aqui. O centro da
 * caixa fica então abaixo do centro visual das maiúsculas, e o ícone,
 * centrado pela caixa, aparecia um fio mais baixo que o texto. Ela reparou.
 */
.botao svg {
	width: 12px;
	height: 12px;
	flex: none;
	position: relative;
	top: -1px;
}

/*
 * As duas setinhas, que são mais largas que altas.
 *
 * Viraram a seta padrão do site — estão no "Ver guia", na barra colorida e
 * agora no "Ver todas as notícias". Sem esta regra o 12×12 do botão
 * espremeria o desenho de 18×12.
 */
.botao .botao__setas {
	width: 18px;
	height: 12px;
}

/* =========================================================================
   SEÇÕES DE TELA CHEIA

   Cada seção da home ocupa a tela inteira. A rolagem é a normal do navegador.

   Ela pediu as duas coisas juntas no começo — as seções cheias e a rolagem
   encaixando de uma para a outra — e depois voltou atrás só no encaixe:
   achou que a rolagem normal ficava melhor. Concordo. O encaixe tira da
   pessoa o controle de onde parar, e numa home que mistura seção curta
   (parceiros) com seção alta (notícias) ele acerta em umas e atrapalha em
   outras. As seções cheias ficam, que é o que dá o ar de tela de jogo.

   Duas decisões que sobreviveram à volta atrás:

   1. Só a largura decide, nunca a altura.

      Houve um piso de altura aqui — abaixo dele as seções deixavam de ser
      de tela cheia, para não estourarem em notebook baixo. Tecnicamente
      resolvia, mas ela apontou o efeito colateral e tinha razão: dois
      navegadores no mesmo computador têm alturas úteis diferentes, porque
      a barra de abas e a de endereço ocupam espaços diferentes. Um ficava
      de um lado do piso e o outro do outro, e o site aparecia de dois
      jeitos na mesma máquina.

      Consistência vale mais que encaixe perfeito. Com a largura decidindo
      sozinha, a mesma janela dá o mesmo desenho em qualquer navegador. Em
      tela baixa a seção passa um pouco da altura e a página rola — o que é
      igual nos dois. Pelo mesmo motivo o respiro voltou a ser medido em vw
      e não em vh.

      1100px de largura já deixa todo celular de fora, e é medida melhor que
      (pointer: fine) — que também barraria um notebook com tela sensível ao
      toque.

      Na tela de referência dela, 1920x1080, todas as cinco cabem.

   2. min-height, nunca height. Seção que precisa de mais que uma tela cresce;
      seção curta ganha o resto em respiro.

   O scroll-margin-top continua: não é do encaixe, é dos links de âncora, que
   sem ele param com o topo da seção atrás do cabeçalho fixo.
   ========================================================================= */

@media (min-width: 1100px) {

	.secao-tela,
	.hero {
		scroll-margin-top: var(--header-h);
	}

	.secao-tela {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}