/* Alto contraste (liga pelo painel de acessibilidade ou pelo botão "Contraste" do menu).
   O site inteiro usa variáveis de cor, então o modo troca a paleta em um lugar só:
   todos os azuis, o verde e o cinza-chumbo viram preto; o cinza claro de fundo vira
   branco; o laranja vira amarelo. Texto branco fica sobre preto e texto preto sobre branco. */

html[data-contraste="alto"] {
  --azul-principal: var(--contraste-fundo);
  --azul-secundario: var(--contraste-fundo);
  --azul-noite: var(--contraste-fundo);
  --azul-medio: var(--contraste-fundo);
  --verde: var(--contraste-fundo);
  --cinza-esverdeado: var(--contraste-fundo);
  --cinza-chumbo: var(--contraste-fundo);
  --cinza-default: var(--contraste-texto);
  --laranja: var(--contraste-destaque);
  --laranja-claro: var(--contraste-destaque);

  /* Cor do texto (ou da seta) que fica por cima de algo laranja: preto sobre o amarelo. */
  --texto-no-laranja: var(--contraste-fundo);

  /* Versões com transparência: o fundo do menu fica sólido e as películas sobre fotos
     escurecem mais, para o texto não depender da imagem. */
  --azul-principal-60: var(--contraste-fundo);
  --azul-noite-21: color-mix(in srgb, var(--contraste-fundo) 85%, transparent);
  --azul-noite-35: color-mix(in srgb, var(--contraste-fundo) 85%, transparent);
  --azul-noite-55: color-mix(in srgb, var(--contraste-fundo) 85%, transparent);
  --azul-noite-60: color-mix(in srgb, var(--contraste-fundo) 85%, transparent);
  --azul-noite-75: color-mix(in srgb, var(--contraste-fundo) 90%, transparent);
  --azul-noite-83: color-mix(in srgb, var(--contraste-fundo) 90%, transparent);
  --azul-noite-92: color-mix(in srgb, var(--contraste-fundo) 95%, transparent);
}

/* O amarelo some sobre o branco. Nas seções de fundo claro o "laranja" vira preto (e o
   texto por cima dele, branco).
   Ao criar uma seção nova de fundo claro, acrescente a classe dela aqui; se ela tiver
   um bloco escuro por dentro, acrescente o bloco na lista seguinte. */
html[data-contraste="alto"] :is(
  .transicao,
  .sobre,
  .news,
  .texto-colunas:not(.texto-colunas--azul),
  .pilares,
  .manual,
  .codigo,
  .funcionalidades,
  .conteudo-padrao,
  .contato,
  .mapa,
  .formulario--claro,
  .canal__atencao-icone,
  .acessibilidade
) {
  --laranja: var(--contraste-fundo);
  --texto-no-laranja: var(--contraste-texto);
}

html[data-contraste="alto"] :is(.faixa, .news__destaque, .news__newsletter, .contato__form, .contato__card--destaque) {
  --laranja: var(--contraste-destaque);
  --texto-no-laranja: var(--contraste-fundo);
}

/* Botões: nas quatro combinações (normal e hover, laranja e branco) o texto e a seta
   escolhem a cor que contrasta com o que está atrás deles. */
html[data-contraste="alto"] .btn {
  --btn-texto: var(--texto-no-laranja);
  --btn-seta: var(--contraste-fundo);
}

html[data-contraste="alto"] .btn:hover,
html[data-contraste="alto"] .btn:focus-visible {
  --btn-texto: var(--contraste-fundo);
  --btn-seta: var(--texto-no-laranja);
}

html[data-contraste="alto"] .btn--branco {
  --btn-texto: var(--contraste-fundo);
  --btn-seta: var(--texto-no-laranja);
}

html[data-contraste="alto"] .btn--branco:hover,
html[data-contraste="alto"] .btn--branco:focus-visible {
  --btn-texto: var(--texto-no-laranja);
  --btn-seta: var(--contraste-fundo);
}

html[data-contraste="alto"] .btn--contorno {
  --btn-texto: var(--contraste-fundo);
  --btn-seta: var(--contraste-texto);
}

html[data-contraste="alto"] .btn--contorno:hover,
html[data-contraste="alto"] .btn--contorno:focus-visible {
  --btn-texto: var(--contraste-texto);
  --btn-seta: var(--contraste-fundo);
}

/* Botão "laranja, hover azul" (btn--laranja-azul, para fundo claro): aqui o azul é preto, então o texto fica
   branco e o círculo branco com seta preta. */
html[data-contraste="alto"] .btn--laranja-azul:is(:hover, :focus-visible) {
  --btn-texto: var(--contraste-texto);
  --btn-circulo: var(--contraste-texto);
  --btn-seta: var(--contraste-fundo);
}

html[data-contraste="alto"] .news__chip--laranja {
  color: var(--texto-no-laranja);
}

/* Cartão laranja da chamada final: preto com contorno amarelo, para o texto branco
   continuar legível. No hover o botão e o link ficam amarelos (no normal ficam azuis, que
   aqui seriam pretos sobre preto). */
html[data-contraste="alto"] .cta__card {
  background-color: var(--contraste-fundo);
  box-shadow: inset 0 0 0 0.3rem var(--contraste-destaque);
}

html[data-contraste="alto"] .cta__card .laranja {
  color: var(--contraste-destaque);
}

html[data-contraste="alto"] .cta__card .btn--branco:hover,
html[data-contraste="alto"] .cta__card .btn--branco:focus-visible {
  --btn-fundo: var(--contraste-destaque);
  --btn-borda: var(--contraste-destaque);
  --btn-texto: var(--contraste-fundo);
  --btn-circulo: var(--contraste-fundo);
  --btn-seta: var(--contraste-destaque);
}

html[data-contraste="alto"] .cta__card .link-seta--claro:hover,
html[data-contraste="alto"] .cta__card .link-seta--claro:focus-visible {
  --link-texto: var(--contraste-texto);
  --link-linha: var(--contraste-destaque);
  --link-seta: var(--contraste-destaque);
}

/* Cartões da PPP: no hover o fundo vira preto, igual ao da seção. Contorno amarelo mostra a mudança. */
html[data-contraste="alto"] .ppp__card:hover {
  box-shadow: inset 0 0 0 0.3rem var(--contraste-destaque);
}

/* Seta do card grande de notícias: no hover o círculo vira amarelo e a seta preta. */
html[data-contraste="alto"] .news__destaque:hover .news__seta {
  color: var(--texto-no-laranja);
}

/* Redes sociais do rodapé: no hover o círculo vira amarelo e o ícone preto. */
html[data-contraste="alto"] .rodape a.rodape__rede:hover {
  color: var(--contraste-fundo);
}

/* Botão Enviar dos formulários: a seta é preta sobre o círculo branco; no hover o círculo
   fica da cor do "laranja" do lugar e a seta troca para combinar. */
html[data-contraste="alto"] .formulario .wpcf7-submit {
  color: var(--texto-no-laranja);
}

html[data-contraste="alto"] .form__enviar::after {
  background-color: var(--contraste-fundo);
}

html[data-contraste="alto"] .form__enviar:has(.wpcf7-submit:hover:not(:disabled))::after,
html[data-contraste="alto"] .form__enviar:has(.wpcf7-submit:focus-visible)::after {
  background-color: var(--texto-no-laranja);
}

/* Página Contato: o ícone do card em destaque fica preto sobre o círculo amarelo; nas redes o
   círculo (preto na seção clara) vira amarelo com ícone preto no hover. */
html[data-contraste="alto"] .contato__card--destaque .contato__card-icone::before {
  background-color: var(--contraste-fundo);
}

html[data-contraste="alto"] .contato__rede:hover,
html[data-contraste="alto"] .contato__rede:focus-visible {
  background-color: var(--contraste-destaque);
}

html[data-contraste="alto"] .contato__rede:hover .contato__rede-icone,
html[data-contraste="alto"] .contato__rede:focus-visible .contato__rede-icone {
  background-color: var(--contraste-fundo);
}

/* Número decorativo dos cartões da PPP: no normal é quase transparente. */
html[data-contraste="alto"] .ppp__numero {
  color: var(--contraste-texto);
}

/* O branco e o cinza claro de fundo viram a mesma cor: os elementos precisam de
   contorno para continuar aparecendo. Branco sobre fundo preto, preto sobre branco. */
html[data-contraste="alto"] :is(.cabecalho__barra, .cookies) {
  box-shadow: inset 0 0 0 0.2rem var(--contraste-texto);
}

html[data-contraste="alto"] :is(
  .acessibilidade__fechar,
  .acessibilidade__passo,
  .acessibilidade__opcao,
  .funcionalidades__card,
  .news__card,
  .contato__card:not(.contato__card--destaque),
  .mapa__selo,
  .externo
) {
  box-shadow: inset 0 0 0 0.2rem var(--contraste-fundo);
}

/* Foco bem visível em qualquer fundo. */
html[data-contraste="alto"] :focus-visible {
  outline: 0.3rem solid var(--contraste-destaque);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.6rem var(--contraste-fundo);
}