/*
Theme Name: TCE-MA Child
Version: 1.0
*/

/* ===================================================
   01. VARIÁVEIS E BASE
=================================================== */

:root{
  --primary:#0054a6;
  --primary-dark:#1b3049;
  --primary-mid:#1f436d;
  --primary-light:#5579a6;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --bg:#f5f7fa;
  --radius:14px;
  --shadow-sm:0 8px 22px rgba(0,0,0,.08);
  --shadow-md:0 14px 32px rgba(0,0,0,.12);
  --shadow-lg:0 18px 42px rgba(0,0,0,.16);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  height:auto;
}

.wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 20px;
}

/* ===================================================
   02. TOPO, HEADER E MENU
=================================================== */

.tce-topbar{
  background:var(--primary);
  color:#fff;
  font-size:13px;
}

.tce-topbar .wrap{
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tce-topbar a{
  color:#fff;
  margin-right:12px;
}

/* Mesmo degrade do .tce-topbar (definido no Additional CSS do Customizer)
   pra formar um bloco azul continuo do topo ate' o fim da faixa da logo -
   repetido aqui, nao referenciado, porque o .tce-topbar usa !important e
   uma altura de bloco diferente, entao nao da' pra so' "colar" um no outro. */
.tce-header{
  background:linear-gradient(90deg, #001f3f 0%, #003366 50%, #0561c2 100%);
}

.tce-header .wrap{
  height:140px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tce-logo img{
  width:360px;
  height:auto;
  /* 1719x606 no arquivo fonte - a 360px de largura da' ~127px de altura.
     Com essa proporcao, garante que a faixa (140px) sempre sobra espaco
     dos dois lados, sem cortar a fita de cima nem a espada de baixo. */
}

.tce-search{
  font-size:28px;
  color:#fff;
  transition:.2s;
}

.tce-search:hover{
  color:#dbe8f7;
  transform:scale(1.08);
}

.tce-nav{
  background:#fff;
  border-top:1px solid #eee;
  border-bottom:1px solid #ddd;
}

.tce-nav-toggle{
  display:none;
}

.tce-nav .wrap>ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}

.tce-nav li{
  position:relative;
  list-style:none;
}

.tce-nav .wrap>ul>li>a{
  display:flex;
  align-items:center;
  height:60px;
  padding:0 28px;
  font-size:20px;
  font-weight:600;
  color:#054A9B;
  letter-spacing:.1px;
  transition:.2s;
}

.tce-nav .wrap>ul>li>a:hover{
  color:#00366f;
  transform:translateY(-1px);
}

.tce-nav .wrap>ul>li:has(ul)>a::after{
  content:"▾";
  font-size:11px;
  margin-left:7px;
  position:relative;
  top:1px;
}

.tce-nav ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  padding:8px 0;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:9999;
}

.tce-nav li:hover>ul{
  display:block;
}

.tce-nav ul ul a{
  display:block;
  padding:9px 18px;
  font-size:14px;
  color:#333;
  white-space:nowrap;
}

.tce-nav ul ul a:hover{
  background:#f4f4f4;
  color:var(--primary);
}

/* Ordem visual do menu */
.tce-nav .wrap>ul>li:nth-child(3),
.tce-nav .wrap>ul>li:nth-child(5),
.tce-nav .wrap>ul>li:nth-child(n+9){
  display:none!important;
}

.tce-nav .wrap>ul>li:nth-child(1){order:1}
.tce-nav .wrap>ul>li:nth-child(4){order:2}
.tce-nav .wrap>ul>li:nth-child(2){order:3}
.tce-nav .wrap>ul>li:nth-child(6){order:4}
.tce-nav .wrap>ul>li:nth-child(7){order:5}
.tce-nav .wrap>ul>li:nth-child(8){order:6}

/* ===================================================
   03. HOME
=================================================== */

.tce-home,
.tce-hero-new,
.tce-banner-wide,
.tce-boxes,
.tce-icons,
.tce-banner2,
.tce-noticias{
  width:1200px;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* Esconde hero antigo */
.tce-hero,
.tce-hero-grid{
  display:none!important;
}

/* Hero - carrossel e os 6 cards azuis lado a lado (antes ficavam
   empilhados, carrossel largo em cima, cards abaixo). */
.tce-hero-new{
  margin-top:18px;
  margin-bottom:14px;
  display:flex;
  align-items:stretch;
  gap:18px;
}

.tce-hero-new .tce-hero-slider{
  position:relative;
  width:620px;
  max-width:620px;
  flex:0 0 620px;
  height:300px;
  margin:0;
  display:block;
  overflow:hidden;
  border-radius:12px;
  background:#eee;
  box-shadow:0 16px 42px rgba(0,0,0,.14);
}

.tce-hero-slide{
  display:none;
  position:absolute;
  inset:0;
}

.tce-hero-slide.active{
  display:block;
}

.tce-hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tce-hero-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
  padding:18px 22px;
}

/* Base para qualquer .tce-hero-arrow (compartilhada com os botoes que o
   JS desenha no painel da intranet, classe "tce-hero-arrow tce-hero-arrow-prev/-next") -
   o Additional CSS do Customizer ja' define essa base (38px, cinza-escuro
   com hover vinho); nao repete aqui pra nao competir com aquela regra. */

/* Navegacao do carrossel PUBLICO da home: so' setas, sem bolinhas
   (removidas em 19/08/2026 - o JS que as desenhava, no snippet do
   WPCode, tinha uma rotina reconstruindo tudo em loop e ficava
   piscando/bugando). Escopado a .tce-hero-slider pra nao mudar o visual
   das setas do painel da intranet, que usam a mesma classe base. */
.tce-hero-slider .tce-hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(1,35,69,.55);
  color:#fff;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s,transform .18s;
}
.tce-hero-slider .tce-hero-arrow:hover{
  background:rgba(1,35,69,.85);
  transform:translateY(-50%) scale(1.08);
}

.tce-hero-slider .tce-hero-arrow.prev{left:16px}
.tce-hero-slider .tce-hero-arrow.next{right:16px}

/* Contador circular do carrossel da home - mostra quanto falta pra
   trocar de noticia sozinho (5s, sincronizado com o JS em
   front-page.php). Fica no canto onde as bolinhas antigas ficavam.
   O aro comeca cheio e "esvazia" ate' o proximo slide - reiniciado a
   cada troca, seja automatica ou por clique nas setas. */
.tce-hero-timer{
  position:absolute;
  top:16px;
  right:16px;
  z-index:6;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(1,35,69,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.tce-hero-timer svg{
  width:31px;
  height:31px;
  transform:rotate(-90deg);
}
.tce-hero-timer-track{
  fill:none;
  stroke:rgba(255,255,255,.28);
  stroke-width:3;
}
.tce-hero-timer-fill{
  fill:none;
  stroke:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:97.4;
  stroke-dashoffset:0;
}
/* Duas classes com a MESMA animacao, so' que com nome diferente
   (A/B) - o JS alterna entre elas a cada troca de slide. Reiniciar uma
   animacao trocando a classe pelo MESMO nome exige truque de reflow
   (offsetWidth, que nao funciona em SVG; ou requestAnimationFrame, que
   navegadores podem atrasar/pausar) - trocando o NOME da animacao, o
   navegador sempre entende como "animacao nova" e reinicia na hora,
   sem depender de nenhum truque de timing. */
.tce-hero-timer-fill.tce-hero-timer-run-a{
  animation:tceHeroTimerEsvaziarA 5s linear;
}
.tce-hero-timer-fill.tce-hero-timer-run-b{
  animation:tceHeroTimerEsvaziarB 5s linear;
}
@keyframes tceHeroTimerEsvaziarA{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:97.4}
}
@keyframes tceHeroTimerEsvaziarB{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:97.4}
}
@media (prefers-reduced-motion: reduce){
  .tce-hero-timer-fill.tce-hero-timer-run-a,
  .tce-hero-timer-fill.tce-hero-timer-run-b{animation:none;stroke-dashoffset:0}
}

/* Cards azuis - 6 atalhos (site oficial adicionou "Portal da Gestao
   Publica" em ago/2026, ver dashboard-municipal.apps.tcema.tc.br/gestor).
   Mantemos nosso layout (grade 3x2 com nossa paleta de azuis) em vez de
   copiar a grade assimetrica deles. */
.tce-blue-cards{
  flex:1 1 362px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:12px;
  height:300px;
  margin:0;
}

.tce-blue-cards a{
  height:100%;
  border-radius:14px;
  background:var(--primary-mid);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  font-size:14px;
  line-height:1.15;
  padding:4px;
  transition:.25s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.tce-blue-cards a:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 35px rgba(0,0,0,.2);
  filter:brightness(1.08);
}

.tce-blue-cards a:nth-child(1),
.tce-blue-cards a:nth-child(2),
.tce-blue-cards a:nth-child(3){
  background:var(--primary-dark);
}

.tce-blue-cards a:nth-child(4){
  background:var(--primary-light);
}

.tce-blue-cards strong{
  font-size:16px;
}

/* Banner TCE MA+ */
.tce-banner-wide{
  margin-top:14px;
  margin-bottom:10px;
}

/* O plugin tce-section-landing troca o <img> simples por um card mais
   elaborado (.tce-app-banner, com CSS proprio injetado inline no HTML) -
   reduz so' a altura dele (padding vertical das 3 colunas + min-height),
   largura continua os 1000px compartilhados de .tce-banner-wide. Precisa
   !important pra vencer o <style> inline do plugin, que carrega depois
   deste arquivo. */
.tce-banner-wide.tce-app-banner{
  min-height:80px!important;
}
.tce-banner-wide.tce-app-banner .tce-app-left,
.tce-banner-wide.tce-app-banner .tce-app-mid,
.tce-banner-wide.tce-app-banner .tce-app-right{
  padding-top:12px!important;
  padding-bottom:12px!important;
  gap:6px!important;
}
.tce-banner-wide.tce-app-banner .tce-phone-mock{
  width:44px!important;
  height:76px!important;
}

.tce-banner-wide img{
  width:1000px;
  max-width:1000px;
  display:block;
  height:auto;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}

/* Caixas cinzas */
.tce-boxes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
  margin-bottom:16px;
}

.tce-boxes a{
  background:#fff;
  text-align:center;
  padding:18px;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:.25s ease;
}

.tce-boxes a:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.tce-boxes strong{
  display:block;
  font-size:17px;
  margin-bottom:8px;
  color:var(--primary-dark);
}

.tce-boxes span{
  font-size:13px;
  color:var(--muted);
}

/* Cards de serviço da home */
.tce-icons{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-top:16px;
  margin-bottom:16px;
}

.tce-icon-card{
  border:2px solid var(--c);
  border-radius:18px;
  text-align:center;
  padding:24px 12px;
  background:#fff;
  transition:.25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
}

.tce-icon-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(0,0,0,.14);
}

.tce-icon-circle{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  font-size:30px;
}

.tce-icon-card strong{
  display:block;
  font-size:13px;
  text-transform:uppercase;
}

.tce-icon-card p{
  font-size:12px;
  color:var(--muted);
}

/* Banners secundários */
.tce-banner2{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
  margin-bottom:18px;
}

.tce-banner2 .col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tce-banner2 a,
.tce-banner2 img{
  width:100%;
  display:block;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

/* Notícias da home */
.tce-noticias{
  margin-top:30px;
  margin-bottom:30px;
}

.tce-noticias h2{
  font-size:24px;
  color:var(--primary);
  border-bottom:3px solid var(--primary);
  padding-bottom:8px;
  font-weight:700;
}

.tce-news-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.tce-news-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  transition:.25s ease;
}

.tce-news-card:hover{
  transform:translateY(-5px);
}

.tce-news-card > a{
  order:0;
}

.tce-news-card img{
  width:100%;
  height:155px;
  object-fit:cover;
  border-radius:14px;
}

.tce-news-card .data{
  order:1;
  color:#777;
  font-size:11px;
  margin:9px 14px 5px;
}

.tce-news-card .data i{
  margin-right:7px;
  font-size:11px;
}

.tce-news-card h3{
  order:2;
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  margin:0 14px 16px;
}

.tce-news-card h3 a{
  color:#1f5f9f;
}

.tce-news-card h3 a:hover{
  color:var(--primary);
}

.tce-btn-mais{
  text-align:center;
  margin-top:30px;
}

.tce-btn-mais a{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  border-radius:999px;
  padding:12px 32px;
  font-weight:700;
  transition:.25s;
}

.tce-btn-mais a:hover{
  background:#00366f;
  color:#fff;
}

/* ===================================================
   04. PÁGINAS INTERNAS - TEMPLATE PADRÃO
=================================================== */

.tce-page{
  background:#f6f8fb;
  padding:42px 0 75px;
  min-height:600px;
}

.tce-page .wrap{
  max-width:1000px;
}

.tce-breadcrumb{
  font-size:14px;
  color:#7a8594;
  margin-bottom:18px;
}

.tce-breadcrumb a{
  color:var(--primary);
  font-weight:700;
}

.tce-breadcrumb span{
  margin-right:8px;
}

.tce-page-card{
  background:#fff;
  border-radius:18px;
  padding:46px;
  box-shadow:0 14px 42px rgba(0,0,0,.08);
}

.tce-page-header{
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
  padding-bottom:24px;
}

.tce-page-label{
  display:inline-block;
  color:var(--primary);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.tce-page-header h1{
  color:var(--primary-dark);
  font-size:42px;
  line-height:1.1;
  margin:0;
}

.tce-page-featured{
  margin-bottom:32px;
}

.tce-page-featured img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
}

.tce-page-content{
  font-size:18px;
  line-height:1.85;
  color:#374151;
}

.tce-page-content p{
  margin:0 0 22px;
}

.tce-page-content h2,
.tce-page-content h3{
  color:var(--primary);
  margin-top:34px;
}

.tce-page-content ul,
.tce-page-content ol{
  padding-left:24px;
}

.tce-page-content li{
  margin-bottom:10px;
}

/* ===================================================
   05. PÁGINAS INTERNAS - COMPONENTES REUTILIZÁVEIS
=================================================== */

.tce-internal-page{
  background:#f4f7fb;
}

.tce-internal-hero{
  background:linear-gradient(135deg,#054A9B 0%,#12396d 100%);
  color:#fff;
  padding:70px 0;
  margin-bottom:45px;
  border-top:1px solid rgba(255,255,255,.12);
}

.tce-internal-hero span{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:13px;
  font-weight:800;
  color:#9ed0ff;
  margin-bottom:12px;
}

.tce-internal-hero h1{
  color:#fff;
  font-size:44px;
  line-height:1.1;
  margin:0 0 14px;
}

.tce-internal-hero p{
  color:#d9ecff;
  font-size:20px;
  margin:0;
  max-width:680px;
}

.tce-internal-content{
  padding-bottom:70px;
}

.tce-section{
  margin:34px 0;
}

.tce-section h2{
  color:var(--primary-dark);
  font-size:28px;
  margin-bottom:16px;
}

.tce-section p{
  font-size:17px;
  line-height:1.8;
}

.tce-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:35px 0;
}

.tce-info-grid div{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:34px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.25s;
}

.tce-info-grid div:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

.tce-info-grid h3{
  margin-top:0;
  margin-bottom:16px;
  color:#0b4d95;
  font-size:26px;
}

.tce-info-grid p{
  line-height:1.8;
}

.tce-info-grid i{
  font-size:34px;
  margin-right:8px;
  margin-bottom:18px;
  color:var(--primary);
}

.tce-links-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px;
}

.tce-links-grid a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  background:#fff;
  border:2px solid #0b4d95;
  border-left:5px solid var(--primary);
  border-radius:14px;
  padding:22px;
  color:var(--primary-dark);
  font-size:17px;
  font-weight:700;
  text-align:left;
  transition:.25s;
}

.tce-links-grid a i{
  color:var(--primary);
  margin-right:8px;
}

.tce-links-grid a:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-4px);
}

.tce-links-grid a:hover i{
  color:#fff;
}

.tce-numeros{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:45px 0;
}

.tce-num{
  background:#0b4d95;
  color:#fff;
  padding:25px;
  border-radius:16px;
  text-align:center;
}

.tce-num strong{
  display:block;
  font-size:38px;
  margin-bottom:8px;
}

/* Compatibilidade com versões antigas dos templates */
.tce-institucional-hero,
.tce-page-hero{
  background:linear-gradient(135deg,#054A9B,#1b3049);
  color:#fff;
  border-radius:18px;
  padding:42px;
  margin-bottom:32px;
  box-shadow:0 18px 40px rgba(0,84,166,.22);
}

.tce-institucional-hero span,
.tce-page-hero small{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8ec7ff;
  margin-bottom:12px;
}

.tce-institucional-hero h2,
.tce-page-hero h2{
  color:#fff!important;
  font-size:36px!important;
  margin:0 0 12px!important;
  line-height:1.1;
}

.tce-institucional-hero p,
.tce-page-hero p{
  color:#dbeafe;
  font-size:18px;
  max-width:680px;
  margin:0;
}

/* ===================================================
   06. FOOTER
=================================================== */

.tce-footer{
  background:linear-gradient(180deg,#0b478d 0%,#083b73 100%);
  border-top:4px solid #2f90ff;
  color:#d9e6f3;
  margin-top:70px;
}

.tce-footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  padding:70px 0;
  align-items:flex-start;
}

.tce-footer-logo{
  width:260px;
  filter:none;
  background:none;
  padding:0;
  border-radius:0;
}

.tce-footer h3{
  color:#fff;
  position:relative;
  padding-bottom:10px;
  margin-bottom:24px;
  font-size:22px;
}

.tce-footer h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:45px;
  height:3px;
  background:#63b3ff;
  border-radius:10px;
}

.tce-footer p{
  line-height:1.9;
  color:#c8d5e3;
  max-width:360px;
}

.tce-footer a{
  display:block;
  color:#c8d5e3;
  margin-bottom:14px;
  transition:.25s ease;
}

.tce-footer a:hover{
  color:#63b3ff;
  transform:translateX(5px);
}

.tce-footer i{
  width:22px;
  color:#63b3ff;
  margin-right:8px;
}

.tce-footer a i{
  font-size:20px;
}

.tce-footer-copy{
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center;
  padding:24px;
  color:#aac2db;
  font-size:12px;
  letter-spacing:.4px;
  opacity:.9;
}

.tce-footer-copy::after{
  content:"Desenvolvido em WordPress";
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}

/* ===================================================
   07. RESPONSIVO
=================================================== */

@media (max-width:1100px){
  .tce-home,
  .tce-hero-new,
  .tce-banner-wide,
  .tce-boxes,
  .tce-icons,
  .tce-banner2,
  .tce-noticias,
  .tce-hero-new .tce-hero-slider,
  .tce-banner-wide img,
  .tce-banner-wide.tce-app-banner,
  .tce-blue-cards{
    width:100%;
    max-width:100%;
  }

  .tce-home{
    padding:0 20px;
  }

  /* Abaixo de 1100px nao sobra espaco pra carrossel e cards lado a
     lado - volta a empilhar, carrossel em cima, cards embaixo. */
  .tce-hero-new{
    flex-direction:column;
  }

  .tce-hero-new .tce-hero-slider{
    flex:none;
  }

  .tce-blue-cards{
    flex:none;
    height:auto;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:none;
  }

  .tce-blue-cards a{
    height:105px;
  }

  .tce-icons{
    grid-template-columns:repeat(3,1fr);
  }
}

/* Janelas intermediarias: a logo de 360px fixos ficava desproporcional
   entre 900px e 1200px de viewport. Reduz progressivamente. */
@media (max-width:1200px){
  .tce-logo img{
    width:300px;
  }

  .tce-header .wrap{
    height:100px;
  }
}

@media (max-width:1000px){
  .tce-logo img{
    width:250px;
  }

  .tce-header .wrap{
    height:88px;
  }
}

@media (max-width:900px){
  /* Topbar (Ouvidoria/redes sociais): continua empilhado em duas linhas,
     mas agora alinhado a esquerda (era centralizado) - pedido do usuario
     em 04/09/2026, junto com o resto do cabecalho abaixo. */
  .tce-topbar .wrap{
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    text-align:left;
  }

  /* Logo + lupa voltam a ficar lado a lado numa unica linha (herda
     display:flex/align-items:center/justify-content:space-between da
     regra base, sem mais empilhar em coluna) - logo na esquerda, lupa no
     canto superior direito alinhada com ela. So' encolhe a altura/padding,
     ja que nao precisa mais de espaco pra duas linhas centralizadas. */
  .tce-header .wrap{
    height:auto;
    padding-top:14px;
    padding-bottom:14px;
  }

  .tce-logo img{
    width:190px;
  }

  .tce-nav .wrap>ul{
    flex-wrap:wrap;
    justify-content:center;
  }

  .tce-nav .wrap>ul>li>a{
    height:46px;
    font-size:15px;
    padding:0 12px;
  }

  .tce-blue-cards,
  .tce-info-grid,
  .tce-links-grid,
  .tce-numeros,
  .tce-footer-grid{
    grid-template-columns:1fr;
  }

  .tce-boxes,
  .tce-banner2,
  .tce-news-grid{
    grid-template-columns:1fr 1fr;
  }

  .tce-internal-hero{
    padding:50px 0;
  }

  .tce-internal-hero h1{
    font-size:34px;
  }

  .tce-internal-hero p{
    font-size:18px;
  }
}

@media (max-width:600px){
  .wrap{
    padding:0 16px;
  }

  .tce-hero-new .tce-hero-slider{
    height:220px;
  }

  .tce-hero-caption{
    font-size:17px;
    padding:12px 14px;
  }

  .tce-blue-cards,
  .tce-boxes,
  .tce-icons,
  .tce-banner2,
  .tce-news-grid{
    grid-template-columns:1fr;
  }

  .tce-page-card{
    padding:28px;
  }

  .tce-page-header h1{
    font-size:32px;
  }

  .tce-internal-hero h1{
    font-size:30px;
  }

  .tce-footer{
    margin-top:45px;
  }

  .tce-footer-grid{
    padding:45px 0;
  }
}

/* Remover dropdowns do menu principal */
.tce-nav .wrap > ul > li > ul {
  display: none !important;
}

.tce-nav .wrap > ul > li:hover > ul {
  display: none !important;
}

/* Remover setinhas do menu principal */
.tce-nav .wrap > ul > li > a::after {
  content: none !important;
}

.tce-back-link{
  display:inline-flex;
  align-items:center;
  background:#054A9B;
  color:#fff !important;
  padding:13px 24px;
  border-radius:999px;
  font-weight:700;
  transition:.25s;
}

.tce-back-link:hover{
  background:#00366f;
  transform:translateY(-3px);
}

/* ==========================================================
   TEMPLATE INTERNO - PÁGINAS
========================================================== */

.tce-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:40px;
    padding:50px 0 70px;
}

.tce-sidebar{
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    position:sticky;
    top:120px;
    height:max-content;
}

.tce-sidebar h3{
    margin:0 0 20px;
    color:#054A9B;
    font-size:22px;
    font-weight:700;
    border-bottom:2px solid #e9eef6;
    padding-bottom:15px;
}

.tce-sidebar ul{
    margin:0;
    padding:0;
    list-style:none;
}

.tce-sidebar li{
    margin-bottom:8px;
}

.tce-sidebar li:last-child{
    margin-bottom:0;
}

.tce-sidebar a{
    display:block;
    text-decoration:none;
    color:#2b2b2b;
    padding:14px 18px;
    border-radius:12px;
    transition:.25s;
    font-weight:500;
}

.tce-sidebar a:hover{
    background:#f2f7ff;
    color:#054A9B;
    transform:translateX(5px);
}

.tce-sidebar .current_page_item>a,
.tce-sidebar .current_page_parent>a{
    background:#054A9B;
    color:#fff;
    font-weight:700;
}

.tce-main-content{
    background:#fff;
    border-radius:20px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.tce-main-content h2{
    color:#054A9B;
    margin-top:0;
}

.tce-main-content h3{
    color:#054A9B;
}

.tce-main-content p{
    line-height:1.9;
    color:#4d5665;
    font-size:17px;
}

.tce-main-content ul{
    padding-left:20px;
}

.tce-main-content li{
    margin-bottom:10px;
}

.tce-main-content img{
    max-width:100%;
    border-radius:14px;
}

/* RESPONSIVO */

@media(max-width:992px){

.tce-layout{

grid-template-columns:1fr;

}

.tce-sidebar{

position:relative;
top:auto;

}

.tce-main-content{

padding:30px;

}

}

/* ==========================================================
   REFINAMENTO - TEMPLATE INTERNO COM SIDEBAR
========================================================== */

.tce-layout{
  grid-template-columns:280px 1fr !important;
  gap:34px !important;
}

.tce-sidebar{
  padding:0 !important;
  overflow:hidden;
  border:1px solid #e6edf6;
}

.tce-sidebar h3{
  background:linear-gradient(135deg,#054A9B,#12396d);
  color:#fff !important;
  margin:0 !important;
  padding:22px 24px !important;
  font-size:22px !important;
  border-bottom:0 !important;
}

.tce-sidebar h3::before{
  content:"\f19c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  margin-right:10px;
}

.tce-sidebar ul{
  padding:14px !important;
}

.tce-sidebar a{
  position:relative;
  padding:14px 16px 14px 38px !important;
  font-size:15px;
  color:#263241 !important;
}

.tce-sidebar a::before{
  content:"\f105";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:17px;
  color:#054A9B;
  font-size:12px;
}

.tce-sidebar a:hover{
  background:#eef6ff !important;
  color:#054A9B !important;
  transform:none !important;
}

.tce-sidebar .current_page_item > a{
  background:#054A9B !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(5,74,155,.22);
}

.tce-sidebar .current_page_item > a::before{
  color:#fff !important;
}

.tce-main-content{
  min-height:380px;
  padding:48px !important;
}

.tce-main-content::before{
  content:"";
  display:block;
  width:54px;
  height:4px;
  background:#054A9B;
  border-radius:999px;
  margin-bottom:26px;
}

.tce-main-content p{
  max-width:920px;
}

.tce-back-link{
  margin-top:30px;
}

/* ==========================================================================
   HISTÓRIA DO TRIBUNAL
   ========================================================================== */

.tce-history{
    max-width:760px;
    margin:0 auto;
}

.tce-history-text{
    margin-bottom:42px;
}

.tce-history-text p{
    font-size:18px;
    line-height:1.9;
    color:#334155;
    text-align:justify;
}

.tce-history-book{
    margin-top:50px;
    padding-top:40px;
    border-top:1px solid #e5e7eb;
    text-align:center;
}

.tce-history-book span{
    display:block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    color:#0b4f9c;
    text-transform:uppercase;
}

.tce-history-book img{
    width:300px;
    max-width:100%;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.tce-history-book h3{
    margin:22px 0 8px;
    font-size:28px;
    color:#0b4f9c;
}

.tce-history-book p{
    margin-bottom:26px;
    color:#64748b;
    font-size:17px;
}

.tce-history-book a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:15px 34px;

    background:#0b5dbb;
    color:#fff !important;

    border-radius:10px;

    text-decoration:none !important;

    font-size:17px;
    font-weight:700;

    transition:.2s;
}

.tce-history-book a:hover{
    background:#084a95;
    transform:translateY(-2px);
}
/* Componentes institucionais */
.tce-check-list{display:grid;gap:14px;margin:25px 0}
.tce-check-list li{list-style:none;background:#f8fafc;border-left:5px solid #054A9B;padding:16px 18px;border-radius:12px}

.tce-people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.tce-person-card{background:#fff;border:1px solid #dbe4ef;border-radius:16px;padding:22px;box-shadow:0 10px 24px rgba(0,0,0,.07)}
.tce-person-card strong{display:block;color:#054A9B;font-size:18px;margin-bottom:6px}
.tce-person-card span{color:#6b7280;font-size:14px}

.tce-alert-box{background:#eef6ff;border:1px solid #cfe4ff;border-radius:16px;padding:24px;margin:28px 0}
.tce-alert-box h3{margin-top:0;color:#054A9B}

@media(max-width:900px){.tce-people-grid{grid-template-columns:1fr}}

/* Competências: lista numerada compacta */
.tce-main-content ol.tce-check-list{
  counter-reset:item;
  gap:9px;
  padding-left:0;
}

.tce-main-content ol.tce-check-list li{
  counter-increment:item;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 14px;
  font-size:14px;
  line-height:1.45;
  border-left:0;
}

.tce-main-content ol.tce-check-list li::before{
  content:counter(item);
  min-width:28px;
  height:28px;
  border-radius:50%;
  background:#054A9B;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  flex-shrink:0;
}

/* Cards de documentos */
.tce-doc-grid{
  display:grid;
  gap:16px;
  margin-top:28px;
}

.tce-doc-card{
  display:flex;
  align-items:center;
  gap:20px;
  background:#f8fafc;
  border:1px solid #dbe4ef;
  border-radius:16px;
  padding:20px;
}

.tce-doc-icon{
  width:58px;
  height:58px;
  border-radius:14px;
  background:#054A9B;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex-shrink:0;
}

.tce-doc-info{
  flex:1;
}

.tce-doc-info h4{
  margin:0 0 5px;
  color:#054A9B;
  font-size:18px;
}

.tce-doc-info p{
  margin:0;
  font-size:14px;
}

.tce-doc-btn{
  background:#054A9B;
  color:#fff!important;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}

.tce-org-card{
  background:#f8fafc;
  border:1px solid #dbe4ef;
  border-radius:18px;
  padding:18px;
  margin:28px 0;
  overflow:auto;
}

.tce-org-card img{
  width:100%;
  max-width:100%;
  display:block;
  border-radius:12px;
}

.tce-resp-group{
  margin:34px 0;
}

.tce-resp-group h3{
  color:#054A9B;
  border-bottom:2px solid #e6edf6;
  padding-bottom:10px;
  margin-bottom:18px;
}
.tce-authority-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:28px;
}

.tce-authority-card{
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition:.25s;
}

.tce-authority-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
}

.tce-authority-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  object-position:top center;
  border-radius:0;
}

.tce-authority-card div{
  padding:18px;
}

.tce-authority-card h3{
  margin:0 0 6px;
  color:#054A9B;
  font-size:19px;
}

.tce-authority-card p{
  margin:0;
  color:#6b7280;
  font-size:14px;
}

@media(max-width:900px){
  .tce-authority-grid{
    grid-template-columns:1fr;
  }
}

/* ===== Botão Perfil Completo ===== */

.tce-authority-card details {
    margin-top: 16px;
}

.tce-authority-card summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width:auto;
  min-width:240px;

    padding: 11px 16px;

    background: linear-gradient(135deg,#0d4ea6,#1b63c5);
    color: #fff;

    border-radius: 10px;

    font-weight: 600;
    font-size: 15px;

    cursor: pointer;

    transition: all .25s ease;

    box-shadow: 0 6px 16px rgba(13,78,166,.18);
}

.tce-authority-card summary::-webkit-details-marker{
    display:none;
}

.tce-authority-card summary::before{
    content:"+";
    font-size:20px;
    font-weight:700;
    margin-right:8px;
    transition:.2s;
}

.tce-authority-card details[open] summary::before{
    content:"–";
}

.tce-authority-card summary:hover{
    background:linear-gradient(135deg,#0b3f86,#1658b6);
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(13,78,166,.28);
}

.tce-authority-card details[open] summary{
    border-radius:10px 10px 0 0;
}

.tce-authority-card details>*:not(summary){
    padding:16px;
    background:#f8fbff;
    border:1px solid #d8e6f8;
    border-top:none;
    border-radius:0 0 10px 10px;
}
/* BOTÃO PERFIL COMPLETO - CONSELHEIROS */
.tce-authority-card details summary{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin-top:12px !important;
  padding:12px 16px !important;
  background:#054A9B !important;
  color:#fff !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-size:14px !important;
  cursor:pointer !important;
  list-style:none !important;
  border:none !important;
  box-shadow:0 8px 18px rgba(5,74,155,.22) !important;
}

.tce-authority-card details summary::-webkit-details-marker{
  display:none !important;
}

.tce-authority-card details summary::before{
  content:"+";
  margin-right:8px;
  font-size:18px;
  font-weight:800;
}

.tce-authority-card details[open] summary::before{
  content:"–";
}

.tce-authority-card details summary:hover{
  background:#003f86 !important;
  transform:translateY(-2px);
}

.tce-authority-card details p{
  background:#f8fbff;
  padding:10px 12px;
  margin:0;
  border-left:3px solid #054A9B;
}


/* REFINO CARDS - CONSELHEIROS */
.tce-authority-grid{
  grid-template-columns:repeat(3,minmax(240px,1fr)) !important;
  gap:26px !important;
}

.tce-authority-card{
  border:1px solid #d8e6f8 !important;
  transition:all .25s ease !important;
}

.tce-authority-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 18px 38px rgba(5,74,155,.16) !important;
  border-color:#054A9B !important;
}

.tce-authority-card img{
  height:280px !important;
  object-fit:cover !important;
  object-position:top center !important;
}

.tce-authority-card h3{
  font-size:20px !important;
  line-height:1.15 !important;
}

.tce-authority-card p{
  margin-bottom:10px !important;
}

.tce-authority-card details[open]{
  margin-top:12px !important;
}

.tce-authority-card details[open] p{
  font-size:13px !important;
  line-height:1.55 !important;
  background:#f5f9ff !important;
  border-left:3px solid #054A9B !important;
}

@media(max-width:1100px){
  .tce-authority-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:700px){
  .tce-authority-grid{
    grid-template-columns:1fr !important;
  }
}


/* ALINHAMENTO DEFINITIVO DOS CARDS DE CONSELHEIROS */
.tce-authority-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

.tce-authority-card > div{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  padding:16px !important;
}

.tce-authority-card h3{
  min-height:48px !important;
  margin-bottom:6px !important;
}

.tce-authority-card p{
  min-height:20px !important;
}

.tce-authority-card details{
  margin-top:auto !important;
}

.tce-authority-card img{
  height:260px !important;
}




.tce-publication-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width:auto;
  min-width:240px;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid #0b5dbb;
  border-radius: 10px;
  background: #0b5dbb;
  color: #fff !important;
  font-size: 15px;
  font-size:17px;
  font-weight:700;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(11, 93, 187, .18);
}

.tce-publication-button:hover {
  background: #084a95;
  border-color: #084a95;
  color: #fff !important;
  transform: translateY(-1px);
}




/* ===== História do Tribunal ===== */

.tce-history-page{
    display:block;
}

.tce-history-copy{
    max-width:820px;
}

.tce-history-copy p{
    font-size:17px;
    line-height:1.8;
    text-align:justify;
    color:#243247;
}

.tce-publication-card{
    margin:42px auto 0;
    max-width:380px;
    text-align:center;
}

.tce-publication-card img{
    width:100%;
    max-width:280px;
    margin:18px auto;
    display:block;
}

.tce-publication-content{
    text-align:center;
}

/* ==========================================================================
   COMPETÊNCIAS
   ========================================================================== */

.tce-competency-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
    margin:40px 0;
}

.tce-competency-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:22px;
    transition:.2s;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.tce-competency-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.10);
}

.tce-competency-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    margin-bottom:16px;

    border-radius:50%;

    background:#0b5dbb;
    color:#fff;

    font-weight:700;
}

.tce-competency-card p{
    margin:0;
    line-height:1.7;
    color:#334155;
}


/* ==========================================================================
   PROCESSO SELETIVO PARA ESTÁGIO
   ========================================================================== */

.tce-selection-page{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.tce-selection-header{
  margin-bottom:8px;
}

.tce-selection-header h2{
  margin:6px 0 12px;
  color:#0b4f9c;
}

.tce-selection-header p{
  max-width:760px;
  margin:0;
  color:#475569;
  font-size:16px;
  line-height:1.75;
}

.tce-selection-year{
  overflow:hidden;
  border:1px solid #dfe6ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(20,58,97,.06);
}

.tce-selection-year > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  cursor:pointer;
  list-style:none;
  background:#f3f7fc;
  color:#0b4f9c;
  font-size:18px;
  font-weight:700;
}

.tce-selection-year > summary::-webkit-details-marker{
  display:none;
}

.tce-selection-year > summary small{
  color:#64748b;
  font-size:13px;
  font-weight:600;
}

.tce-selection-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding:20px;
}

.tce-selection-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:96px;
  padding:18px;
  border:1px solid #e5eaf0;
  border-radius:12px;
  background:#fff;
  color:#1e293b !important;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tce-selection-card:hover{
  transform:translateY(-2px);
  border-color:#9fc0e5;
  box-shadow:0 10px 22px rgba(20,58,97,.09);
}

.tce-selection-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eaf3fd;
  color:#0b5dbb;
  font-size:18px;
}

.tce-selection-content{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:7px;
}

.tce-selection-content strong{
  color:#1f3e63;
  font-size:14px;
  line-height:1.45;
}

.tce-selection-content small{
  color:#0b5dbb;
  font-size:12px;
  font-weight:700;
}

.tce-selection-card > .fa-arrow-up-right-from-square{
  color:#94a3b8;
  font-size:13px;
}

@media (max-width:900px){
  .tce-selection-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:600px){
  .tce-selection-year > summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .tce-selection-grid{
    padding:14px;
  }

  .tce-selection-card{
    align-items:flex-start;
  }
}

/* ===================================================
   FIX RESPONSIVIDADE DO MENU (.tce-nav) EM TELAS <= 900px
   Adicionado em 06/08/2026. Espelha o CSS Adicional gravado no
   Customizer (post custom_css, ID 2767) - a correcao ja esta ativa no
   site via aquele registro; esta copia fica so' versionada no Git para
   nao se perder se o banco for reimportado sem o dump mais recente.

   1) O menu tinha "position:sticky" sem media query - em telas
      pequenas ficava permanentemente grudado no topo, ocupando boa
      parte da tela. Abaixo de 900px ele volta a rolar normal.
   2) "flex-wrap:wrap; justify-content:center" (regra do tema, acima)
      deixava os 6 itens em linhas desalinhadas ("ziguezague"). Agora
      viram uma lista vertical de largura total.
   3) O submenu (.tce-nav ul ul) e' "position:absolute", pensado pro
      hover de desktop - no mobile flutuava por cima dos outros itens
      e do carrossel de noticias. Agora empurra o conteudo pra baixo
      (acordeao) em vez de flutuar.
=================================================== */
@media (max-width: 900px) {
  body:not(.page-id-2920):not(.page-id-2926):not(.page-id-2950):not(.page-id-2960):not(.page-id-3010):not(.tce-intranet-single) .tce-nav {
    position: static !important;
  }

  .tce-nav .wrap > ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
  }

  .tce-nav .wrap > ul > li {
    width: 100%;
  }

  .tce-nav .wrap > ul > li > a {
    width: 100%;
    height: auto !important;
    padding: 14px 16px !important;
    justify-content: space-between !important;
  }

  .tce-nav .wrap > ul > li:has(ul) > a::after,
  .tce-nav .tce-dd-caret {
    margin-left: auto;
  }

  .tce-nav ul ul {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 18px !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    background: rgba(0,0,0,.08) !important;
  }

  .tce-nav ul ul::before {
    display: none !important;
  }

  .tce-nav ul ul a {
    color: #fff !important;
  }

  .tce-nav ul ul a:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }

  .tce-nav ul ul ul {
    position: static !important;
    left: auto !important;
    top: auto !important;
    padding-left: 14px !important;
  }
}

/* ===================================================
   CARROSSEL DE PUBLICACOES DA OUVIDORIA
   Adicionado em 12/08/2026.

   O CSS Adicional do Customizer tem uma regra global que mira TODO
   <article> do site (pensada pro corpo de post/pagina) e forca, com
   !important: max-width 1050px, margin 0 auto, font-size 16.5px,
   line-height 1.8 e cor escura. Cada slide do carrossel da Ouvidoria
   e' um <article>, entao ele herdava esses limites: os slides ficavam
   com 1050px dentro de um trilho de 1344px, aparecendo dois de uma vez
   e desalinhados, com o texto frouxo.

   Aqui a regra e' anulada so' dentro do trilho. O seletor de ID
   (1,0,1) ganha da regra do Customizer (0,6,2) por especificidade,
   entao vale independente da ordem de carregamento - e nenhum outro
   <article> do site e' afetado.

   Nota (13/08/2026): quando a pagina da Ouvidoria foi refeita a partir
   do HTML da equipe, o ID do trilho mudou para "ouv-trilho" - a regra
   equivalente agora mora em assets/css/ouvidoria.css. O bloco abaixo
   ficou sem alvo (o ID antigo nao existe mais em lugar nenhum), mantido
   so' de historico ate' aqui.
=================================================== */
#trilho-publicacoes > article {
  max-width: none !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1.5 !important;
  color: inherit !important;
}

/* ===================================================
   TITULO DO BANNER "TELEATENDIMENTO TCE-MA" ILEGIVEL
   Adicionado em 13/08/2026.

   Mesma familia de bug do carrossel acima: o Additional CSS do
   Customizer tem uma regra sitewide que forca #003366 (azul bem
   escuro) em todo h2/h3 dentro de .tce-main-content nas paginas
   publicas, excluindo so' uma lista fixa de paginas (2920, 2926, 2950,
   2960, 3010 e a intranet). A pagina "Tele Atendimento" (2566) nao
   esta' nessa lista, entao herdava o azul escuro - inclusive dentro do
   banner ".tce-tele-intro", que tem fundo em gradiente azul-marinho e
   cuja propria pagina ja pedia texto branco (".tce-tele-intro h2 {
   color:#fff!important}"). Texto escuro sobre fundo escuro, quase
   invisivel.

   Em vez de adicionar a pagina 2566 aquela lista de exclusao (o que
   tiraria TODO o estilo de h2/h3 da pagina, nao so' o do banner),
   repete aqui o mesmo prefixo ":not(...)" da regra original com
   ".tce-tele-intro" no fim - fica mais especifico so' para esse banner,
   sem mexer nos outros titulos da pagina (que estao corretos).
=================================================== */
body:not(.page-id-2920):not(.page-id-2926):not(.page-id-2950):not(.page-id-2960):not(.page-id-3010):not(.tce-intranet-single) .tce-main-content .tce-tele-intro h2 {
  color: #fff !important;
}

/* ===================================================
   MENU HAMBURGUER NO MOBILE (<=900px)
   Espelha o CSS Adicional gravado no Customizer (post custom_css, ID
   2767) - a correcao ja esta ativa no site via aquele registro; esta
   copia fica so' versionada no Git. Some com o menu vertical sempre
   visivel em telas pequenas, escondendo-o atras de um botao hamburguer
   (markup em header.php). Desktop (>900px) fica exatamente como estava.
=================================================== */
.tce-nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .tce-nav .wrap {
    display: flex;
    flex-direction: column;
  }

  .tce-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 6px auto 6px 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    color: #003366;
    font-size: 20px;
    cursor: pointer;
  }

  .tce-nav .wrap > ul {
    display: none !important;
  }

  .tce-nav.tce-nav-open .wrap > ul {
    display: flex !important;
  }
}