/*
 * TopoForge — main.css
 * ------------------------------------------------------------------
 * ET-002: sistema de navegação (container, header, nav, footer).
 *
 * Regras da folha:
 * 1. Cores, fontes e espaçamentos vêm SEMPRE das variáveis geradas
 *    pelo theme.json (--wp--preset--*). Nenhum valor cru de cor.
 * 2. Mobile first: estilos base para telas pequenas; media queries
 *    apenas com min-width.
 * 3. Sem frameworks, sem utilitários genéricos.
 * ------------------------------------------------------------------
 */

/* ======================= Propriedades globais ===================== */

:root {
	--tf-header-altura: 4.25rem;          /* 68px — mobile            */
	--tf-borda-sutil: 1px solid var(--wp--preset--color--neblina);
	--tf-transicao: 220ms ease;
}

@media (min-width: 56.25em) {             /* 900px                    */
	:root {
		--tf-header-altura: 4.75rem;      /* 76px — desktop           */
	}
}

/* ============================== Reset ============================= */

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

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ============================ Container =========================== */
/* Container único do projeto: 1280px + padding lateral responsivo.  */
/* Reutilizado em TODAS as páginas.                                  */

.tf-container {
	width: 100%;
	max-width: 80rem;                      /* 1280px                   */
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ====================== Acessibilidade base ======================= */

/* Texto presente apenas para leitores de tela. */
.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Link "pular para o conteúdo": invisível até receber foco. */
.pular-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
	text-decoration: none;
}

.pular-conteudo:focus {
	left: 0;
}

/* Foco visível em todos os elementos interativos. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 3px;
}

/* ============================== Header ============================ */

.tf-header {
	position: relative;
	z-index: 50;
	background: #ffffff;                   /* Branco sólido (brief).   */
	border-bottom: var(--tf-borda-sutil);
}

.tf-header__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;        /* Máximo espaço negativo   */
	gap: var(--wp--preset--spacing--30);   /* entre marca e menu.      */
	min-height: var(--tf-header-altura);
}

/* Marca — temporariamente textual. Para o logotipo oficial,
   substitui-se apenas o conteúdo de .tf-marca__conteudo. */
.tf-marca {
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
}

.tf-marca__conteudo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ====================== Navegação — princípios ==================== */

.tf-nav__lista a {
	display: inline-block;
	position: relative;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
}

/* Sublinha: nasce invisível e desliza no hover/foco.
   No item ativo, permanece. */
.tf-nav__lista a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--tf-transicao);
}

.tf-nav__lista a:hover::after,
.tf-nav__lista a:focus-visible::after,
.tf-nav__lista .current-menu-item > a::after,
.tf-nav__lista .current_page_item > a::after {
	transform: scaleX(1);
}

.tf-nav__lista .current-menu-item > a,
.tf-nav__lista .current_page_item > a {
	font-weight: 600;
}

/* ================== Navegação — mobile (painel) =================== */
/* Base mobile first: o painel é o comportamento padrão.              */

/* Botão hambúrguer (o atributo hidden é removido pelo JS). */
.tf-menu-botao {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tf-menu-botao__icone {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.tf-menu-botao__linha {
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transition: transform var(--tf-transicao), opacity var(--tf-transicao);
}

/* Estado aberto: as duas linhas formam um X. */
.tf-menu-botao[aria-expanded="true"] .tf-menu-botao__linha:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.tf-menu-botao[aria-expanded="true"] .tf-menu-botao__linha:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* Painel em tela cheia, abaixo do header. */
.js .tf-nav {
	position: fixed;
	inset: var(--tf-header-altura) 0 0 0;
	z-index: 40;
	background: var(--wp--preset--color--papel);
	overflow-y: auto;

	/* Fechado por padrão. */
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--tf-transicao), visibility var(--tf-transicao);
}

.js .tf-nav.esta-aberta {
	visibility: visible;
	opacity: 1;
}

/* Bloco de navegação levemente acima do centro (~35–40% da altura útil). */
.js .tf-nav .tf-nav__lista {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--30);
	margin-top: clamp(4.5rem, 22vh, 11rem);
}

.js .tf-nav .tf-nav__lista a {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	text-align: center;

	/* Entrada suave dos itens quando o painel abre. */
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 320ms ease, transform 320ms ease;
}

.js .tf-nav.esta-aberta .tf-nav__lista a {
	opacity: 1;
	transform: translateY(0);
}

/* Escalonamento discreto da entrada dos itens. */
.js .tf-nav.esta-aberta .tf-nav__lista li:nth-child(2) a { transition-delay: 40ms; }
.js .tf-nav.esta-aberta .tf-nav__lista li:nth-child(3) a { transition-delay: 80ms; }
.js .tf-nav.esta-aberta .tf-nav__lista li:nth-child(4) a { transition-delay: 120ms; }
.js .tf-nav.esta-aberta .tf-nav__lista li:nth-child(5) a { transition-delay: 160ms; }

/* Rolagem do documento travada com o painel aberto. */
.menu-aberto {
	overflow: hidden;
}

/* Sem JavaScript: nada de painel — itens visíveis, empilhados
   e alinhados à direita, logo abaixo da marca. Navegação íntegra. */
.no-js .tf-menu-botao {
	display: none;
}

.no-js .tf-nav__lista {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--10);
}

/* =================== Navegação — desktop (≥900px) ================= */

@media (min-width: 56.25em) {

	/* O botão hambúrguer sai de cena (mesmo com JS ativo). */
	.tf-menu-botao {
		display: none !important;
	}

	/* O painel volta a ser navegação em linha. */
	.js .tf-nav,
	.no-js .tf-nav {
		position: static;
		visibility: visible;
		opacity: 1;
		background: none;
		overflow: visible;
	}

	.js .tf-nav .tf-nav__lista,
	.no-js .tf-nav__lista {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		margin-top: 0;
		padding: 0;
	}

	.js .tf-nav .tf-nav__lista a,
	.no-js .tf-nav__lista a {
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 500;
		letter-spacing: 0.02em;
		opacity: 1;
		transform: none;
		text-align: left;
	}
}

/* ============================== Footer ============================ */

.tf-footer {
	margin-top: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
	border-top: var(--tf-borda-sutil);     /* Separação discreta.      */
	background: var(--wp--preset--color--papel);
}

.tf-footer__marca {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--base);
}

.tf-footer__descricao {
	max-width: 34rem;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grafite);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
}

.tf-footer__nav {
	margin-top: var(--wp--preset--spacing--30);
}

.tf-footer__lista {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--10);
}

.tf-footer__lista a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	transition: color var(--tf-transicao);
}

.tf-footer__lista a:hover,
.tf-footer__lista a:focus-visible {
	color: var(--wp--preset--color--grafite);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.tf-footer__copyright {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--tf-borda-sutil);
	color: var(--wp--preset--color--grafite);
	font-size: var(--wp--preset--font-size--xs);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
}

/* ==================== Estrutura provisória ======================== */
/* Conteúdo interno das páginas — layout definitivo nas próximas ETs. */

.conteudo-interno {
	max-width: 80rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30) clamp(1.25rem, 4vw, 3rem);
}

/* ======================== Movimento reduzido ====================== */

@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;
	}
}

/* =============================== Hero ============================= */
/* ET-003A — Home. A fotografia é a protagonista; conteúdo discreto  */
/* na base esquerda, levemente elevado para preservar o relevo da    */
/* maquete na parte inferior do quadro.                              */

.tf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;

	/* Header + hero ≈ 94% da viewport (svh ignora a barra de
	   endereço dinâmica no mobile e evita saltos de layout). */
	min-height: calc(94svh - var(--tf-header-altura));
	background: var(--wp--preset--color--tinta);
}

.tf-hero__midia {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tf-hero__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Ponto focal: prioriza a maquete (faixa central-superior
	   da fotografia em retrato) quando o recorte é horizontal. */
	object-position: center 42%;
}

/* Scrim localizado, de baixa intensidade: apenas o necessário
   para a leitura, concentrado na base do quadro. Sem cor crua —
   derivado do token "tinta" via color-mix. */
.tf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--tinta) 52%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--tinta) 28%, transparent) 26%,
		transparent 55%
	);
	pointer-events: none;
}

.tf-hero__conteudo {
	position: relative;
	z-index: 1;

	/* Bloco levemente acima da base, preservando o relevo
	   da maquete na parte inferior da fotografia. */
	padding-bottom: clamp(4.5rem, 12vh, 9rem);
	color: var(--wp--preset--color--papel);
}

.tf-hero__titulo {
	max-width: 12ch;
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--papel);

	/* Reforço sutil de leitura sobre áreas claras da foto,
	   compensando a baixa intensidade do scrim. */
	text-shadow: 0 1px 24px color-mix(in srgb, var(--wp--preset--color--tinta) 35%, transparent);
}

.tf-hero__texto {
	max-width: 30rem;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	text-shadow: 0 1px 16px color-mix(in srgb, var(--wp--preset--color--tinta) 35%, transparent);
}

/* ============================== Botões ============================ */
/* Componente de botão do projeto. Variante clara para fundos        */
/* escuros/fotográficos; novas variantes entram conforme demanda.    */

.tf-botao {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0.9rem 2rem;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--tf-transicao), color var(--tf-transicao);
}

.tf-botao--claro {
	color: var(--wp--preset--color--papel);
	background: transparent;
}

.tf-botao--claro:hover,
.tf-botao--claro:focus-visible {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
}

/* O foco sobre a fotografia precisa de contorno claro. */
.tf-hero :focus-visible {
	outline-color: var(--wp--preset--color--papel);
}

/* ========================== Nossa visão =========================== */
/* ET-003B — Home. Bloco editorial de texto puro. Mobile: coluna      */
/* única. Desktop: grade assimétrica com a marcação de seção na       */
/* coluna estreita à esquerda.                                        */

.tf-visao {
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--papel);
}

/* Marcação discreta de seção — sem uppercase (linguagem editorial). */
.tf-visao__marcacao {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--grafite);
}

.tf-visao__titulo {
	max-width: 18ch;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.tf-visao__paragrafo {
	max-width: 55ch;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--grafite);
	line-height: 1.75;
}

/* Link textual com seta tipográfica — componente reutilizável. */
.tf-link-seta {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: var(--wp--preset--color--tinta);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--neblina);
	text-underline-offset: 0.35em;
	transition: text-decoration-color var(--tf-transicao);
}

.tf-link-seta:hover,
.tf-link-seta:focus-visible {
	text-decoration-color: currentColor;
}

@media (min-width: 56.25em) {

	.tf-visao__grade {
		display: grid;
		grid-template-columns: minmax(10rem, 25%) 1fr;
		column-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	/* Sem margem superior na primeira coluna: marcação e título
	   alinham pela mesma linha de base do topo. */
	.tf-visao__titulo {
		margin-top: 0;
	}
}

/* ========================= O que criamos ========================== */
/* ET-003C — Home. Dois blocos editoriais consecutivos; fotografia    */
/* dominante, conteúdo alternando de lado no desktop para criar       */
/* ritmo. Sem cards, sem caixas, sem fundo colorido.                  */

.tf-criacoes {
	padding-block: var(--wp--preset--spacing--50);
}

.tf-criacoes__marcacao {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--grafite);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Espaço generoso entre os dois blocos. */
.tf-criacao + .tf-criacao {
	margin-top: var(--wp--preset--spacing--50);
}

.tf-criacao__figura {
	margin: 0;
}

.tf-criacao__imagem {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.tf-criacao__conteudo {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.tf-criacao__titulo {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.tf-criacao__texto {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grafite);
	line-height: 1.7;
}

/* Ajuste fino: o link herda .tf-link-seta; aqui só o respiro. */
.tf-criacao .tf-link-seta {
	margin-top: var(--wp--preset--spacing--20);
}

@media (min-width: 56.25em) {

	/* Alternância sutil: o conteúdo desliza para a direita no
	   segundo bloco. A fotografia permanece dominante e em
	   largura total do container nos dois casos. */
	.tf-criacao--direita .tf-criacao__conteudo {
		margin-left: auto;
	}
}

/* ================== Como nasce uma TopoForge ====================== */
/* ET-003D — Home. Quatro blocos editoriais + linha vertical          */
/* extremamente discreta, encerrando na altura do último bloco.       */
/* Coluna esquerda vazia no desktop: apenas espaço negativo.          */

.tf-processo {
	padding-block: var(--wp--preset--spacing--50);
}

.tf-processo__titulo {
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.tf-processo__introducao {
	max-width: 42ch;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--wp--preset--color--grafite);
}

/* A borda do contêiner nasce no primeiro bloco e termina
   exatamente no último: sem padding vertical no wrapper. */
.tf-processo__blocos {
	margin-top: var(--wp--preset--spacing--40);
	border-left: var(--tf-borda-sutil);
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

.tf-processo__bloco + .tf-processo__bloco {
	margin-top: var(--wp--preset--spacing--40);
}

.tf-processo__bloco-titulo {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.2;
}

.tf-processo__bloco-texto {
	max-width: 55ch;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--grafite);
	line-height: 1.75;
}

@media (min-width: 56.25em) {

	/* Mesma grade assimétrica de Nossa visão; a primeira coluna
	   permanece intencionalmente vazia (espaço negativo). */
	.tf-processo__grade {
		display: grid;
		grid-template-columns: minmax(10rem, 25%) 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}

	.tf-processo__conteudo {
		grid-column: 2;
	}
}

/* ================= Preservar também é lembrar ===================== */
/* ET-003E — Home. Bloco editorial (texto → botão) seguido da grande  */
/* fotografia de encerramento, sangrada, sem texto sobreposto e sem   */
/* scrim. A figura só existe no DOM quando a foto oficial existir.    */

.tf-conservacao {
	padding-block-start: var(--wp--preset--spacing--50);
}

.tf-conservacao__titulo {
	max-width: 16ch;
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.tf-conservacao__paragrafo {
	max-width: 55ch;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--grafite);
	line-height: 1.75;
}

/* Variante escura do botão do projeto — fundos claros. */
.tf-botao--escuro {
	color: var(--wp--preset--color--tinta);
	background: transparent;
}

.tf-botao--escuro:hover,
.tf-botao--escuro:focus-visible {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
}

/* Fotografia de encerramento: sangrada, borda a borda. */
.tf-conservacao__figura {
	margin: var(--wp--preset--spacing--50) 0 0;
}

.tf-conservacao__imagem {
	width: 100%;
	height: clamp(18rem, 62vh, 42rem);
	object-fit: cover;
}

@media (min-width: 56.25em) {

	/* Grade editorial da Home: coluna esquerda vazia. */
	.tf-conservacao__grade {
		display: grid;
		grid-template-columns: minmax(10rem, 25%) 1fr;
		column-gap: var(--wp--preset--spacing--40);
	}

	.tf-conservacao__conteudo {
		grid-column: 2;
	}
}

/* Na Home, a fotografia de encerramento conduz diretamente ao
   rodapé: o respiro padrão do footer é neutralizado para que a
   borda sutil encoste na imagem. */
.home .tf-footer {
	margin-top: 0;
}