/**
 * Formulario de lead.
 *
 * Usa as custom properties dos temas (--al-*). Como o plugin roda nos dois
 * sites, todo valor tem fallback: se um tema ainda nao carregou os tokens, o
 * formulario continua legivel em vez de ficar invisivel.
 */

.al-lead {
	display: grid;
	gap: var( --al-space-40, 1rem );
	max-width: 34rem;
}

.al-lead--compacto {
	gap: var( --al-space-30, 0.75rem );
}

.al-lead__titulo {
	margin: 0;
	font-family: var( --al-font-display, sans-serif );
	font-size: var( --al-fs-titulo-3, 1.5rem );
	line-height: var( --al-lh-titulo, 1.15 );
	color: var( --al-texto, #1a1a1a );
}

.al-lead__texto {
	margin: 0;
	color: var( --al-ink-600, #5a5a5a );
	line-height: var( --al-lh-corpo, 1.65 );
}

.al-lead__campo {
	display: grid;
	gap: 0.375rem;
}

.al-lead__campo label,
.al-lead__consent label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --al-texto, #1a1a1a );
}

.al-lead input[type='text'],
.al-lead input[type='email'],
.al-lead input[type='tel'] {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var( --al-ink-300, #c9c9c9 );
	border-radius: var( --al-radius-sm, 8px );
	background: var( --al-white, #fff );
	color: var( --al-ink-900, #1a1a1a );
	/* 16px minimo: abaixo disso o iOS aplica zoom automatico ao focar. */
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.al-lead input::placeholder {
	color: var( --al-ink-600, #5a5a5a );
	opacity: 0.7;
}

.al-lead input:focus-visible,
.al-lead button:focus-visible,
.al-lead a:focus-visible,
.al-lead input[type='checkbox']:focus-visible {
	outline: 3px solid var( --al-teal-700, #067f7e );
	outline-offset: 2px;
}

.al-lead input[aria-invalid='true'] {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.12 );
}

.al-lead__erro:empty {
	display: none;
}

.al-lead__erro {
	font-size: 0.8125rem;
	color: #c0392b;
}

.al-lead__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 0.625rem;
	align-items: start;
}

.al-lead__consent input[type='checkbox'] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var( --al-teal-700, #067f7e );
}

.al-lead__consent label {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var( --al-ink-600, #5a5a5a );
}

.al-lead__consent .al-lead__erro {
	grid-column: 1 / -1;
}

.al-lead__consent a {
	color: var( --al-teal-700, #067f7e );
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 🔴 Formulario dentro de faixa ESCURA
 *
 * O formulario nasceu para fundo claro: titulo, rotulo e texto de apoio usam
 * `--al-texto` e `--al-ink-600`, que sao tons de grafite. Em faixa escura —
 * petroleo, teal-700 ou a faixa de foto com duotone — isso da cinza sobre
 * escuro: os campos aparecem, os rotulos nao.
 *
 * Estava acontecendo em silencio na pagina de cada experiencia da escola, que
 * ja punha o formulario numa faixa teal-700, e apareceu de novo na faixa nova
 * de contato. A cor do texto e responsabilidade de quem sabe que o fundo e
 * escuro, e essa informacao esta na classe da faixa.
 * ---------------------------------------------------------------- */

:is(
	.has-deep-900-background-color,
	.has-teal-700-background-color,
	.al-faixa-form
) :is( .al-lead__titulo, .al-lead__campo label ) {
	color: var( --al-white, #fff );
}

:is(
	.has-deep-900-background-color,
	.has-teal-700-background-color,
	.al-faixa-form
) :is( .al-lead__texto, .al-lead__consent label ) {
	color: rgba( 255, 255, 255, 0.86 );
}

:is(
	.has-deep-900-background-color,
	.has-teal-700-background-color,
	.al-faixa-form
) .al-lead__consent a {
	color: var( --al-teal-300, #52c7c6 );
}

/*
 * O anel de foco tambem muda: teal-700 sobre fundo petroleo praticamente
 * desaparece, e foco invisivel e barreira de acessibilidade, nao detalhe.
 */
:is(
	.has-deep-900-background-color,
	.has-teal-700-background-color,
	.al-faixa-form
) .al-lead :is( input, button, a ):focus-visible {
	outline-color: var( --al-yellow-500, #f8c300 );
}

/* Honeypot: fora da tela, fora da ordem de tabulacao, fora do leitor de tela. */
.al-lead__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.al-lead__enviar {
	justify-self: start;
}

.al-lead__ico {
	flex: none;
}

.al-lead__enviar[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.al-lead__status:empty {
	display: none;
}

.al-lead__status {
	margin: 0;
	font-size: 0.9375rem;
	color: var( --al-teal-700, #067f7e );
}

.al-lead__status.is-erro {
	color: #c0392b;
}

/* Botao — o tema pode sobrescrever, mas o plugin nunca depende disso. */
.al-lead .al-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Alvo de toque >= 44px de altura. */
	min-height: 3rem;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var( --al-radius-pill, 999px );
	font-family: var( --al-font-display, sans-serif );
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: var( --al-ls-caixa-alta, 0.06em );
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/*
 * Laranja da marca com texto ESCURO: #E77817 com branco da 2.96:1 e reprova
 * no WCAG. Com #1A1A1A da 5.88:1. Ver .claude/docs/02-identidade-visual.md.
 */
.al-lead .al-btn--primario {
	background: var( --al-orange-500, #e77817 );
	color: var( --al-ink-900, #1a1a1a );
}

.al-lead .al-btn--primario:hover {
	background: var( --al-orange-700, #b45c0f );
	color: var( --al-white, #fff );
}

@media ( prefers-reduced-motion: no-preference ) {
	.al-lead .al-btn--primario:hover {
		transform: translateY( -1px );
	}
}