/* ===================================================================
   PONTÃO — TEMA VISUAL 2025-2028
   Overlay de CSS para o site institucional (Joomla 3.10)
   Baseado no Manual de Identidade Visual "Construindo juntos um novo tempo"
   NÃO requer atualização do Joomla. Não altera módulos, posições ou
   conteúdo — apenas reveste visualmente o que já existe na página.
   =================================================================== */

/* -------------------------------------------------------------
   1. FONTES
   O manual usa Goldplay Alt Bold (títulos), Goldplay Alt SemiBold
   Italic (assinatura/subtítulo) e Galano Grotesque (corpo/menu).
   São fontes comerciais: se a prefeitura tiver os arquivos
   licenciados, descomente o bloco @font-face abaixo e aponte para
   /templates/SEU_TEMPLATE/fonts/. Caso contrário, os fallbacks via
   Google Fonts abaixo reproduzem a mesma personalidade (geométrica,
   arredondada, alto peso nos títulos) sem custo de licença.
------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Mulish:ital,wght@0,400;0,600;0,700;1,600&display=swap');

/*
@font-face {
  font-family: 'Goldplay Alt';
  src: url('../fonts/GoldplayAlt-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Goldplay Alt';
  src: url('../fonts/GoldplayAlt-SemiBoldIt.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
*/

:root {
  /* Paleta oficial — Manual de Identidade Visual Pontão */
  --pt-turquesa: #48969e;   /* verde turquesa — cor primária */
  --pt-turquesa-escuro: #1c4e57; /* verde escuro — headers, rodapé, texto de destaque */
  --pt-verde: #8cc63f;      /* verde amarelado — crescimento, secundário */
  --pt-laranja: #f5821f;    /* laranja — equilíbrio/confiança, CTAs */
  --pt-azul: #0095da;       /* azul ciano — serenidade, links/info */

  --pt-bg: #f4f6f6;         /* fundo claro, como no manual */
  --pt-bg-alt: #ffffff;
  --pt-texto: #223b3f;
  --pt-texto-suave: #5b7278;
  --pt-borda: #e1e8e9;

  --pt-font-display: 'Baloo 2', 'Goldplay Alt', 'Poppins', sans-serif;
  --pt-font-body: 'Mulish', 'Galano Grotesque', 'Inter', sans-serif;

  --pt-radius: 14px;
  --pt-sombra: 0 8px 24px rgba(28, 78, 87, 0.10);
  --pt-sombra-hover: 0 14px 32px rgba(28, 78, 87, 0.18);
}

/* -------------------------------------------------------------
   2. BASE
------------------------------------------------------------- */
body {
  background: var(--pt-bg);
  color: var(--pt-texto);
  font-family: var(--pt-font-body);
}

h1, h2, h3, h4, h5,
.page-header,
.componentheading,
.contentheading {
  font-family: var(--pt-font-display) !important;
  font-weight: 700;
  color: var(--pt-turquesa-escuro);
  letter-spacing: -0.01em;
}

a { color: var(--pt-turquesa); }
a:hover, a:focus { color: var(--pt-laranja); }

/* -------------------------------------------------------------
   3. DISPOSITIVO DE MARCA — barra diagonal teal + linha laranja
   Este é o elemento assinatura do manual (aparece em toda peça
   gráfica oficial): uma faixa teal cortada na diagonal, com um
   filete laranja logo abaixo. Reaplicado no topo e no rodapé do
   site para costurar o site ao restante da papelaria oficial.
------------------------------------------------------------- */
.pt-faixa-topo {
  position: relative;
  height: 14px;
  background: var(--pt-turquesa);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 16% 0, 0 0);
}
.pt-faixa-topo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: var(--pt-laranja);
  clip-path: inherit;
}
.pt-faixa-rodape {
  height: 10px;
  background: var(--pt-turquesa-escuro);
  border-top: 4px solid var(--pt-laranja);
}

/* -------------------------------------------------------------
   4. CABEÇALHO / MENU PRINCIPAL
   Mantém a estrutura de menu já existente (mesmos itens, mesma
   ordem) — só a pele muda.
------------------------------------------------------------- */
#header, .header, .site-header {
  background: var(--pt-bg-alt);
  box-shadow: 0 2px 10px rgba(28,78,87,0.06);
}

.nav > li > a,
#mainnav a,
.moduletable_menu a {
  font-family: var(--pt-font-body);
  font-weight: 700;
  color: var(--pt-turquesa-escuro);
  text-transform: none;
}
.nav > li > a:hover,
.nav > li.active > a {
  color: var(--pt-laranja) !important;
}

/* -------------------------------------------------------------
   5. HERO / VÍDEO DE ABERTURA
   Ver hero-video-snippet.php para o HTML a inserir no index.php
   do template, logo após a faixa de topo. Preserva o carrossel
   de banners existente como alternativa em telas sem suporte a
   vídeo — não remove nenhum banner atual.
------------------------------------------------------------- */
.pt-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pt-turquesa-escuro);
}
.pt-hero video,
.pt-hero .pt-hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.pt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,78,87,.15) 0%, rgba(28,78,87,.85) 100%);
}
.pt-hero-conteudo {
  position: relative;
  z-index: 2;
  padding: 48px 40px;
  color: #fff;
  max-width: 720px;
}
.pt-hero-conteudo .pt-eyebrow {
  font-family: var(--pt-font-body);
  font-style: italic;
  font-weight: 600;
  color: var(--pt-laranja);
  display: block;
  margin-bottom: 6px;
}
.pt-hero-conteudo h1 {
  color: #fff !important;
  font-size: 2.4rem;
  margin: 0 0 10px;
}
.pt-hero-conteudo p {
  color: #e6f1f2;
  font-size: 1.05rem;
}

/* -------------------------------------------------------------
   6. CARDS DE SERVIÇOS
   Reestiliza os itens de "Serviços" (ícones Material já usados
   no site atual) como blocos modernos com selo de cor rotativo
   nas 5 cores da marca — sem alterar quantidade/ordem dos itens.
------------------------------------------------------------- */
.pt-servicos-grid,
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.pt-servico-card {
  background: var(--pt-bg-alt);
  border: 1px solid var(--pt-borda);
  border-radius: var(--pt-radius);
  padding: 22px;
  box-shadow: var(--pt-sombra);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pt-servico-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pt-sombra-hover);
}
.pt-servico-card .icone {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 22px;
}
/* Selo de cor alternado — aplicar via nth-child no wrapper da lista */
.pt-servicos-grid > *:nth-child(5n+1) .icone { background: var(--pt-turquesa); }
.pt-servicos-grid > *:nth-child(5n+2) .icone { background: var(--pt-turquesa-escuro); }
.pt-servicos-grid > *:nth-child(5n+3) .icone { background: var(--pt-verde); }
.pt-servicos-grid > *:nth-child(5n+4) .icone { background: var(--pt-laranja); }
.pt-servicos-grid > *:nth-child(5n+5) .icone { background: var(--pt-azul); }

.pt-servico-card h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: var(--pt-turquesa-escuro) !important;
}
.pt-servico-card p {
  font-size: .875rem;
  color: var(--pt-texto-suave);
  margin: 0;
}

/* -------------------------------------------------------------
   7. NOTÍCIAS
------------------------------------------------------------- */
.blog .item,
.pt-noticia-card {
  background: var(--pt-bg-alt);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-sombra);
  transition: box-shadow .18s ease, transform .18s ease;
}
.blog .item:hover,
.pt-noticia-card:hover {
  box-shadow: var(--pt-sombra-hover);
  transform: translateY(-3px);
}
.blog .item img,
.pt-noticia-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.blog .item .createdate,
.pt-noticia-data {
  display: inline-block;
  background: var(--pt-verde);
  color: #14361a;
  font-weight: 700;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 12px 14px 0;
}
.blog .item h2 a,
.pt-noticia-card h3 a {
  color: var(--pt-turquesa-escuro);
  font-family: var(--pt-font-display);
}
.blog .item .readmore a,
.pt-noticia-card .readmore a {
  color: var(--pt-laranja);
  font-weight: 700;
}

/* -------------------------------------------------------------
   8. BOTÕES / CTA
------------------------------------------------------------- */
.btn, .button, input[type="submit"] {
  background: var(--pt-laranja);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 22px;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover, .button:hover, input[type="submit"]:hover {
  background: #d96e12;
  transform: translateY(-1px);
  color: #fff;
}
.btn-secundario {
  background: transparent;
  border: 2px solid var(--pt-turquesa);
  color: var(--pt-turquesa);
}

/* -------------------------------------------------------------
   9. RODAPÉ
   Mantém as 4 colunas de links já existentes (Prefeitura /
   Governo Municipal / Estadual / Federal) — só a pele muda.
------------------------------------------------------------- */
#footer, .footer, footer {
  background: var(--pt-turquesa-escuro);
  color: #cfe3e5;
  padding-top: 40px;
}
#footer h3, .footer h3, footer h3 {
  color: #fff !important;
  font-family: var(--pt-font-display);
  font-size: 1rem;
  border-bottom: 2px solid var(--pt-laranja);
  padding-bottom: 8px;
  display: inline-block;
}
#footer a, .footer a, footer a {
  color: #cfe3e5;
}
#footer a:hover, .footer a:hover, footer a:hover {
  color: var(--pt-laranja);
}

/* -------------------------------------------------------------
   10. RESPONSIVO
------------------------------------------------------------- */
@media (max-width: 768px) {
  .pt-hero { min-height: 300px; }
  .pt-hero-conteudo h1 { font-size: 1.7rem; }
  .pt-hero-conteudo { padding: 28px 20px; }
}

/* -------------------------------------------------------------
   11. ACESSIBILIDADE
------------------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--pt-azul);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pt-hero video { display: none; }
  .pt-servico-card, .blog .item, .btn { transition: none; }
}