/*
 * Formulários Contact Form 7 — visual copiado do formulário nativo da HubSpot
 * no site original.
 *
 * Todas as medidas abaixo foram lidas ao vivo com getComputedStyle em
 * https://canalsantosanjos.ipco.org.br/missa (2026-08-21), no <form> real do
 * HubSpot: cartão branco com 48px de padding, campos de 65px de altura com
 * borda preta de 2px e cantos de 8px, rótulo em bloco 18px/500 acima do
 * campo, 32px de respiro entre campos e botão laranja ocupando a largura
 * toda. A estrutura em <div class="csa-field"> é criada por
 * visual/rebuild_cf7_markup.py e o autop do CF7 está desligado no
 * functions.php do tema, então o HTML aqui é exatamente o esperado.
 */

/* No original o cartão (padding/fundo/borda) fica no próprio <form>, não num
   wrapper -- reproduzido aqui para as medidas internas baterem. */
/* `margin: 0` -- no original o módulo do formulário tem exatamente a altura do
   <form>; qualquer margem no wrapper aparece como respiro que o original não
   tem (eram 64px por formulário). */
.wpcf7 {
	width: 100%;
	margin: 0;
}

.wpcf7 form.wpcf7-form {
	box-sizing: border-box;
	padding: 48px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 0;
}

/* Texto de introdução que o renderizador novo da HubSpot mostra DENTRO do
   <form> (recuperado da página original -- não vinha na definição do
   formulário nem no HTML migrado, porque o formulário é renderizado por JS). */
.wpcf7 .csa-form-intro {
	margin: 0 0 32px;
}

.wpcf7 .csa-form-intro p {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 27.9px;
	color: var(--wp--preset--color--base-3, #09152B);
}

.wpcf7 .csa-form-intro p:first-child {
	font-size: 24px;
	line-height: 1.3;
}

.wpcf7 .csa-field {
	margin: 0 0 32px;
}

.wpcf7 .csa-field--submit {
	margin-bottom: 0;
}

/* Linha de duas colunas (Nome / Sobrenome). No original esse par divide a
   linha em toda landing page de cartão largo; nos cartões estreitos (Missa,
   Sobre nós) ele empilha sozinho -- por isso `flex-wrap` com base de 240px em
   vez de largura fixa. Calha de 8px, medida no original. */
.wpcf7 .csa-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.wpcf7 .csa-field-row > .csa-field {
	flex: 1 1 240px;
	min-width: 0;
}

/* `padding: 0` é intencional: o bundle legado traz `form label{padding:6px 0}`
   (default antigo da HubSpot), que somava 12px por rótulo -- 4 campos viravam
   ~48px a mais de altura em cada formulário. No original o rótulo tem
   exatamente 28px (18px / line-height 27.9px, sem padding). */
.wpcf7 .csa-field__label {
	display: block;
	padding: 0;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 27.9px;
	color: var(--wp--preset--color--base-3, #09152B);
}

/* Texto de ajuda do campo. No original é um `<legend class="hs-field-desc">`
   entre o rótulo e o campo, 18px/27.9px em cinza-azulado (medido). */
.wpcf7 .csa-field__help {
	display: block;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 18px;
	line-height: 27.9px;
	color: #647390;
}

/* No original o asterisco de obrigatório vem colado no texto do rótulo,
   dentro do próprio <label> ("E-mail*"). */
.wpcf7 .csa-field__req {
	color: var(--wp--preset--color--base-3, #09152B);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 32px;
	/* Borda de 1px: é o valor em 15 das 16 páginas com formulário no original
	   (63px de altura de campo). A Missa, de onde estas medidas foram tiradas
	   primeiro, é justamente a exceção com 2px -- e continua com 2px porque a
	   regra por página (`_legacy_layout_css`) carrega o `border-width` dela. */
	border: 1px solid #000;
	border-radius: 8px;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 18px;
	line-height: 20.7px;
	color: var(--wp--preset--color--base-3, #09152B);
}

.wpcf7 textarea {
	height: 160px;
	border-radius: 4px;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent, #D9843B);
	outline-offset: 1px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: #6b7280;
	opacity: 1;
}

/* Perguntas de múltipla escolha (rádio/checkbox): uma opção por linha, sem a
   listagem inline que o CF7 gera por padrão. */
/* O CF7 pode ou não envolver a opção num <label> (depende de
   `use_label_element`); nestes formulários ele NÃO envolve, então a caixa
   flex tem de ficar no próprio `.wpcf7-list-item`. Mirar só no `label` foi o
   que deixou o círculo desalinhado do texto na primeira tentativa. */
.wpcf7 .csa-field--choice .wpcf7-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.wpcf7 .csa-field--choice .wpcf7-list-item,
.wpcf7 .csa-field--choice .wpcf7-list-item label {
	display: flex;
	/* No original o círculo fica centrado na linha de 28px do rótulo
	   (radio 26px em y=730, rótulo em y=729/h=28). */
	align-items: center;
	gap: 8px;
	font-size: 18px;
	line-height: 27.9px;
	color: var(--wp--preset--color--base-3, #09152B);
}

/* Rádio/checkbox desenhados como no original: círculo de 26px com borda
   preta de 1px e fundo branco, 8px até o texto (medido em
   /pesquisa-de-opiniao). O controle nativo do navegador é bem menor. */
.wpcf7 .csa-field--choice input[type="radio"],
.wpcf7 .csa-field--choice input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.wpcf7 .csa-field--choice input[type="checkbox"] {
	border-radius: 4px;
}

.wpcf7 .csa-field--choice input[type="radio"]:checked::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--base-3, #09152B);
}

.wpcf7 .csa-field--choice input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 5px;
	border-radius: 2px;
	background: var(--wp--preset--color--base-3, #09152B);
}

.wpcf7 input[type="submit"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 24px;
	border: 1px solid var(--wp--preset--color--accent-dark, #B45F06);
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent, #D9843B);
	color: var(--wp--preset--color--base-2, #F7F9FC);
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 20.7px;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-dark, #B45F06);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 15px;
	color: var(--wp--preset--color--error, #DE2828);
}

.wpcf7 .wpcf7-response-output {
	margin: 24px 0 0;
	font-size: 16px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent, #D9843B);
}

/* O spinner do CF7 é permanente no DOM (só troca de visibilidade). Como o
   botão de envio é `display:block`, ele quebrava para a linha de baixo e
   somava ~36px de altura ao formulário inteiro, o tempo todo. Tirado do fluxo:
   aparece sobreposto ao botão durante o envio, sem ocupar espaço. */
.wpcf7 .csa-field--submit {
	position: relative;
}

.wpcf7 .wpcf7-spinner {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Botão "Publicar comentário" (comentários nativos do WP, templates/single.html)
   -- por padrão vem com a cor do tema pai, sem bater com o laranja da marca. */
.comment-form input#submit,
.wp-block-post-comments-form input[type="submit"] {
	background-color: var(--wp--preset--color--accent, #D9843B);
	border-color: var(--wp--preset--color--accent, #D9843B);
	color: var(--wp--preset--color--base-2, #F7F9FC);
}

.comment-form input#submit:hover,
.wp-block-post-comments-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-dark, #B45F06);
	border-color: var(--wp--preset--color--accent-dark, #B45F06);
}