/* =========================================================================
   IHM Sisters — Max Mega Menu skin
   Reproduces the theme's custom mega-menu look on MMM's markup.
   Loaded AFTER style.css and MMM's generated style.css.

   Note: MMM's top-level bar <ul> also has class `.mega-menu`, so the theme's
   own `.mega-menu {height:78vh; overflow:scroll; ...}` panel rules leak onto
   the BAR. The first block neutralizes those leaks; later blocks restyle the
   bar and panels to match the original.
   ========================================================================= */

/* ---- 0. neutralize theme `.mega-menu` panel rules leaking onto the MMM bar.
   The theme's `.mega-menu { height:78vh; overflow-y:scroll!important }` turns the
   bar <ul> (which also carries class .mega-menu) into a short scroll container
   that CLIPS the absolutely-positioned panel — must override with !important. */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu.mega-menu {
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    top: auto !important;
    position: relative;
}

/* hide MMM's mobile hamburger toggle (theme has its own mobile header) */
#mega-menu-wrap-mega-menu > .mega-menu-toggle { display: none !important; }

/* kill MMM's dark bar background (wrap gets #222 at >=769px); make it full-width
   so it fills the flex container and the panel (width:100%) spans the row */
#mega-menu-wrap-mega-menu {
    background: transparent !important;
    width: 100%;
}

/* ============================ TRIGGER BAR ============================== */
/* Breathing room between the header rules and the menu.
   Padding goes on the container, not on the trigger links: the bar is a flex row
   with align-items:center whose height is set by the 103px logo item, so padding
   the links alone would push the text down and leave the logo behind, breaking
   the vertical centering. Padding here moves logo and text together.
   Note the divider row above carries Tailwind's -mb-2 (-8px), which is why the
   bar started almost flush against the rules.

   The negative bottom margin takes the same 24px back off the space UNDER the
   menu, so the header's overall height is unchanged and only the menu row moves
   down. Done here rather than by editing the <header> pb-* class, because that
   class is shared by all three header variants (pb-8 on two, pb-14 on the
   logged-out one) and changing it would shift more than this menu. */
.mega-menu-container {
    padding-top: 24px;
    margin-bottom: -24px;
}

#mega-menu-wrap-mega-menu #mega-menu-mega-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent !important;
    padding: 0;
    margin: 0;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item {
    background: transparent !important;
    padding: 0;
}
/* trigger links */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item > a.mega-menu-link {
    background: transparent !important;
    color: #4f493e !important;              /* dark-grey */
    text-transform: uppercase;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    height: auto;
    padding: 0;
    margin: 0;
    display: block;
    max-width: none;
    position: relative;
}
/* override MMM hover / open / current-item link backgrounds + colors */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: transparent !important;
    color: #4f493e !important;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    color: #1a4796 !important;              /* ihm-blue */
    background: transparent !important;
    font-weight: 700 !important;            /* MMM's :hover forces normal weight — keep bold */
}
/* remove MMM dropdown arrow indicators on the bar */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    display: none !important;
}

/* active (open) trigger: green caret (menu-active.svg).
   Reuse MMM's real .mega-indicator span as the caret element (a generated
   ::after is suppressed by MMM's global pseudo reset). */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    position: relative;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    display: block !important;
    position: absolute;
    left: 50%;
    bottom: -2.438rem;
    transform: translateX(-50%);
    width: 100%;
    height: 9px;
    margin: 0;
    padding: 0;
    background: url(../img/menu-active.svg) 50% no-repeat !important;
    background-size: cover !important;
}

/* logo item (32614): swap link text for the logo image.
   Extra classes raise specificity above the .mega-current-menu-item override
   (the logo links to "/", so it is the current item on the home page). */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-menu-item-type-custom.mega-menu-item-32614 > a.mega-menu-link {
    background: url(../img/logo.png) 50% no-repeat !important;
    background-size: contain !important;
    width: 144px;
    height: 72px;
    text-indent: -99999px;
    margin: 0 .8rem;
    overflow: hidden;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-item.mega-menu-item-32614 > a.mega-menu-link::after {
    display: none !important;
}

/* =============================== PANEL ================================= */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #fff !important;
    height: 78vh;
    overflow-y: auto;
    /* Full-viewport-width panel (original was left:0; width:100vw).
       Deliberately NOT a plain 100vw: that unit includes the vertical scrollbar,
       so the panel came out ~15px wider than the visible viewport and half of
       that hung off the right edge, giving the whole document a horizontal
       scrollbar. Closed panels are visibility:hidden but still laid out, so it
       affected every page, not only an open menu.
       --ihm-sbw is the measured scrollbar width, published by js/mmm-ihm.js.
       The 0px fallback reproduces the old behaviour if that script is absent. */
    width: calc(100vw - var(--ihm-sbw, 0px));
    left: 50%;
    margin-left: calc(-50vw + (var(--ihm-sbw, 0px) / 2));
    top: 5rem;                    /* sit just under the nav bar/logo (no top gap) */
    padding: 1.25rem 2.812rem 2rem 1.5rem;
    box-shadow: none;
    border: 0;
    z-index: 50;
}
/* the row is the 12-col track; MMM floats columns by --span/--columns */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    padding: 0;
}
/* widget cell padding (MMM defaults to 15px all round) */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item {
    padding: 0 0 0 0;
}

/* ---- feature image column (left) ---- */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.mega-menu-column:first-child {
    padding-right: 4rem;                    /* mr-16 */
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.widget_media_image {
    padding: 0 !important;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.widget_media_image img.image {
    display: block;
    width: 100%;
    height: 74vh;
    object-fit: cover;
    object-position: 50% 50%;
    max-width: none;
}

/* ---- link columns ---- */
/* widget block titles are hidden; the heading is the menu's top-level link */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu h4.mega-block-title {
    display: none !important;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu li.widget_nav_menu {
    color: #4f493e;
    font-size: .875rem;
    line-height: 1.25rem;
    margin-bottom: 1rem;
    padding: 0 1rem 0 0;
}
/* links (all panel links): block, spaced, constrained width */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu .menu a {
    display: block;
    margin-bottom: 1rem;
    max-width: 14.938rem;
    color: #4f493e;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu .menu a:hover {
    color: #1a4796;
}
/* top-level menu item = section heading (uppercase bold) */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu .menu > li.menu-item-has-children > a,
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu .menu > li > a {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* nested items with children reset back to normal weight */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu .menu ul.sub-menu .menu-item-has-children a {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none !important;
}
/* hide 3rd-level items */
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-sub-menu ul.sub-menu ul.sub-menu {
    display: none;
}

/* ---- close button ----
   The theme's core.js appends one `.mega-menu-close` to the bar <ul>; js/mmm-ihm.js
   moves it INTO the open panel (so it paints with the panel) and wires its click.
   Hidden by default; shown at the panel's top-right only when it lives in a panel. */
#mega-menu-wrap-mega-menu .mega-menu-close {
    display: none !important;
}
#mega-menu-wrap-mega-menu #mega-menu-mega-menu .mega-menu-megamenu > ul.mega-sub-menu > .mega-menu-close {
    display: block !important;      /* block (not flex) so the ✕ ::after sits after the text */
    position: absolute !important;
    top: 1.25rem !important;        /* align with the first heading row */
    right: 15rem !important;        /* align near the container's right edge (like the original) */
    z-index: 60;
}

/* ======================= MOBILE MENU: PLUS ICONS ======================= */
/* The compiled theme CSS paints the plus on EVERY top-level mobile item:

       #mobile-menu > ul > li > a { background-image: url(img/add-circle.svg) }

   That is not scoped to items that actually have a submenu, so "Donate", which
   is a plain link with no children, advertised an expand affordance that could
   never do anything. The JS only binds "#mobile-menu li.has-sub > a", so the
   click correctly did nothing, which is what made it look broken.

   The correctly-scoped rules already exist further down the same stylesheet
   (#menu-mobile-menu > .has-sub > a for the plus, .has-sub.open for the minus),
   so all that is needed is to stop painting the icon on childless items. Scoped
   with :not(.has-sub) so it cannot affect anything that does expand.

   Pre-existing on production, not introduced by the Max Mega Menu work. */
#mobile-menu > ul > li:not(.has-sub) > a,
#mobile-private-menu > ul > li:not(.has-sub) > a {
    background-image: none;
}

/* The theme's plus/minus rules only reach two levels:

       #menu-mobile-menu > .has-sub > a                      (level 1)
       #menu-mobile-menu > .has-sub > ul > li.has-sub > a    (level 2)

   Anything deeper expands correctly (the JS binds "#mobile-menu li.has-sub > a"
   at any depth) but shows no icon, so there is nothing to tell the user it opens.
   That already affected "Resources" under History and Archives, and now affects
   Leadership Team, Jubilarians, In Memoriam, Sponsored Institutions and
   Spirituality Centers, which gained children when the mega menu links were
   mirrored into the mobile menu.

   Depth-independent, so it cannot go stale the next time the menu gains a level. */
#mobile-menu li.has-sub > a,
#mobile-private-menu li.has-sub > a {
    background-image: url(../img/add-circle.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
}
#mobile-menu li.has-sub.open > a,
#mobile-private-menu li.has-sub.open > a {
    background-image: url(../img/minus-circle.svg);
}