/* ==========================================================================
   Mega-menu column layouts

   .products-mega-col is pinned at flex: 0 0 20%, a basis calibrated for the
   five-column OptiML CX Platform menu. Any menu with a different column count
   inherits that basis and leaves the remainder of the fixed-width panel blank,
   because the columns cannot grow. Each menu declares its own count instead.

   Below 992px style.css switches every mega row to a wrapping 50% grid, so
   these only need to apply above that breakpoint.
   ========================================================================== */

@media (min-width: 992px) {
    .products-mega-row--2col .products-mega-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .products-mega-row--3col .products-mega-col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .products-mega-row--4col .products-mega-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* --------------------------------------------------------------------------
   Contact Center Products panel
   Two columns of legacy products do not need the 1100px the platform menu
   uses. Narrow the panel to match its content, and pull it back under its own
   trigger rather than letting it span the viewport.
   -------------------------------------------------------------------------- */

/* The other mega panels span the viewport, so their <li> is position-static and
   the panel resolves against the header. This one is only 640px, so it should
   hang under its own trigger instead of floating to the middle of the header.
   .dropdown-cc makes the <li> the positioning context. */
.dropdown-cc {
    position: relative;
}

@media (min-width: 992px) {
    #navbarNav .navbar-links .dropdown-hover > .dropdown-menu-products--cc,
    .dropdown-hover .dropdown-menu-products--cc {
        width: 640px;
        max-width: calc(100vw - 20px);
        left: 0;
        right: auto;
        transform-origin: top left;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    #navbarNav .navbar-links .dropdown-hover > .dropdown-menu-products--cc,
    .dropdown-hover .dropdown-menu-products--cc {
        width: 560px;
    }
}

.dropdown-menu-products--cc .products-mega-group ul {
    margin-bottom: 0;
}

/* Below the desktop breakpoint the panel goes static and full width like every
   other mega menu, so the fixed width and the offset must both be dropped. */
@media (max-width: 991.98px) {
    .dropdown-menu-products--cc {
        width: 100% !important;
    }
    .dropdown-cc {
        position: static;
    }
}

/* ==========================================================================
   Mega menus must sit above the sticky sub-nav

   .header_section.fixed-top.sticky-top is a stacking context at z-index 1020,
   and #service_sliding_button.sticky-top is a sibling stacking context at the
   SAME 1020. Equal z-index falls back to DOM order, and the sub-nav comes
   later, so it painted over any open mega panel - the panel's own z-index 1000
   is resolved inside the header's context and cannot help.

   Raise the header one step. 1030 is Bootstrap's own fixed-top level, and the
   navigation drawer (#sidebar at 1051, its overlay at 1050) still sits above
   both, so opening the mobile drawer is unaffected.
   ========================================================================== */

.header_section.fixed-top.sticky-top {
    z-index: 1030;
}

/* ==========================================================================
   Menu item styling, benchmarked against the Services menu

   Measured before this rule, at 1440:

     Services items   14px  #000  padding 10px 10px  + underline grows on hover
     Mega menu items  13px  #333  padding 5px 0      + underline suppressed

   Both already share the #f0812d hover colour, so only the size, the ink, the
   hit area and the underline were out of step. The underline base rule is
   scoped to .dropdown-hover-list-group, which the mega groups are not inside,
   so it is redefined here rather than un-suppressed.
   ========================================================================== */

#navbarNav .navbar-links .dropdown-hover .products-mega-group ul li a {
    position: relative;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.35;
    color: #000 !important;
    border-radius: 6px;
}

#navbarNav .navbar-links .dropdown-hover .products-mega-group ul li a::before {
    display: block !important;
    content: "";
    position: absolute;
    left: 10px;
    bottom: 3px;
    width: 0;
    height: 2px;
    background-color: #f0812d;
    transition: width 0.25s ease-in-out;
}

#navbarNav .navbar-links .dropdown-hover .products-mega-group ul li a:hover::before,
#navbarNav .navbar-links .dropdown-hover .products-mega-group ul li a:focus-visible::before {
    width: calc(100% - 20px);
}

/* The group heading sits one step above the item, the way the Services menu's
   own title rule does (15px/500 against its 14px items). */
#navbarNav .navbar-links .dropdown-hover .products-mega-group .dropdown-hover-list-group-title {
    padding: 4px 10px;
    font-size: 15px;
    font-weight: 600;
}

/* The overview link at the top of a panel keeps the accent colour, and the
   items sit flush with it. */
/* #navbarNav .navbar-links .dropdown-hover .products-mega-overview-row {
    padding-left: 10px;
    padding-right: 10px;
} */

/* ==========================================================================
   Where the horizontal bar gives way to the drawer

   The bar carries seven menus plus the Contact Us button and measures 1008px.
   It starts at x=284, after the logo, so it needs a 1292px viewport to fit.
   css/style.css hands over from the drawer to the bar at 992px, which left
   every width from 992 to roughly 1290 scrolling sideways - measured at 1199:
   documentElement.scrollWidth 1292 against a 1199 viewport, with
   ul.navbar-links running 93px past the edge.

   Tightening padding cannot close that: at 992 the deficit is 300px, and the
   eight items only carry 160px of horizontal padding in total. So the drawer,
   which already holds the full menu tree, keeps the job until the bar fits.
   ========================================================================== */

@media only screen and (min-width: 992px) and (max-width: 1263.98px) {
    /* Keep the drawer toggle, which style.css hides from 992px up. */
    #sidebarCollapse {
        display: inline-flex !important;
    }

    /* Bootstrap's navbar-expand-lg forces the bar visible from 992px with
       display:flex !important, so this needs !important to win. */
    .header_section .navbar-collapse#navbarNav {
        display: none !important;
    }
}

/* Between 1264 and 1439 the bar fits, but only just. At 1264 it ran 28px over.
   Three levers, all scoped to this band and all needing to out-specify
   `#navbarNav .navbar-links li a` in css/style.css, which carries an ID:
     - the seven menu items drop from 10px to 8px of side padding   (-28px)
     - each li drops from .5rem to .25rem of right padding          (-32px)
     - the Contact Us pill's left margin goes from 40px to 24px     (-16px)
   That is 76px against a 28px deficit, so the bar has real slack rather than
   sitting one label away from overflowing again. The pill keeps its own
   12px/28px padding - it is a button, and squeezing it would look broken.
   The `>` combinators keep all of this off the mega-menu anchors below. */
@media only screen and (min-width: 1264px) and (max-width: 1439.98px) {
    #navbarNav .navbar-links > li:not(.contact-link) > a {
        padding-left: 8px;
        padding-right: 8px;
    }

    #navbarNav .navbar-links > li {
        padding-right: 0.25rem;
    }

    #navbarNav .navbar-links > li.contact-link > a {
        margin-left: 24px;
    }
}