/* Camada do portal público (layout `front`) sobre o núcleo menu_topo.css: marca do CRC-RO,
   atalhos do cabeçalho (busca, acesso rápido, contraste, Serviços Online, Transparência),
   barra de título com caminho, hero da home, avisos, gaveta, rodapé, alto contraste e
   impressão. Prefixo pt-. O tema do site (public/front) segue carregado para o conteúdo
   das telas; as regras abaixo neutralizam o que ele aplica de forma global no esqueleto.
   Estrutura inspirada na "Demo 2" do Metronic 8, recriada do zero — nada do tema. */

/* ── Largura: alinhada ao .container do conteúdo ───────────────────── */
/* O conteúdo das telas segue no .container do Bootstrap, que o portal_pages.css alarga
   para 1560px a partir de 1200px (com 15px de respiro). O cabeçalho, a faixa e o rodapé
   usam a mesma medida, para as bordas baterem. */
.pt { --mt-largura: 1560px; }
.pt .mt-container { padding-inline: 15px; }
/* O magnific-popup.css do tema traz uma regra global `.container { width: 80% }`: todo o
   conteúdo do portal ficava com 80% da largura, desalinhado do cabeçalho e da faixa. Aqui
   o .container volta a ocupar a largura toda (limitada pelos max-width do tema, 1560px). */
.pt .container { width: 100%; }

/* ── O tema define fonte, tamanhos de título e cor de link globais ── */
body.pt { font-family: "Open Sans", system-ui, sans-serif; }
.pt .mt-topo a, .pt .mt-faixa a { text-decoration: none; }
.pt .mt-topo ul li, .pt .mt-faixa ul li { list-style: none; }
.pt .mt-faixa h1, .pt .mt-topo h1 { font-family: inherit; }

/* ── Marca ─────────────────────────────────────────────────────────── */
.pt-marca-logo { height: 44px; padding: 3px 8px; }
.pt-marca-texto {
  display: grid; font-size: 14px; font-weight: 800; line-height: 1.15; white-space: normal; max-width: 210px;
}
.pt-marca-texto span { font-weight: 600; opacity: .85; }
/* Logo larga do cabeçalho (a dos 35 anos): a imagem tem 900×402, mas o desenho ocupa só
   x 65–829 e y 0–287 — o resto é margem branca. A moldura (.pt-marca-recorte) mostra só o
   desenho, na proporção dele, e a imagem é ampliada e deslocada dentro dela. Caixa branca
   com fio dourado e sombra: o "CRCRO" é azul-marinho e sumiria sobre a faixa, e a logo é o
   destaque do cabeçalho. A altura vem de --pt-logo-altura. */
.pt { --pt-logo-altura: 60px; }
.pt-marca-recorte {
  display: block; flex: none; box-sizing: content-box; height: var(--pt-logo-altura); aspect-ratio: 765 / 287;
  overflow: hidden; padding: 6px 8px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 2px rgba(197, 154, 27, .7), 0 8px 22px rgba(4, 14, 32, .35);
}
.pt-marca-recorte .pt-marca-logo-larga {
  display: block; width: calc(100% * 900 / 765); max-width: none; height: auto; margin-left: calc(-100% * 65 / 765);
}
.is-rolado .pt-marca-recorte, html:not(.mt-js) .pt-marca-recorte {
  box-shadow: 0 0 0 1px rgba(197, 154, 27, .55), 0 4px 12px rgba(15, 36, 69, .12);
}
.pt-marca:hover .pt-marca-recorte, .pt-marca:focus-visible .pt-marca-recorte { box-shadow: 0 0 0 2px var(--mt-ouro), 0 8px 22px rgba(4, 14, 32, .4); }

/* ── Conteúdo ──────────────────────────────────────────────────────── */
/* As telas trazem as próprias seções com .container; o primeiro bloco sobe sobre a borda
   da faixa (margem negativa do núcleo) e não pode somar o respiro de topo do tema. */
.pt .mt-conteudo > section:first-child,
.pt .mt-conteudo > div:first-child { padding-top: 0; margin-top: 0; }
.pt-flash { border-radius: var(--mt-raio); }

/* ── Atalhos do cabeçalho ──────────────────────────────────────────── */
.pt-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px;
  padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; list-style: none;
  background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.pt-acao::-webkit-details-marker { display: none; }
.pt-acao:hover, .pt-acao:focus-visible { background: rgba(255, 255, 255, .1); color: inherit; text-decoration: none; }
.is-rolado .pt-acao, html:not(.mt-js) .pt-acao { border-color: var(--mt-borda); }
.is-rolado .pt-acao:hover, html:not(.mt-js) .pt-acao:hover { background: #eef2f8; }
.pt-acao[aria-pressed="true"] { background: var(--mt-ouro); border-color: var(--mt-ouro); color: var(--mt-marinho-escuro); }
details[open] > .pt-acao { background: rgba(255, 255, 255, .16); }
.is-rolado details[open] > .pt-acao { background: #eef2f8; }
/* Serviços Online e Transparência: os dois destinos mais procurados, em destaque. */
.pt-acao-destaque { background: var(--mt-ouro); border-color: var(--mt-ouro); color: var(--mt-marinho-escuro); }
.pt-acao-destaque:hover, .pt-acao-destaque:focus-visible,
.is-rolado .pt-acao-destaque, .is-rolado .pt-acao-destaque:hover { background: #d8ad2c; border-color: #d8ad2c; color: var(--mt-marinho-escuro); }

/* Painéis dos atalhos (busca, acesso rápido) abrem alinhados à direita do botão. */
.pt-busca, .pt-acesso { position: relative; }
.pt-painel-direita { left: auto; right: 0; }
.pt-busca .pt-painel-direita { width: 360px; padding: 12px; }
.pt-busca-form { display: flex; gap: 8px; margin: 0; }
.pt-busca-campo {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--mt-borda); border-radius: 10px;
  color: var(--mt-texto); font: inherit; font-size: 15px;
}
.pt-busca-campo:focus { outline: 2px solid var(--mt-marinho); outline-offset: 1px; border-color: var(--mt-marinho); }
.pt-busca-enviar {
  height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--mt-marinho); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.pt-busca-enviar:hover, .pt-busca-enviar:focus-visible { background: var(--mt-marinho-escuro); }
.pt-acesso .pt-painel-direita { width: 280px; }

/* ── Grupos do menu ────────────────────────────────────────────────── */
/* Governança (13 itens + "Ver tudo"): duas colunas, sem passar da altura da tela. */
.pt-grupo-duas-colunas { width: min(620px, calc(100vw - 48px)); max-width: none; }
.pt-grupo-duas-colunas .mt-grupo-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.pt-grupo-duas-colunas .pt-ver-tudo { grid-column: 1 / -1; }
.pt-ver-tudo { border-bottom: 1px solid var(--mt-borda); margin-bottom: 4px; padding-bottom: 4px; }
.pt-ver-tudo .mt-grupo-item { font-weight: 700; color: var(--mt-marinho); }
.pt .mt-grupo-item span { white-space: normal; overflow-wrap: anywhere; }

/* ── Orçamento de largura do cabeçalho horizontal (≥ 1200px) ───────── */
/* O menu do portal tem 9 itens vindos do painel (~870px mesmo compacto), mais que o do
   painel e o da Transparência. Para caber numa linha: a marca fica só no logo (que já traz
   "CRCRO"; o nome por extenso aparece na gaveta), o menu usa espaçamento menor, e abaixo
   de 1600px Serviços Online e Transparência ficam só com o ícone (o nome segue para leitor
   de tela). */
@media (min-width: 1200px) {
  /* Cabeçalho um pouco mais alto que o do painel, para a logo em destaque. */
  .pt { --mt-topo-altura: 80px; }
  .pt .mt-topo-linha { gap: 16px; }
  .pt .mt-marca { padding-right: 16px; }
  .pt .pt-marca-texto { display: none; }
  .pt .mt-topo-acoes { padding-left: 16px; gap: 6px; }
  .pt .mt-menu-lista { gap: 0; }
  .pt .mt-menu-link, .pt .mt-menu .mt-grupo-titulo { padding: 0 6px; gap: 5px; font-size: 13.5px; }
  .pt .mt-menu .mt-grupo-seta { font-size: 11px; }
}
/* Até 1439px a logo fica um pouco menor e o menu mais compacto (a 1300px, com a logo
   grande, o menu transbordava 42px). */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .pt { --pt-logo-altura: 44px; }
  .pt .mt-menu-link, .pt .mt-menu .mt-grupo-titulo { padding: 0 5px; font-size: 13px; }
  .pt .mt-topo-acoes { gap: 4px; }
  .pt-acao { min-width: 40px; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .pt { --pt-logo-altura: 40px; }
  .pt .mt-menu-link, .pt .mt-menu .mt-grupo-titulo { padding: 0 4px; }
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .pt-acao-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pt-acao { padding: 0 10px; }
}

/* ── Gaveta (abaixo de 1200px) ─────────────────────────────────────── */
/* Bloco com busca, Serviços Online, Transparência e acesso rápido: só na gaveta. */
.pt-so-gaveta { display: none; }

@media (max-width: 1199.98px) {
  /* No cabeçalho ficam só a marca, o contraste e o botão do menu; o resto vai para a
     gaveta (bloco pt-so-gaveta), em vez de sumir como antes. */
  .pt-busca, .pt-acesso, .pt-servicos, .pt-transparencia { display: none !important; }
  .pt-so-gaveta { display: block; padding: 4px 16px 20px; border-top: 1px solid var(--mt-borda); }
  .pt-so-gaveta .pt-busca-form { margin: 12px 0; }
  .pt-gaveta-destaques { display: grid; gap: 8px; }
  .pt-gaveta-destaques .pt-acao { justify-content: flex-start; width: 100%; }
  .pt-gaveta-rotulo {
    margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mt-texto-suave);
  }
  .pt-so-gaveta .mt-grupo-lista { padding: 0; }
  .pt-so-gaveta .mt-menu-link { padding: 0 8px; gap: 10px; }
  .pt-so-gaveta .mt-menu-link i { width: 18px; text-align: center; color: var(--mt-texto-suave); }
  /* Na gaveta os grupos são uma coluna só, no fluxo. */
  .pt-grupo-duas-colunas { width: auto; }
  .pt-grupo-duas-colunas .mt-grupo-lista { display: block; }

  /* Botões flutuantes (WhatsApp tem z-index 9999, VLibras e "voltar ao topo") ficam por
     cima da gaveta e do fundo e roubariam o toque: somem enquanto ela está aberta. */
  html.mt-gaveta-aberta #sh-wa-widget,
  html.mt-gaveta-aberta .bottomtotop,
  html.mt-gaveta-aberta [vw] { display: none !important; }
}

/* Celular: a marca continua com o nome (o núcleo esconde o texto abaixo de 576px). */
@media (max-width: 575.98px) {
  .pt .pt-marca-texto { display: grid; font-size: 12.5px; max-width: 190px; }
  .pt-marca-logo { height: 38px; }
  .pt { --pt-logo-altura: 46px; --mt-topo-altura: 68px; }
  .pt-marca-recorte { padding: 4px 6px; }
  .pt .mt-marca { gap: 8px; min-width: 0; }
}

/* ── Barra de título sobre a faixa ─────────────────────────────────── */
.pt-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pt-titulo-texto { min-width: 0; flex: 1 1 520px; }
/* Título completo, sem corte (antes a notícia parava em 60 caracteres). */
.pt .pt-titulo h1 {
  margin: 0 0 8px; color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
  overflow-wrap: anywhere; max-width: 1100px;
}
.pt-caminho .breadcrumb {
  display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; background: none; font-size: 13px;
}
.pt-caminho .breadcrumb-item { display: flex; align-items: center; min-width: 0; color: rgba(255, 255, 255, .82); }
.pt-caminho .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.pt-caminho .breadcrumb-item + .breadcrumb-item::before { content: "›"; float: none; padding: 0 8px; color: rgba(255, 255, 255, .55); }
.pt-caminho .breadcrumb-item a { color: rgba(255, 255, 255, .88); }
.pt-caminho .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
/* O item atual repete o título (às vezes longo): uma linha só, com reticências. */
.pt-caminho .breadcrumb-item.active {
  display: block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-weight: 600;
}
.pt-titulo-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ── Hero da home (banners sobre a faixa) ──────────────────────────── */
.pt-hero { padding-top: 24px; }
/* O carrossel traz o próprio .container do tema: dentro do mt-container ele não soma
   margem nem limita a largura de novo. */
.pt-hero .top-header, .pt-hero .container { max-width: none; margin: 0; padding: 0; background: none; }
.pt-hero .carousel { border-radius: var(--mt-raio); overflow: hidden; box-shadow: 0 18px 40px rgba(8, 20, 40, .35); }
.pt-hero .carousel-item img { display: block; width: 100%; height: auto; }
/* Sem banner, a faixa fica só com o respiro. */
.pt .mt-faixa:has(.pt-hero:not(:has(.carousel))) { padding-bottom: 72px; }

@media (max-width: 575.98px) {
  .pt .pt-titulo h1 { font-size: 22px; }
  .pt-caminho .breadcrumb-item.active { max-width: 30ch; }
  .pt-hero { padding-top: 16px; }
}

/* ── Faixa × conteúdo ──────────────────────────────────────────────── */
/* No painel e na Transparência o conteúdo vem em cards brancos e sobe sobre a borda da
   faixa. No portal as telas são as do tema (texto direto no fundo, sem card): subir poria
   texto escuro sobre o marinho. Aqui o conteúdo começa logo abaixo da faixa. */
.pt .mt-faixa { padding-bottom: 28px; }
.pt .mt-conteudo { margin-top: 0; }
.pt .pt-titulo h1 { text-align: left; }
.pt .mt-conteudo { padding-top: 24px; }

/* ── Avisos (primeira linha da faixa) ──────────────────────────────── */
.pt-avisos { position: relative; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; }
.pt-avisos-linha { display: flex; align-items: center; gap: 12px; }
.pt-avisos-rotulo {
  flex: none; padding: 3px 10px; border-radius: 999px; background: var(--mt-ouro); color: var(--mt-marinho-escuro);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.pt-avisos-trilho { flex: 1; min-width: 0; overflow: hidden; }
.pt-avisos-lista { display: flex; gap: 0; width: max-content; margin: 0; padding: 0; list-style: none; }
.pt-avisos-lista li + li::before { content: "•"; padding: 0 12px; color: var(--mt-ouro); }
.pt-avisos-lista a { color: #fff; }
.pt-avisos-lista a:hover, .pt-avisos-lista a:focus-visible { text-decoration: underline; }
/* Rola (vai e volta, para todo aviso ficar legível) só quando a lista não cabe — o JS
   mede e marca .is-rolando com a distância e a duração. */
.pt-avisos.is-rolando .pt-avisos-lista {
  animation: pt-avisos-rolar var(--pt-avisos-duracao, 20s) linear infinite alternate;
}
@keyframes pt-avisos-rolar { from { transform: translateX(0); } to { transform: translateX(var(--pt-avisos-distancia, 0)); } }
.pt-avisos.is-pausado .pt-avisos-lista,
.pt-avisos-trilho:hover .pt-avisos-lista,
.pt-avisos-trilho:focus-within .pt-avisos-lista { animation-play-state: paused; }
.pt-avisos-pausar {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; background: transparent; color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pt-avisos-pausar:hover { background: rgba(255, 255, 255, .12); }
/* Menos movimento: nada rola; os avisos quebram linha e ficam todos visíveis. */
@media (prefers-reduced-motion: reduce) {
  .pt-avisos .pt-avisos-lista { animation: none !important; width: auto; flex-wrap: wrap; row-gap: 4px; }
  .pt-avisos-pausar { display: none; }
}
@media (max-width: 575.98px) {
  .pt-avisos-pausar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* ── Rodapé ────────────────────────────────────────────────────────── */
/* Fundo e faixa de copyright seguem as cores do painel (footer_color/copyright_color, via
   shared/_theme_colors); aqui só tipografia, grade, contraste dos links e foco. */
.pt .pt-rodape { margin-top: 0; padding-top: 32px; color: rgba(255, 255, 255, .82); font-size: 14px; }
.pt-rodape .footer-transparency-highlight { margin-bottom: 32px; }
.pt-rodape-grade {
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(200px, 1fr));
}
.pt-rodape-logo { display: inline-block; margin-bottom: 12px; color: #fff; }
.pt-rodape-logo img { max-height: 64px; width: auto; }
.pt-rodape-texto, .pt-rodape-texto p { color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.6; }
.pt .pt-rodape-titulo {
  margin: 0 0 12px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.3;
}
.pt-rodape-links { margin: 0; padding: 0; list-style: none; }
.pt-rodape-links li { padding: 4px 0; list-style: none; }
.pt-rodape-links a { color: rgba(255, 255, 255, .86); }
.pt-rodape-links a:hover, .pt-rodape-links a:focus-visible { color: #fff; text-decoration: underline; }
.pt-rodape-redes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pt-rodape-redes a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 17px;
}
.pt-rodape-redes a:hover, .pt-rodape-redes a:focus-visible { background: var(--mt-ouro); color: var(--mt-marinho-escuro); }
.pt .pt-rodape-copyright { margin-top: 32px; padding: 14px 0; font-size: 13px; text-align: center; }
.pt-rodape-copyright p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; }
.pt-rodape-copyright a { color: #fff; text-decoration: underline; }
@media (max-width: 767.98px) {
  .pt-rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ── Alto contraste (classe "contrast" no body, do contrast.js) ────── */
/* No portal o "contraste" é o modo escuro do site (public/css/contrast.css, paleta
   --dk-*): o esqueleto usa a mesma paleta, inclusive com o cabeçalho rolado. */
body.contrast.pt .mt-faixa { background: var(--dk-bg) !important; border-bottom-color: var(--dk-gold); }
body.contrast.pt .mt-topo,
body.contrast.pt .mt-topo.is-rolado { background: #08101e !important; color: var(--dk-text) !important; border-bottom-color: var(--dk-border); }
body.contrast.pt .mt-menu-link,
body.contrast.pt .mt-grupo-titulo,
body.contrast.pt .pt-acao:not(.pt-acao-destaque) { color: var(--dk-text) !important; border-color: var(--dk-border); background: transparent; }
body.contrast.pt .mt-menu-link.is-ativo,
body.contrast.pt .mt-grupo.is-ativo > .mt-grupo-titulo { color: var(--dk-gold) !important; }
body.contrast.pt .mt-menu { background: transparent !important; }
body.contrast.pt .mt-grupo-painel { background: var(--dk-surface) !important; border-color: var(--dk-border); color: var(--dk-text); }
@media (max-width: 1199.98px) {
  body.contrast.pt .mt-menu { background: var(--dk-surface) !important; color: var(--dk-text); }
}
/* Botões dourados: o contrast.css clareia a cor dos links; aqui o texto volta a ser escuro
   sobre o dourado (contraste AA). */
body.contrast.pt .pt-acao-destaque, body.contrast.pt .pt-acao-destaque * { color: #08101e !important; }
body.contrast.pt .mt-grupo-item { color: var(--dk-text) !important; }
body.contrast.pt .mt-grupo-item:hover,
body.contrast.pt .mt-grupo-item.is-ativo,
body.contrast.pt .pt-ver-tudo .mt-grupo-item { background: var(--dk-surface2); color: var(--dk-accent) !important; }
body.contrast.pt .mt-grupo-item i { color: var(--dk-muted); }
body.contrast.pt .pt-busca-campo { background: var(--dk-bg); color: var(--dk-text); border-color: var(--dk-border); }
body.contrast.pt .pt-acao[aria-pressed="true"] { background: var(--dk-gold); border-color: var(--dk-gold); color: #08101e !important; }
body.contrast.pt .pt-caminho .breadcrumb-item a { color: var(--dk-accent); }
body.contrast.pt .mt-gaveta-topo, body.contrast.pt .pt-so-gaveta { border-color: var(--dk-border); }
body.contrast.pt .mt-gaveta-titulo { color: var(--dk-text); }
body.contrast.pt .pt-rodape, body.contrast.pt .pt-rodape-copyright { background: #08101e !important; }

/* ── Impressão ─────────────────────────────────────────────────────── */
/* O núcleo já tira cabeçalho, menu e gaveta e deixa a faixa sem fundo; aqui saem os
   avisos, as ações da barra, o rodapé e os botões flutuantes. */
@media print {
  .pt-avisos, .pt-titulo-acoes, .pt-rodape, #sh-wa-widget, .bottomtotop, [vw], .pt-hero .carousel-control-prev,
  .pt-hero .carousel-control-next, .pt-hero .carousel-indicators { display: none !important; }
  .pt .pt-titulo h1, .pt-caminho .breadcrumb-item, .pt-caminho .breadcrumb-item a { color: #000 !important; }
  .pt .mt-conteudo { padding-top: 0; }
}