/**
 * Formulário de contexto do CTA de WhatsApp.
 *
 * Carregado só onde o shortcode roda. Cor, raio e sombra vêm dos presets do
 * tema: este arquivo não declara literal de cor nenhum, e nenhuma regra aqui
 * existe se o theme.json puder expressá-la — o markup vem de um shortcode, e
 * shortcode não passa pelo pipeline de estilos de bloco.
 */

/* O reset de box-sizing do núcleo alcança só elementos `.wp-block-*`; os
   controles vêm de um shortcode e ficariam em content-box, o que estoura a
   célula da grade em quem tem padding. */
.ctooffice-formulario,
.ctooffice-formulario * {
	box-sizing: border-box;
}

.ctooffice-formulario {
	padding: clamp(20px, 3vw, 28px);
	border-radius: 28px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--form);
}

.ctooffice-formulario__grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 640px) {
	.ctooffice-formulario__grade {
		grid-template-columns: 1fr;
	}
}

.ctooffice-campo {
	display: grid;
	gap: 7px;
	margin: 0;
}

.ctooffice-campo--largo {
	grid-column: 1 / -1;
}

.ctooffice-formulario label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.ctooffice-formulario input,
.ctooffice-formulario select,
.ctooffice-formulario textarea {
	width: 100%;
	min-height: 49px;
	padding: 13px 14px;
	border: 1px solid var(--wp--preset--color--line-forte);
	border-radius: 14px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	font: inherit;
	line-height: 1.25;
}

.ctooffice-formulario input::placeholder,
.ctooffice-formulario textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.ctooffice-formulario textarea {
	min-height: 118px;
	resize: vertical;
}

/* `appearance: none` tira o `<select>` do pintor nativo do sistema: sem isso o
   controle ignora largura, borda e altura declaradas pelo autor e varia entre
   plataformas. A seta é um pseudo-elemento, e não uma imagem embutida — SVG
   inline em CSS é onde a cor literal se esconde da varredura. */
.ctooffice-formulario select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
}

.ctooffice-campo {
	position: relative;
}

.ctooffice-campo:has(select)::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 20px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.ctooffice-formulario__acao {
	margin-top: 18px;
}

.ctooffice-formulario__acao .wp-block-button__link {
	width: 100%;
}

.ctooffice-formulario-indisponivel {
	margin: 18px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
}

/* A isca sai da tela sem sair da árvore de acessibilidade do navegador: quem
   preenche é robô, e é o servidor que descarta o registro. */
.ctooffice-formulario__isca {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}