/* =========================================================================
   Psalt Care — Contact mega menu
   Scoped strictly to the Contact item (.menu-item-2636) in the Elementor
   Pro main nav so no other dropdown ("Who We Are", "Key Projects") is touched.
   Brand tokens: purple #614871, Poppins, panel radius 10px, soft shadow.
   ========================================================================= */

/* ---- 1. Turn Contact's first-level submenu into a wide mega panel ---- */
.elementor-nav-menu--main .menu-item-2636 > .sub-menu,
.elementor-nav-menu--main .menu-item-2636 > ul.sub-menu,
.elementor-nav-menu--main li.menu-item-2636 > ul {
    width: 700px !important;
    min-width: 700px !important;
    max-width: calc(100vw - 40px) !important;
    left: auto !important;
    right: 0 !important;          /* Contact is the last item — anchor right so panel never overflows the viewport */
    padding: 24px 28px !important;
    border-radius: 10px !important;
    box-shadow: rgba(33, 52, 48, 0.08) 0 4px 15px 0 !important;
    background: #ffffff !important;

    /* Balanced multi-column flow: the 6 top-level blocks distribute evenly
       top-to-bottom across 3 columns, avoiding the ragged-height gaps that
       flex-wrap produces when leaf items have no sub-list.
       NOTE: do NOT set `display` here — display is gated below so the panel
       stays hidden until Contact is hovered/focused/opened. */
    columns: 3 !important;
    column-gap: 32px !important;
    list-style: none !important;
}

/* ---- 1b. HIDE the panel by default; only show it when Contact is
           hovered, focused-within, or opened by JS (.nerb-mega-open).
           Without this the multi-column panel would render permanently. ---- */
@media (min-width: 1025px) {
    .elementor-nav-menu--main li.menu-item-2636 > ul {
        display: none !important;
    }
    .elementor-nav-menu--main li.menu-item-2636:hover > ul,
    .elementor-nav-menu--main li.menu-item-2636:focus-within > ul,
    .elementor-nav-menu--main li.menu-item-2636.nerb-mega-open > ul {
        display: block !important;
    }
}

/* ---- 2. Each top-level item under Contact becomes a self-contained block ---- */
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-col {
    position: static !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    -webkit-column-break-inside: avoid !important;
    break-inside: avoid !important;        /* keep a group + its links together in one column */
    page-break-inside: avoid !important;
}

/* ---- 3. Column heading (group title, not a link) ---- */
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-head > a {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #614871 !important;
    padding: 6px 10px 8px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(97, 72, 113, .14) !important;
    pointer-events: none !important;   /* heading is not clickable */
    cursor: default !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

/* hide the dropdown caret/arrow Elementor injects on items-with-children inside the panel */
.elementor-nav-menu--main .menu-item-2636 > ul li .sub-arrow,
.elementor-nav-menu--main .menu-item-2636 > ul li .elementor-item-icon {
    display: none !important;
}

/* ---- 4. Standalone leaf column (Member Registration, Caregiver Connect,
           Volunteer Registration) — render heading-styled but clickable ---- */
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-leaf > a {
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #614871 !important;
    padding: 6px 10px 8px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(97, 72, 113, .14) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    background: transparent !important;       /* kill Elementor's default bg */
    border-radius: 6px 6px 0 0 !important;
    transition: background-color .15s ease, color .15s ease !important;
}
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-leaf > a:hover,
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-leaf > a:focus,
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-leaf > a.elementor-item-active {
    background-color: #614871 !important;     /* brand purple fill */
    color: #ffffff !important;                /* white text on hover */
}

/* ---- 5. Grandchild list under a heading: show inline, kill fly-out ---- */
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-head > ul {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    list-style: none !important;
}
.elementor-nav-menu--main .menu-item-2636 > ul > li.mega-head > ul > li {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- 6. Grandchild links (the actual wkf.ms links) ----
        Consistent full-width hover pill: same shape for every link, white text
        on brand purple. We override Elementor's per-item background animation
        (e--pointer-background) so the hover shape no longer varies by link. ---- */
.elementor-nav-menu--main .menu-item-2636 > ul li.mega-link > a {
    font-family: "Poppins", sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #333333 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;          /* uniform padding → identical hover shape */
    margin: 1px 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    background: transparent !important;     /* kill Elementor's default bg */
    border-radius: 6px !important;
    transition: background-color .15s ease, color .15s ease !important;
}
.elementor-nav-menu--main .menu-item-2636 > ul li.mega-link > a:hover,
.elementor-nav-menu--main .menu-item-2636 > ul li.mega-link > a:focus,
.elementor-nav-menu--main .menu-item-2636 > ul li.mega-link > a.elementor-item-active,
.elementor-nav-menu--main .menu-item-2636 > ul li.mega-link > a.highlighted {
    background-color: #614871 !important;   /* brand purple fill */
    color: #ffffff !important;              /* white text on hover */
    padding-left: 10px !important;          /* keep padding stable (no shift) */
}

/* ---- 7. (reveal handled by rule 1b — hover / focus-within / .nerb-mega-open) ---- */

/* ---- 8. Tablet / mobile: the desktop horizontal nav is hidden and the burger
           takes over, so neutralise the desktop panel styling here. We do NOT
           force the panel to display:block — its open/closed state is left to
           Elementor's own dropdown behaviour. ---- */
@media (max-width: 1024px) {
    .elementor-nav-menu--main .menu-item-2636 > ul,
    .elementor-nav-menu--main .menu-item-2636 > ul > li.mega-col,
    .elementor-nav-menu--main .menu-item-2636 > ul > li.mega-head > ul {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        columns: auto !important;
        flex: none !important;
    }
}

/* ---- 9. Dropdown (burger) menu version of Contact mega items.
           The mobile off-canvas uses a separate Elementor nav (--dropdown).
           Keep group headings visually distinct, but DO NOT disable
           pointer-events here: on mobile the heading IS the accordion toggle,
           so it must stay tappable to reveal its child links. The href="#"
           navigation is suppressed by the JS click handler instead. ---- */
.elementor-nav-menu--dropdown .menu-item-2636 .mega-head > a {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: .03em !important;
    opacity: .85;
}