/* ============================================
   BARRA DE ACESSIBILIDADE (CUIABÁ)
   - layout limpo
   - responsivo
   - contraste acinzentado
   ============================================ */

/* ---------- Barra ---------- */
.barra-govbr{
  background: #0A7230;
  color: #fff;
  padding: 6px 16px;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .3px;
  line-height: 1.2;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  box-sizing: border-box;
  min-height: 40px;
  height: auto;
  flex-wrap: wrap;
}

/* ---------- Lista de acessibilidade (esquerda) ---------- */
.barra-govbr .acessibilidade{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Itens */
.barra-govbr .acessibilidade > li{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-left: 1px solid rgba(255,255,255,.6);
  padding-left: 10px;
}

/* Primeiro item sem borda */
.barra-govbr .acessibilidade > li.no-border{
  border-left: 0;
  padding-left: 0;
}

/* Links */
.barra-govbr .acessibilidade a{
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.barra-govbr .acessibilidade a:hover{
  text-decoration: underline !important;
}

/* Zoom link group */
.barra-govbr .zoom-page__link a{
  padding: 0 4px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Redes sociais (direita) ---------- */
.barra-govbr .sociais-header{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.barra-govbr .sociais-header a{
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
}

/* ---------- Fokus acessível ---------- */
.barra-govbr a:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
  .barra-govbr{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px){
  .barra-govbr{
    padding: 6px 10px;
    font-size: 10px;
    min-height: 0;
  }
}

/* ============================================
   CONTRASTE ACINZENTADO (novo padrão)
   JS adiciona: html.contraste-cinza
   ============================================ */
/* ============================================
   CONTRASTE CINZA (efeito Photoshop preto e branco)
   ============================================ */

html.contraste-cinza {
  filter: grayscale(100%) contrast(120%) brightness(90%);
  -webkit-filter: grayscale(100%) contrast(120%) brightness(90%);
  background: #f0f0f0 !important;
}

/* Garante que todas as imagens também fiquem em tons de cinza */
html.contraste-cinza img,
html.contraste-cinza picture,
html.contraste-cinza video,
html.contraste-cinza iframe,
html.contraste-cinza canvas {
  filter: grayscale(100%) contrast(110%);
  -webkit-filter: grayscale(100%) contrast(110%);
}

/* Ajusta cores de texto para melhor contraste */
html.contraste-cinza body {
  color: #222 !important;
  background: #f0f0f0 !important;
}

html.contraste-cinza h1,
html.contraste-cinza h2,
html.contraste-cinza h3,
html.contraste-cinza h4,
html.contraste-cinza h5,
html.contraste-cinza h6 {
  color: #111 !important;
}

/* Links visíveis em contraste */
html.contraste-cinza a {
  color: #2a2a2a !important;
  text-decoration: underline !important;
}

html.contraste-cinza a:hover,
html.contraste-cinza a:focus {
  color: #000 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Barra de acessibilidade em contraste */
html.contraste-cinza .barra-topo-acessibilidade,
html.contraste-cinza .barra-govbr {
  background: #444 !important;
  filter: grayscale(100%) contrast(120%);
  -webkit-filter: grayscale(100%) contrast(120%);
}

html.contraste-cinza .barra-topo-acessibilidade a,
html.contraste-cinza .barra-govbr a,
html.contraste-cinza .barra-topo-acessibilidade i,
html.contraste-cinza .barra-govbr i {
  color: #fff !important;
}

/* Botões sociais mantêm visibilidade */
html.contraste-cinza .sociais-header a {
  background: rgba(255, 255, 255, 0.2) !important;
}

html.contraste-cinza .sociais-header i {
  color: #fff !important;
}

/* Remove qualquer sombra ou efeito que atrapalhe */
html.contraste-cinza * {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Garante que fundos sejam claros */
html.contraste-cinza .bg-light,
html.contraste-cinza .bg-white,
html.contraste-cinza .card,
html.contraste-cinza .panel,
html.contraste-cinza .region-content,
html.contraste-cinza main {
  background-color: #f8f8f8 !important;
  color: #222 !important;
}

/* Ajusta bordas para serem mais visíveis */
html.contraste-cinza .border,
html.contraste-cinza [class*="border-"] {
  border-color: #aaa !important;
}



/* RESET FORÇADO DAS LISTAS */
ul.acessibilidade,
ul.sociais-header{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ACESSIBILIDADE HORIZONTAL */
ul.acessibilidade{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

ul.acessibilidade > li{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-left: 1px solid rgba(255,255,255,.6) !important;
  padding-left: 10px !important;
}

ul.acessibilidade > li.no-border{
  border-left: 0 !important;
  padding-left: 0 !important;
}

ul.acessibilidade a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* SOCIAIS À DIREITA */
ul.sociais-header{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Força cor da barra independente da classe exata */
.barra-govbr,
.barra-topo-acessibilidade{
  background: #0A7230 !important;
  color: #fff !important;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  box-sizing: border-box;
  min-height: 40px;
  flex-wrap: wrap;
}

/* Acessibilidade */
ul.acessibilidade{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

ul.acessibilidade > li{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-left: 1px solid rgba(255,255,255,.6) !important;
  padding-left: 10px !important;
}

ul.acessibilidade > li.no-border{
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Sociais */
ul.sociais-header{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* FORÇA TEXTO E ÍCONES BRANCOS NA BARRA */
.barra-govbr,
.barra-topo-acessibilidade{
  color: #ffffff !important;
}

.barra-govbr a,
.barra-topo-acessibilidade a{
  color: #ffffff !important;
}

.barra-govbr a span,
.barra-topo-acessibilidade a span{
  color: #ffffff !important;
}

/* FontAwesome */
.barra-govbr i,
.barra-topo-acessibilidade i,
.barra-govbr .fa,
.barra-topo-acessibilidade .fa,
.barra-govbr .fas,
.barra-topo-acessibilidade .fas,
.barra-govbr .far,
.barra-topo-acessibilidade .far{
  color: #ffffff !important;
}

/* Hover/focus não escurecer */
.barra-govbr a:hover,
.barra-topo-acessibilidade a:hover,
.barra-govbr a:focus,
.barra-topo-acessibilidade a:focus{
  color: #ffffff !important;
}

.barra-govbr svg,
.barra-topo-acessibilidade svg{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =====================================
   FORÇA BRANCO DIRETO NAS LISTAS
   ===================================== */

/* Links do menu de acessibilidade */
ul.acessibilidade a,
ul.acessibilidade a span{
  color: #fff !important;
}

/* Ícones do menu de acessibilidade */
ul.acessibilidade i,
ul.acessibilidade .fa,
ul.acessibilidade .fas,
ul.acessibilidade .far{
  color: #fff !important;
}

/* Links das redes */
ul.sociais-header a,
ul.sociais-header a span{
  color: #fff !important;
}

/* Ícones das redes */
ul.sociais-header i,
ul.sociais-header .fa,
ul.sociais-header .fas,
ul.sociais-header .far{
  color: #fff !important;
}

/* Hover/focus sem escurecer */
ul.acessibilidade a:hover,
ul.acessibilidade a:focus,
ul.sociais-header a:hover,
ul.sociais-header a:focus{
  color: #fff !important;
}

ul.acessibilidade > li > a > i,
ul.sociais-header > li > a > i{
  color: #fff !important;
}
ul.sociais-header { outline: 2px solid red !important; }


/* ==============================
   REDES NA BARRA (estilo quadrado)
   ============================== */

.sociais-header{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* cada botão */
.sociais-header a{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12); /* monocor suave */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

/* ícone */
.sociais-header i{
  color: #fff !important;
  font-size: 12px;
  line-height: 1;
}

/* hover leve */
.sociais-header a:hover{
  background: rgba(255,255,255,0.22);
}



.sociais-header a{ width: 26px; height: 20px; }
.sociais-header i{ font-size: 16px; }


.barra-govbr .sociais-header a,
.barra-topo-acessibilidade .sociais-header a{
  background: #ffffff !important;
}

.barra-govbr .sociais-header i,
.barra-topo-acessibilidade .sociais-header i{
  color: #0A7230 !important;
}

/* ===== CORES DOS ÍCONES POR LINK (barra de acessibilidade) ===== */
.barra-govbr .sociais-header a[href*="facebook.com"] i,
.barra-topo-acessibilidade .sociais-header a[href*="facebook.com"] i{
  color: #0A7230 !important;
}

.barra-govbr .sociais-header a[href*="instagram.com"] i,
.barra-topo-acessibilidade .sociais-header a[href*="instagram.com"] i{
  color: #0A7230 !important;
}

.barra-govbr .sociais-header a[href*="flickr.com"] i,
.barra-topo-acessibilidade .sociais-header a[href*="flickr.com"] i{
  color: #0A7230 !important;
}

.barra-govbr .sociais-header a[href*="youtube.com"] i,
.barra-topo-acessibilidade .sociais-header a[href*="youtube.com"] i{
  color: #0A7230 !important;
}



/* ==============================
   FIM REDES NA BARRA (estilo quadrado)
   ============================== */
   
   
/* ==============================
   TAMANHO DAS FONTES DA BARRA acessibilidade 
   ============================== */


.barra-govbr .acessibilidade a,
.barra-topo-acessibilidade .acessibilidade a{
  font-size: 12px !important;
}

/* ==============================
   FIM TAMANHO DAS FONTES DA BARRA acessibilidade 
   ============================== */