/**
 * css/menu-mobile.css
 *
 * Novo submenu mobile (acordeão) para Soluções, Sobre e Conteúdos.
 * Só atua em telas <= 800px. Não altera o megamenu de desktop
 * nem o megamenu de Planos do ADV (mn-submenu-planos).
 *
 * IMPORTANTE: este arquivo vive em css/ (e não em menu-mobile/) porque
 * em produção o servidor não entrega arquivos estáticos de /menu-mobile/
 * — /menu-mobile/menu-mobile.css retornava 404, o que fazia a home cair
 * no visual antigo do menu mobile. As pastas css/ e js/ são servidas
 * normalmente.
 */

@media only screen and (max-width: 800px) {

    /* Esconde os megamenus antigos de desktop dentro do menu mobile —
       substituídos pelo acordeão novo (.mm-mobile__accordion-wrap) */
    .mn-barra .mn-submenu-solucoes,
    .mn-barra .mn-submenu-sobre,
    .mn-barra .mn-conteudos {
        display: none !important;
    }

    /* adv-start/index.php (conteudo real de /adv/): a .as-nav tem seu proprio
       nav desktop (.as-nav__links) e nasce com .mn-barra escondida (display:none
       em adv-start/style.css) — aqui reexibimos a gaveta mobile dedicada. */
    .as-nav .mn-barra {
        display: block;
    }

    /* ===== Botão hamburguer/fechar — visual novo ===== */
    .bt-menu-mobile {
        position: relative;
        z-index: 100000000;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #f1f5f9;
        gap: 6px;
        transition: background .25s ease;
    }

    .bt-menu-mobile:hover {
        background: #e7ecf5;
    }

    .bt-menu-mobile span {
        width: 20px;
        height: 2px;
        background: #111827;
        border-radius: 3px;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, background .25s ease;
    }

    .bt-menu-mobile.ativo {
        background: #eef3fd !important;
    }

    .bt-menu-mobile.ativo span {
        background: #0756E4;
    }

    .bt-menu-mobile.ativo span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .bt-menu-mobile.ativo span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .bt-menu-mobile.ativo span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* ===== Gaveta mobile — visual novo ===== */
    .mn-barra {
        background: #ffffff;
        padding: 96px 0 40px;
        box-shadow: -12px 0 40px rgba(15, 23, 42, .14);
    }

    .mn-barra ul {
        padding: 0 20px;
    }

    .mn-barra > ul > li {
        border-bottom: 1px solid #eef0f3;
    }

    .mn-barra a {
        padding: 15px 6px;
        font-family: 'Sora', sans-serif;
        font-size: 15.5px;
        font-weight: 600;
        color: #111827;
        border-radius: 10px;
        transition: background .15s, color .15s;
    }

    .mn-barra a:hover,
    .mn-barra a:active {
        background: #f5f8ff;
        color: #0756E4;
    }

    /* Chevron no lugar do "+" / "−" antigo */
    .mn-barra .mn-parent > a::after {
        content: '';
        width: 8px;
        height: 8px;
        right: 10px;
        border: none;
        border-right: 2px solid #9aa4b2;
        border-bottom: 2px solid #9aa4b2;
        transform: translateY(-65%) rotate(45deg);
        transition: transform .2s ease;
    }

    /* Indicador do acordeão novo quando aberto */
    .mn-barra .mn-parent.mm-mobile__open > a.lk-alvo::after {
        transform: translateY(-35%) rotate(-135deg);
    }

    /* Botões de ação (Store / Login / Teste Grátis / Projuris IA) */
    .mn-barra .mn-botao,
    .mn-barra .mn-store,
    .mn-barra .mn-bt,
    .mn-barra .mn-bt-invertido {
        padding: 8px 0;
    }

    .mn-barra .mn-botao a,
    .mn-barra .mn-bt a {
        border-radius: 100px;
        font-family: 'Sora', sans-serif;
        box-shadow: 0 4px 14px rgba(0, 182, 0, .25);
    }

    .mn-barra .mn-store a {
        border-radius: 10px;
        background: #f8fafc;
        font-weight: 600;
        color: #111827 !important;
    }
    .mn-barra .mn-store a:hover {
        background: #eef2f6;
    }

    .mn-barra .mn-login a {
        border-radius: 100px;
    }

    .mn-barra .mn-bt-invertido a {
        display: block;
        border-radius: 10px;
        background: #eef3fd !important;
        color: #0756E4 !important;
        font-weight: 600;
        text-align: center;
        padding: 14px 20px;
        margin: 5px 0;
    }

    /* Wrapper do painel do acordeão (injetado via JS logo após o <li> do item) */
    .mm-mobile__accordion-wrap {
        display: none;
        list-style: none;
        background: #f8fafc;
        border-bottom: 1px solid #e5e5e5;
    }
    .mm-mobile__accordion-wrap.mm-mobile__open {
        display: block;
    }

    .mm-mobile__panel {
        padding: 4px 20px 16px 20px;
    }

    .mm-mobile__group {
        margin-bottom: 16px;
    }
    .mm-mobile__group:last-child {
        margin-bottom: 4px;
    }

    .mm-mobile__label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #94a3b8;
        margin: 8px 0 8px;
    }

    .mm-mobile__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 8px;
        border-radius: 8px;
        text-decoration: none;
        margin-bottom: 2px;
    }
    .mm-mobile__item:hover,
    .mm-mobile__item:active {
        background: #eef3fd;
    }

    .mm-mobile__item--text {
        padding: 9px 8px;
        border-bottom: 1px solid #eef0f3;
        border-radius: 0;
        margin-bottom: 0;
    }
    .mm-mobile__item--text:last-child {
        border-bottom: none;
    }
    .mm-mobile__item--text:hover,
    .mm-mobile__item--text:active {
        background: transparent;
    }

    .mm-mobile__item-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #eef3fd;
        color: #0756E4;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .mm-mobile__item-body {
        flex: 1;
        min-width: 0;
    }
    .mm-mobile__item-body strong {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        line-height: 1.25;
        margin-bottom: 2px;
    }
    .mm-mobile__item-body span {
        display: block;
        font-size: 11.5px;
        color: #6b7280;
        line-height: 1.35;
        font-family: 'Sora', sans-serif;
    }
}