/* Estilos para o componente Top Bar */

/* Responsividade para desktop e mobile */
@media (min-width: 1024px) {
    .mobile-top-bar {
        display: none !important;
    }
    .desktop-top-bar {
        display: block !important;
    }
}

@media (max-width: 1023px) {
    .desktop-top-bar {
        display: none !important;
    }
    .mobile-top-bar {
        display: block !important;
    }
}

/* Altura padrão do top-bar */
.h-top-bar {
    height: 35px;
}

/* Tipografia estável do top-bar em páginas, posts e modo eleitoral */
#fixed-header .top-bar a,
#fixed-header .top-bar .text-small-text {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
}

#fixed-header .top-bar a {
    color: #ffffff;
    text-decoration: none;
}

#fixed-header .top-bar a:hover,
#fixed-header .top-bar a:focus {
    color: rgba(255, 255, 255, 0.8);
}

html.dark #fixed-header .top-bar a {
    color: #f5f5f5;
}

html.dark #fixed-header .top-bar a:hover,
html.dark #fixed-header .top-bar a:focus {
    color: #d4d4d4;
}

/* Estilos para os links do top-bar */
.top-bar-item a {
    display: inline-flex;
    align-items: center;
}

/* Estilos para o botão toggle do menu mobile */
.top-bar-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Transição suave para o menu mobile */
.top-bar-mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}