/* =====================================================================
   CADASTRO DE NOVIDADES , a página /cadastro.

   Arquivo próprio (regra da casa: CSS novo não entra em style.css nem em
   componentes.css, que são compartilhados). O enfileiramento fica com o
   dono; o trecho exato está no relatório da entrega , e, até ele entrar,
   partials/cadastro-css.php embute este MESMO arquivo, para a página
   nunca aparecer sem estilo.

   Só usa os tokens de :root do style.css (CONTRATO §7). Nenhuma cor
   literal mora aqui , literal espalhado é como dois temas divergem.

   A BARRA DA HOME NÃO ESTÁ AQUI: ela usa `.ng-barra-news*`, que já mora
   em assets/css/home.css (§5), arquivo do dono. Foi por isso que o HTML
   da barra manteve exatamente aquelas classes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Cabeçalho da página
   ------------------------------------------------------------------ */

.ng-cad-cabecalho {
	padding-block: clamp(56px, 9vw, 104px) clamp(20px, 3vw, 36px);
	text-align: center;
}

.ng-cad-cabecalho__interno { max-width: 760px; margin-inline: auto; }
.ng-cad-cabecalho .ng-kicker { justify-content: center; }
.ng-cad-cabecalho .ng-kicker::before { display: none; }
.ng-cad-cabecalho h1 { margin-top: 14px; }

.ng-cad-cabecalho__lead {
	margin-top: 18px;
	color: var(--ng-tinta-fraca);
	font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------
   2. A caixa do formulário
   ------------------------------------------------------------------ */

.ng-cad__caixa { max-width: 720px; }

.ng-cad__form {
	display: grid;
	gap: clamp(20px, 3vw, 30px);
	padding: clamp(20px, 4vw, 34px);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-lg);
	box-shadow: var(--ng-sombra);
}

/* Nome e e-mail lado a lado quando cabe; empilhados quando não cabe. */
.ng-cad__linha {
	display: grid;
	gap: clamp(16px, 2.4vw, 22px);
}

@media (min-width: 720px) {
	.ng-cad__linha { grid-template-columns: 1fr 1fr; }
}

.ng-cad__campo { margin: 0; display: grid; gap: 8px; }

.ng-cad__rotulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	color: var(--ng-branco);
	font-size: .95rem;
	letter-spacing: .01em;
}

.ng-cad__entrada {
	width: 100%;
	min-width: 0;
	padding: 13px 16px;
	border-radius: var(--ng-raio-sm);
	border: 1.5px solid var(--ng-borda-forte);
	background: var(--ng-fundo);
	color: var(--ng-tinta);
	font-family: var(--ng-corpo);
	font-size: 1rem;
}

.ng-cad__entrada::placeholder { color: var(--ng-tinta-fraca); }

.ng-cad__entrada:focus-visible {
	outline: 0;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco);
}

/* Campo reprovado: a borda vermelha NÃO é o único sinal , a mensagem em
   texto vem logo abaixo, e o aria-invalid vai no HTML. Cor sozinha deixa
   de fora quem não distingue vermelho. */
.ng-cad__entrada--erro { border-color: var(--ng-alerta); }

/* ---------------------------------------------------------------------
   3. As perguntas de escolha (pastilhas)

   São <input type="radio"> DE VERDADE, só repintados: navegação por
   teclado (setas dentro do grupo), leitura correta em leitor de tela e ,
   o que mais importa aqui , o valor vai no POST sem uma linha de JS.

   O rádio é escondido com `appearance:none` + tamanho zero em vez de
   `display:none` porque campo com display:none sai da ordem de foco: o
   grupo inteiro ficaria inalcançável pelo teclado.
   ------------------------------------------------------------------ */

.ng-cad__grupo {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 10px;
}

.ng-cad__legenda {
	padding: 0;
	font-family: var(--ng-titulo);
	font-weight: 600;
	color: var(--ng-branco);
	font-size: .95rem;
}

.ng-cad__dica {
	margin: 0;
	color: var(--ng-tinta-fraca);
	font-size: .85rem;
	line-height: 1.5;
}

.ng-cad__pastilhas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ng-cad__pastilha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--ng-raio-pill);
	border: 1.5px solid var(--ng-borda-forte);
	background: var(--ng-fundo);
	color: var(--ng-tinta);
	font-size: .9rem;
	cursor: pointer;
	transition: border-color var(--ng-transicao), background var(--ng-transicao), color var(--ng-transicao);
}

.ng-cad__pastilha input {
	appearance: none;
	-webkit-appearance: none;
	width: 0;
	height: 0;
	margin: 0;
	position: absolute;
	opacity: 0;
}

.ng-cad__pastilha:hover { border-color: var(--ng-destaque-2); }

/* :has() para pintar a pastilha inteira quando o rádio dentro dela está
   marcado. Navegador sem :has() mostra o anel de foco e o texto, então o
   pior caso é uma pastilha menos evidente , nunca um grupo inutilizável. */
.ng-cad__pastilha:has(input:checked) {
	border-color: var(--ng-destaque);
	background: var(--ng-fundo-3);
	color: var(--ng-branco);
}

.ng-cad__pastilha:has(input:focus-visible) {
	outline: 0;
	box-shadow: var(--ng-sombra-foco);
}

/* ---------------------------------------------------------------------
   4. O consentimento

   Ganha uma caixa própria porque ele é o PORTÃO do cadastro (sem ele o
   plugin não grava nada), e não mais um campo na fila.
   ------------------------------------------------------------------ */

.ng-cad__consent {
	display: grid;
	gap: 10px;
	padding: clamp(14px, 2.4vw, 20px);
	border-radius: var(--ng-raio);
	border: 1.5px solid var(--ng-borda-forte);
	background: var(--ng-fundo);
}

.ng-cad__consent--erro { border-color: var(--ng-alerta); }

.ng-cad__aceite {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	color: var(--ng-tinta);
	line-height: 1.55;
}

.ng-cad__aceite input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--ng-destaque);
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   5. Avisos, erros e ações
   ------------------------------------------------------------------ */

.ng-cad__aviso {
	margin: 0 0 clamp(18px, 3vw, 26px);
	padding: 14px 18px;
	border-radius: var(--ng-raio);
	border: 1px solid var(--ng-borda-forte);
	background: var(--ng-fundo-2);
	line-height: 1.6;
}

.ng-cad__aviso--ok   { border-color: var(--ng-ok); color: var(--ng-tinta); }
.ng-cad__aviso--erro { border-color: var(--ng-alerta); color: var(--ng-tinta); }

.ng-cad__aviso:focus-visible { outline: 0; box-shadow: var(--ng-sombra-foco); }

.ng-cad__erro {
	display: block;
	margin: 0;
	color: var(--ng-alerta);
	font-size: .85rem;
	line-height: 1.5;
}

.ng-cad__acoes { margin: 0; }

.ng-cad__depois { margin: 0; }

/* honeypot: fora da tela, NUNCA display:none (robô sabe pular campo
   escondido assim). */
.ng-cad__mel {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}