/* =========================================================
   mod_ocb_menu — AgendaCoop
   Escopo seguro (tipo #menu-topo-anuario)
   Requer (recomendado): Tag ID = menu-topo-agendacoop
   ========================================================= */

:root {
    --ocb-menu-text: var(--ocb-azul-marinho, #171C66);
    --ocb-menu-hover: var(--ocb-azul-ceu, #5883D0);
    --ocb-menu-bg: var(--ocb-branco, #fff);
    --ocb-menu-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    --ocb-menu-radius: 14px;

    --ocb-caret-size: 8px;
    --ocb-caret-stroke: 2px;
}

/* =========================================================
   1) Anti-clipping / stacking (somente na área do módulo)
   - Helix/SPPB às vezes coloca overflow/transform em wrappers
   ========================================================= */

#menu-topo-agendacoop {
    position: relative;
    z-index: 2 !important;
    top: -15px;
}

/* se estiver dentro do SPPB (seu caso) */
#menu-topo-agendacoop .sppb-addon,
#menu-topo-agendacoop .sppb-addon-content,
#menu-topo-agendacoop .sppb-row,
#menu-topo-agendacoop .sppb-row-column {
    overflow: visible !important;
}

/* menu também não pode cortar dropdown */
#menu-topo-agendacoop ul.mod-ocb-menu {
    overflow: visible !important;
}

/* (opcional, mas ajuda muito em Helix) */
.body-wrapper .body-innerwrapper {
    overflow-x: visible;
}

/* =========================================================
   2) UL principal (layout)
   HTML:
   <ul class="mod-ocb-menu mod-list nav ...">
   ========================================================= */

#menu-topo-agendacoop ul.mod-ocb-menu.mod-list.nav {
    list-style: none;
    margin: 0;
    padding: 10px 12px;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 24px;

    background: var(--ocb-menu-bg);
    border-radius: var(--ocb-menu-radius);
    box-shadow: var(--ocb-menu-shadow);

    position: relative;
    z-index: 2;
}

/* LI nível 1 */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item {
    position: relative; /* âncora do dropdown */
    margin: 0;
    padding: 0;
    z-index: 1;
}

/* quando abre, sobe esse item acima dos outros */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:hover,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:focus-within {
    z-index: 9999 !important;
}

/* Link OU heading (no seu HTML “Ramos” é span.nav-header) */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item > a,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item > span.mod-menu__heading.nav-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 8px;
    text-decoration: none;

    color: var(--ocb-menu-text);
    font-family: var(--font-inter, sans-serif);
    font-size: 14px;
    line-height: 20px;

    cursor: pointer;
    transition: color .15s ease;
}

/* hover: só cor do texto */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:hover > a,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:focus-within > a,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:hover > span.mod-menu__heading.nav-header,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item:focus-within > span.mod-menu__heading.nav-header {
    color: var(--ocb-menu-hover) !important;
    outline: none;
}

/* =========================================================
   3) Setas
   - nível 1 (pais): ▼
   - submenu (pais): ›
   Seu HTML marca pais com .parent e/ou .deeper
   ========================================================= */

/* seta ▼ (nível 1) */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.parent > a::after,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.parent > span.mod-menu__heading.nav-header::after,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.deeper > a::after,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.deeper > span.mod-menu__heading.nav-header::after {
    content: "";
    width: var(--ocb-caret-size);
    height: var(--ocb-caret-size);
    display: inline-block;
    margin-left: 6px;

    border-right: var(--ocb-caret-stroke) solid currentColor;
    border-bottom: var(--ocb-caret-stroke) solid currentColor;
    transform: rotate(45deg); /* ▼ */
    opacity: .9;
}

/* =========================================================
   4) Dropdown (submenu nível 2)
   HTML:
   <ul class="mod-menu__sub list-unstyled small">
   ========================================================= */

#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item > ul.mod-menu__sub {
    display: none !important;

    list-style: none;
    margin: 0;
    padding: 15px 20px;

    position: absolute;
    top: 100%;
    left: 0;

    min-width: 260px;
    max-height: 65vh;
    overflow-y: auto;

    background: var(--ocb-menu-bg);
    border-radius: 12px;
    box-shadow: var(--ocb-menu-shadow);

    z-index: 9999 !important; /* submenu acima de tudo */
}

/* abre no hover do pai */
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.parent:hover > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.parent:focus-within > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.deeper:hover > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item.deeper:focus-within > ul.mod-menu__sub {
    display: block !important;
}

/* itens do submenu */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* links do submenu */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > a,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > span.mod-menu__heading.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 0;

    color: #000;
    text-decoration: none;

    font-family: var(--font-inter, sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;

    border-bottom: 1px solid rgba(0, 0, 0, .10);
    transition: color .15s ease;
}

/* último sem borda */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item:last-child > a,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item:last-child > span.mod-menu__heading.nav-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* hover submenu: só cor do texto */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > a:hover,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > a:focus-visible,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > span.mod-menu__heading.nav-header:hover,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item > span.mod-menu__heading.nav-header:focus-visible {
    color: var(--ocb-menu-hover);
    outline: none;
}

/* =========================================================
   5) Submenu nível 3 (se existir) — abre pro lado e seta ›
   ========================================================= */

/* seta › no submenu para itens pai */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.parent > a::after,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.parent > span.mod-menu__heading.nav-header::after,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.deeper > a::after,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.deeper > span.mod-menu__heading.nav-header::after {
    content: "";
    width: var(--ocb-caret-size);
    height: var(--ocb-caret-size);
    display: inline-block;

    border-right: var(--ocb-caret-stroke) solid currentColor;
    border-bottom: var(--ocb-caret-stroke) solid currentColor;
    transform: rotate(-45deg); /* › */
    opacity: .9;
}

/* nível 3 */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub ul.mod-menu__sub {
    display: none !important;

    list-style: none;
    margin: 0;
    padding: 14px 18px;

    position: absolute;
    top: -10px;
    left: 100%;

    min-width: 260px;
    max-height: 65vh;
    overflow-y: auto;

    background: var(--ocb-menu-bg);
    border-radius: 12px;
    box-shadow: var(--ocb-menu-shadow);

    z-index: 9999;
}

/* abre nível 3 */
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.parent:hover > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.parent:focus-within > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.deeper:hover > ul.mod-menu__sub,
#menu-topo-agendacoop ul.mod-ocb-menu ul.mod-menu__sub > li.nav-item.deeper:focus-within > ul.mod-menu__sub {
    display: block !important;
}

/* =========================================================
   6) Sticky (quando você adicionar via JS a classe is-fixed)
   ========================================================= */

#menu-topo-agendacoop ul.mod-ocb-menu.is-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 5000 !important; /* alto, mas sem brigar com dropdown */
    top: 0;
}

#menu-topo-agendacoop.is-fixed ul.mod-ocb-menu.mod-list.nav {
    border-radius: 0 0 14px 14px;
}

/* =========================================================
   MOBILE / TABLET — não altera desktop
   (somente complementa/override no @media)
   ========================================================= */

/* Nunca mostrar o botão no desktop */
.ocb-menu-toggle {
    display: none;
}

/* MOBILE / TABLET */
@media (max-width: 991.98px) {
    /* ajuste fino do posicionamento do bloco (mantém seu comportamento) */
    #menu-topo-agendacoop {
        top: -25px;
        cursor: pointer;
        z-index: 2 !important;
    }

    /* container do menu (pílula pequena no canto direito) */
    #menu-topo-agendacoop ul.mod-ocb-menu.mod-list.nav {
        justify-content: flex-end;
        padding: 5px 12px;
        border-radius: 50%;
        width: 50px;
        margin: 0 0 0 auto;
        position: relative;
    }

    /* esconde os itens no modo fechado (somente no mobile) */
    #menu-topo-agendacoop ul.mod-ocb-menu > li.nav-item {
        display: none;
    }

    /* botão hambúrguer (círculo branco, barras azuis) */
    .ocb-menu-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: none;
        background: #fff;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-direction: column;
        padding: 0;
    }

    .ocb-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ocb-menu-text);
        margin: 3px auto;
        border-radius: 2px;
    }

    .ocb-menu-toggle:active {
        transform: scale(0.98);
    }
}

/* =========================================================
   OFFCANVAS — AgendaCoop (somente mobile/tablet)
   AJUSTES:
   - seta: ">" fechado e "v" aberto (mantém)
   - cursor pointer em tudo clicável
   - submenu com “respiro” nas laterais (não gruda na direita)
   - fundo e bloco do submenu mais “bonito” (sem bagunçar o resto)
   ========================================================= */

@media (max-width: 991.98px) {

    /* trava scroll quando offcanvas abrir */
    html.ocb-offcanvas-open,
    body.ocb-offcanvas-open {
        overflow: hidden !important;
    }

    /* overlay escuro */
    .ocb-offcanvas-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .7);
        opacity: 1;
        z-index: 999998;
    }

    /* painel */
    .ocb-offcanvas {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(86vw, 360px);
        background: #fff;
        z-index: 999999;
        transform: translateX(100%);
        transition: transform .25s ease;
        box-shadow: -16px 0 28px rgba(0, 0, 0, .18);
        display: flex;
        flex-direction: column;

        /* safe area iOS */
        padding-right: env(safe-area-inset-right);
    }

    .ocb-offcanvas.is-open {
        transform: translateX(0);
    }

    .ocb-offcanvas__header {
        display: flex;
        justify-content: flex-end;
        padding: 12px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        background: #fff;
    }

    .ocb-offcanvas__close {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 10px;
        background: #f3f4f6;
        color: #111;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .ocb-offcanvas__nav {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;

        /* respiro geral do conteúdo do menu (resolve “parede da direita”) */
        padding: 0 12px 12px 12px;
    }

    /* menu clonado vira vertical */
    .ocb-offcanvas__nav ul.mod-ocb-menu.mod-list.nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        list-style: none !important;
    }

    .ocb-offcanvas__nav ul.mod-ocb-menu > li.nav-item {
        display: block !important;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }

    .ocb-offcanvas__nav ul.mod-ocb-menu > li.nav-item > a,
    .ocb-offcanvas__nav ul.mod-ocb-menu > li.nav-item > span.mod-menu__heading.nav-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;

        /* seta não encosta + mantém visual “limpo” */
        padding: 16px 18px !important;

        color: var(--ocb-menu-text) !important;
        text-decoration: none !important;
        background: #fff !important;

        cursor: pointer !important;
    }

    /* seta ">" (fechado) */
    .ocb-offcanvas__nav li.ocb-has-sub > a::after,
    .ocb-offcanvas__nav li.ocb-has-sub > span.mod-menu__heading::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg); /* > */
        opacity: .9;
        margin-left: 12px;
        flex: 0 0 auto;
    }

    /* seta "v" (aberto) */
    .ocb-offcanvas__nav li.ocb-has-sub.is-open > a::after,
    .ocb-offcanvas__nav li.ocb-has-sub.is-open > span.mod-menu__heading::after {
        transform: rotate(45deg); /* v */
    }

    /* =========================
       SUBMENU (nível 2/3) — AJUSTE PRINCIPAL
       ========================= */
    .ocb-offcanvas__nav ul.mod-menu__sub {
        position: static !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        /* respiro nas laterais do bloco (não gruda na direita) */
        margin: 0 !important;
        /* padding interno do bloco */
        padding: 6px 0 !important;
        list-style: none !important;
    }

    .ocb-offcanvas__nav ul.mod-menu__sub > li.nav-item {
        border: 0 !important;
    }

    .ocb-offcanvas__nav ul.mod-menu__sub > li.nav-item > a,
    .ocb-offcanvas__nav ul.mod-menu__sub > li.nav-item > span.mod-menu__heading {
        display: block !important;

        /* indent + respiro à direita dentro do bloco */
        padding: 10px 14px 10px 35px !important;

        border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
        background: transparent !important;
        color: #111 !important;

        cursor: pointer !important;
        text-decoration: none !important;
    }

    .ocb-offcanvas__nav ul.mod-menu__sub > li.nav-item:last-child > a,
    .ocb-offcanvas__nav ul.mod-menu__sub > li.nav-item:last-child > span.mod-menu__heading {
        border-bottom: 0 !important;
    }
}