/*
Theme Name: VLR
Theme URI: https://viverdelentesemresina.com.br
Description: Tema filho do GeneratePress para o site Viver de Lentes em Resina. Sistema de design derivado do manual de marca (Estudio Tauto).
Author: Wanderson Lopes
Template: generatepress
Version: 1.0.0
Text Domain: vlr-child
*/

/* ============================================================
   1. TOKENS
   Toda cor, tamanho e espaco do site sai daqui.
   Se um dia mudar a paleta, muda so neste bloco.
   ============================================================ */

:root {
	/* Cores da marca */
	--vlr-marrom: #483632;
	--vlr-musgo: #414930;
	--vlr-bege: #e8e1d5;
	--vlr-gelo: #f1f1f1;

	/* Variacoes de apoio (derivadas, nao sao cores novas de marca) */
	--vlr-marrom-claro: #6b524c;
	--vlr-bege-claro: #f4efe7;
	--vlr-linha: rgba(72, 54, 50, 0.18);

	/* Papeis semanticos: use estes no CSS, nao as cores cruas */
	--cor-fundo: var(--vlr-gelo);
	--cor-fundo-alt: var(--vlr-bege-claro);
	--cor-texto: var(--vlr-marrom);
	--cor-texto-suave: var(--vlr-marrom-claro);
	--cor-destaque: var(--vlr-musgo);

	/* Tipografia */
	--fonte-titulo: "Gilda Display", Georgia, "Times New Roman", serif;
	--fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	/* Escala tipografica: cresce sozinha do celular ao desktop */
	--txt-xs: 0.8125rem;
	--txt-sm: 0.9375rem;
	--txt-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
	--txt-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
	--txt-xl: clamp(1.4rem, 1.25rem + 0.7vw, 1.875rem);
	--txt-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
	--txt-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);

	/* Espacamento */
	--esp-1: 0.5rem;
	--esp-2: 1rem;
	--esp-3: 1.5rem;
	--esp-4: 2.5rem;
	--esp-5: 4rem;
	--esp-6: 6rem;

	/* Layout */
	--largura-conteudo: 68ch;
	--largura-total: 1140px;
	--raio: 2px;
}

/* ============================================================
   2. BASE
   ============================================================ */

body {
	background-color: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-texto);
	font-size: var(--txt-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--fonte-titulo);
	font-weight: 400;
	color: var(--cor-texto);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: var(--txt-3xl); margin-bottom: var(--esp-3); }
h2 { font-size: var(--txt-2xl); margin-bottom: var(--esp-2); margin-top: var(--esp-5); }
h3 { font-size: var(--txt-xl); margin-bottom: var(--esp-1); margin-top: var(--esp-4); }
h4 { font-size: var(--txt-lg); }

p { margin-bottom: var(--esp-2); }

/* Linha de leitura confortavel dentro de artigos */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote {
	max-width: var(--largura-conteudo);
}

a {
	color: var(--cor-destaque);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s ease;
}

a:hover,
a:focus { color: var(--cor-texto); }

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

blockquote {
	border-left: 2px solid var(--cor-destaque);
	padding-left: var(--esp-2);
	margin-left: 0;
	font-size: var(--txt-lg);
	color: var(--cor-texto-suave);
}

img { border-radius: var(--raio); }

/* ============================================================
   3. CABECALHO E RODAPE
   ============================================================ */

.site-header {
	background-color: var(--cor-fundo);
	border-bottom: 1px solid var(--vlr-linha);
}

.main-navigation,
.main-navigation ul ul {
	background-color: var(--cor-fundo);
}

.main-navigation a {
	font-family: var(--fonte-texto);
	font-size: var(--txt-sm);
	color: var(--cor-texto);
	text-decoration: none;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--cor-destaque);
	background: transparent;
}

.site-footer,
.site-info {
	background-color: var(--vlr-marrom);
	color: var(--vlr-bege);
	font-size: var(--txt-sm);
}

.site-footer a,
.site-info a { color: var(--vlr-bege); }

/* ============================================================
   4. BOTOES
   ============================================================ */

.button,
button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--vlr-marrom);
	color: var(--vlr-gelo);
	font-family: var(--fonte-texto);
	font-size: var(--txt-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.9em 1.8em;
	border: 1px solid var(--vlr-marrom);
	border-radius: var(--raio);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--vlr-musgo);
	border-color: var(--vlr-musgo);
	color: var(--vlr-gelo);
}

/* Botao secundario: use a classe .botao-vazado no link */
.botao-vazado {
	background-color: transparent;
	color: var(--vlr-marrom);
}

.botao-vazado:hover {
	background-color: var(--vlr-marrom);
	color: var(--vlr-gelo);
}

/* ============================================================
   5. SECOES
   Use .secao-clara e .secao-escura em blocos de grupo
   ============================================================ */

.secao-clara,
.secao-escura {
	padding-block: var(--esp-5);
}

.secao-clara { background-color: var(--cor-fundo-alt); }

.secao-escura {
	background-color: var(--vlr-marrom);
	color: var(--vlr-bege);
}

.secao-escura h1,
.secao-escura h2,
.secao-escura h3 { color: var(--vlr-bege); }

.secao-escura a { color: var(--vlr-bege); }

/* ============================================================
   6. ANIMACAO DE ENTRADA
   Um movimento so, curto. Adicione .revelar no bloco.
   ============================================================ */

.revelar {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	will-change: opacity, transform;
}

.revelar.visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.revelar,
	.revelar.visivel {
		opacity: 1;
		transform: none;
		transition: none;
	}

	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   7. BARRA DE CTA NO CELULAR
   Coloque no rodape do WordPress um bloco HTML com:
   <div class="cta-mobile"><a class="button" href="#">Conhecer o VLR</a></div>
   ============================================================ */

.cta-mobile { display: none; }

@media (max-width: 768px) {
	.cta-mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
		background-color: var(--vlr-bege);
		border-top: 1px solid var(--vlr-linha);
	}

	.cta-mobile .button {
		display: block;
		width: 100%;
		text-align: center;
	}

	body { padding-bottom: 4.5rem; }
}

/* ============================================================
   8. AJUSTES DE MOBILE
   ============================================================ */

@media (max-width: 768px) {
	h2 { margin-top: var(--esp-4); }

	.secao-clara,
	.secao-escura { padding-block: var(--esp-4); }
}