/* Menu de âncoras das páginas PPFL no celular/tablet (js/academia/menu-ppfl-mobile.js).
   Desktop continua com a faixa horizontal de cada página; abaixo de 992px (celular e tablet em pé) ela vira um seletor fino
   "Nesta página: <seção> ▾" e a lista de seções abre por baixo, sem cortar itens nas laterais.
   Carregado depois do CSS da página: os seletores com .menu-ppfl na frente vencem os da faixa. */

.menu-ppfl .menu-ppfl__toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .menu-ppfl {
        min-height: 0;
    }

    /* Âncoras: o topo da seção para logo abaixo do seletor (não da faixa alta do desktop). */
    .menu-ppfl ~ [id] {
        scroll-margin-top: 56px;
    }

    .menu-ppfl .menu-ppfl__toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        border: 0;
        background: transparent;
        font-family: var(--font-primary, 'Roboto', sans-serif);
        font-size: 0.95rem;
        color: var(--color-navy-deep, #29235c);
        text-align: left;
        cursor: pointer;
    }

    .menu-ppfl .menu-ppfl__toggle:focus-visible {
        outline: 2px solid var(--color-navy-deep, #29235c);
        outline-offset: -4px;
    }

    .menu-ppfl .menu-ppfl__toggle-rotulo {
        flex: 0 0 auto;
        color: var(--color-navy-soft, #5b5880);
        white-space: nowrap;
    }

    .menu-ppfl .menu-ppfl__toggle-atual {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
        color: var(--color-magenta, #ff8000);
    }

    .menu-ppfl .menu-ppfl__toggle-icone {
        flex: 0 0 auto;
        font-size: 0.85rem;
        transition: transform 0.2s ease;
    }

    .menu-ppfl.is-open .menu-ppfl__toggle-icone {
        transform: rotate(180deg);
    }

    /* Lista: painel que abre sob o seletor, por cima do conteúdo (não muda a altura da faixa). */
    .menu-ppfl .menu-ppfl__inner {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 70vh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4px 16px 12px;
        background-color: var(--menu-ppfl-lilac-bg, #fff5ed);
        box-shadow: 0 12px 24px rgba(41, 35, 92, 0.18);
    }

    .menu-ppfl.is-open .menu-ppfl__inner {
        display: block;
    }

    .menu-ppfl .menu-ppfl__list {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        border-bottom: 0;
        white-space: normal;
    }

    .menu-ppfl .menu-ppfl__item {
        display: block;
    }

    .menu-ppfl .menu-ppfl__item:not(:last-child)::after {
        content: none;
    }

    .menu-ppfl .menu-ppfl__link {
        padding: 12px 4px 12px 12px;
        font-size: 1rem;
        line-height: 1.35;
        border-bottom: 1px solid rgba(41, 35, 92, 0.08);
    }

    .menu-ppfl .menu-ppfl__item:last-child .menu-ppfl__link {
        border-bottom: 0;
    }

    /* Item ativo: barra à esquerda no lugar do sublinhado da faixa. */
    .menu-ppfl .menu-ppfl__link.is-active::after {
        top: 10px;
        bottom: 10px;
        left: 0;
        right: auto;
        width: 3px;
        height: auto;
        border-radius: 2px;
    }
}