/* Barra de Tópicos (segunda linha do header, por baixo do principal) */
.trending-navigation{
  background-color: var(--main-navigation-bg, #00af00);
  border-top: 1px solid var(--main-navigation-border, rgba(0,0,0,.1));
  transition: transform .2s ease, opacity .2s ease;
}

/* Estado escondido quando há scroll 
.trending-navigation.hidden-on-scroll{
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}
*/

.trending-navigation .trending-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  scrollbar-width: thin;
}

.trending-navigation .trending-menu a{
  display: block;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  opacity: .95;
}

/* Em mobile escondemos, porque já tens off-canvas */
@media (max-width: 1000px){
  #trending-navigation{ display: none; }
}


/* Aplica transição suave a ambos os navs (desktop only) */
@media (min-width: 1000px){
  
  /* alturas de referência (ajusta se precisares) */
  #main-navigation{ --nav-h: 46px; }
  #trending-navigation{ --nav-h: 44px; }

  /* evitar que a sapopub fique tapada pela 2ª barra */
  .has-trending-nav .sapopub[data-pub-formatid="Richmedia"]{
    padding-top: 30px;
  }

  #main-navigation,
  #trending-navigation{
    box-sizing: border-box;
    max-height: var(--nav-h);
    transition:
      max-height .28s ease,
      transform  .28s ease,
      opacity    .28s ease,
      border-top-width .28s ease;
    will-change: transform, opacity, max-height;
    overflow: hidden; /* importante p/ colapsar conteúdo */
  }

  /* estado escondido: além de subir e esbater, COLAPSA altura */
  .nav-slide--hidden{
    max-height: 0 !important;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important; /* evita “hairline” do trending */
  }
}