/*
 * Formulário nativo da HubSpot renderizado como HTML puro na própria página
 * ("raw HTML form"), usado hoje só em "CSA - Pesquisa de Opinião" (wp_id 24).
 *
 * Contexto: é o único formulário `embedType: V4` que ainda usa o embed oficial
 * da HubSpot -- ele tem reCAPTCHA, o que impede o envio pela API que os outros
 * 16 usam (ver CLAUDE.md). Enquanto saía pelo embed comum vinha dentro de um
 * <iframe> cross-origin, inalcançável por CSS; depois que o cliente ativou
 * "raw HTML form" no painel da HubSpot, o formulário é injetado inline no DOM
 * (`<form class="hsfc-Form">`) e passa a ser estilizável daqui.
 *
 * COMO ESTILIZAR (não repetir o caminho errado): o renderizador `hsfc-*` traz
 * a própria folha de estilo, com seletores `[data-hsfc-id="Renderer"] .hsfc-*`
 * -- especificidade (0,2,0) e carregada DEPOIS do tema, então escrever
 * `.hs-form-html .hsfc-TextInput { ... }` (mesma especificidade, antes na
 * cascata) não tem efeito nenhum. Foi assim que a primeira versão deste arquivo
 * não pegou borda, raio, padding nem cor do botão.
 *
 * O caminho certo é a API de tema da própria HubSpot: as regras dela leem
 * ~76 custom properties `--hsf-*`. Definindo essas variáveis aqui, a folha da
 * HubSpot aplica os nossos valores sozinha, sem `!important` e sem disputa de
 * especificidade.
 *
 * Os valores abaixo foram lidos das variáveis resolvidas no formulário real em
 * https://canalsantosanjos.ipco.org.br/pesquisa-de-opiniao (2026-08-28) -- são
 * os mesmos que `cf7-form.css` reproduz nos outros formulários do site.
 */

.hs-form-html {
	/* Base */
	--hsf-global__color: #09152B;
	--hsf-global__font-family: "times new roman", times;
	--hsf-global__font-size: 1.125rem;
	--hsf-global-error__color: #de2828;

	/* Cartão */
	--hsf-background__background-color: #FFFFFF;
	--hsf-background__border-color: #FFFFFF;
	--hsf-background__border-style: solid;
	--hsf-background__border-width: 1px;
	--hsf-background__border-radius: 0;
	--hsf-background__padding: 48px;

	/* Espaçamento entre linhas/campos */
	--hsf-row__vertical-spacing: 32px;
	--hsf-row__horizontal-spacing: 32px;
	--hsf-module__vertical-spacing: 8px;

	/* Texto corrido dentro do formulário */
	--hsf-richtext__color: #09152B;
	--hsf-richtext__font-family: "times new roman", times;
	--hsf-richtext__font-size: 1.125rem;
	--hsf-heading__color: #09152B;
	--hsf-heading__font-family: "times new roman", times;
	--hsf-heading__text-shadow: none;

	/* Rótulo */
	--hsf-field-label__color: #09152B;
	--hsf-field-label__font-family: "times new roman", times;
	--hsf-field-label__font-size: 1.125rem;
	--hsf-field-label-requiredindicator__color: #de2828;
	--hsf-field-description__color: #647390;
	--hsf-field-footer__color: #647390;

	/* Campos de texto (63px de altura = 20px de padding + borda de 1px) */
	--hsf-field-input__background-color: #FFFFFF;
	--hsf-field-input__border-color: #000000;
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-radius: 8px;
	--hsf-field-input__color: #09152B;
	--hsf-field-input__font-family: "times new roman", times;
	--hsf-field-input__padding: 20px 32px;
	--hsf-field-input__placeholder-color: #7d8ca5;

	/* Textarea: raio pela metade do campo, como no original */
	--hsf-field-textarea__background-color: #FFFFFF;
	--hsf-field-textarea__border-color: #000000;
	--hsf-field-textarea__border-style: solid;
	--hsf-field-textarea__border-radius: calc(8px * 0.5);
	--hsf-field-textarea__color: #09152B;
	--hsf-field-textarea__font-family: "times new roman", times;
	--hsf-field-textarea__padding: 20px 32px;

	/* Rádio e checkbox: círculo/quadrado de 26px com borda preta de 1px */
	--hsf-field-radio__background-color: #fff;
	--hsf-field-radio__border-color: #000000;
	--hsf-field-radio__border-style: solid;
	--hsf-field-radio__border-width: 1px 1px 1px 1px;
	--hsf-field-radio__color: #000000;
	--hsf-field-radio__padding: calc(24px / 2);
	--hsf-field-checkbox__background-color: #fff;
	--hsf-field-checkbox__border-color: #000000;
	--hsf-field-checkbox__border-style: solid;
	--hsf-field-checkbox__border-width: 1px 1px 1px 1px;
	--hsf-field-checkbox__color: #000000;
	--hsf-field-checkbox__padding: calc(24px / 2);

	/* Botão de envio: laranja da marca, largura toda */
	--hsf-button__background-color: #d9843b;
	--hsf-button__background-image: none;
	--hsf-button__border-color: #B45F06;
	--hsf-button__border-style: solid;
	--hsf-button__border-width: 1px;
	--hsf-button__border-radius: 8px;
	--hsf-button__box-shadow: none;
	--hsf-button__color: #F7F9FC;
	--hsf-button__font-family: "times new roman", times;
	--hsf-button__font-size: 1.125rem;
	--hsf-button__font-weight: 500;
	--hsf-button__padding: 20px 24px;
	--hsf-button__width: 100%;

	/* Hover/focus. O original traz `#6854E8` (roxo, default da HubSpot que
	   sobrou) na borda -- não reproduzido de propósito: sobre o botão laranja
	   é defeito visível na página deles. Aqui segue o accent-dark, igual ao
	   hover dos demais formulários do site (cf7-form.css). */
	--hsf-button--hover__background-color: #88501f;
	--hsf-button--hover__border-color: #B45F06;
	--hsf-button--hover__color: #F7F9FC;
	--hsf-button--focus__background-color: #88501f;
	--hsf-button--focus__border-color: #B45F06;
	--hsf-button--focus__color: #F7F9FC;

	--hsf-erroralert__color: #de2828;
	--hsf-erroralert__font-family: "times new roman", times;
}

/* Única regra que as variáveis não resolvem: o bundle legado traz
   `form label { padding: 6px 0 }` (default antigo da HubSpot, mesma armadilha
   já documentada em cf7-form.css), que soma 12px em cada rótulo -- e a folha
   do renderizador não define padding de label, então não há variável para
   sobrescrever. */
.hs-form-html label {
	padding: 0;
}