/*
Theme Name: PROCON Campina Grande
Theme URI: https://procon.campinagrande.pb.gov.br
Author: Prefeitura Municipal de Campina Grande
Description: Tema institucional do PROCON de Campina Grande. Tema de blocos (FSE), sem page builder e sem dependencia de servico externo — a licenca e do municipio. Substitui o tema comercial Newspaper (tagDiv) usado ate 2026.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: procon
Tags: full-site-editing, block-styles, accessibility-ready, government
*/

@import url('assets/fontes.css');

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

/* Toda imagem cabe no seu container. Sem isto, as fotos recuperadas — que vem
   com width/height originais no HTML (ha varias de 2000px e 2560px) — estouram
   a largura e a pagina inteira rola de lado no celular. */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Rede de seguranca: nenhuma pagina deve rolar horizontalmente. */
html, body { overflow-x: hidden; }

/* Palavra comprida (URL colada, nome de arquivo) nao empurra o layout. */
body { overflow-wrap: break-word; }

/* ------------------------------------------------------------------
   Acessibilidade — obrigacao legal de site publico (eMAG/WCAG), nao enfeite
   ------------------------------------------------------------------ */

/* Atalhos de teclado: invisiveis ate receberem foco, entao aparecem como
   primeiro item do tab — como no site antigo (ir para conteudo/menu/busca/
   rodape). */
.procon-atalhos-teclado { position: relative; z-index: 999; }
.procon-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 20px;
  background: var(--wp--preset--color--dourado);
  color: var(--wp--preset--color--azul-escuro);
  font-weight: 700;
  border-radius: 0 0 8px 0;
  white-space: nowrap;
}
.procon-pular:focus { left: 0; }

/* Controles A+ / A- / A */
.procon-fonte { display: inline-flex; gap: 4px; align-items: center; }
.procon-fonte button {
  min-width: 26px;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 4px;
  padding: 1px 6px !important;
  line-height: 1.5;
}
.procon-fonte button:hover { background: rgba(255, 255, 255, .14); }

/* Foco sempre visivel e com contraste — nunca remover o outline. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--dourado);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste — exigido pelo eMAG. Alternado por assets/acessibilidade.js,
   que grava a escolha no localStorage. */
body.procon-alto-contraste {
  background: #000 !important;
  color: #fff !important;
}
body.procon-alto-contraste :where(p, li, span, h1, h2, h3, h4, td, th, figcaption, time, label) {
  color: #fff !important;
}
body.procon-alto-contraste :where(a, a *) { color: #ffe600 !important; }
body.procon-alto-contraste :where(header, footer, section, article, aside, div, main) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: #fff !important;
}
body.procon-alto-contraste :where(.procon-card, .procon-servico, .wp-block-post) {
  border: 1px solid #fff !important;
}
body.procon-alto-contraste img { filter: grayscale(1) contrast(1.2); }
body.procon-alto-contraste :where(button, .wp-block-button__link) {
  background: #ffe600 !important;
  color: #000 !important;
}

/* ------------------------------------------------------------------
   Cabecalho — sem folga entre as faixas
   ------------------------------------------------------------------ */

/* As partes do cabecalho se encostam. O blockGap de 24px do theme.json vale
   para o conteudo, mas dentro do cabecalho ele virava uma faixa branca de 24px
   entre a barra utilitaria e a barra do menu — e no celular, onde a utilitaria
   nao existe, sobrava essa faixa solta no topo da tela. */
.procon-cabecalho > * { margin-block-start: 0; margin-block-end: 0; }

/* O mesmo blockGap separava o cabecalho do conteudo: outra faixa branca de
   24px, visivel porque o hero e colorido e deve encostar no menu.
 *
 * O alvo e o filho direto de .wp-site-blocks, nao o .procon-cabecalho: o bloco
 * template-part embrulha o cabecalho num <header class="wp-block-template-part">,
 * entao o <main> e irmao DESSE wrapper — um seletor `.procon-cabecalho + main`
 * nunca casa.
 *
 * Zerar o blockGap dos dois lados do <main> foi um erro: era ele que dava o
 * unico respiro entre o conteudo e o rodape, e sem ele os cartoes encostavam na
 * faixa azul-escura em todo o site. O respiro nao pode morar numa folga entre
 * irmaos que o cabecalho precisa ver zerada — mora no padding do <main>, logo
 * abaixo. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }

/* ------------------------------------------------------------------
   Respiro vertical do conteudo — um lugar so
   ------------------------------------------------------------------ */

/* Antes isto era feito de tres maneiras diferentes: `style` inline no <main> de
   page/single, o padding da classe .procon-secao em archive/index/search, e
   nada na home (de proposito) nem na 404 (esquecido). Nenhuma regra amarrava as
   tres — a 404 nao colava so porque o blockGap a socorria, e colou no instante
   em que ele saiu. Template novo herda o respiro certo por padrao. */
.wp-site-blocks > main {
  padding-block-start: clamp(28px, 4vw, 40px);
  padding-block-end: clamp(48px, 8vw, 72px);
}

/* Excecao: faixa de cor de largura total encosta na faixa vizinha. O respiro
   ali abriria uma tira branca entre duas areas de cor — o hero deve nascer
   colado no menu, e a chamada final deve morrer colada no rodape. A regra
   pergunta pela faixa, nao pela pagina: continua certa se ela mudar de lugar. */
.wp-site-blocks > main:has(> .procon-hero:first-child) { padding-block-start: 0; }
.wp-site-blocks > main:has(> .procon-chamada:last-child) { padding-block-end: 0; }

/* ------------------------------------------------------------------
   Barra utilitaria
   ------------------------------------------------------------------ */
.procon-utilitaria {
  background: var(--wp--preset--color--azul-profundo);
  color: #A9BBC6;
  font-size: 12.5px;
}
.procon-utilitaria a { color: #A9BBC6; text-decoration: none; }
.procon-utilitaria a:hover { color: #fff; text-decoration: underline; }
.procon-utilitaria__interno {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.procon-utilitaria__acoes { display: flex; gap: 18px; align-items: center; }
.procon-utilitaria button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 0;
}
.procon-utilitaria button:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------
   Cabecalho
   ------------------------------------------------------------------ */
.procon-topo {
  background: var(--wp--preset--color--azul-escuro);
  color: #fff;
}
.procon-topo a { color: #fff; }
.procon-topo .wp-block-site-title a { text-decoration: none; }
.procon-topo__interno {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.procon-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.procon-marca__nome { font-family: var(--wp--preset--font-family--titulo); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.procon-marca__nome span { font-weight: 500; opacity: .92; }

/* Chip branco do logo. O logo oficial e azul-marinho + dourado sobre fundo
   transparente: aplicado direto no cabecalho, a parte azul-marinho dele
   praticamente desaparece — e no tema azul, mais ainda, por ser matiz vizinho.
   O chip devolve o contraste sem alterar a identidade visual. */
.procon-topo .wp-block-site-logo { line-height: 0; }
.procon-topo .wp-block-site-logo img {
  height: 38px;
  width: auto;
  max-width: none;
  background: #fff;
  padding: 7px 12px;
  border-radius: 8px;
  box-sizing: content-box;
}

/* logo | menu (ocupa o meio) | busca — o menu preso a direita com
   `margin-left:auto` era o que abria 468px de buraco depois do logo. */
.procon-menu { flex: 1 1 auto; }

/* Busca do cabecalho */
.procon-busca-topo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  transition: background .15s ease, border-color .15s ease;
}
.procon-busca-topo:focus-within {
  background: #fff;
  border-color: #fff;
}
.procon-busca-topo input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: #fff;
  width: 148px;
  min-width: 0;
  padding: 5px 0;
}
.procon-busca-topo input::placeholder { color: rgba(255, 255, 255, .7); }
.procon-busca-topo:focus-within input { color: var(--wp--preset--color--texto); }
.procon-busca-topo:focus-within input::placeholder { color: var(--wp--preset--color--texto-suave); }
.procon-busca-topo button {
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
  padding: 6px;
  border-radius: 999px;
  display: flex;
  line-height: 0;
}
.procon-busca-topo button svg { width: 17px; height: 17px; }
.procon-busca-topo:focus-within button { color: var(--wp--preset--color--azul); }
.procon-busca-topo button:hover { background: rgba(255, 255, 255, .16); }
.procon-busca-topo:focus-within button:hover { background: var(--wp--preset--color--fundo-suave); }
.procon-menu .wp-block-navigation-item__content {
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 2px;
}
.procon-menu .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Dropdown do desktop.
 *
 * Os !important abaixo nao sao preguica. O `overlayBackgroundColor` que pinta o
 * painel do CELULAR faz o WordPress carimbar a classe
 * `.has-azul-escuro-background-color` tambem no submenu — e as classes de
 * preset do core vem com !important. No desktop isso deixava o dropdown azul
 * escuro com texto escuro: ilegivel. Nenhuma especificidade vence um
 * !important; so outro. */
.procon-topo .procon-menu .wp-block-navigation__submenu-container {
  background-color: #fff !important;
  color: var(--wp--preset--color--texto) !important;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 18px 40px -22px rgba(11, 61, 40, .5);
}
.procon-topo .procon-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--texto) !important;
  border-radius: 6px;
  padding: 8px 12px;
}
.procon-topo .procon-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--fundo-suave);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.procon-hero {
  background: var(--wp--preset--gradient--hero);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.procon-hero h1, .procon-hero h2 { color: #fff; }
/* Hero enxugado de 488px para ~380px. Quase toda aquela altura era gradiente
   liso, e ela empurrava as noticias para baixo da dobra — quem chega quer ver
   o que o PROCON publicou, nao o degrade. */
.procon-hero__interno {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 24px 66px;
  text-align: center;
}
.procon-hero__selo {
  display: inline-block;
  background: var(--wp--preset--color--dourado);
  color: var(--wp--preset--color--azul-escuro);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.procon-hero h1 { margin-bottom: 10px; }
.procon-hero__sub { color: #CBDAE0; font-size: 15px; margin: 0 auto 18px; max-width: 560px; }
.procon-hero__busca {
  display: flex;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}
.procon-hero__busca input {
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--wp--preset--color--texto);
  background: none;
  min-width: 0;
}
.procon-hero__busca button {
  background: var(--wp--preset--color--azul);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.procon-hero__busca button:hover { background: var(--wp--preset--color--azul-escuro); }
.procon-hero__atalhos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.procon-hero__atalhos a {
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 6px 14px;
}
.procon-hero__atalhos a:hover { background: rgba(255, 255, 255, .14); }

/* Faixa listrada dourada — remete ao cordao do Sao Joao; decorativa. */
.procon-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: repeating-linear-gradient(
    -45deg,
    var(--wp--preset--color--dourado) 0 14px,
    var(--wp--preset--color--azul-escuro) 14px 28px
  );
}

/* ------------------------------------------------------------------
   Cartoes de servico
   ------------------------------------------------------------------ */
.procon-servicos {
  max-width: 1120px;
  margin: -46px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}
.procon-servico {
  background: #fff;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
}
.procon-servico:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px rgba(11, 61, 40, .55);
  text-decoration: none;
}
.procon-servico__icone {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--wp--preset--color--fundo-suave);
  color: var(--wp--preset--color--azul);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.procon-servico__icone svg { width: 21px; height: 21px; }
.procon-servico__titulo {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--wp--preset--color--azul-escuro);
  margin: 0 0 4px;
}
.procon-servico__desc { font-size: 13px; color: var(--wp--preset--color--texto-suave); margin: 0; }

/* ------------------------------------------------------------------
   Secoes
   ------------------------------------------------------------------ */
.procon-secao { max-width: 1120px; margin: 0 auto; padding: 56px 24px 0; }
.procon-secao__rotulo {
  color: var(--wp--preset--color--azul);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.procon-secao__titulo {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 800;
  color: var(--wp--preset--color--azul-escuro);
  margin: 0 0 26px;
  letter-spacing: -0.01em;
}
.procon-secao__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.procon-verlink { color: var(--wp--preset--color--azul); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.procon-verlink:hover { text-decoration: underline; }

/* Lista de atalhos em cartao */
.procon-lista { display: grid; gap: 10px; }
.procon-lista a {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.procon-lista a:hover {
  border-color: var(--wp--preset--color--azul);
  background: #F4F7F8;
  text-decoration: none;
}
.procon-lista svg { width: 22px; height: 22px; color: var(--wp--preset--color--azul); flex-shrink: 0; }
.procon-lista strong {
  display: block;
  font-family: var(--wp--preset--font-family--titulo);
  font-size: 14.5px;
  color: var(--wp--preset--color--azul-escuro);
}
.procon-lista span { font-size: 12.5px; color: var(--wp--preset--color--texto-suave); }

/* Acesso rapido — os 9 atalhos que o site antigo tinha na home */
.procon-atalhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.procon-atalhos a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--wp--preset--color--azul);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.procon-atalhos a:hover {
  background: var(--wp--preset--color--azul-escuro);
  transform: translateY(-2px);
  text-decoration: none;
}
@media (max-width: 900px) { .procon-atalhos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .procon-atalhos { grid-template-columns: 1fr; } }

.procon-rodape__contato a { text-decoration: none; }
.procon-rodape__contato a:hover { text-decoration: underline; }
.procon-rodape__redes { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.procon-rodape__redes a {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
}
.procon-rodape__redes a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }

/* Grade de material educativo (/material-educativo/).
   A pagina original era do Visual Composer: sem o CSS daquele plugin, as
   colunas viravam blocos empilhados com o icone solto ao lado do texto. */
.procon-material {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.procon-material__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px 18px;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}
.procon-material__item:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--azul);
  box-shadow: 0 22px 40px -20px rgba(11, 61, 40, .45);
  text-decoration: none;
}
.procon-material__item img,
.procon-material__item svg {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 10px;
}
/* Os atalhos do material educativo usam PNG do acervo; os do Procon Digital sao
   SVG inline (nao ha badge de loja no acervo). Dai a cor vir do CSS. */
.procon-material__item svg {
  color: var(--wp--preset--color--azul);
}
.procon-material__titulo {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--wp--preset--color--azul-escuro);
}
.procon-material__desc {
  font-size: 13px;
  color: var(--wp--preset--color--texto-suave);
  line-height: 1.4;
}
/* Tres atalhos (Procon Digital) em grade de 4 deixariam um vao a direita. */
.procon-material--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .procon-material,
  .procon-material--tres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .procon-material,
  .procon-material--tres { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Listagem de posts
   ------------------------------------------------------------------ */
.procon-noticias .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--azul-escuro); }
.procon-noticias .wp-block-post-title a:hover { color: var(--wp--preset--color--azul); }
.procon-noticias .wp-block-post-date { color: var(--wp--preset--color--azul); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.procon-noticias .wp-block-post-featured-image img { border-radius: 10px; }

/* Cartões de listagem — todos do mesmo tamanho.
 *
 * O grid do WordPress estica o <li> ate a altura da linha, mas o cartao dentro
 * dele ficava com a altura do proprio conteudo: como os titulos vao de 1 a 4+
 * linhas (377 posts curtos, 407 de tres linhas), os cartoes terminavam em
 * alturas diferentes e o grid ficava desalinhado. Aqui o cartao preenche o
 * <li>, a capa tem proporcao fixa e o titulo tem um teto de linhas — assim a
 * fileira inteira fecha na mesma altura, independente do texto.
 */
.wp-block-post-template > li { display: flex; }

/* Todas as fileiras com a mesma altura, nao so os cartoes lado a lado: sem
   isto cada fileira se ajusta ao seu maior titulo e a listagem desce em
   degraus. Com o clamp de 4 linhas a altura maxima e previsivel, entao
   uniformizar nao cria buraco. */
.wp-block-post-template.is-layout-grid { grid-auto-rows: 1fr; }

.procon-card {
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* A capa (foto ou documento) nunca encolhe nem estica: proporcao fixa. */
.procon-card > .wp-block-post-featured-image,
.procon-card > .procon-capa-doc {
  flex: 0 0 auto;
  margin: 0;
}
.procon-card > .wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* O bloco de texto ocupa o resto, empurrando o rodape do cartao para baixo. */
.procon-card > .wp-block-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Teto de linhas: 72 titulos passam de 110 caracteres (leis que trazem a ementa
   inteira no titulo) e sozinhos esticariam a fileira toda. O texto completo
   continua no HTML — quem usa leitor de tela ouve tudo, e o cartao leva ao post.
 *
 * O clamp vai no <a>, nao no <h2>: o core declara
 * `.wp-block-post-title :where(a){display:inline-block}`, e o -webkit-line-clamp
 * so quebra filhos INLINE — com um filho inline-block a caixa vira um bloco
 * atomico e o corte nunca acontece. Mesma coisa no excerpt, cujo texto mora
 * num <p>. */
/* 17px em vez dos 20px do preset: no cartao de ~230px, 20px cabiam so ~22
   caracteres por linha e o corte comia o assunto da materia ("...contra o
   Superendividament…"). Com 17px e quatro linhas cabem ~110 caracteres, que
   cobrem 1.015 dos 1.087 titulos inteiros. */
.procon-card .wp-block-post-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.procon-card .wp-block-post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.procon-card .wp-block-post-excerpt { margin: 0; }
.procon-card .wp-block-post-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.procon-card .wp-block-post-date { margin: 0; }

/* Capa dos posts-documento (decreto, lei, relatorio e-SIC, pesquisa).
   Ocupa o mesmo espaco de uma foto — 16/9 — para o cartao nao ficar mais
   baixo que os vizinhos e abrir buraco no grid. */
.procon-capa-doc {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--wp--preset--color--fundo-suave) 0 10px,
      var(--wp--preset--color--fundo-azulado) 10px 20px
    );
  color: var(--wp--preset--color--azul);
  border-bottom: 1px solid var(--wp--preset--color--linha);
}
.procon-capa-doc svg { width: 38px; height: 38px; opacity: .9; }
.procon-capa-doc__tipo {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--wp--preset--color--azul-escuro);
  background: #fff;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ------------------------------------------------------------------
   Chamada final
   ------------------------------------------------------------------ */
.procon-chamada { background: var(--wp--preset--color--dourado-escuro); margin-top: 64px; }
.procon-chamada__interno {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.procon-chamada h2 { font-size: 21px; margin: 0 0 2px; color: var(--wp--preset--color--azul-escuro); }
.procon-chamada p { margin: 0; font-size: 13.5px; color: #4A3A00; }
.procon-chamada .procon-botao { margin-left: auto; }
.procon-botao {
  display: inline-block;
  background: var(--wp--preset--color--azul-escuro);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 8px;
}
.procon-botao:hover { background: var(--wp--preset--color--azul-profundo); text-decoration: none; }

/* ------------------------------------------------------------------
   Rodape
   ------------------------------------------------------------------ */
.procon-rodape { background: var(--wp--preset--color--azul-escuro); color: #A9BBC6; }
.procon-rodape a { color: #A9BBC6; text-decoration: none; font-size: 13.5px; }
.procon-rodape a:hover { color: #fff; text-decoration: underline; }
.procon-rodape__interno {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
}
.procon-rodape h2, .procon-rodape h3 { color: #fff; }
.procon-rodape__titulo { font-family: var(--wp--preset--font-family--titulo); font-weight: 800; font-size: 16px; color: #fff; margin: 0 0 10px; }
.procon-rodape__coluna h3 {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.procon-rodape__coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.procon-rodape__lema { color: var(--wp--preset--color--dourado); font-style: italic; font-size: 12.5px; margin-top: 12px; }
.procon-rodape__acessibilidade { display: none; padding: 0 24px 16px; max-width: 1120px; margin: 0 auto; }
.procon-rodape__acessibilidade button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.procon-rodape__acessibilidade svg { width: 17px; height: 17px; }
.procon-rodape__acessibilidade button:hover { background: rgba(255, 255, 255, .12); }
.procon-rodape__acessibilidade button[aria-pressed="true"] {
  background: var(--wp--preset--color--dourado);
  color: var(--wp--preset--color--azul-escuro);
  border-color: var(--wp--preset--color--dourado);
}

.procon-rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  padding: 18px 24px;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.procon-rodape__base p { margin: 0; }

/* A marca da Prefeitura: e o vinculo institucional do orgao, nao um enfeite —
   fica ao lado do aviso de titularidade. Discreta por padrao, cheia no hover:
   no rodape ela nao disputa atencao com o conteudo. */
.procon-rodape__pmcg { display: inline-flex; flex-shrink: 0; }
.procon-rodape__pmcg img {
  width: 150px;
  height: auto;
  opacity: .85;
  transition: opacity .2s ease;
}
.procon-rodape__pmcg:hover img,
.procon-rodape__pmcg:focus-visible img { opacity: 1; }

.procon-rodape__copy { flex: 1 1 340px; }

/* Credito de quem fez: empurrado para a outra ponta da faixa. */
.procon-rodape__credito {
  margin-left: auto;
  color: #8F9FAE;
  font-size: 11.5px;
  white-space: nowrap;
}

/* No celular a faixa vira coluna e o `margin-left:auto` do credito nao faz
   sentido — tudo alinhado a esquerda, na mesma coluna do resto do rodape. */
@media (max-width: 700px) {
  .procon-rodape__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .procon-rodape__credito { margin-left: 0; white-space: normal; }
  /* O `flex-basis: 340px` do copyright vale no eixo principal — que em coluna e
     a ALTURA. Sem zerar isto, ele reservava 340px de altura e abria um buraco
     entre o aviso e o credito. */
  .procon-rodape__copy { flex: 0 1 auto; }
}

/* ------------------------------------------------------------------
   Conteudo recuperado — o corpo dos posts veio do arquivo, com HTML antigo
   ------------------------------------------------------------------ */
.wp-block-post-content img { max-width: 100%; height: auto; border-radius: 8px; }
/* Tabela larga rola dentro da propria caixa; a pagina nunca rola de lado. */
.wp-block-post-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.wp-block-post-content td, .wp-block-post-content th { border: 1px solid var(--wp--preset--color--linha); padding: 8px 10px; }
.wp-block-post-content iframe { max-width: 100%; }

/* ------------------------------------------------------------------
   Galeria de fotos da materia
   ------------------------------------------------------------------ */

/* As materias vindas do portal da Prefeitura traziam a galeria do WordPress ja
   renderizada pelo tema DE LA (`div.gallery > figure.gallery-item`), que sem o
   CSS daquele tema empilhava as fotos numa coluna estreita. O markup foi
   refeito por import/galerias.php; aqui e o desenho dele.

   `auto-fit` com minimo de 200px: o numero de colunas sai da largura disponivel,
   entao a mesma regra serve para 3 fotos no desktop e 1 no celular, sem media
   query. */
.procon-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 28px 0;
  padding: 0;
}

/* Uma foto so nao deve virar um quadradinho perdido no meio do texto: ocupa a
   largura toda e mantem a proporcao original, sem recorte. */
.procon-galeria__foto { margin: 0; }

.procon-galeria--uma { grid-template-columns: 1fr; }
.procon-galeria--uma .procon-galeria__item { aspect-ratio: auto; }
.procon-galeria--uma .procon-galeria__img { height: auto; object-fit: contain; }
.procon-galeria.procon-galeria--uma .procon-galeria__img { height: auto; }

/* Legenda escrita pela equipe do PROCON — vinha nas galerias do acervo antigo e
   e conteudo, nao enfeite: fica visivel, nao escondida atras de hover. */
.procon-galeria__legenda {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wp--preset--color--texto-suave, #5A646B);
  padding: 7px 2px 0;
}

.procon-galeria--duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.procon-galeria__item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  /* Proporcao fixa para as fotos alinharem entre si — foto de reuniao vem em
     todo formato, e sem isto a grade fica serrilhada. */
  aspect-ratio: 4 / 3;
  background: #EDF0F2;
  border: 1px solid var(--wp--preset--color--borda, #E3E6E8);
}
/* Seletor duplo de proposito: `.wp-block-post-content img` (0,1,1) declara
   `height:auto` para proteger as fotos do conteudo recuperado, e venceria um
   `.procon-galeria__img` (0,1,0) — a foto ficava com a altura natural e sobrava
   uma faixa do fundo do quadro embaixo dela. Aqui a galeria empata em classes e
   ganha por vir depois, sem precisar enfraquecer aquela regra nem usar
   !important. */
.procon-galeria .procon-galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* O quadro ja tem cantos arredondados e overflow:hidden; o raio de 8px que
     `.wp-block-post-content img` poe em toda foto do corpo criaria um segundo
     canto por dentro do primeiro. */
  border-radius: 0;
  transition: transform .35s ease;
}
.procon-galeria .procon-galeria__item:hover .procon-galeria__img,
.procon-galeria .procon-galeria__item:focus-visible .procon-galeria__img { transform: scale(1.04); }
.procon-galeria__item:focus-visible {
  outline: 3px solid var(--wp--preset--color--dourado);
  outline-offset: 2px;
}

/* O link da foto aponta para o arquivo no proprio dominio — nao e link externo e
   nao leva o icone que o tema poe nos de fora (ver procon_links_externos_nova_aba). */
.procon-galeria__item.procon-externo::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .procon-galeria__img { transition: none; }
  .procon-galeria__item:hover .procon-galeria__img { transform: none; }
}

/* Documento exibido na propria pagina.
 *
 * Boa parte do acervo e post cujo conteudo E o documento (cartilha, pesquisa,
 * decreto). Obrigar a baixar o arquivo para ler seria pior do que o site
 * antigo, que ao menos mostrava o PDF — a diferenca e que aqui ele abre no
 * visualizador nativo do navegador, servido pelo dominio do PROCON, sem passar
 * por Google/Office. */
.procon-doc {
  margin: 28px 0;
  padding: 0;
}
.procon-doc__visor {
  width: 100%;
  height: min(82vh, 900px);
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 12px 12px 0 0;
  background: var(--wp--preset--color--fundo-suave);
  display: block;
}
.procon-doc__acao {
  border: 1px solid var(--wp--preset--color--linha);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--wp--preset--color--fundo-suave);
  padding: 12px 16px;
  text-align: center;
}
/* Sem visor (DOCX/XLS): o botao e o bloco inteiro. */
.procon-doc:not(:has(.procon-doc__visor)) .procon-doc__acao {
  border-top: 1px solid var(--wp--preset--color--linha);
  border-radius: 12px;
}
.procon-doc__baixar {
  display: inline-block;
  background: var(--wp--preset--color--azul);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 8px;
}
/* Seta simples (U+2193): esta no subset latin das fontes carregadas. O glifo
   de download (U+2B73) nao esta, e saia como quadrado vazio. */
.procon-doc__baixar::before { content: "↓ "; font-weight: 400; }
.procon-doc__baixar:hover { background: var(--wp--preset--color--azul-escuro); text-decoration: none; }

/* No celular o PDF embutido nao rola direito (o gesto briga com a pagina) e
   pesa na franquia de dados. Fica so o botao, que abre no leitor do aparelho. */
@media (max-width: 780px) {
  .procon-doc__visor { display: none; }
  .procon-doc__acao {
    border-top: 1px solid var(--wp--preset--color--linha);
    border-radius: 12px;
  }
}

/* Link que abre em nova aba se anuncia: um icone discreto avisa antes do
   clique, e o texto escondido avisa quem usa leitor de tela — sair do site sem
   aviso quebra o botao voltar e desorienta. */
.wp-block-post-content a.procon-externo::after,
.procon-rodape__redes a::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .28em;
  vertical-align: baseline;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: var(--procon-icone-externo) center / contain no-repeat;
  mask: var(--procon-icone-externo) center / contain no-repeat;
}
:root {
  --procon-icone-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
}

/* Links de documento soltos no meio do texto.
 *
 * O :not() e necessario: sem ele estas regras (especificidade maior) venciam o
 * .procon-doc__baixar e o botao do visualizador saia com texto branco sobre
 * fundo claro — ilegivel, e so no celular, onde o botao e a unica forma de
 * abrir o documento. */
.wp-block-post-content a[href$=".pdf"]:not(.procon-doc__baixar),
.wp-block-post-content a[href$=".docx"]:not(.procon-doc__baixar),
.wp-block-post-content a[href$=".doc"]:not(.procon-doc__baixar),
.wp-block-post-content a[href$=".xlsx"]:not(.procon-doc__baixar) {
  display: inline-block;
  background: var(--wp--preset--color--fundo-suave);
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
}
.wp-block-post-content a[href$=".pdf"]:not(.procon-doc__baixar)::before,
.wp-block-post-content a[href$=".docx"]:not(.procon-doc__baixar)::before,
.wp-block-post-content a[href$=".doc"]:not(.procon-doc__baixar)::before,
.wp-block-post-content a[href$=".xlsx"]:not(.procon-doc__baixar)::before { content: "📄 "; }
.wp-block-post-content a[href$=".pdf"]:not(.procon-doc__baixar):hover,
.wp-block-post-content a[href$=".docx"]:not(.procon-doc__baixar):hover { border-color: var(--wp--preset--color--azul); }

/* Aviso nos posts que ficaram sem corpo recuperavel. */
.procon-aviso-revisao {
  border-left: 4px solid var(--wp--preset--color--dourado);
  background: #FFF9E8;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #5A4600;
}

/* ------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------ */
/* A lupa so existe no celular; no desktop o botao mostra a palavra "Buscar".
   Esta regra precisa vir ANTES da media query — declarada depois, ela vencia
   por ordem na cascata e o botao virava um circulo azul vazio. */
.procon-busca__lupa { display: none; }

/* ------------------------------------------------------------------
   Painel do menu no celular
   ------------------------------------------------------------------ */

/* O overlay do WordPress nasce branco e centralizado, e os estilos de dropdown
   do desktop (fundo branco, borda, sombra) vazavam para dentro dele: os itens
   de primeiro nivel ficavam soltos no vazio e os submenus viravam cartoes
   brancos flutuantes. Aqui o painel ganha o azul do site, alinhamento a
   esquerda e hierarquia por indentacao — nao por caixa. */
@media (max-width: 900px) {
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open { padding: 0; }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding: 8px 0 32px;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Barra do topo do painel: so o X, alinhado onde o hamburguer estava. */
  .procon-menu .wp-block-navigation__responsive-container-close {
    top: 22px;
    right: 20px;
    color: #fff;
    padding: 6px;
  }
  .procon-menu .wp-block-navigation__responsive-container-close svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
  }

  /* Lista principal: uma coluna, encostada a esquerda. */
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: block;
    padding: 44px 0 0;
    gap: 0;
  }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: block;
    font-size: 17px;
    font-weight: 700;
    padding: 15px 24px;
    text-align: left;
  }

  /* Submenu: indentado e mais leve — sem cartao, sem sombra, sem borda. */
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    background: rgba(0, 0, 0, .16) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0 6px !important;
    width: auto !important;
  }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-top: 0;
  }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    /* !important porque a regra do dropdown do desktop (texto escuro sobre
       cartao branco) tem a mesma especificidade e vinha antes — no painel
       azul isso deixava o submenu invisivel, escuro sobre escuro. */
    color: #fff !important;
    opacity: .8;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 24px 10px 40px;
    background: none;
  }
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .06);
  }

  /* A seta do submenu fica junto do rotulo, nao perdida no meio da linha. */
  .procon-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
    margin-left: 8px;
    padding: 0;
  }
}

/* Busca do hero no celular: o botao vira lupa.
 *
 * "Buscar" escrito ocupava 92px de uma caixa de 320px, e o placeholder ficava
 * cortado em 75px ("Busque um servico, empresa ou du…"). Com a lupa sobram
 * ~60px a mais para o texto, e o icone e universal — ninguem precisa da palavra
 * para saber o que aquele botao faz. O rotulo continua no HTML para leitor de
 * tela. */
@media (max-width: 560px) {
  .procon-hero__busca { padding-left: 14px; }
  .procon-hero__busca button { padding: 10px 12px; display: flex; align-items: center; }
  .procon-busca__rotulo {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .procon-busca__lupa { display: block; width: 18px; height: 18px; }
  .procon-hero__busca input { font-size: 14px; }
}

/* Cartoes de servico no celular: 2x2 e compactos.
 *
 * Empilhados em coluna unica eles ocupavam 636px — 75% de uma tela de 844px.
 * Quatro atalhos comiam a tela inteira antes de qualquer conteudo. Em 2x2, com
 * o icone ao lado do titulo e sem a descricao, caem para ~1/4 disso. A
 * descricao sai porque o titulo ja diz tudo ("Fazer reclamacao" nao precisa de
 * "Abra um caso contra uma empresa" logo abaixo, no celular). */
@media (max-width: 560px) {
  .procon-servicos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .procon-servico { padding: 12px 10px; }
  .procon-servico__icone {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .procon-servico__icone svg { width: 16px; height: 16px; }
  .procon-servico__titulo { font-size: 13.5px; line-height: 1.25; }
  .procon-servico__desc { display: none; }
}

@media (max-width: 900px) {
  /* A barra utilitaria inteira sai do celular. Ela custava ~90px do espaco
     mais nobre da tela (com "Alto contraste" quebrando em duas linhas) para
     oferecer o que o aparelho ja faz melhor: A+/A- sao redundantes diante do
     pinch-zoom e do ajuste de fonte do sistema, e Transparencia/Ouvidoria
     estao no menu e no rodape. O alto contraste, que nao tem equivalente
     nativo, migra para dentro do menu. */
  .procon-utilitaria { display: none; }
  .procon-rodape__acessibilidade { display: block; }

  /* No celular o cabecalho ja tem logo + hamburguer; a busca do hero, logo
     abaixo, cobre a funcao sem espremer os tres numa linha so. */
  .procon-busca-topo { display: none; }
  /* O menu deixa de ocupar o meio e encosta no logo, a direita. O
     !important vence o justify-content:center que o proprio WordPress
     injeta no container do bloco de navegacao. */
  .procon-menu { flex: 0 0 auto; margin-left: auto; justify-content: flex-end !important; }
  .procon-servicos { grid-template-columns: repeat(2, 1fr); margin-top: -30px; }
  .procon-rodape__interno { grid-template-columns: 1fr 1fr; }
  .procon-topo__interno { gap: 12px; flex-wrap: nowrap; }
}
@media (max-width: 560px) {
  .procon-rodape__interno { grid-template-columns: 1fr; }
  .procon-hero__interno { padding: 40px 20px 76px; }
  .procon-chamada .procon-botao { margin-left: 0; }
  .procon-utilitaria__interno { justify-content: center; text-align: center; }
}