/* =========================================================================
   COMPONENTE — FORM
   =========================================================================
   Veste o formulário do GrowthKit ([gk_form]) com o Design System, e serve
   também ao formulário nativo do tema, que usa as mesmas classes.

   ESPECIFICIDADE, DE PROPÓSITO
   O GrowthKit injeta um \3c style> inline junto do markup, ou seja, depois
   desta folha no documento. Com especificidade igual, o dele venceria.
   Por isso todo seletor aqui é prefixado com `.moinho .gk-form`, que o
   body class do tema garante. Não "simplifique" removendo o prefixo.
   ========================================================================= */

/* A altura e o raio do campo NAO sao declarados aqui.
   Se fossem, venceriam o :root que o painel Aparencia -> Design System
   escreve, e os controles de Componentes nao teriam efeito nenhum.
   O padrao vive no fallback de cada var() no ponto de uso. */
.moinho .gk-form {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-sm);

	max-inline-size: var(--moinho-container-narrow);
	margin: 0;
	padding: 0;

	background: none;
	border: 0;
	box-shadow: none;
	font-family: var(--moinho-font-body);
	color: var(--moinho-surface-fg);
}

/* -------------------------------------------------------------------------
   Grade
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-grid {
	display: grid;
	gap: var(--moinho-space-sm) var(--moinho-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.moinho .gk-form .gk-form-full {
	grid-column: 1 / -1;
}

.moinho .gk-form .gk-form-field {
	display: flex;
	flex-direction: column;
	/* Label acima, ajuda abaixo, erro depois. Nunca placeholder como label. */
	gap: var(--moinho-space-3xs);
	min-inline-size: 0;
}

/* -------------------------------------------------------------------------
   Rótulos
   ---------------------------------------------------------------------- */

.moinho .gk-form label {
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

.moinho .gk-form .gk-form-optional {
	font-weight: var(--moinho-weight-regular);
	color: var(--moinho-surface-fg-muted);
}

.moinho .gk-form .gk-form-helper,
.moinho .gk-form .gk-form-counter {
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

.moinho .gk-form .gk-form-section-title {
	margin: 0;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-bold);
	color: var(--moinho-surface-fg);
}

/* -------------------------------------------------------------------------
   Campos
   ---------------------------------------------------------------------- */

.moinho .gk-form input[type="text"],
.moinho .gk-form input[type="email"],
.moinho .gk-form input[type="tel"],
.moinho .gk-form input[type="url"],
.moinho .gk-form input[type="number"],
.moinho .gk-form select,
.moinho .gk-form textarea {
	inline-size: 100%;
	min-block-size: var(--moinho-campo-altura, 3rem);
	padding: var(--moinho-space-2xs) var(--moinho-space-sm);

	font-family: var(--moinho-role-body-family);
	/* Papel Body: piso de 16px, que tambem evita o zoom automatico do
	   Safari no iOS ao focar o campo. */
	font-size: var(--moinho-role-body-size);
	color: var(--moinho-surface-fg);

	background-color: var(--moinho-color-background);
	border: var(--moinho-border-width) solid var(--moinho-color-border);
	border-radius: var(--moinho-campo-raio, var(--moinho-radius-md));
	box-shadow: none;

	transition:
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		box-shadow var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho .gk-form textarea {
	min-block-size: 9rem;
	padding-block: var(--moinho-space-2xs);
	resize: vertical;
	line-height: var(--moinho-leading-normal);
}

.moinho .gk-form select {
	appearance: none;
	padding-inline-end: var(--moinho-space-xl);

	/* Seta desenhada em gradiente: sem imagem externa, sem requisição. */
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.25rem) calc(50% + 0.1rem),
		calc(100% - 0.9rem) calc(50% + 0.1rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

/* Contraste do placeholder: cinza claro demais reprova em AA. */
.moinho .gk-form ::placeholder {
	color: var(--moinho-surface-fg-muted);
	opacity: 1;
}

.moinho .gk-form :is(input, select, textarea):focus-visible {
	border-color: var(--moinho-color-focus);
	box-shadow: var(--moinho-shadow-focus);
	outline: none;
}

.moinho .gk-form :is(input, select, textarea):user-invalid {
	border-color: var(--moinho-erro);
}

/* -------------------------------------------------------------------------
   Consentimento
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--moinho-space-2xs);

	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-regular);
	color: var(--moinho-surface-fg-muted);
	line-height: var(--moinho-leading-normal);
	cursor: pointer;
}

.moinho .gk-form .gk-form-consent input[type="checkbox"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	min-block-size: 0;
	margin: 0;
	flex: none;
	/* Alinha a caixa com a primeira linha do texto, não com o topo do bloco. */
	margin-block-start: 0.15em;
	accent-color: var(--moinho-color-primary);
}

.moinho .gk-form .gk-form-consent a {
	color: var(--moinho-color-secondary-ink);
}

/* -------------------------------------------------------------------------
   Chips, segmentos e trust
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-chips,
.moinho .gk-form .gk-form-segments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs);
}

.moinho .gk-form .gk-form-chip,
.moinho .gk-form .gk-form-segment {
	display: inline-flex;
	align-items: center;
	/* 2.75rem: mesmo alvo de toque dos botoes e das redes do rodape. */
	min-block-size: 2.75rem;
	padding-inline: var(--moinho-space-sm);

	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);

	background: none;
	border: var(--moinho-border-width) solid var(--moinho-color-border);
	border-radius: var(--moinho-radius-pill);
	cursor: pointer;

	transition:
		background-color var(--moinho-duration-fast) var(--moinho-ease-default),
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		color var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho .gk-form :is(.gk-form-chip, .gk-form-segment):hover {
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-primary);
}

.moinho .gk-form :is(.gk-form-chip, .gk-form-segment).is-active,
.moinho .gk-form :is(.gk-form-chip, .gk-form-segment)[aria-pressed="true"] {
	background-color: var(--moinho-color-primary);
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho .gk-form .gk-form-trust {
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

/* -------------------------------------------------------------------------
   Progresso
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-progress {
	block-size: 0.25rem;
	border-radius: var(--moinho-radius-pill);
	background-color: var(--moinho-color-border);
	overflow: hidden;
}

.moinho .gk-form .gk-form-progress > * {
	block-size: 100%;
	background-color: var(--moinho-color-primary);
	transition: inline-size var(--moinho-duration-normal) var(--moinho-ease-out);
}

/* -------------------------------------------------------------------------
   Botao
   ----------------------------------------------------------------------
   O DESENHO do submit NAO mora aqui.

   components/button/button.css adota `.gk-form-btn` dentro do proprio
   seletor, entao o botao do formulario E o botao do resto do site: mesmo
   liquid glass, mesmo hover, mesmo papel tipografico, mesmos tokens.

   Antes esta secao carregava 90 linhas copiadas do componente — e a copia
   tinha parado na versao anterior do desenho, o que fazia do submit o
   unico botao do site com aparencia propria.

   Sobra aqui apenas o que e responsabilidade do formulario: onde o botao
   se posiciona dentro da grade.
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-btn {
	align-self: flex-start;
}

/* Em tela estreita, um submit de largura parcial fica com alvo pequeno
   demais e desalinha da coluna de campos. */
@media (max-width: 30rem) {
	.moinho .gk-form .gk-form-btn {
		align-self: stretch;
		inline-size: 100%;
	}
}

/* -------------------------------------------------------------------------
   Mensagens de estado
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-msg {
	display: flex;
	align-items: flex-start;
	gap: var(--moinho-space-2xs);

	margin: 0;
	padding: var(--moinho-space-sm);

	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg);

	background-color: var(--moinho-color-primary-soft);
	border-radius: var(--moinho-radius-md);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
}

.moinho .gk-form .gk-form-msg-body {
	margin: 0;
}

.moinho .gk-form .gk-form-msg-wa {
	color: var(--moinho-color-secondary-ink);
	font-weight: var(--moinho-weight-semibold);
}

/* -------------------------------------------------------------------------
   Honeypot — precisa sumir para gente e continuar existindo para o bot.
   `display:none` é o padrão que os bots mais espertos detectam, então
   tiramos do fluxo sem escondê-lo do DOM.
   ---------------------------------------------------------------------- */

.moinho .gk-form .gk-form-hp,
.moinho .moinho-form .gk-form-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Superfície escura
   ---------------------------------------------------------------------- */

.moinho .moinho-invert .gk-form :is(input, select, textarea) {
	background-color: rgb(255 255 255 / 0.06);
	border-color: var(--moinho-surface-border);
	color: var(--moinho-surface-fg);
}

.moinho .moinho-invert .gk-form ::placeholder {
	color: var(--moinho-color-text-on-dark-muted);
}