/*
 * Identidade visual nos plugins do município.
 *
 * Cada plugin traz o próprio CSS. Aqui o tema não o reescreve, só o ajusta por
 * cima, para a Carta de Serviços, o Licenciamento Ambiental, os Campeonatos, a
 * Defesa Civil, o Monitoramento e os formulários terem a cara do resto do site.
 *
 * Três camadas:
 *   1. As cores: os plugins de licenças, campeonatos e Defesa Civil usam os
 *      nomes de variável do tema antigo (--verde, --azul-escuro...); eles estão
 *      definidos com as cores da marca em 00-tokens.css.
 *   2. O Monitoramento usa variáveis próprias (--monitor-*), trocadas aqui.
 *   3. Tipografia, botões, campos de formulário e cartões (abaixo).
 *
 * Só é carregado em páginas internas (inc/enqueue.php).
 */

/* ------------------------------------------------------------------ *
 * Monitoramento: paleta própria trocada pela da marca
 * ------------------------------------------------------------------ */

html:root {
  --monitor-blue: var(--cor-azul-escuro);
  --monitor-blue-dark: var(--cor-azul-escuro-700);
  --monitor-blue-soft: var(--cor-azul-escuro-100);
  --monitor-rain: #8f5200;
  --monitor-rain-soft: var(--cor-laranja-100);
  --monitor-green: #1e6b34;
  --monitor-green-soft: var(--cor-verde-100);
  --monitor-purple: var(--cor-azul-escuro);
  --monitor-purple-soft: var(--cor-azul-escuro-100);
  --monitor-cyan: #176f94;
  --monitor-cyan-soft: var(--cor-azul-claro-100);
  --monitor-sun: #8f5200;
  --monitor-sun-soft: var(--cor-laranja-100);
  --monitor-yellow: #7d5700;
  --monitor-red: var(--c-erro);
  --monitor-gray-900: var(--cor-tinta);
  --monitor-gray-700: #555555;
  --monitor-gray-500: #6b6b6b;
  --monitor-gray-300: #d4d4d4;
  --monitor-gray-200: var(--cor-cinza-200);
  --monitor-gray-100: var(--cor-cinza-100);
  --monitor-radius: var(--raio);
  --monitor-shadow: var(--sombra-2);
}

body .monitor-page,
body .monitor-home {
  font-family: var(--f-corpo);
}

/* ------------------------------------------------------------------ *
 * Tipografia: títulos dos plugins na fonte da marca
 * ------------------------------------------------------------------ */

body .csc-wrapper h1,
body .csc-wrapper h2,
body .csc-wrapper h3,
body .csc-wrapper h4,
body .csc-service-card-header,
body .csc-group-header h3,
body .dcc-wrapper h1,
body .dcc-wrapper h2,
body .dcc-wrapper h3,
body .dcc-wrapper h4,
body .la-pg h2,
body .la-pg h3,
body .la-pg-card-nome,
body .la-lic-item-ident,
body .cap-portal h1,
body .cap-portal h2,
body .cap-portal h3,
body .cap-portal h4,
body .monitor-page h1,
body .monitor-page h2,
body .monitor-page h3,
body .monitor-card h3 {
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
}

body .csc-wrapper h2,
body .dcc-wrapper h2,
body .la-pg h2,
body .cap-portal h2,
body .monitor-page h2 {
  color: var(--c-titulo);
}

/* ------------------------------------------------------------------ *
 * Defesa Civil e Licenciamento: títulos em azul da marca, abertura em destaque
 * ------------------------------------------------------------------ */

body .dcc-section-title,
body .dcc-card-title,
body .la-pg-h2,
body .la-pg-h3 {
  color: var(--c-titulo);
  font-family: var(--f-titulo);
}

/* O plugin escreve cor e fundo do herói direto no HTML (style=""); só !important vence. */
body .dcc-wrapper .dcc-hero {
  background: linear-gradient(160deg, var(--cor-azul-escuro) 0%, var(--cor-azul-escuro-700) 100%) !important;
  border: 0;
  border-radius: var(--raio-g) !important;
  box-shadow: var(--sombra-2);
  color: var(--cor-branco);
}

body .dcc-wrapper .dcc-hero .dcc-hero-title,
body .dcc-wrapper .dcc-hero h1,
body .dcc-wrapper .dcc-hero h2 {
  color: var(--cor-branco) !important;
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
}

body .dcc-wrapper .dcc-hero p,
body .dcc-wrapper .dcc-hero li,
body .dcc-wrapper .dcc-hero a,
body .dcc-wrapper .dcc-hero div {
  color: rgba(255, 255, 255, 0.92) !important;
}

body .dcc-wrapper .dcc-hero .dcc-hero-title {
  color: var(--cor-branco) !important;
}

body .dcc-wrapper .dcc-hero a {
  text-decoration: underline;
}

html[data-contraste="alto"] body .dcc-wrapper .dcc-hero {
  background: #000000 !important;
  border: 2px solid #ffffff;
  box-shadow: none;
}

/* Carta de Serviços: nomes longos de responsáveis quebram em vez de vazar do cartão */
body .csc-service-card .csc-chip {
  max-width: 100%;
  white-space: normal;
}

/* ------------------------------------------------------------------ *
 * Botões: pílulas, como no resto do site
 * ------------------------------------------------------------------ */

body .csc-button,
body .dcc-button,
body .monitor-button,
body .la-lic-more,
body .la-lic-item-link {
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
  border-radius: 999px;
}

body .csc-button:focus-visible,
body .dcc-button:focus-visible,
body .monitor-button:focus-visible,
body .la-lic-more:focus-visible,
body .la-lic-item-link:focus-visible {
  outline: 3px solid var(--c-foco-anel);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Campos de formulário dos plugins
 * ------------------------------------------------------------------ */

body .csc-search input,
body .csc-toolbar select,
body .la-lic-input,
body .la-lic-select,
body .la-pg-busca input,
body .monitor-page input,
body .monitor-page select {
  font-family: var(--f-corpo);
  border-radius: var(--raio-p);
}

body .csc-search input:focus,
body .csc-toolbar select:focus,
body .la-lic-input:focus,
body .la-lic-select:focus,
body .la-pg-busca input:focus,
body .monitor-page input:focus,
body .monitor-page select:focus {
  border-color: var(--cor-azul-escuro);
  box-shadow: 0 0 0 3px rgba(53, 70, 150, 0.22);
  outline: none;
}

/* ------------------------------------------------------------------ *
 * WPForms (formulários do site)
 * ------------------------------------------------------------------ */

body .wpforms-container .wpforms-form {
  font-family: var(--f-corpo);
}

body .wpforms-container .wpforms-form .wpforms-field-label {
  color: var(--cor-tinta);
  font-family: var(--f-titulo);
  font-weight: 400;
}

body .wpforms-container .wpforms-form input[type="text"],
body .wpforms-container .wpforms-form input[type="email"],
body .wpforms-container .wpforms-form input[type="tel"],
body .wpforms-container .wpforms-form input[type="url"],
body .wpforms-container .wpforms-form input[type="number"],
body .wpforms-container .wpforms-form select,
body .wpforms-container .wpforms-form textarea {
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--cor-cinza-200);
  border-radius: var(--raio-p);
  font-family: var(--f-corpo);
}

body .wpforms-container .wpforms-form input:focus,
body .wpforms-container .wpforms-form select:focus,
body .wpforms-container .wpforms-form textarea:focus {
  border-color: var(--cor-azul-escuro);
  box-shadow: 0 0 0 3px rgba(53, 70, 150, 0.22);
  outline: none;
}

body .wpforms-container .wpforms-form .wpforms-submit {
  padding: 0.7rem 1.8rem;
  background: var(--cor-azul-escuro);
  border: 2px solid var(--cor-azul-escuro);
  border-radius: 999px;
  color: var(--cor-branco);
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
}

body .wpforms-container .wpforms-form .wpforms-submit:hover,
body .wpforms-container .wpforms-form .wpforms-submit:focus {
  background: var(--cor-azul-escuro-700);
  border-color: var(--cor-azul-escuro-700);
}

body .wpforms-container .wpforms-form .wpforms-error,
body .wpforms-container .wpforms-form label.wpforms-error {
  color: var(--c-erro);
}

body .wpforms-confirmation-container-full {
  background: var(--cor-verde-100);
  border: 1px solid var(--cor-verde);
  border-radius: var(--raio);
  color: #1e6b34;
}

/* ------------------------------------------------------------------ *
 * Alto contraste
 * ------------------------------------------------------------------ */

html[data-contraste="alto"] body .wpforms-container .wpforms-form .wpforms-submit {
  background: #ffff00;
  border-color: #ffff00;
  color: #000000;
}

html[data-contraste="alto"] body .wpforms-container .wpforms-form input,
html[data-contraste="alto"] body .wpforms-container .wpforms-form textarea,
html[data-contraste="alto"] body .wpforms-container .wpforms-form select {
  background: #000000;
  border-color: #ffffff;
  color: #ffffff;
}