/**
 * Widget "Newsletter"
 *
 * Fundo gradiente azul escuro com padrão de pontos sutil, conteúdo
 * centralizado em largura estreita (--fjpn-container-newsletter-width) e
 * formulário de captura de e-mail (Contact Form 7 ou formulário próprio).
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho de marca é
 * literal aqui. Exceção documentada: o estado de erro do campo usa um
 * vermelho claro que não existe em tokens.css (a paleta da marca não tem
 * uma cor semântica de "erro"/"perigo") — ver comentário na seção 5.
 */

.fjpn-newsletter {
	position: relative;
	overflow: hidden;
	padding-block: var(--fjpn-space-section-py-md);
	background: var(--fjpn-newsletter-bg, var(--fjpn-gradient-newsletter));
	/* Padrão de pontos sutil — o doc de origem não registra um valor literal
	   de espaçamento/opacidade para este padrão específico (só cita que
	   existe), então usamos uma grade discreta consistente com o resto do
	   site em vez de inventar um número "oficial". */
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
}

.fjpn-newsletter__container {
	position: relative;
	z-index: 1;
	max-width: var(--fjpn-container-newsletter-width);
	margin-inline: auto;
	padding-inline: var(--fjpn-container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fjpn-gap-medium);
	text-align: center;
}

@media (min-width: 1024px) {
	.fjpn-newsletter__container {
		padding-inline: var(--fjpn-container-padding-lg);
	}
}

/* ==========================================================
 * 1. CABEÇALHO — ícone, eyebrow, título, texto de apoio
 * ========================================================== */

.fjpn-newsletter__icone {
	font-size: var(--fjpn-text-heading-xl);
	line-height: 1;
}

.fjpn-newsletter__eyebrow {
	/* .fjpn-eyebrow já define cor/peso/tracking — aqui só o respiro. */
	margin-bottom: 0;
}

.fjpn-newsletter__titulo {
	/* .fjpn-heading-md é escura por padrão (--fjpn-text-primary); sobre o
	   gradiente escuro desta seção precisa virar branca. */
	color: var(--fjpn-newsletter-titulo-cor, var(--fjpn-white));
}

.fjpn-newsletter__texto {
	max-width: 38rem;
	color: var(--fjpn-newsletter-texto-cor, rgba(255, 255, 255, 0.85));
}

/* ==========================================================
 * 2. FORMULÁRIO PRÓPRIO (modo "personalizado")
 * ========================================================== */

.fjpn-newsletter__form {
	width: 100%;
	margin-top: var(--fjpn-gap-icon-text);
	display: flex;
	flex-direction: column;
	gap: var(--fjpn-gap-medium);
}

.fjpn-newsletter__campo {
	display: flex;
	flex-direction: column;
	gap: var(--fjpn-gap-icon-text-lg);
	width: 100%;
}

@media (min-width: 640px) {
	.fjpn-newsletter__campo {
		flex-direction: row;
	}
}

.fjpn-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--fjpn-padding-button-y) var(--fjpn-padding-button-x);
	border-radius: var(--fjpn-radius-2xl);
	border: var(--fjpn-border-width-default) solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: var(--fjpn-white);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	transition:
		border-color var(--fjpn-duration-color) var(--fjpn-ease-simple),
		background var(--fjpn-duration-background) var(--fjpn-ease-simple);
}

.fjpn-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.fjpn-newsletter__input:focus-visible {
	outline: var(--fjpn-border-width-outline) solid var(--fjpn-header-accent);
	outline-offset: 2px;
}

/* 5. Estado de erro — sem token de "perigo" em tokens.css (paleta da marca
   é azul/laranja/neutra). Ver --fjpn-error-light em tokens.css — contraste AA sobre o gradiente
   escuro (~4.5:1+); é literal por não haver token semântico equivalente. */
.fjpn-newsletter__input[aria-invalid='true'] {
	border-color: var(--fjpn-error-light);
	background: rgba(254, 202, 202, 0.12);
}

.fjpn-newsletter__botao {
	white-space: nowrap;
}

/* Reaproveita .fjpn-btn-orange de base.css (não editado); estas duas
   declarações só sobrescrevem fundo/texto quando a cliente define uma cor
   no painel (widgets/newsletter.php, seção "Estilo"). Sem escolha, os
   fallbacks reproduzem exatamente o gradiente/branco de base.css. */
.fjpn-newsletter__botao.fjpn-btn-orange {
	background: var(--fjpn-newsletter-botao-fundo, var(--fjpn-gradient-orange-cta));
	color: var(--fjpn-newsletter-botao-texto, var(--fjpn-white));
}

.fjpn-newsletter__mensagem {
	min-height: 1.25em;
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: rgba(255, 255, 255, 0.85);
}

.fjpn-newsletter__mensagem--sucesso {
	color: var(--fjpn-white);
	font-weight: var(--fjpn-weight-semibold);
}

.fjpn-newsletter__mensagem--erro {
	color: var(--fjpn-error-light);
	font-weight: var(--fjpn-weight-semibold);
}

/* ==========================================================
 * 3. CONSENTIMENTO LGPD
 * ========================================================== */

.fjpn-newsletter__consentimento {
	display: flex;
	align-items: flex-start;
	gap: var(--fjpn-gap-icon-text);
	text-align: left;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
}

.fjpn-newsletter__consentimento input[type='checkbox'] {
	flex: 0 0 auto;
	margin-top: 0.2em;
	accent-color: var(--fjpn-orange-primary);
}

.fjpn-newsletter__consentimento-info {
	max-width: 38rem;
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: rgba(255, 255, 255, 0.75);
}

.fjpn-newsletter__link-privacidade {
	color: var(--fjpn-newsletter-link-cor, var(--fjpn-white));
	text-decoration: underline;
}

.fjpn-newsletter__link-privacidade:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================
 * 4. CONTACT FORM 7 (modo "cf7")
 * O markup interno é do próprio plugin — só garantimos que ele se comporte
 * bem dentro do container estreito e centralizado desta seção.
 * ========================================================== */

.fjpn-newsletter__form-wrapper--cf7 {
	width: 100%;
	margin-top: var(--fjpn-gap-icon-text);
	text-align: left;
}

.fjpn-newsletter__form-wrapper--cf7 .wpcf7-form {
	color: var(--fjpn-white);
}

.fjpn-newsletter__form-wrapper--cf7 .wpcf7-form input:not([type='submit']):not([type='checkbox']):not([type='radio']) {
	width: 100%;
	padding: var(--fjpn-padding-button-y) var(--fjpn-padding-button-x);
	border-radius: var(--fjpn-radius-2xl);
	border: var(--fjpn-border-width-default) solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: var(--fjpn-white);
	font-family: var(--fjpn-font-sans);
}

.fjpn-newsletter__form-wrapper--cf7 .wpcf7-form input[type='submit'] {
	margin-top: var(--fjpn-gap-icon-text);
}

/* ==========================================================
 * 5. AVISO — SÓ NO EDITOR (nunca impresso no HTML público)
 * Estilo de alerta deliberadamente destoante do resto da seção para chamar
 * a atenção de quem está editando; não segue a paleta de marca porque não
 * é conteúdo do site.
 * ========================================================== */

.fjpn-newsletter__aviso-editor {
	width: 100%;
	margin-top: var(--fjpn-gap-icon-text);
	padding: var(--fjpn-gap-medium);
	border: var(--fjpn-border-width-outline) dashed var(--fjpn-orange-primary);
	border-radius: var(--fjpn-radius-xl);
	background: rgba(255, 255, 255, 0.95);
	color: var(--fjpn-warning);
	text-align: left;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	line-height: var(--fjpn-leading-relaxed);
}

.fjpn-newsletter__aviso-editor strong {
	display: block;
	margin-bottom: var(--fjpn-gap-icon-text);
	font-size: var(--fjpn-text-body);
}