/* ==========================================================================
   Contato. Espelha template-parts/page-contato/sections/contato.php.
   Formulário sem caixa: campo é uma linha de base, botão é um fio.
   ========================================================================== */
.cad-contato { padding-top: var(--cad-section-y-lg); }

.cad-contato__lead { max-width: 38ch; margin-bottom: var(--cad-sp-6); }

.cad-contato__pessoa {
	font-family: var(--cad-font-display);
	font-size: var(--cad-fs-subtitle);
	color: var(--cad-ink);
	margin: 0 0 var(--cad-sp-5);
}

.cad-contato__email { margin: 0 0 var(--cad-sp-7); }
.cad-contato__email a { font-size: var(--cad-fs-body); }

.cad-contato__pracas {
	font-family: var(--cad-font-text);
	font-size: var(--cad-fs-body-sm);
	margin: 0 0 var(--cad-sp-7);
}

.cad-contato__nota {
	font-family: var(--cad-font-display);
	font-style: italic;
	font-size: var(--cad-fs-body);
	color: var(--cad-ink);
	max-width: 28ch;
	margin: 0;
}

/* Formulário ------------------------------------------------------------- */
.cad-contato .raz-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cad-sp-5);
	max-width: 52ch;
}

.cad-contato .raz-form label {
	display: block;
	font-family: var(--cad-font-label);
	font-size: var(--cad-fs-label);
	letter-spacing: var(--cad-ls-label);
	text-transform: uppercase;
	color: var(--cad-gray-mid);
	margin-bottom: var(--cad-sp-2);
}

.cad-contato .raz-form input[type="text"],
.cad-contato .raz-form input[type="email"],
.cad-contato .raz-form input[type="tel"],
.cad-contato .raz-form textarea {
	width: 100%;
	font-family: var(--cad-font-text);
	font-size: var(--cad-fs-body);
	color: var(--cad-ink);
	background: transparent;
	border: 0;
	border-bottom: var(--cad-hairline) solid var(--cad-rule);
	border-radius: var(--cad-radius);
	padding: var(--cad-sp-2) 0;
	transition: border-color var(--cad-motion-fast) var(--cad-ease);
}

.cad-contato .raz-form input:focus,
.cad-contato .raz-form textarea:focus {
	outline: none;
	border-bottom-color: var(--cad-ink);
}

.cad-contato .raz-form textarea { min-height: 120px; resize: vertical; }

.cad-contato .raz-form__consent {
	display: flex;
	gap: var(--cad-sp-3);
	align-items: flex-start;
	font-size: var(--cad-fs-caption);
	color: var(--cad-gray-mid);
}
.cad-contato .raz-form__consent label {
	font-family: var(--cad-font-text);
	font-size: var(--cad-fs-caption);
	letter-spacing: 0;
	text-transform: none;
	color: var(--cad-gray-mid);
	margin: 0;
}

.cad-contato .raz-form button,
.cad-contato .raz-form input[type="submit"] {
	justify-self: start;
	font-family: var(--cad-font-label);
	font-size: var(--cad-fs-label);
	letter-spacing: var(--cad-ls-label);
	text-transform: uppercase;
	color: var(--cad-ink);
	background: transparent;
	border: var(--cad-hairline-strong) solid var(--cad-ink);
	border-radius: var(--cad-radius);
	padding: 14px 26px;
	cursor: pointer;
	transition: background-color var(--cad-motion-fast) var(--cad-ease),
		color var(--cad-motion-fast) var(--cad-ease);
}
.cad-contato .raz-form button:hover,
.cad-contato .raz-form input[type="submit"]:hover {
	background: var(--cad-ink);
	color: var(--cad-paper);
}

.cad-contato .raz-form__msg {
	font-size: var(--cad-fs-body-sm);
	color: var(--cad-graphite);
}

@media (min-width: 900px) {
	.cad-contato__canais { padding-top: var(--cad-sp-7); }
}