@import url('site_buttons_solid.css');

/**
 * Barra de navegação superior — links em pílulas para leitura e clique claros.
 * Estrutura alinhada à home: .top-bar > .container > .row.align-items-center > .col-12 > .top-bar-container
 *
 * Tipografia da barra é fixa (--rr-font-ui-sans): não herda Plus Jakarta / outras fontes do body
 * na área logada, mantendo o mesmo aspecto da home e do restante do site público.
 */
.top-bar {
    width: 100%;
    background-color: rgb(14, 92, 28);
    padding: 10px 16px;
    z-index: 1000;
    box-shadow: 0 0 0 0.2rem rgba(46, 160, 67, 0.25);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--rr-font-ui-sans);
}

.top-bar > .container {
    display: flex;
    align-items: center;
    width: 100%;
}

.top-bar .row {
    width: 100%;
    margin-bottom: 0;
}

.top-bar .row > [class*="col-"] {
    display: flex;
    align-items: center;
}

.top-bar-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
}

/*
 * Site — ≥992px: uma linha, links à esquerda e conta/Entrar à direita.
 * ≤991px: coluna (painel mobile / menu aberto); ver bloco @media mais abaixo.
 */
@media (min-width: 992px) {
    .top-bar-site .top-bar-container {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        gap: 0.45rem 0.55rem;
    }

    .top-bar-site .site-links-principal {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        flex-wrap: wrap;
        align-self: center;
    }

    .top-bar-site #contaNavSlot,
    .top-bar-site .top-bar-usuario-wrap {
        margin-left: auto !important;
        margin-right: 0;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        align-self: center;
    }

    .top-bar-site #contaNavSlot:not(.dropdown) {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .top-bar-site #contaNavSlot.dropdown,
    .top-bar-site .top-bar-usuario-wrap {
        display: block;
    }
}

@media (max-width: 991.98px) {
    .top-bar-site .top-bar-container {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: flex-start;
        justify-content: flex-start;
        gap: 0.4rem 0;
    }

    .top-bar-site .site-links-principal {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-self: stretch;
    }

    .top-bar-site #contaNavSlot,
    .top-bar-site .top-bar-usuario-wrap {
        margin-left: 0 !important;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .top-bar-site #contaNavSlot:not(.dropdown) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
    }

    .top-bar-site #contaNavSlot.dropdown,
    .top-bar-site .top-bar-usuario-wrap {
        display: block;
    }
}

.top-bar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.top-bar-link:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.48);
    color: #ffffff;
}

.top-bar-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 2px;
}

/* Destaque — Educação (simulados) */
.top-bar-link[href*="educacao"] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-color: rgba(255, 224, 178, 0.75);
    color: #ffffff;
}

.top-bar-link[href*="educacao"]:hover {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    border-color: rgba(255, 237, 213, 0.95);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .top-bar {
        padding: 8px 12px;
    }

    .top-bar-link {
        font-size: 0.88rem;
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .top-bar {
        padding: 6px 10px;
    }

    .top-bar-container {
        gap: 0.4rem;
    }

    .top-bar-link {
        font-size: 0.82rem;
        padding: 0.45rem 0.65rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Menu hambúrguer — apenas em .top-bar-site (não afeta VU / outras UIs)      */
/* -------------------------------------------------------------------------- */
:root {
    --top-bar-mobile-h: 56px;
    /* UI pública (barra, rodapé verde): alinhado ao stack legível do Bootstrap, independente do body */
    --rr-font-ui-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', 'Liberation Sans', sans-serif;
    /*
     * Acima do stack Bootstrap 5.3 (popover ~1070, tooltip ~1080, toast ~1090) para o painel do menu
     * mobile não ficar por baixo de toasts / camadas da página (ex.: conta/desafios.php).
     */
    --rr-nav-mobile-menu-aberto-z: 11100;
    --rr-nav-mobile-scrim-z: 11090;
    /* Acima da barra e do painel do menu — botão sempre visível no canto da tela */
    --rr-nav-mobile-toggle-z: 11150;
    /* Dropdown “Conta” (desktop) = mesmo acabamento do painel (mobile/tablet) */
    --rr-nav-conta-dd-bg: rgba(8, 12, 16, 0.96);
    --rr-nav-conta-dd-border: 1px solid rgba(255, 255, 255, 0.12);
    --rr-nav-conta-dd-radius: 0.75rem;
    --rr-nav-conta-dd-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    --rr-nav-conta-dd-z: 11140;
}

body.menu-mobile-aberto {
    overflow: hidden;
    touch-action: none;
}

.top-bar-mobile-header {
    display: none;
}

.top-bar-mobile-toggle {
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 999px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 12px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        filter 0.15s ease;
    position: relative;
}

/* Ícone injetado por top-bar-mobile.js (SVG) — não usa ::before/::after (bug de pintura pós-load no WebKit). */
.top-bar-mobile-toggle-svg {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #ffffff;
    flex-shrink: 0;
    pointer-events: none;
}

.top-bar-mobile-toggle-icon {
    grid-area: 1 / 1;
    display: block;
}

.top-bar-mobile-toggle-icon--close {
    display: none;
}

.top-bar-site.menu-aberto #topBarToggle .top-bar-mobile-toggle-icon--bars {
    display: none;
}

.top-bar-site.menu-aberto #topBarToggle .top-bar-mobile-toggle-icon--close {
    display: block;
}

.top-bar-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

/* Não usar transform no :active — quebra pintura dos ::before/::after do ícone até o próximo resize/reflow. */
.top-bar-mobile-toggle:active {
    filter: brightness(1.12);
}

.top-bar-mobile-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* Escurece o conteúdo atrás do menu (controlado por JS) */
.top-bar-menu-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1065;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body.menu-mobile-aberto .top-bar-menu-scrim {
    display: block;
    z-index: var(--rr-nav-mobile-scrim-z);
}

@media (max-width: 991.98px) {
    /*
     * 100vw inclui a largura da barra de rolagem em alguns navegadores → overflow horizontal
     * e o conteúdo “empurra”; o hambúrguer fixed parece sair da tela. Evitar com max-width 100%.
     */
    html:has(.top-bar-site),
    body:has(.top-bar-site) {
        max-width: 100%;
        overflow-x: hidden;
    }

    body:has(.top-bar-site) {
        padding-top: calc(var(--top-bar-mobile-h) + env(safe-area-inset-top, 0px));
    }

    .top-bar-site {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1070;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: var(--top-bar-mobile-h);
        padding: max(6px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    }

    .top-bar-site > .container {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        padding: 0;
    }

    .top-bar-site .row {
        margin: 0;
        width: 100%;
        flex-wrap: nowrap;
    }

    /*
     * Coluna no mobile: faixa "marca + hambúrguer" fica numa linha própria com largura total.
     * Com flex-direction row (padrão da .row), o botão podia sumir ou ser comprimido em algumas páginas.
     */
    .top-bar-site .row > [class*="col-"] {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    /*
     * Faixa superior: marca + hambúrguer.
     * Grid evita o pseudo-elemento (::before) com flex-grow “comer” a largura do botão
     * (em alguns WebKit o ícone sumia ou ficava com largura 0).
     */
    .top-bar-site .top-bar-mobile-header {
        display: grid;
        /* Uma coluna: o botão fica position:fixed no canto da tela, não no fluxo do grid */
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        column-gap: 0;
        width: 100%;
        min-height: calc(var(--top-bar-mobile-h) - 14px);
        padding-right: calc(46px + 0.65rem + max(12px, env(safe-area-inset-right, 0px)));
        box-sizing: border-box;
        /* Acima do painel rolável (#topBarMenu, z-index 1068) para o hambúrguer não ficar sob o overlay */
        position: relative;
        z-index: 1080;
    }

    .top-bar-site .top-bar-mobile-header::before {
        content: 'Roda de Rádio';
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        padding-left: 2px;
        font-weight: 800;
        font-size: 0.98rem;
        letter-spacing: 0.03em;
        color: rgba(255, 255, 255, 0.96);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-bar-site .top-bar-mobile-header .top-bar-mobile-toggle {
        position: fixed;
        top: max(6px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        z-index: var(--rr-nav-mobile-toggle-z);
        flex-shrink: 0;
        min-width: 46px;
        min-height: 46px;
        box-sizing: border-box;
        margin: 0;
    }

    .top-bar-site .top-bar-container {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--top-bar-mobile-h) + env(safe-area-inset-top, 0px));
        bottom: 0;
        z-index: 1068;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0.85rem 0.85rem max(1rem, env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: flex-start;
        gap: 0.55rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(180deg, rgba(18, 28, 22, 0.98) 0%, rgba(10, 15, 18, 0.99) 45%, #070a0d 100%);
        border: none;
        border-radius: 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* Acima de toasts/tooltips da página (Bootstrap ~1080–1090) */
    .top-bar-site.menu-aberto {
        z-index: var(--rr-nav-mobile-menu-aberto-z);
    }

    .top-bar-site.menu-aberto .top-bar-container {
        display: flex;
    }

    .top-bar-site.menu-aberto .site-links-principal {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.45rem;
    }

    .top-bar-site.menu-aberto .site-links-principal::before {
        content: 'Navegação';
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(175, 244, 198, 0.75);
        padding: 0.15rem 0.25rem 0.35rem;
    }

    .top-bar-site.menu-aberto .top-bar-link {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        font-size: 0.98rem;
        font-weight: 600;
        padding: 0.85rem 1rem;
        min-height: 48px;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
        color: #ffffff;
    }

    .top-bar-site.menu-aberto .top-bar-link:hover {
        background: rgba(46, 160, 67, 0.28);
        border-color: rgba(63, 185, 80, 0.45);
        color: #ffffff;
    }

    .top-bar-site.menu-aberto .top-bar-link[href*='educacao'] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.42), rgba(249, 115, 22, 0.45));
        border-color: rgba(255, 224, 178, 0.4);
        color: #ffffff;
    }

    .top-bar-site.menu-aberto .top-bar-link[href*='educacao']:hover {
        background: linear-gradient(135deg, #fb923c, #ea580c);
        border-color: rgba(255, 237, 213, 0.85);
        color: #ffffff;
    }

    /* Conta / Entrar: sempre abaixo da navegação (evita coluna extra com flex-wrap) */
    .top-bar-site.menu-aberto #contaNavSlot,
    .top-bar-site.menu-aberto .top-bar-usuario-wrap {
        margin-top: 0.35rem;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        align-self: stretch;
        display: block;
    }

    .top-bar-site.menu-aberto .top-bar-usuario-wrap::before {
        content: 'Conta';
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(175, 244, 198, 0.75);
        padding: 0 0.25rem 0.45rem;
    }

    .top-bar-site.menu-aberto .usuario-dd-toggle {
        border-radius: 0.75rem !important;
        width: 100%;
        max-width: none !important;
        min-height: 48px;
        padding: 0.5rem 0.85rem !important;
        justify-content: flex-start;
        text-align: left;
    }

    /*
     * Conta no mobile: itens no mesmo fluxo rolável do painel (não dropdown flutuante).
     * Evita menu “para baixo” fora da área com scroll e body com overflow:hidden.
     */
    .top-bar-site.menu-aberto .top-bar-usuario-wrap.dropdown,
    .top-bar-site.menu-aberto .top-bar-usuario-wrap.dropup {
        position: relative;
    }

    .top-bar-site.menu-aberto .top-bar-usuario-wrap .dropdown-menu {
        display: block !important;
        position: static !important;
        transform: none !important;
        inset: auto !important;
        float: none;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0.35rem 0 0;
        border-radius: var(--rr-nav-conta-dd-radius);
        border: var(--rr-nav-conta-dd-border);
        background: var(--rr-nav-conta-dd-bg);
        box-shadow: none;
    }

    /* Itens da conta ocupam a linha toda */
    .top-bar-site.menu-aberto .top-bar-usuario-wrap .dropdown-item,
    .top-bar-site.menu-aberto .top-bar-usuario-wrap .dropdown-item:active,
    .top-bar-site.menu-aberto .top-bar-usuario-wrap .dropdown-item:focus {
        width: 100%;
        white-space: normal;
    }

    .top-bar-site.menu-aberto .top-bar-usuario-wrap.dropup .dropdown-menu {
        inset: auto !important;
        transform: none !important;
        margin-top: 0.35rem;
        margin-bottom: 0;
    }

    .top-bar-site.menu-aberto .top-bar-usuario-wrap .usuario-dd-toggle::after {
        display: none;
    }
}