/*
Theme Name:   Zona Gamer
Theme URI:    https://zonagamer.com.br
Description:  Tema filho do GeneratePress para o portal Zona Gamer — games, séries e tecnologia.
Author:       Projeto Zona Gamer
Template:     generatepress
Version:      1.0.0
Text Domain:  zonagamer
*/

/* ==========================================================================
   TOKENS
   Mexa nas cores AQUI. Não espalhe hex pelo resto do arquivo.
   A identidade antiga do site era roxa (#6B21A8 aproximado do logo original).
   ========================================================================== */

:root {
	--zg-roxo:        #6d28d9;
	--zg-roxo-escuro: #4c1d95;
	--zg-roxo-claro:  #a78bfa;
	--zg-texto:       #18181b;
	--zg-texto-suave: #52525b;
	--zg-fundo:       #ffffff;
	--zg-fundo-alt:   #f4f4f5;
	--zg-borda:       #e4e4e7;

	--zg-largura:     1200px;
	--zg-raio:        8px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--zg-texto:       #fafafa;
		--zg-texto-suave: #a1a1aa;
		--zg-fundo:       #09090b;
		--zg-fundo-alt:   #18181b;
		--zg-borda:       #27272a;
	}
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	color: var(--zg-texto);
	background: var(--zg-fundo);
}

a {
	color: var(--zg-roxo);
}

a:hover,
a:focus {
	color: var(--zg-roxo-escuro);
}

@media (prefers-color-scheme: dark) {
	a       { color: var(--zg-roxo-claro); }
	a:hover { color: #c4b5fd; }
}

/* ==========================================================================
   CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */

.main-navigation {
	background: var(--zg-roxo);
}

.main-navigation .main-nav ul li a {
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background: var(--zg-roxo-escuro);
	color: #fff;
}

/* ==========================================================================
   CARTÃO DE ARTIGO (listagem)
   ========================================================================== */

.zg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.zg-card {
	background: var(--zg-fundo-alt);
	border: 1px solid var(--zg-borda);
	border-radius: var(--zg-raio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.zg-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.zg-card__corpo {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.zg-card__titulo {
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 0;
}

.zg-card__meta {
	font-size: .8rem;
	color: var(--zg-texto-suave);
}

/* Selo de seção */
.zg-selo {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .2rem .5rem;
	border-radius: 4px;
	background: var(--zg-roxo);
	color: #fff;
}

/* ==========================================================================
   LEITURA DO ARTIGO
   Largura de linha confortável importa mais para tempo de permanência
   do que qualquer outra escolha visual.
   ========================================================================== */

.single .entry-content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.single .entry-content p,
.single .entry-content ul,
.single .entry-content ol,
.single .entry-content h2,
.single .entry-content h3 {
	max-width: 68ch;
}

.single .entry-content h2 {
	margin-top: 2.5rem;
	font-size: 1.5rem;
}

.single .entry-content img {
	border-radius: var(--zg-raio);
}

.single .entry-content figcaption {
	font-size: .82rem;
	color: var(--zg-texto-suave);
	text-align: center;
	margin-top: .4rem;
}

/* ==========================================================================
   BLOCOS DE ANÚNCIO
   Reserva de espaço para não gerar CLS quando o anúncio carrega.
   Ajuste as alturas ao formato que você configurar no AdSense.
   ========================================================================== */

.zg-ad {
	display: block;
	margin: 2rem auto;
	text-align: center;
	background: var(--zg-fundo-alt);
	border-radius: var(--zg-raio);
}

.zg-ad--topo      { min-height: 90px;  }
.zg-ad--conteudo  { min-height: 250px; }
.zg-ad--lateral   { min-height: 600px; }

.zg-ad::before {
	content: "Publicidade";
	display: block;
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--zg-texto-suave);
	padding-top: .35rem;
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.site-footer {
	background: var(--zg-fundo-alt);
	border-top: 3px solid var(--zg-roxo);
}