/**
 * Formulário do Contact Form 7 (bloco "Formulário" do tema).
 *
 * O Contact Form 7 está instalado só no KingHost: onde ele não existe o bloco
 * não é impresso e este arquivo não encontra nada para estilizar.
 *
 * O bloco pode viver sobre o azul-marinho do rodapé ou sobre o branco de uma
 * página. Por isso os campos têm fundo próprio (branco) e o texto dos rótulos
 * herda a cor do contêiner: o contraste do formulário não depende do lugar.
 *
 * O anel de foco também troca de cor com o lugar: escuro sobre o branco da
 * página, claro sobre o azul do rodapé. É a única cor que depende do contexto
 * — nela o contraste é o que faz o foco existir.
 */

.plataformaosc-formulario {
	--posc-anel-foco: var( --wp--preset--color--marca );
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--30 );
}

/*
 * Na faixa azul-marinho do rodapé o bloco é uma seção: ganha respiro embaixo
 * e a linha de separação antes do copyright (color-mix deixa a linha na cor do
 * contêiner, sem apagar no fundo escuro). A linha mora DENTRO do bloco de
 * propósito: no KSWeb, sem Contact Form 7, nada é impresso e não sobra risco
 * solto na página. Numa página clara (formulário de contato) nada disso vale —
 * ali o bloco é só o formulário. O anel de foco também troca: claro sobre o
 * azul do rodapé, escuro sobre o branco da página.
 */
.has-marca-escura-background-color .plataformaosc-formulario {
	--posc-anel-foco: var( --wp--preset--color--azul-claro );
	padding-bottom: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--30 );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.25 );
	border-bottom: 1px solid color-mix( in srgb, currentColor 25%, transparent );
}

.plataformaosc-formulario__chamada {
	flex: 1 1 22rem;
}

.plataformaosc-formulario__titulo {
	margin: 0 0 0.5rem;
}

/*
 * O tema pinta todo título com o azul institucional (theme.json,
 * styles.elements.heading) — 1,23:1 sobre o azul-marinho do rodapé, ou seja,
 * título invisível. Sobre a faixa escura o título herda a cor do contêiner.
 * O tamanho continua sendo o do tema (medido: 28px no desktop, 20,7px no
 * celular, na escala fluida dele).
 */
.has-marca-escura-background-color .plataformaosc-formulario__titulo {
	color: inherit;
}

.plataformaosc-formulario__texto {
	margin: 0;
	max-width: 38ch;
	font-size: var( --wp--preset--font-size--small );
}

.plataformaosc-formulario__campo {
	flex: 1 1 26rem;
}

/*
 * O formulário do Contact Form 7 é uma sequência de <p> (um por campo).
 * Uma coluna só, de propósito: no rodapé o formulário vive na coluna da
 * direita (cerca de 30rem) e duas colunas ali apertariam o rótulo do aceite
 * em três ou quatro linhas. A largura máxima evita campos largos demais
 * quando o bloco for usado numa página inteira.
 */
.plataformaosc-formulario .wpcf7 form {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	align-items: start;
	gap: 0.875rem 1rem;
	max-width: 34rem;
	margin: 0;
	padding: 0;
}

.plataformaosc-formulario .wpcf7 form > p {
	margin: 0;
}

.plataformaosc-formulario .wpcf7 form label {
	display: block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.35;
}

/*
 * O Contact Form 7 embrulha o campo num <span>; sem display:block o rótulo e
 * o campo ficam na mesma linha e o rótulo curto (ex.: "Seu e-mail") parece
 * texto solto.
 */
.plataformaosc-formulario .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.25rem;
}

/*
 * O aceite vem no MESMO <p> do e-mail quando o formulário não tem linha em
 * branco antes dele (é o caso do formulário que está no ar), então o respiro
 * entre o campo e a caixa de seleção sai daqui.
 */
.plataformaosc-formulario .wpcf7-form-control-wrap[data-name^="acceptance"] {
	margin-top: 0.75rem;
}

.plataformaosc-formulario .wpcf7 input[type="text"],
.plataformaosc-formulario .wpcf7 input[type="email"],
.plataformaosc-formulario .wpcf7 input[type="tel"],
.plataformaosc-formulario .wpcf7 input[type="url"],
.plataformaosc-formulario .wpcf7 input[type="number"],
.plataformaosc-formulario .wpcf7 textarea,
.plataformaosc-formulario .wpcf7 select {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding: 0.625rem 0.75rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
	color: var( --wp--preset--color--contrast );
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--contrast-soft );
	border-radius: 4px;
}

.plataformaosc-formulario .wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

.plataformaosc-formulario .wpcf7 input::placeholder,
.plataformaosc-formulario .wpcf7 textarea::placeholder {
	color: var( --wp--preset--color--contrast-soft );
	opacity: 1;
}

.plataformaosc-formulario .wpcf7 input:focus-visible,
.plataformaosc-formulario .wpcf7 textarea:focus-visible,
.plataformaosc-formulario .wpcf7 select:focus-visible {
	outline: 3px solid var( --posc-anel-foco );
	outline-offset: 0;
}

/* Botão: mesma pílula verde dos botões do tema (theme.json, elements.button). */
.plataformaosc-formulario .wpcf7 input[type="submit"] {
	width: auto;
	padding: 0.875rem 1.5rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--destaque-escuro );
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.plataformaosc-formulario .wpcf7 input[type="submit"]:hover {
	background-color: var( --wp--preset--color--marca );
}

.plataformaosc-formulario .wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var( --posc-anel-foco );
	outline-offset: 2px;
}

/* Aceite (checkbox): caixa alinhada à primeira linha do texto, sem negrito. */
.plataformaosc-formulario .wpcf7 .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.plataformaosc-formulario .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

.plataformaosc-formulario .wpcf7 input[type="checkbox"] {
	flex: none;
	/*
	 * 1.5rem = 24px: o mínimo do SC 2.5.8 (Target Size). O rótulo em volta já dá
	 * uma área de toque bem maior, mas a caixa em si também atende.
	 */
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.15rem 0 0;
	accent-color: var( --wp--preset--color--destaque-escuro );
}

.plataformaosc-formulario .wpcf7 input[type="checkbox"]:focus-visible {
	outline: 3px solid var( --posc-anel-foco );
	outline-offset: 2px;
}

/*
 * Na faixa azul-marinho, a caixa marcada fica no verde institucional — 2,86:1
 * contra o fundo, abaixo dos 3:1 que o SC 1.4.11 pede para identificar o estado
 * do componente. O contorno claro devolve o contraste; no fundo branco da
 * página ele não é preciso (verde sobre branco = 4,5:1).
 */
.has-marca-escura-background-color .plataformaosc-formulario .wpcf7 input[type="checkbox"] {
	outline: 1px solid var( --wp--preset--color--base );
	outline-offset: 1px;
}

.plataformaosc-formulario .wpcf7 input[aria-invalid="true"],
.plataformaosc-formulario .wpcf7 textarea[aria-invalid="true"] {
	border-color: #a52122;
	border-width: 2px;
}

/*
 * Resposta do envio: herda a cor do contêiner (claro no rodapé, escuro na
 * página). O seletor repete o `form` de propósito — o styles.css do Contact
 * Form 7 (.wpcf7 form .wpcf7-response-output, que carrega DEPOIS deste
 * arquivo) traz 2em de margem; aqui a margem é a do bloco. A borda fica sem
 * declaração: é ela que diz se o envio foi aceito (verde) ou recusado
 * (vermelho), na cor do próprio plugin.
 */
.plataformaosc-formulario .wpcf7 form .wpcf7-response-output {
	margin: 0.25rem 0 0;
	padding: 0.625rem 0.875rem;
	font-size: var( --wp--preset--font-size--small );
	border-radius: 4px;
}

.plataformaosc-formulario .wpcf7 form.init .wpcf7-response-output,
.plataformaosc-formulario .wpcf7 form.resetting .wpcf7-response-output,
.plataformaosc-formulario .wpcf7 form.submitting .wpcf7-response-output {
	margin: 0;
	padding: 0;
}

/*
 * A etiqueta de erro precisa vencer o styles.css do plugin, que a deixa
 * vermelha e com o fundo transparente — ilegível sobre o azul do rodapé.
 */
.plataformaosc-formulario .wpcf7 .wpcf7-not-valid-tip {
	display: inline-block;
	margin: 0.25rem 0 0;
	padding: 0.125rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #a52122;
	background-color: rgba( 255, 255, 255, 0.92 );
	border-radius: 3px;
}

/*
 * Aviso de configuração do bloco. Só aparece no editor (o PHP não devolve
 * aviso nenhum na página pública): cinza, com borda tracejada, para não ser
 * confundido com conteúdo do site.
 */
.plataformaosc-formulario__aviso {
	margin: 0;
	padding: 0.625rem 0.875rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--contrast-soft );
	background-color: var( --wp--preset--color--base-alt );
	border: 1px dashed var( --wp--preset--color--contrast-soft );
	border-radius: 4px;
}