/* Formulários do Contact Form 7 (rodapé, Ética, e os próximos).
   O HTML do formulário usa as classes form__* (ver o formulário no painel do CF7) e o bloco
   que o contém leva .formulario mais uma variante de cor:
     .formulario--escuro  sobre fundo azul (rodapé)
     .formulario--claro   dentro de card branco
   As cores e medidas que mudam entre as variantes são variáveis --form-*. */

.formulario {
  --form-campo-fundo: var(--branco-10);
  --form-campo-borda: var(--branco-10);
  --form-campo-texto: var(--branco);
  --form-rotulo: var(--branco);
  --form-borda-foco: var(--branco);
  --form-erro-texto: var(--laranja-claro);
  --form-erro-borda: var(--laranja-claro);
  --form-resposta: var(--branco-20);
  --form-hover-fundo: var(--branco);
  --form-hover-texto: var(--azul-principal);
  --form-gap: 1.6rem;
  --form-padding-x: 2.4rem;
  --form-textarea: 14rem;
  --form-check: 2rem;
}

.formulario--claro {
  --form-campo-fundo: var(--cinza-default);
  --form-campo-borda: var(--azul-principal);
  --form-campo-texto: var(--cinza-chumbo);
  --form-rotulo: var(--azul-principal);
  --form-borda-foco: var(--azul-principal);
  --form-erro-texto: var(--azul-principal);
  --form-erro-borda: var(--laranja);
  --form-resposta: var(--azul-principal);
  --form-hover-fundo: var(--azul-principal);
  --form-hover-texto: var(--branco);
  --form-gap: 2.4rem;
  --form-padding-x: 2rem;
  --form-textarea: 18rem;
  --form-check: 2.2rem;
  color: var(--cinza-chumbo);
}

.formulario .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap);
}

.form__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--form-gap);
}

.form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.form__rotulo {
  color: var(--form-rotulo);
  font: var(--nav-link);
}

/* O CF7 envolve cada campo num <span> inline e o campo é inline-block: os dois deixam uma
   faixa de uns 8px embaixo (espaço da linha de texto). display block nos dois resolve. */
.formulario .wpcf7-form-control-wrap {
  display: block;
}

.formulario input[type="text"],
.formulario input[type="tel"],
.formulario input[type="email"],
.formulario select,
.formulario textarea {
  display: block;
  width: 100%;
  height: 6rem;
  padding: 0 var(--form-padding-x);
  border: 0.1rem solid var(--form-campo-borda);
  border-radius: var(--raio-md);
  background-color: var(--form-campo-fundo);
  color: var(--form-campo-texto);
  font: var(--body-3);
}

.formulario textarea {
  height: var(--form-textarea);
  padding-block: 1.8rem;
  resize: vertical;
}

.formulario ::placeholder {
  color: var(--form-campo-texto);
  opacity: 1;
}

/* Lista suspensa: a seta é um ícone em máscara, na cor do texto. */
.formulario select {
  padding-right: 5.2rem;
  appearance: none;
  cursor: pointer;
}

.formulario .wpcf7-form-control-wrap:has(select) {
  position: relative;
}

.formulario .wpcf7-form-control-wrap:has(select)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 2rem;
  height: 2rem;
  background-color: var(--form-campo-texto);
  -webkit-mask: url("../../img/icones/chevron-baixo.svg") center / contain no-repeat;
  mask: url("../../img/icones/chevron-baixo.svg") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible {
  border-color: var(--form-borda-foco);
  outline: 0.2rem solid var(--laranja);
  outline-offset: 0.2rem;
}

.formulario .wpcf7-not-valid {
  border-color: var(--form-erro-borda);
}

.formulario .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.8rem;
  padding-inline: 0.4rem;
  color: var(--form-erro-texto);
  font: var(--body-4);
}

.form__consentimento {
  font: var(--body-4);
}

.form__consentimento .wpcf7-list-item {
  margin: 0;
}

.form__consentimento label {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  cursor: pointer;
}

.form__consentimento input {
  flex-shrink: 0;
  width: var(--form-check);
  height: var(--form-check);
  margin: 0.1rem 0 0;
  accent-color: var(--laranja);
  cursor: pointer;
}

/* Link da Política de Privacidade: sublinhado e laranja no hover (igual ao resto do rodapé). */
.form__consentimento a {
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s ease;
}

.form__consentimento a:hover,
.form__consentimento a:focus-visible {
  color: var(--laranja);
}

/* Campo-isca contra robôs: fora da tela para quem enxerga, preenchido só por robô. */
.hp-campo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botão Enviar: pílula laranja com o círculo da seta desenhado por pseudo-elementos.
   A altura é mínima e o texto pode quebrar de linha, para o botão caber na tela
   quando o visitante aumenta o texto no painel de acessibilidade. */
.form__enviar {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.formulario .wpcf7-submit {
  min-height: 5.6rem;
  max-width: 100%;
  padding: 1.2rem 7.2rem 1.2rem 3.2rem;
  border: 0;
  border-radius: 99.9rem;
  background-color: var(--laranja);
  color: var(--branco);
  font: var(--button);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.formulario .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form__enviar::before,
.form__enviar::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  transform: translateY(-50%);
  pointer-events: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.form__enviar::before {
  top: 50%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--branco);
}

.form__enviar::after {
  top: 50%;
  right: 1.8rem;
  width: 2rem;
  height: 2rem;
  background-color: var(--laranja);
  -webkit-mask: url("../../img/icones/seta.svg") center / contain no-repeat;
  mask: url("../../img/icones/seta.svg") center / contain no-repeat;
}

.form__enviar:has(.wpcf7-submit:disabled)::before,
.form__enviar:has(.wpcf7-submit:disabled)::after {
  opacity: 0.6;
}

.form__enviar:has(.wpcf7-submit:hover:not(:disabled)) .wpcf7-submit,
.form__enviar:has(.wpcf7-submit:focus-visible) .wpcf7-submit {
  background-color: var(--form-hover-fundo);
  color: var(--form-hover-texto);
}

.form__enviar:has(.wpcf7-submit:hover:not(:disabled))::before,
.form__enviar:has(.wpcf7-submit:focus-visible)::before {
  background-color: var(--laranja);
}

.form__enviar:has(.wpcf7-submit:hover:not(:disabled))::after,
.form__enviar:has(.wpcf7-submit:focus-visible)::after {
  background-color: var(--branco);
}

.formulario .wpcf7-submit:focus-visible {
  outline: 0.2rem solid var(--form-borda-foco);
  outline-offset: 0.3rem;
}

.form__enviar .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(100% + 1.6rem);
  margin: 0;
  background-color: var(--branco-70);
  transform: translateY(-50%);
}

/* Mensagem de resultado do CF7 (enviado, erro, spam). */
.formulario .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 1.2rem 2rem;
  border: 0.1rem solid var(--form-resposta);
  border-radius: var(--raio-md);
  color: var(--form-campo-texto);
  font: var(--body-4);
  text-align: center;
}

.formulario .wpcf7 form:not(.init):not(.resetting):not(.submitting) .wpcf7-response-output {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.2rem;
}

.formulario .wpcf7 form.invalid .wpcf7-response-output,
.formulario .wpcf7 form.failed .wpcf7-response-output,
.formulario .wpcf7 form.spam .wpcf7-response-output,
.formulario .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--form-erro-borda);
}

.formulario .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--form-borda-foco);
}

@media (max-width: 991px) {
  .form__linha {
    grid-template-columns: minmax(0, 1fr);
  }
}