/* ============================================================
   Patrimônio Preservado — folha da marca
   Consome os tokens de tokens.css. Tudo em px: a raiz do tema
   é 10px, então rem mente aqui.
   ============================================================ */

/* ---------- Tipografia ---------- */
/* Base tipográfica em duas partes, de propósito:
   - `body` precisa do peso normal, senão perde para o `body` do OceanWP e o
     site inteiro volta para Open Sans (aconteceu em 21/09, pego na conferência);
   - `#main p` vai dentro de `:where()`, que zera a especificidade. Com peso de
     identificador ela vencia qualquer classe de componente — já pintou o hero de
     cinza (1,6:1) e trocou a fonte do nome do autor no post.
   - A landing fica de fora: lá o parágrafo herda o tamanho que o construtor
     definiu no bloco pai, e esta regra o puxava de 20 para 18px no preço. */
body,
.entry-content,
:where(body:not(.pp-landing) #main) p {
	font-family: var(--pp-fonte-texto);
	font-size: var(--pp-fs-corpo);
	line-height: var(--pp-lh-corpo);
}

/* A cor do texto fica SÓ no body, por herança.
   Enquanto ela morava no seletor acima, o `#main p` carregava peso de ID e
   vencia qualquer classe — o parágrafo do hero, escrito para ser claro sobre
   fundo azul, saía cinza-escuro e ficava com 1,6:1 de contraste. Herança se
   sobrescreve com uma classe; especificidade de ID, não. */
body { color: var(--pp-texto-apoio); }

h1, h2, h3, h4,
.entry-title,
.page-header-title {
	font-family: var(--pp-fonte-titulo);
	font-weight: var(--pp-peso-titulo);
	letter-spacing: var(--pp-tracking-titulo);
	color: var(--pp-texto);
}

h1 { font-size: var(--pp-fs-h1); line-height: var(--pp-lh-h1); }
h2 { font-size: var(--pp-fs-h2); line-height: var(--pp-lh-h2); }
h3 { font-size: var(--pp-fs-h3); line-height: var(--pp-lh-h3); }
h4 { font-size: var(--pp-fs-h4); line-height: var(--pp-lh-h4); }

/* A medida de leitura NÃO mora aqui. Como `#main p` ela valia para todo
   parágrafo do site, inclusive dentro de colunas do construtor — e era o que
   fazia o texto ficar estreito ao lado de uma seção larga. Hoje ela é aplicada
   em `conteudo.css`, só nas páginas de texto puro. */

a { color: var(--pp-link); }
a:hover { color: var(--pp-texto); }

/* ---------- Foco visível: nunca remover sem substituto ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--pp-azul-400);
	outline-offset: 2px;
}

/* ---------- Grade ---------- */
.pp-container {
	max-width: var(--pp-container);
	margin-inline: auto;
	padding-inline: var(--pp-gutter);
}

.pp-secao {
	padding-block: var(--pp-secao-y);
}

.pp-secao--alt   { background: var(--pp-fundo-alt); }
.pp-secao--escura { background: var(--pp-fundo-escuro); color: var(--pp-texto-claro); }
.pp-secao--escura h1,
.pp-secao--escura h2,
.pp-secao--escura h3,
.pp-secao--escura h4 { color: var(--pp-texto-claro); }
.pp-secao--escura p  { color: var(--pp-azul-200); }

/* ---------- O filete dourado ---------- */
.pp-filete {
	width: 64px;
	height: var(--pp-filete-espessura);
	background: var(--pp-filete);
	border: 0;
	margin: 0 0 var(--pp-e4);
}

/* ---------- Botões ---------- */
.pp-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-e3);
	min-height: 48px;
	padding: 13px 24px;
	font-family: var(--pp-fonte-texto);
	font-size: var(--pp-fs-corpo-p);
	font-weight: var(--pp-peso-forte);
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--pp-azul-600);
	border-radius: var(--pp-raio);
	background: var(--pp-azul-600);
	color: var(--pp-branco);
	cursor: pointer;
	transition: background var(--pp-t-rapido) var(--pp-curva),
	            border-color var(--pp-t-rapido) var(--pp-curva),
	            color var(--pp-t-rapido) var(--pp-curva);
}

.pp-botao:hover { background: var(--pp-azul-700); border-color: var(--pp-azul-700); color: var(--pp-branco); }

.pp-botao--secundario { background: transparent; color: var(--pp-azul-600); }
.pp-botao--secundario:hover { background: var(--pp-azul-50); color: var(--pp-azul-700); }

.pp-botao--fantasma { background: transparent; border-color: transparent; color: var(--pp-azul-600); }
.pp-botao--fantasma:hover { background: var(--pp-azul-50); }

.pp-botao--g { min-height: 56px; padding: 16px 28px; font-size: var(--pp-fs-corpo); }
.pp-botao--p { min-height: 40px; padding: 9px 18px; font-size: 15px; }

/* No escuro o primário inverte; o ouro só existe aqui, onde passa em contraste. */
.pp-secao--escura .pp-botao { background: var(--pp-branco); border-color: var(--pp-branco); color: var(--pp-azul-600); }
.pp-secao--escura .pp-botao:hover { background: var(--pp-azul-100); }
.pp-secao--escura .pp-botao--secundario { background: transparent; border-color: var(--pp-branco); color: var(--pp-branco); }
.pp-botao--ouro { background: var(--pp-destaque); border-color: var(--pp-destaque); color: var(--pp-azul-600); }

/* ---------- Cards ---------- */
.pp-card {
	display: flex;
	flex-direction: column;
	gap: var(--pp-e3);
	padding: var(--pp-e6);
	background: var(--pp-branco);
	border: 1px solid var(--pp-borda);
	border-radius: var(--pp-raio);
	/* Sem sombra: sombra pesada é a assinatura de tema pronto; moldura fina é a
	   de material impresso. O realce do hover vem do filete, não do relevo. */
	transition: border-color var(--pp-t-base) var(--pp-curva);
}

.pp-card:hover { border-color: var(--pp-filete); }
.pp-card h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.pp-card p  { margin: 0; font-size: var(--pp-fs-corpo-p); line-height: var(--pp-lh-corpo-p); }

.pp-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-e5); }
.pp-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-e6); }

@media (max-width: 1023px) { .pp-grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pp-grade-3, .pp-grade-2 { grid-template-columns: 1fr; } }

/* ---------- Alvo de toque: 44px no celular, sem exceção ---------- */
@media (max-width: 767px) {
	.pp-botao,
	.main-navigation a,
	.pp-card a { min-height: 44px; }
}