/* =====================================================================
   FJLS — MENU MOBILE (overlay + card), feito na mão, fora do Divi.
   Gatilho: .fjls-mnav-trigger (botão hambúrguer, só aparece <=980px)
   Painel:  #fjls-mnav-panel  (overlay + card brancos, cobre a tela toda)
   O JS (fjls-mobile-menu.js) só liga/desliga a classe ".is-open" e o
   aria-hidden; toda a aparência/posição fica aqui.
   ===================================================================== */

:root {
    --fjls-mnav-azul: #002E80;
    --fjls-mnav-overlay: rgba(2, 10, 30, .55);
    --fjls-mnav-card-bg: #FFFFFF;
    --fjls-mnav-texto: #0A1A3D;
    --fjls-mnav-texto-sub: #6B7690;
    --fjls-mnav-linha: rgba(10, 26, 61, .10);
    --fjls-mnav-hover: rgba(10, 26, 61, .05);
    --fjls-mnav-verde: #0BBF37;
    --fjls-mnav-margem: 14px;
}

/* trigger só existe em telas de menu mobile; desktop nem renderiza */
.fjls-mnav-trigger {
    display: none;
}

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

    /* esconde o hamburguer/painel nativo do Divi — usamos o nosso, feito na mao */
    .et_mobile_nav_menu {
        display: none !important;
    }

    /* -------------------- 1. BOTÃO HAMBÚRGUER -------------------- */
    .fjls-mnav-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .fjls-mnav-trigger__box {
        position: relative;
        width: 26px;
        height: 18px;
    }

    .fjls-mnav-trigger__box span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: #ffffff;
        transition: background-color .2s ease;
    }

    .fjls-mnav-trigger__box span:nth-child(1) {
        top: 0;
    }

    .fjls-mnav-trigger__box span:nth-child(2) {
        top: 8px;
    }

    .fjls-mnav-trigger__box span:nth-child(3) {
        top: 16px;
    }

    /* header ficou "scrolled" (fundo branco) -> ícone escuro */
    .et_pb_section_0_tb_header.fjls-header-sticky--scrolled .fjls-mnav-trigger__box span {
        background-color: var(--fjls-mnav-azul);
    }

    /* -------------------- 2. PAINEL (overlay + card) -------------------- */
    .fjls-mnav {
        position: fixed;
        inset: 0;
        z-index: 999999;
        pointer-events: none;
    }

    .fjls-mnav.is-open {
        pointer-events: auto;
    }

    .fjls-mnav__overlay {
        position: absolute;
        inset: 0;
        background: var(--fjls-mnav-overlay);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .fjls-mnav.is-open .fjls-mnav__overlay {
        opacity: 1;
    }

    .fjls-mnav__card {
        position: absolute;
        top: var(--fjls-mnav-margem);
        bottom: var(--fjls-mnav-margem);
        left: var(--fjls-mnav-margem);
        right: var(--fjls-mnav-margem);
        display: flex;
        flex-direction: column;
        background-color: var(--fjls-mnav-card-bg);
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(0, 12, 40, .35);
        overflow: hidden;
        transform: translateX(115%);
        transition: transform .42s cubic-bezier(.22, .68, 0, 1.01);
    }

    .fjls-mnav.is-open .fjls-mnav__card {
        transform: translateX(0);
    }

    /* cabeçalho do card: rótulo "Menu" + botão fechar */
    .fjls-mnav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 25px 30px;
        border-bottom: 1px solid var(--fjls-mnav-linha);
        font-size: 30px;
    }

    .fjls-mnav__title {
        font-size: 18px;
        font-weight: 700;
        color: var(--fjls-mnav-texto);
    }

    .fjls-mnav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background-color: var(--fjls-mnav-azul);
        cursor: pointer;
    }

    .fjls-mnav__close-icon {
        position: relative;
        width: 16px;
        height: 16px;
    }

    .fjls-mnav__close-icon::before,
    .fjls-mnav__close-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        border-radius: 2px;
    }

    .fjls-mnav__close-icon::before {
        transform: rotate(45deg);
    }

    .fjls-mnav__close-icon::after {
        transform: rotate(-45deg);
    }

    /* -------------------- 3. LISTA DE ITENS -------------------- */
    .fjls-mnav__nav {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px 0 24px;
    }

    .fjls-mnav__list,
    .fjls-mnav__list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .fjls-mnav__list {
        padding: 30px !important;
        list-style: none !important;
        list-style-type: none !important;
    }

    .fjls-mnav__list>li+li {
        border-top: 1px solid var(--fjls-mnav-linha);
    }

    .fjls-mnav__list li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 24px 26px;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--fjls-mnav-texto);
        text-decoration: none;
        transition: background-color .2s ease;
    }

    .fjls-mnav__list li>a:hover,
    .fjls-mnav__list li>a:focus {
        background-color: var(--fjls-mnav-hover);
    }

    .fjls-mnav__list li>a:after {
        content: "";
        display: inline-block;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        background: url('data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"><path%20fill="%23001645"%20d="m14.83%2011.29-4.24-4.24a.999.999%200%200%200-1.42%200%201%201%200%200%200%200%201.41L12.71%2012l-3.54%203.54a1%201%200%200%200%200%201.41%201%201%200%200%200%20.71.29%201%201%200%200%200%20.71-.29l4.24-4.24a.999.999%200%200%200%200-1.42Z"/></svg>') right center no-repeat;
    }

    .fjls-mnav__list li.current-menu-item>a,
    .fjls-mnav__list li.current_page_item>a,
    .fjls-mnav__list li.current-menu-ancestor>a {
        background-color: var(--fjls-mnav-hover);
        box-shadow: inset 4px 0 0 var(--fjls-mnav-verde);
    }

    /* submenus: sempre visíveis, só indentados — sem caixa/fundo próprio */
    .fjls-mnav__list .sub-menu {
        margin: 0;
        padding: 0 0 8px;
    }

    .fjls-mnav__list .sub-menu li+li {
        border-top: 1px solid var(--fjls-mnav-linha);
    }

    .fjls-mnav__list .sub-menu li>a {
        padding: 20px 26px 20px 46px;
        font-size: 19px;
        font-weight: 500;
        color: var(--fjls-mnav-texto-sub);
    }

    .fjls-mnav__list .sub-menu li>a:hover,
    .fjls-mnav__list .sub-menu li>a:focus {
        color: var(--fjls-mnav-texto);
        background-color: var(--fjls-mnav-hover);
    }
}

/* trava o scroll da página enquanto o menu está aberto */
body.fjls-mnav-lock {
    overflow: hidden;
}