/*
Theme Name: Portal PMCG
Theme URI: https://campinagrande.pb.gov.br
Author: Prefeitura Municipal de Campina Grande
Description: Tema institucional do portal da Prefeitura Municipal de Campina Grande. Tema de blocos (FSE), sem page builder e sem dependencia de servico externo — a licenca e do municipio.
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: pmcg
Tags: full-site-editing, block-styles, accessibility-ready, government
*/

/* As fontes (Archivo, Barlow, IBM Plex Mono, Material Symbols) sao carregadas
   pelo functions.php via Google Fonts — ver o aviso de privacidade la.
   assets/fontes.css (Inter auto-hospedada) ficou sem uso nesta fase. */

/* ------------------------------------------------------------------
   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; }

/* ------------------------------------------------------------------
   Canvas — coluna branca contida sobre fundo cinza (Direcao A)
   ------------------------------------------------------------------ */

/* A pagina inteira (cabecalho, conteudo, rodape) mora numa coluna branca de
   1280px sobre o cinza #dfe4e1 — inclusive o hero: a foto NAO sangra ate as
   bordas da tela. Ate 1280px de viewport a coluna ocupa tudo e o cinza some. */
body { background: var(--wp--preset--color--fundo-neutro); }
.wp-site-blocks {
  position: relative; /* ancora o cabecalho sobreposto ao hero da capa */
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}

/* ------------------------------------------------------------------
   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). */
.pmcg-atalhos-teclado { position: relative; z-index: 999; }
.pmcg-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 20px;
  background: var(--wp--preset--color--lima);
  color: var(--wp--preset--color--verde-escuro);
  font-weight: 700;
  border-radius: 0 0 8px 0;
  white-space: nowrap;
}
.pmcg-pular:focus { left: 0; }

/* Controles A+ / A- / A */
.pmcg-fonte { display: inline-flex; gap: 4px; align-items: center; }
.pmcg-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;
}
.pmcg-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--lima);
  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.pmcg-alto-contraste {
  background: #000 !important;
  color: #fff !important;
}
body.pmcg-alto-contraste :where(p, li, span, h1, h2, h3, h4, td, th, figcaption, time, label) {
  color: #fff !important;
}
body.pmcg-alto-contraste :where(a, a *) { color: #ffe600 !important; }
body.pmcg-alto-contraste :where(header, footer, section, article, aside, div, main) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: #fff !important;
}
body.pmcg-alto-contraste :where(.pmcg-card, .pmcg-svc, .pmcg-dig-card, .pmcg-sec-card, .wp-block-post) {
  border: 1px solid #fff !important;
}
body.pmcg-alto-contraste img { filter: grayscale(1) contrast(1.2); }
body.pmcg-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; dentro do cabecalho ele viraria uma faixa branca solta. */
.pmcg-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 .pmcg-cabecalho: o bloco
 * template-part embrulha o cabecalho num <header class="wp-block-template-part">,
 * entao o <main> e irmao DESSE wrapper — um seletor `.pmcg-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 verde-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 .pmcg-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(> .pmcg-hero:first-child) { padding-block-start: 0; }
.wp-site-blocks > main:has(> .pmcg-veja-mais:last-child) { padding-block-end: 0; }

/* ------------------------------------------------------------------
   Cabecalho
   ------------------------------------------------------------------ */

/* Nas paginas internas o topo e uma barra verde-escura solida. Na capa ele
   flutua TRANSPARENTE sobre a foto do hero (regra mais abaixo). */
.pmcg-topo {
  background: var(--wp--preset--color--verde-escuro);
  color: #fff;
}
.pmcg-topo a { color: #fff; }
.pmcg-topo .wp-block-site-title a { text-decoration: none; }
.pmcg-topo__interno {
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}

/* Logo branco da marca. A versao colorida oficial e azul-marinho + dourado:
   sobre o hero e sobre a barra verde-escura ela sumia. O leiaute (Direcao A)
   usa a versao branca oficial, que nao precisa de chip. */
.pmcg-topo .pmcg-marca__logo { line-height: 0; flex: 0 0 auto; }
.pmcg-topo .pmcg-marca__logo img {
  height: 56px;
  width: auto;
  max-width: none;
  display: block;
}

/* logo | menu (empurrado para a direita) | pill de acessibilidade */
.pmcg-menu { flex: 1 1 auto; margin-left: auto; }
.pmcg-menu .wp-block-navigation__container { gap: 12px 24px; }

/* Pill de acessibilidade — o "A- A+ contraste" do leiaute. Os botoes usam os
   gatilhos de assets/acessibilidade.js (data-pmcg-fonte / data-pmcg-contraste),
   entao a persistencia em localStorage continua valendo. */
.pmcg-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  padding: 7px 14px;
  flex: 0 0 auto;
  color: #fff;
}
.pmcg-pill .ms { font-size: 18px; }
.pmcg-pill__fonte { display: flex; gap: 4px; align-items: center; }
.pmcg-pill button {
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pmcg-pill button:hover { text-decoration: underline; }

/* Cabecalho sobreposto ao hero — so na capa. A regra pergunta pelo hero como
   primeiro filho do <main>, nao pela pagina: continua certa se o hero mudar
   de lugar. O wrapper e o .wp-block-template-part (irmao do <main>); tirado
   do fluxo, o hero nasce no topo da coluna e o cabecalho flutua sobre ele. */
.wp-site-blocks:has(> main > .pmcg-hero:first-child) > .wp-block-template-part:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
.wp-site-blocks:has(> main > .pmcg-hero:first-child) .pmcg-topo { background: transparent; }

.pmcg-menu .wp-block-navigation-item__content {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 2px;
}
.pmcg-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-verde-escuro-background-color` tambem no submenu — e as classes de
 * preset do core vem com !important. No desktop isso deixava o dropdown verde
 * escuro com texto escuro: ilegivel. Nenhuma especificidade vence um
 * !important; so outro. */
.pmcg-topo .pmcg-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);
}
.pmcg-topo .pmcg-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--texto) !important;
  border-radius: 6px;
  padding: 8px 12px;
}
.pmcg-topo .pmcg-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--fundo-suave);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Icones Material Symbols (ligaduras: o nome do icone e o proprio texto)
   ------------------------------------------------------------------ */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Rotulo mono acima dos titulos de secao ("eyebrow"). */
.pmcg-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--verde);
  margin: 0 0 8px;
}

/* ------------------------------------------------------------------
   Hero — foto da cidade sob veu verde-escuro, busca flutuante na base
   ------------------------------------------------------------------ */
.pmcg-hero {
  position: relative;
  color: #fff;
  min-height: 340px;
}
.pmcg-hero h1, .pmcg-hero h2 { color: #fff; }

/* A foto e o veu ficam numa camada propria, atras do conteudo. */
.pmcg-hero__fundo { position: absolute; inset: 0; overflow: hidden; }
.pmcg-hero__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}
.pmcg-hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--gradient--hero);
}

/* Faixa branca de 6px na base: a busca flutuante pousa metade no hero,
   metade nesta faixa. */
.pmcg-hero__faixa {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  z-index: 1;
  background: #fff;
}

.pmcg-hero__interno {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  /* 136px no topo: o cabecalho (logo de 56px + 2x22px de respiro) flutua
     sobre o hero na capa, e o conteudo precisa nascer abaixo dele. */
  padding: 136px 32px 100px;
  text-align: center;
}
.pmcg-hero .pmcg-eyebrow { font-size: 12.5px; letter-spacing: .24em; color: var(--wp--preset--color--lima); margin-bottom: 18px; }
.pmcg-hero h1 { font-weight: 900; letter-spacing: -.02em; line-height: 1.04; margin: 0 0 14px; }
.pmcg-hero__sub { color: #BCD6CC; font-size: 17px; line-height: 1.5; margin: 0 0 22px; }
.pmcg-hero__mais-buscados { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.pmcg-hero__mais-buscados > span { font-size: 13px; color: #8FB9AC; font-weight: 600; }
.pmcg-chip {
  background: rgba(255, 255, 255, .1);
  color: #E6F2EC;
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 6px 13px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
}
.pmcg-chip:hover { background: #fff; color: var(--wp--preset--color--verde-escuro); text-decoration: none; }

/* Busca flutuante: vaza 32px para baixo do hero, sobre a secao seguinte —
   por isso "Servicos mais usados" tem 72px de respiro no topo. */
.pmcg-busca-flutuante {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -32px;
  z-index: 4;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
.pmcg-busca-flutuante form {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  flex-wrap: wrap;
}
.pmcg-busca-flutuante__campo { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 200px; }
.pmcg-busca-flutuante__campo .ms { font-size: 22px; color: var(--wp--preset--color--verde); }
.pmcg-busca-flutuante input {
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  color: var(--wp--preset--color--texto);
  background: transparent;
  min-width: 0;
}
.pmcg-busca-flutuante button {
  background: var(--wp--preset--color--lima);
  color: var(--wp--preset--color--grafite);
  border: 0;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 0 22px;
  height: 40px;
  border-radius: 9px;
  cursor: pointer;
  flex: 0 0 auto;
}
.pmcg-busca-flutuante button:hover { filter: brightness(.94); }

/* ------------------------------------------------------------------
   Servicos mais usados — coluna de atalhos + abas de temas
   ------------------------------------------------------------------ */
/* Fundo verde-lima translucido (cor da paleta) sobre a coluna branca. */
.pmcg-servicos-mais {
  padding: 72px 32px 56px;
  background: rgba(169, 207, 69, 0.18);
}
.pmcg-servicos-mais__grade {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Coluna verde-escura de atalhos institucionais */
.pmcg-atalhos-inst {
  background: var(--wp--preset--color--verde-escuro);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pmcg-atalhos-inst__rotulo {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--lima);
  margin: 0 0 8px;
}
.pmcg-atalhos-inst a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #E6F2EC;
  padding: 13px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}
.pmcg-atalhos-inst a:last-child { border-bottom: 0; }
.pmcg-atalhos-inst a:hover { color: #fff; text-decoration: none; }
.pmcg-atalhos-inst .ms { font-size: 20px; color: var(--wp--preset--color--lima); }

/* Abas (pills). A troca de painel e feita por assets/abas.js; sem JS a
   primeira aba continua visivel. */
.pmcg-abas { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pmcg-abas button {
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 20px;
  cursor: pointer;
  background: var(--wp--preset--color--fundo-suave);
  color: #42453F;
  border: 1px solid var(--wp--preset--color--linha);
}
.pmcg-abas button:hover { border-color: var(--wp--preset--color--verde); }
.pmcg-abas button.is-ativa {
  background: var(--wp--preset--color--lima);
  color: var(--wp--preset--color--grafite);
  border-color: var(--wp--preset--color--lima);
}

/* Grade de cartoes de servico (3 colunas) */
.pmcg-svc-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* display:grid vence o estilo do atributo `hidden` (as abas sao escondidas
   por ele) — sem esta regra todos os paineis aparecem empilhados. */
.pmcg-svc-grade[hidden] { display: none; }
.pmcg-svc {
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  transition: all .16s ease;
}
.pmcg-svc:hover {
  border-color: var(--wp--preset--color--verde);
  box-shadow: 0 6px 20px rgba(0, 60, 48, .1);
  transform: translateY(-2px);
  text-decoration: none;
}
.pmcg-svc__icone {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #EEF5F1;
  color: var(--wp--preset--color--verde);
  display: grid;
  place-items: center;
}
.pmcg-svc__icone .ms { font-size: 18px; }
.pmcg-svc__texto { min-width: 0; overflow: hidden; }
.pmcg-svc__titulo {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--wp--preset--color--grafite);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmcg-svc__desc {
  display: block;
  font-size: 11.5px;
  color: var(--wp--preset--color--texto-suave);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Faixa Transparencia / canais — 3 colunas de largura total
   ------------------------------------------------------------------ */
.pmcg-faixa-canais { display: grid; grid-template-columns: repeat(3, 1fr); }
.pmcg-canal {
  color: #fff;
  padding: 30px 32px;
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
}
.pmcg-canal + .pmcg-canal { border-left: 1px solid rgba(255, 255, 255, .12); }
.pmcg-canal:hover { text-decoration: none; filter: brightness(1.07); }
.pmcg-canal--escuro { background: var(--wp--preset--color--verde-escuro); }
.pmcg-canal--verde { background: var(--wp--preset--color--verde); }
.pmcg-canal .ms { font-size: 32px; color: var(--wp--preset--color--lima); flex: 0 0 auto; }
.pmcg-canal--verde .ms { color: #A7E6CF; }
.pmcg-canal__titulo { display: block; font-weight: 700; font-size: 17px; color: #fff; }
.pmcg-canal__desc { display: block; font-size: 13px; color: #BCD6CC; margin-top: 2px; }
.pmcg-canal--verde .pmcg-canal__desc { color: #CDEADF; }

/* ------------------------------------------------------------------
   Noticias da capa — destaque grande + lista com miniaturas
   ------------------------------------------------------------------ */
.pmcg-noticias-home { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
/* O <li> do post-template e flex (regra global dos cartoes): sem largura
   explicita o conteudo encolheria ao tamanho do texto. */
.pmcg-noticias-home .wp-block-post-template > li > * { width: 100%; }
.pmcg-destaque .wp-block-post-featured-image { margin: 0; }
.pmcg-destaque .wp-block-post-featured-image img {
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--linha);
}
.pmcg-destaque__meta { display: flex; gap: 12px; align-items: center; margin: 16px 0 8px; }
.pmcg-destaque__selo {
  background: var(--wp--preset--color--lima);
  color: var(--wp--preset--color--grafite);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.pmcg-destaque .wp-block-post-date { color: var(--wp--preset--color--texto-suave); font-size: 13px; margin: 0; }
.pmcg-destaque .wp-block-post-title { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; }
.pmcg-destaque .wp-block-post-title a { color: var(--wp--preset--color--grafite); text-decoration: none; }
.pmcg-destaque .wp-block-post-title a:hover { color: var(--wp--preset--color--verde); }
.pmcg-destaque .wp-block-post-excerpt { font-size: 14.5px; line-height: 1.6; color: #5A5F58; margin: 0; }

.pmcg-noticia-linha { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #E6ECE8; }
.wp-block-post-template > li:first-child .pmcg-noticia-linha { border-top: 0; padding-top: 0; }
.pmcg-noticia-linha .wp-block-post-featured-image { flex: 0 0 92px; margin: 0; }
.pmcg-noticia-linha .wp-block-post-featured-image img {
  width: 92px;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--wp--preset--color--linha);
}
.pmcg-noticia-linha .wp-block-post-date { font-size: 12px; color: var(--wp--preset--color--texto-suave); margin: 0 0 4px; }
.pmcg-noticia-linha .wp-block-post-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.pmcg-noticia-linha .wp-block-post-title a { color: var(--wp--preset--color--grafite); text-decoration: none; }
.pmcg-noticia-linha .wp-block-post-title a:hover { color: var(--wp--preset--color--verde); }

/* Miniatura placeholder (listagem sem foto): o mesmo xadrez de listras do
   mockup, aplicado quando nao ha imagem destacada. */
.pmcg-thumb-vazia {
  flex: 0 0 92px;
  height: 66px;
  border-radius: 8px;
  border: 1px solid var(--wp--preset--color--linha);
  background: repeating-linear-gradient(135deg, #E7EEEA, #E7EEEA 9px, #EEF4F0 9px, #EEF4F0 18px);
}

/* Fallback estatico das noticias (query-no-results): repete o texto de
   exemplo do leiaute enquanto nao ha posts publicados. */
.pmcg-destaque__foto-vazia {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--linha);
  background: repeating-linear-gradient(135deg, #E7EEEA, #E7EEEA 12px, #EEF4F0 12px, #EEF4F0 24px);
  display: grid;
  place-items: center;
}
.pmcg-destaque__foto-vazia span {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: #93A89F;
  letter-spacing: .08em;
}
.pmcg-destaque__data { font-size: 13px; color: var(--wp--preset--color--texto-suave); }
.pmcg-destaque__titulo { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; color: var(--wp--preset--color--grafite); }
.pmcg-destaque__resumo { font-size: 14.5px; line-height: 1.6; color: #5A5F58; margin: 0; }
.pmcg-noticia-linha__data { font-size: 12px; color: var(--wp--preset--color--texto-suave); margin-bottom: 4px; }
.pmcg-noticia-linha__titulo { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--grafite); }

/* ------------------------------------------------------------------
   Secretarias + Servicos digitais (fundo suave)
   ------------------------------------------------------------------ */
.pmcg-dupla { background: var(--wp--preset--color--fundo-suave); border-top: 1px solid #E3E9E5; }
.pmcg-dupla__interno {
  padding: 52px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.pmcg-dupla h2 { font-size: 22px; font-weight: 900; letter-spacing: -.01em; margin: 0 0 8px; color: var(--wp--preset--color--grafite); }
.pmcg-dupla__intro { font-size: 14px; color: #5A5F58; line-height: 1.6; margin: 0 0 20px; }

.pmcg-sec-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pmcg-sec-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 9px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--grafite);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  transition: all .16s ease;
}
.pmcg-sec-card:hover { border-color: var(--wp--preset--color--verde); text-decoration: none; }
.pmcg-sec-card .ms { font-size: 18px; color: #9BB3AA; }

.pmcg-dig-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pmcg-dig-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--linha);
  border-radius: 11px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: all .16s ease;
}
.pmcg-dig-card:hover {
  border-color: var(--wp--preset--color--verde);
  box-shadow: 0 6px 20px rgba(0, 60, 48, .1);
  transform: translateY(-2px);
  text-decoration: none;
}
.pmcg-dig-card__icone {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--wp--preset--color--amarelo-palido);
  color: var(--wp--preset--color--grafite);
  display: grid;
  place-items: center;
}
.pmcg-dig-card__icone .ms { font-size: 22px; }
.pmcg-dig-card__titulo { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--grafite); }
.pmcg-dig-card__desc { font-size: 12.5px; color: var(--wp--preset--color--texto-suave); line-height: 1.45; }

/* ------------------------------------------------------------------
   Veja mais — 4 colunas editoriais
   ------------------------------------------------------------------ */
.pmcg-veja-mais { border-top: 1px solid #E3E9E5; }
.pmcg-veja-mais__interno { padding: 52px 32px; }
.pmcg-veja-mais h2 { font-size: 22px; font-weight: 900; letter-spacing: -.01em; margin: 0 0 22px; color: var(--wp--preset--color--grafite); }
.pmcg-veja-mais__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pmcg-veja-mais__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--texto-suave);
  padding-bottom: 10px;
  margin: 0 0 10px;
  border-bottom: 2px solid var(--wp--preset--color--lima);
}
.pmcg-veja-mais__titulo { display: block; font-weight: 700; font-size: 14.5px; color: var(--wp--preset--color--grafite); margin-bottom: 4px; text-decoration: none; }
.pmcg-veja-mais__titulo:hover { color: var(--wp--preset--color--verde); }
.pmcg-veja-mais__desc { font-size: 12.5px; color: var(--wp--preset--color--texto-suave); line-height: 1.5; margin: 0; }

/* ------------------------------------------------------------------
   Secoes
   ------------------------------------------------------------------ */
.pmcg-secao { padding: 56px 32px 0; }
.pmcg-secao__rotulo {
  color: var(--wp--preset--color--verde);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.pmcg-secao__titulo {
  font-family: var(--wp--preset--font-family--titulo);
  font-weight: 900;
  color: var(--wp--preset--color--grafite);
  margin: 0 0 26px;
  letter-spacing: -0.01em;
}
.pmcg-secao__cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
/* No cabecalho de secao (titulo + link "ver todos") o respiro mora na faixa,
   nao no titulo — os dois alinham pela base. */
.pmcg-secao__cabecalho .pmcg-secao__titulo { margin-bottom: 0; }
.pmcg-secao__cabecalho { margin-bottom: 26px; }
.pmcg-verlink { color: var(--wp--preset--color--verde); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.pmcg-verlink:hover { text-decoration: underline; }

.pmcg-rodape__contato a { text-decoration: none; }
.pmcg-rodape__contato a:hover { text-decoration: underline; }
.pmcg-rodape__redes { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pmcg-rodape__redes a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #C8D8D1;
}
.pmcg-rodape__redes a .ms { font-size: 20px; }
.pmcg-rodape__redes a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }

/* ------------------------------------------------------------------
   Listagem de posts
   ------------------------------------------------------------------ */
.pmcg-noticias .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--verde-escuro); }
.pmcg-noticias .wp-block-post-title a:hover { color: var(--wp--preset--color--verde); }
.pmcg-noticias .wp-block-post-date { color: var(--wp--preset--color--verde); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pmcg-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; }

.pmcg-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 nunca encolhe nem estica: proporcao fixa. */
.pmcg-card > .wp-block-post-featured-image {
  flex: 0 0 auto;
  margin: 0;
}
.pmcg-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. */
.pmcg-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. */
.pmcg-card .wp-block-post-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.pmcg-card .wp-block-post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pmcg-card .wp-block-post-excerpt { margin: 0; }
.pmcg-card .wp-block-post-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.pmcg-card .wp-block-post-date { margin: 0; }

/* ------------------------------------------------------------------
   Rodape
   ------------------------------------------------------------------ */
.pmcg-rodape { background: var(--wp--preset--color--grafite); color: #C8D8D1; }
.pmcg-rodape a { color: #C8D8D1; text-decoration: none; font-size: 13.5px; }
.pmcg-rodape a:hover { color: #fff; text-decoration: underline; }
.pmcg-rodape__interno {
  padding: 48px 32px 34px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.pmcg-rodape h2, .pmcg-rodape h3 { color: #fff; }
.pmcg-rodape__titulo { font-family: var(--wp--preset--font-family--titulo); font-weight: 800; font-size: 16px; color: #fff; margin: 0 0 10px; }
.pmcg-rodape__marca { display: inline-block; line-height: 0; margin-bottom: 16px; }
.pmcg-rodape__marca img { height: 46px; width: auto; display: block; }
.pmcg-rodape__endereco { font-size: 13px; line-height: 1.7; color: #9FB5AC; margin: 0; }
.pmcg-rodape__coluna h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.pmcg-rodape__coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pmcg-rodape__lema { color: var(--wp--preset--color--lima); font-style: italic; font-size: 12.5px; margin-top: 12px; }

.pmcg-rodape__base {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}
.pmcg-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. */
.pmcg-rodape__pmcg { display: inline-flex; flex-shrink: 0; }
.pmcg-rodape__pmcg img {
  width: 150px;
  height: auto;
  opacity: .85;
  transition: opacity .2s ease;
}
.pmcg-rodape__pmcg:hover img,
.pmcg-rodape__pmcg:focus-visible img { opacity: 1; }

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

/* Credito de quem fez: empurrado para a outra ponta da faixa. */
.pmcg-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) {
  .pmcg-rodape__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pmcg-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. */
  .pmcg-rodape__copy { flex: 0 1 auto; }
}

/* ------------------------------------------------------------------
   Conteudo dos posts
   ------------------------------------------------------------------ */
.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%; }

/* Aviso "em construcao" das paginas institucionais placeholder
   (import/paginas-institucionais.php). */
.pmcg-aviso-pagina {
  border-left: 4px solid var(--wp--preset--color--lima);
  background: #FFF9E8;
  padding: 6px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: #5A4600;
}

/* 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.pmcg-externo::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .28em;
  vertical-align: baseline;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: var(--pmcg-icone-externo) center / contain no-repeat;
  mask: var(--pmcg-icone-externo) center / contain no-repeat;
}
:root {
  --pmcg-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 ganham cara de anexo. */
.wp-block-post-content a[href$=".pdf"],
.wp-block-post-content a[href$=".docx"],
.wp-block-post-content a[href$=".doc"],
.wp-block-post-content a[href$=".xlsx"] {
  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"]::before,
.wp-block-post-content a[href$=".docx"]::before,
.wp-block-post-content a[href$=".doc"]::before,
.wp-block-post-content a[href$=".xlsx"]::before { content: "\1F4C4 "; }
.wp-block-post-content a[href$=".pdf"]:hover,
.wp-block-post-content a[href$=".docx"]:hover { border-color: var(--wp--preset--color--verde); }

/* ------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------ */

/* Grades da capa: quebram por etapas, da mais larga para a mais estreita. */
@media (max-width: 1020px) {
  .pmcg-svc-grade { grid-template-columns: repeat(2, 1fr); }
  .pmcg-veja-mais__grade { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
  /* A coluna de atalhos institucionais sobe e vira faixa sobre os cartoes. */
  .pmcg-servicos-mais__grade { grid-template-columns: 1fr; }
  .pmcg-faixa-canais { grid-template-columns: 1fr; }
  .pmcg-canal + .pmcg-canal { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .pmcg-noticias-home { grid-template-columns: 1fr; }
  .pmcg-dupla__interno { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .pmcg-svc-grade { grid-template-columns: 1fr; }
  .pmcg-sec-grade, .pmcg-dig-grade { grid-template-columns: 1fr; }
  .pmcg-veja-mais__grade { grid-template-columns: 1fr; }
  .pmcg-servicos-mais,
  .pmcg-dupla__interno,
  .pmcg-veja-mais__interno { padding-left: 20px; padding-right: 20px; }
  .pmcg-busca-flutuante { padding: 0 20px; }
}

/* ------------------------------------------------------------------
   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 verde do site, alinhamento a
   esquerda e hierarquia por indentacao — nao por caixa. */
@media (max-width: 900px) {
  .pmcg-menu .wp-block-navigation__responsive-container.is-menu-open { padding: 0; }
  .pmcg-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. */
  .pmcg-menu .wp-block-navigation__responsive-container-close {
    top: 22px;
    right: 20px;
    color: #fff;
    padding: 6px;
  }
  .pmcg-menu .wp-block-navigation__responsive-container-close svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
  }

  /* Lista principal: uma coluna, encostada a esquerda. */
  .pmcg-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: block;
    padding: 44px 0 0;
    gap: 0;
  }
  .pmcg-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .pmcg-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. */
  .pmcg-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;
  }
  .pmcg-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-top: 0;
  }
  .pmcg-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
       verde 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;
  }
  .pmcg-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. */
  .pmcg-menu .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
    margin-left: 8px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  /* O menu deixa de ocupar o meio e encosta a direita, entre o logo e o pill.
     O !important vence o justify-content que o proprio WordPress injeta no
     container do bloco de navegacao. */
  .pmcg-menu { flex: 0 0 auto; margin-left: auto; justify-content: flex-end !important; }
  /* Entre ~600 e 900px o pill quebra para a linha de baixo — alinhado a
     direita ele nao fica parecendo um botao perdido. */
  .pmcg-pill { margin-left: auto; }
  .pmcg-rodape__interno { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pmcg-rodape__interno { grid-template-columns: 1fr; }
  /* Cabecalho mais compacto: logo menor e menos respiro lateral. */
  .pmcg-topo__interno { padding: 14px 20px; gap: 10px 14px; }
  .pmcg-topo .pmcg-marca__logo img { height: 44px; }
  /* O hero precisa nascer abaixo do cabecalho sobreposto (~72px de altura). */
  .pmcg-hero__interno { padding: 100px 20px 92px; }
}