/*
 * Tributo Municipal — modernizacao visual 2026
 * Camada isolada e reversivel. Remover este arquivo e sua chamada no
 * template restaura integralmente o visual anterior.
 */

:root {
  --tm-green-900: #064e2b;
  --tm-green-800: #076336;
  --tm-green-700: #087a42;
  --tm-green-500: #20a75a;
  --tm-surface: #ffffff;
  --tm-shadow-sm: 0 5px 14px rgba(2, 48, 25, 0.16);
  --tm-shadow-md: 0 10px 24px rgba(2, 48, 25, 0.24);
}

/* Redes sociais — formas atuais, contraste e resposta a teclado/mouse. */
#top2 .yt_socials .modcontent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#top2 .yt_socials div.yt-socialbt {
  margin: 0;
  overflow: visible;
  border-radius: 12px;
}

#top2 .yt_socials div.yt-socialbt a.sb {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(6, 99, 54, 0.22);
  border-radius: 12px;
  color: var(--tm-green-800);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 10px rgba(2, 48, 25, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease,
    background 180ms ease, color 180ms ease, border-color 180ms ease;
}

#top2 .yt_socials div.yt-socialbt a.sb .fa {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  transition: none;
}

#top2 .yt_socials div.yt-socialbt a.sb .fa::after {
  display: none;
}

/* O pacote antigo nao possui o glifo atual do X. */
#top2 .yt_socials a.twitter .fa-twitter::before {
  content: "X";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

#top2 .yt_socials div.yt-socialbt a.sb:hover,
#top2 .yt_socials div.yt-socialbt a.sb:focus-visible {
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow-sm);
  outline: none;
}

#top2 .yt_socials a.facebook:hover,
#top2 .yt_socials a.facebook:focus-visible {
  background: #1877f2;
}

#top2 .yt_socials a.youtube:hover,
#top2 .yt_socials a.youtube:focus-visible {
  background: #ff0033;
}

#top2 .yt_socials a.twitter:hover,
#top2 .yt_socials a.twitter:focus-visible {
  background: #111;
}

#top2 .yt_socials a.instagram:hover,
#top2 .yt_socials a.instagram:focus-visible {
  background: linear-gradient(135deg, #833ab4, #fd1d1d 58%, #fcb045);
}

/* Hover unificado, vibrante e legivel em todos os canais. */
#top2 .yt_socials div.yt-socialbt a.sb:hover,
#top2 .yt_socials div.yt-socialbt a.sb:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #833ab4 5%, #c13584 38%, #fd1d1d 70%, #fcb045 100%) !important;
}

#top2 .yt_socials div.yt-socialbt a.sb:hover .fa,
#top2 .yt_socials div.yt-socialbt a.sb:focus-visible .fa,
#top2 .yt_socials div.yt-socialbt a.sb:hover .fa::before,
#top2 .yt_socials div.yt-socialbt a.sb:focus-visible .fa::before {
  color: #fff !important;
}

/* Titulos dos Destaques: mais informacao sem dominar a fotografia. */
body.homepage #sj_k2slickslider329 .item-content .item-title a {
  font-size: 22px;
  line-height: 1.15;
}

body.homepage #sj_k2slickslider329 .item-info .date,
body.homepage #sj_k2slickslider329 .item-info .item-comments,
body.homepage #sj_k2slickslider329 .item-info .fa {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

body.homepage #sj_k2slickslider329 .item-info .seperator {
  background: rgba(255, 255, 255, 0.72);
}

body.homepage #sj_k2slickslider329 .item-info .item-comments:hover,
body.homepage #sj_k2slickslider329 .item-info .item-comments:focus-visible {
  color: #fff !important;
  text-decoration: underline;
}

/* Menu principal — ritmo, cantos suaves e menus suspensos mais legiveis. */
@media (min-width: 980px) {
  #yt_header {
    background: linear-gradient(110deg, var(--tm-green-900), var(--tm-green-700));
    box-shadow: 0 5px 18px rgba(2, 48, 25, 0.2);
  }

  #yt_menuposition ul.navi {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 54px;
  }

  #yt_menuposition ul.navi .fancy {
    display: none !important;
  }

  #yt_menuposition ul.navi > li.level1 {
    float: none;
  }

  #yt_menuposition ul.navi > li.level1 > .item-link {
    margin: 5px 0;
    padding: 7px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    line-height: 28px;
    font-size: 15px;
    letter-spacing: 0.015em;
    transition: transform 180ms ease, background 180ms ease,
      border-color 180ms ease, box-shadow 180ms ease;
  }

  #yt_menuposition ul.navi > li.level1.active {
    background: transparent;
  }

  #yt_menuposition ul.navi > li.level1.active > .item-link,
  #yt_menuposition ul.navi > li.level1:hover > .item-link,
  #yt_menuposition ul.navi > li.level1 > .item-link:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    outline: none;
  }

  #yt_menuposition ul.navi > li.level1.active > .item-link {
    background: linear-gradient(135deg, #20a75a, #118044);
  }

  #yt_menuposition ul.navi ul.subnavi,
  #yt_menuposition #meganavigator .mega-content {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 12px 12px;
    background: var(--tm-green-800);
    box-shadow: var(--tm-shadow-md);
  }

  #yt_menuposition ul.navi ul.subnavi li .item-link {
    margin: 3px 5px;
    border-radius: 7px;
  }

  #yt_menuposition ul.navi ul.subnavi li:hover > .item-link,
  #yt_menuposition ul.navi ul.subnavi li.hover > .item-link,
  #yt_menuposition ul.navi ul.subnavi li.active > .item-link {
    background: rgba(255, 255, 255, 0.15);
  }

  /* O painel de Destaques passa a acompanhar a lista vizinha (502 px). */
  body.homepage #maintop2,
  body.homepage #sj_k2slickslider329,
  body.homepage #sj_k2slickslider329 .slickslider-items,
  body.homepage #sj_k2slickslider329 .slickslider-item,
  body.homepage #sj_k2slickslider329 .item-image,
  body.homepage #sj_k2slickslider329 .item-image-inner,
  body.homepage #sj_k2slickslider329 .item-image-inner > a {
    height: 502px !important;
  }

  body.homepage #sj_k2slickslider329 .item-image img {
    width: 100%;
    height: 502px !important;
    object-fit: cover;
  }

  /* A faixa verde lateral cede seus 100 px ao slide de Destaques. */
  body.homepage #maintop1 {
    display: none;
  }

  body.homepage #maintop2,
  body.homepage #sj_k2slickslider329,
  body.homepage #sj_k2slickslider329 .slickslider-items,
  body.homepage #sj_k2slickslider329 .slickslider-item,
  body.homepage #sj_k2slickslider329 .item-image,
  body.homepage #sj_k2slickslider329 .item-image-inner,
  body.homepage #sj_k2slickslider329 .item-image-inner > a,
  body.homepage #sj_k2slickslider329 .item-image img {
    width: 450px !important;
    max-width: 450px !important;
  }

  /* O bloco legado tinha 475 px e cortava o novo botao da Editora. */
  body.homepage #mainbottom1,
  body.homepage #mainbottom2 {
    height: 510px;
  }
}

@media (max-width: 979px) {
  #top2 .yt_socials .modcontent {
    gap: 6px;
  }

  #top2 .yt_socials div.yt-socialbt a.sb {
    width: 38px;
    height: 38px;
  }

  body.homepage #sj_k2slickslider329 .item-content .item-title a {
    font-size: 18px;
    line-height: 1.2;
  }
}

@media (max-width: 767px) {
  /*
   * As redes voltam ao fluxo do #top2.
   *
   * A versao anterior usava position:absolute para centralizar os icones. Isso
   * esvaziava o #top2 — que e float:right sem largura declarada — e o colapsava
   * para 0x0, deixando os icones fora do proprio container e exigindo um
   * min-height artificial no #yt_top para reservar o espaco vazio.
   *
   * Em fluxo, o #top2 recupera largura sozinho e encosta a direita do logo.
   * Medido em 375px: mesma linha, 22px de folga, topo de 63px contra 136px.
   * Abaixo de ~360px os icones descem para uma segunda linha, ainda a direita
   * e dentro do container.
   */
  #bd #yt_top {
    position: relative;
    min-height: 0;
    box-sizing: border-box;
  }

  /* O logo e o #top2 flutuam; a linha precisa conter os dois. */
  #bd #yt_top .yt-main-in2::after {
    display: table;
    clear: both;
    content: "";
  }

  #bd #yt_top #yt_logoposition {
    float: left;
  }

  #bd #yt_top #top2 {
    float: right;
    width: auto;
    margin: 0;
    padding: 0;
  }

  #bd #yt_top #top2 .module {
    float: none;
    margin: 0;
    padding: 0;
  }

  #bd #yt_top .yt_socials,
  #bd #yt_top .yt_socials.jmoddiv {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
  }

  #bd #yt_top .yt_socials .modcontent {
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    padding: 0;
  }

  #bd #yt_top .yt_socials div.yt-socialbt {
    margin: 0;
    padding: 0;
  }

  /*
   * 32px e o maior tamanho que mantem os icones na mesma linha do logo em
   * 375px; a partir de 34px a linha quebra.
   */
  #bd #yt_top .yt_socials div.yt-socialbt a.sb {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  #bd #yt_top .yt_socials div.yt-socialbt a.sb .fa {
    font-size: 15px;
  }

  /*
   * O desenho fica em 32px, mas o alvo de toque sobe para 44px na vertical,
   * onde ha espaco livre. Na horizontal cresce apenas 2px de cada lado para
   * nao invadir o alvo do icone vizinho.
   */
  #bd #yt_top .yt_socials div.yt-socialbt a.sb::after {
    position: absolute;
    top: -6px;
    right: -2px;
    bottom: -6px;
    left: -2px;
    display: block;
    content: "";
  }
}

@media (prefers-reduced-motion: reduce) {
  #top2 .yt_socials div.yt-socialbt a.sb,
  #yt_menuposition ul.navi > li.level1 > .item-link {
    transition: none;
  }
}

/* Editora — capas consistentes e uma grade de obras com leitura mais clara. */
body.homepage #mainbottom2 .module.trending {
  overflow: hidden;
  border: 1px solid rgba(6, 99, 54, 0.1);
  border-radius: 14px;
  background: #f5f8f6;
  box-shadow: 0 8px 24px rgba(2, 48, 25, 0.09);
}

body.homepage #mainbottom2 .module.trending h3.modtitle {
  margin: 0;
  padding: 14px 20px;
  color: var(--tm-green-900);
  background: linear-gradient(90deg, #eef6f1, #f8fbf9);
  font-size: 19px;
  letter-spacing: 0.025em;
}

body.homepage #mainbottom2 .module.trending .modcontent {
  padding: 15px 18px 16px;
}

body.homepage #mainbottom2 .module.trending .mgi-cat {
  margin-bottom: 12px;
  border: 0;
}

body.homepage #mainbottom2 .module.trending .mgi-cat a {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--tm-green-800);
  background: rgba(32, 167, 90, 0.12);
  font-size: 11px;
  letter-spacing: 0.045em;
}

body.homepage #mainbottom2 .module.trending .mgi-items.column3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.homepage #mainbottom2 .module.trending .mgi-items .item-wrap {
  display: flex;
  float: none;
  flex-direction: column;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(6, 99, 54, 0.1);
  border-radius: 12px;
  background: var(--tm-surface);
  box-shadow: 0 4px 13px rgba(2, 48, 25, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease,
    border-color 180ms ease;
}

body.homepage #mainbottom2 .module.trending .mgi-items .item-wrap:hover {
  border-color: rgba(32, 167, 90, 0.28);
  box-shadow: 0 9px 22px rgba(2, 48, 25, 0.14);
  transform: translateY(-3px);
}

body.homepage #mainbottom2 .module.trending .item-image {
  order: 1;
  float: none;
  width: 100%;
  height: 218px;
  margin: 0 0 11px;
  border-radius: 9px;
  background: #f4f6f5;
}

body.homepage #mainbottom2 .module.trending .item-image a {
  display: block;
  width: 100%;
  height: 100%;
}

body.homepage #mainbottom2 .module.trending .item-image img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  float: none !important;
  object-fit: contain;
  transition: transform 180ms ease;
}

body.homepage #mainbottom2 .module.trending .item-wrap:hover .item-image img {
  opacity: 1;
  transform: scale(1.025);
}

body.homepage #mainbottom2 .module.trending .item-title {
  order: 2;
  min-height: 42px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

body.homepage #mainbottom2 .module.trending .item-title a {
  color: #173f2c;
}

body.homepage #mainbottom2 .module.trending .clear {
  display: none;
}

body.homepage #mainbottom2 .module.trending .view-all {
  margin-top: 13px;
}

body.homepage #mainbottom2 .module.trending .view-all a {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 9px;
  color: #fff;
  background: var(--tm-green-800);
  background-image: none;
  font-size: 12px;
  transition: background 180ms ease, transform 180ms ease;
}

body.homepage #mainbottom2 .module.trending .view-all a:hover,
body.homepage #mainbottom2 .module.trending .view-all a:focus-visible {
  color: #fff;
  background: var(--tm-green-700);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  body.homepage #mainbottom2 .module.trending .mgi-items.column3 {
    grid-template-columns: 1fr;
  }

  body.homepage #mainbottom2 .module.trending .item-image {
    height: 260px;
  }
}