/* =========================================================
   Mega Menu — Custom Override
   Scoped under .main-nav / .megamenu.type2 so it never
   touches unrelated .row / .col-* usage elsewhere on the site.
   Desktop only — the existing mobile menu is untouched.
   ========================================================= */

/* ---------- Bigger hover target ----------
   The theme's <a> inside each menu <li> is only as tall as its
   text line, so the mouse has to land exactly on the letters to
   trigger hover/JS. This stretches the <li> and its <a> to the
   full height of the nav row, so hovering anywhere in that column
   (not just on the glyphs) opens the mega menu. */
@media (min-width: 992px) {
    .main-nav .menu {
        display: flex;
        align-items: stretch;
    }
    .main-nav .menu > li.submenu-container {
        display: flex;
        align-items: stretch;
    }
    .main-nav .menu > li.submenu-container > a {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

/* ---------- Top-level chevron: rotates like Engine's ---------- */
@media (min-width: 992px) {
    /* The theme itself already renders a small static arrow next to
       mega-menu items (via a pseudo-element on the link) — that's what
       was showing up as a *second*, non-rotating arrow next to ours.
       We hide the theme's one and keep only our own, which rotates. */
    .main-nav .menu > li.submenu-container > a:after,
    .main-nav .menu > li.submenu-container > a:before {
        content: none !important;
        display: none !important;
    }

    .main-nav .menu > li.submenu-container > a .megamenu-new-chevron {
        display: inline-flex;
        align-items: center;
        margin-inline-start: 5px;
        color: currentColor;
        transition: transform .2s ease;
    }
    .main-nav .menu > li.submenu-container:hover > a .megamenu-new-chevron,
    .main-nav .menu > li.submenu-container.megamenu-new-open > a .megamenu-new-chevron {
        transform: rotate(180deg);
    }
}

/* ---------- Layout: links (right/most space) + promo card ---------- */
@media (min-width: 992px) {

    .main-nav .megamenu.type2 {
        display: block !important;
        border-radius: 0;
        box-shadow: 0 26px 65px rgba(20, 20, 20, 0.16);
        padding: 44px 0;
        border-top: none;
        background: #fff;
    }

    /* ONE flat grid: always 3 equal columns (2 links + 1 image). No nested
       flex layers — deliberately NOT reusing the theme's .row/.col-*
       classes either, since those carried the theme's own (different)
       layout rules and silently won the cascade before. These class
       names exist only in this file, so nothing else can touch them.
       Spacing between columns uses `gap`, not the classic negative-
       margin/padding gutter trick — that trick made each column bleed
       past the .container's own edge by exactly the gutter amount,
       which was the source of the logo-alignment mismatch. */
    .main-nav .megamenu.type2 .megamenu-new-cols {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 40px;
        margin: 0;
    }
    .main-nav .megamenu.type2 .megamenu-new-col {
        box-sizing: border-box;
        padding: 0;
        min-width: 0;
    }
    .main-nav .megamenu.type2 .megamenu-new-cols-3 > .megamenu-new-col {
        flex: 1 1 0 !important;
    }

    .main-nav .megamenu.type2 .menu-title {
        font-size: 16.5px;
        font-weight: 700;
        margin: 0 0 16px;
        color: #1a1a1a;
    }
    .main-nav .megamenu.type2 .menu-title a { color: inherit; }

    .main-nav .megamenu.type2 ul {
        margin: 0 0 28px;
        padding: 0;
        list-style: none;
    }
    .main-nav .megamenu.type2 ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 12px;
        margin: 0 -12px;
        border-radius: 9px;
        color: #4a4d54;
        font-size: 15px;
        transition: background-color .15s ease, color .15s ease;
    }
    .main-nav .megamenu.type2 ul li a:hover {
        background-color: #f5f6f8;
        color: var(--menu-accent, #c9184a);
    }

    /* per-link arrow: hidden until hover, then fades + slides in (Engine style) */
    .main-nav .megamenu.type2 .megamenu-new-link-arrow {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        opacity: 0;
        transform: translateX(6px);
        transition: opacity .15s ease, transform .15s ease;
    }
    /* the source icon points right (LTR); mirror it so it points toward
       reading-forward direction in RTL */
    .main-nav .megamenu.type2 .megamenu-new-link-arrow svg {
        transform: scaleX(-1);
    }
    .main-nav .megamenu.type2 ul li a:hover .megamenu-new-link-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* Row of pill buttons under all 3 columns, e.g. "Log into Partner Hub" */
    .main-nav .megamenu.type2 .megamenu-new-buttons {
        display: flex;
  
        align-items: stretch;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #eceef1;
    }
    .main-nav .megamenu.type2 .megamenu-new-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 18px;
        border-radius: 999px;
        background: #f2f3f5;
        color: #1a1a1a;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .15s ease;
    }
    .main-nav .megamenu.type2 .megamenu-new-button:hover {
        background: #e7e9ed;
    }
}

/* ---------- Promo image column (simple — no text/badge/CTA overlay) ---------- */
@media (min-width: 992px) {
    .main-nav .megamenu.type2 .megamenu-new-image-col {
        display: block;
    }
    .main-nav .megamenu.type2 .megamenu-new-promo-link {
        display: block;
        width: 100%;
    }
    .main-nav .megamenu.type2 .megamenu-new-promo-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: 14px;
        background: #f2f3f5;
        transition: transform .35s ease;
    }
    .main-nav .megamenu.type2 .megamenu-new-promo-link:hover .megamenu-new-promo-img {
        transform: scale(1.03);
    }
}

/* ---------- Desktop dropdown open/close + positioning ----------
   Position (fixed, full viewport width, pinned to the header's real
   bottom edge) is now set entirely by JS at the moment each panel
   opens — see positionPanel() in megamenu-custom.js. It measures the
   actual browser viewport directly via getBoundingClientRect(), so it
   doesn't matter which ancestor the theme considers "full width" or
   what it sets top/left/right to; we don't rely on any of that anymore.
   This stylesheet only owns the fade/slide animation and default
   (pre-JS) safety values so the panel is invisible until JS runs. */
@media (min-width: 992px) {
    .main-nav .menu li:hover .megamenu.type2,
    .main-nav .menu .show .megamenu.type2 {
        top: auto !important;
    }

    .main-nav .menu > li.submenu-container > .megamenu.type2 {
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 60;
        transform: translateY(10px);
        transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), visibility .25s;
        pointer-events: none;
    }
    .main-nav .menu > li.submenu-container.megamenu-new-open > .megamenu.type2 {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ---------- Background overlay behind the open mega menu ---------- */
.megamenu-new-page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 16, 20, 0.55);
    backdrop-filter: blur(2px);
    z-index: 40 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.megamenu-new-page-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Keep the ENTIRE header (logo/search row + nav row + open mega
   menu) reliably above the overlay. We target the single outer
   <header class="header"> wrapper with !important — targeting only
   .header-bottom lost the specificity fight against the theme's
   own sticky-header rules, which is why the whole header (including
   the top row) was getting dimmed along with the page. */
header.header {
    position: relative !important;
    z-index: 999 !important;
}