/* ==========================================================================
   OfferRush Pro — Estilos de componentes (Fase 1)
   Convenção de prefixo: .owp- (OfferRush WordPress) para não colidir com
   classes nativas do Gutenberg.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header e Footer (fundo escuro) — sobrescreve cor de link/nav só nesse
   contexto, já que o theme.json define link padrão para fundo claro.
   -------------------------------------------------------------------------- */
.site-header,
.site-footer {
	--owp-on-dark-text: var(--wp--preset--color--offwhite-editorial);
	--owp-on-dark-muted: #C7CCD9; /* cinza-azulado claro, só para texto secundário sobre fundo escuro */
}

.site-header a,
.site-footer a {
	color: var(--owp-on-dark-text);
	text-decoration: none;
}

.site-header a:hover,
.site-footer a:hover {
	color: var(--wp--preset--color--esmeralda-sinal);
}

.site-footer .owp-footer-legal a {
	color: var(--owp-on-dark-muted);
}

.site-header .wp-block-navigation {
	--wp--style--block-gap: 2rem;
}

/* Botão de newsletter no header: contorno, não preenchido — evita dois
   CTAs "fortes" competindo na mesma tela (o preenchido fica para o corpo). */
.site-header .owp-btn-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--esmeralda-sinal);
	color: var(--owp-on-dark-text);
}

.site-header .owp-btn-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--esmeralda-sinal);
}

/* --------------------------------------------------------------------------
   2. Grid de categorias (pattern: category-grid)
   -------------------------------------------------------------------------- */
.owp-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 782px) {
	.owp-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.owp-category-grid {
		grid-template-columns: 1fr;
	}
}

.owp-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--borda-clara);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--custom--shadow--card);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.owp-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(28,31,38,0.08), 0 8px 24px rgba(28,31,38,0.08);
}

/* --------------------------------------------------------------------------
   3. Barra de confiança / estatísticas (pattern: trust-bar)
   Números em monoespaçada — é o elemento de assinatura visual do sistema:
   dado em fonte "de laboratório", separado do tom editorial do resto do texto.
   -------------------------------------------------------------------------- */
.owp-trust-bar {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--wp--preset--color--borda-clara);
	border-bottom: 1px solid var(--wp--preset--color--borda-clara);
}

.owp-trust-stat {
	flex: 1;
	text-align: center;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	border-right: 1px solid var(--wp--preset--color--borda-clara);
}

.owp-trust-stat:last-child {
	border-right: none;
}

.owp-trust-stat .owp-stat-number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--indigo-profundo);
	display: block;
}

.owp-trust-stat .owp-stat-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grafite-neutro);
}

@media (max-width: 600px) {
	.owp-trust-bar {
		flex-direction: column;
	}
	.owp-trust-stat {
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--borda-clara);
	}
	.owp-trust-stat:last-child {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------------
   4. Selo de placeholder (Fase 2 pendente) — visível só no admin/editor,
   nunca deve aparecer para o visitante final em produção.
   -------------------------------------------------------------------------- */
.owp-placeholder-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ambar-curadoria);
	border: 1px dashed var(--wp--preset--color--ambar-curadoria);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.125rem 0.625rem;
}

/* --------------------------------------------------------------------------
   5. Newsletter inline (pattern: newsletter-inline)
   -------------------------------------------------------------------------- */
.owp-newsletter-card {
	background: var(--wp--preset--color--indigo-profundo);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--40);
}

.owp-newsletter-card * {
	color: var(--wp--preset--color--offwhite-editorial);
}

.owp-newsletter-card .wp-block-button__link {
	background: var(--wp--preset--color--esmeralda-sinal);
	color: var(--wp--preset--color--offwhite-editorial);
}