/* =========================================================
   Mega Menu — Transparent / Glassmorphic Background Overrides
   Loaded after header.css to override the opaque white styling.
   ========================================================= */

/* Both <header> AND nav.main-header carry backdrop-filter:blur(10px), and
   the scrolled-state .clearHeader.darkHeader adds another. Each creates a
   backdrop scope that traps the descendant .mega-content blur — so we
   strip backdrop-filter from every ancestor. Their solid backgrounds make
   this purely additive (no visual loss on the header/nav themselves). */


/* Direct-child combinator so this ONLY applies to the top-level nav links
   (Services, Products, etc.) — not the category tab buttons inside
   .megatabs_menu, which also carry .nav-link.menu-link.active.
   :not(.ai-hero-button) keeps the AI pill's own gradient background intact.
   Two independent triggers, same gradient style:
   - .active = route-driven (set by Blade based on current URL).
   - .hover-active = JS-driven, added on real mouse hover only (see the
     matchMedia gate in header.blade.php). Using a class instead of :hover
     means touch devices never get a stuck gradient after a tap, AND
     hovering one link can't visually "remove" the .active state from
     another, because cascade competition between :hover and .active is
     gone — the two classes are equal partners. */
.main-menu > .nav-item > .nav-link.menu-link.active:not(.ai-hero-button),
.main-menu > .nav-item > .nav-link.menu-link.hover-active:not(.ai-hero-button) {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #3390FF 0%, #01D8FF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* color: transparent !important; */
}


.navigton-active {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #3390FF 0%, #01D8FF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* color: transparent !important; */
}


.navigton-active .chevron.chevron-down svg path {
    fill: #01D8FF !important;
}

.hover-active .chevron.chevron-down svg path {
    fill: #01D8FF !important;
}
.main-menu .nav-link.menu-link.active, .main-menu .nav-link.menu-link:hover {
    background-color: transparent !important;
    color: initial !important;
}
/* header.css gives top-level .menu-link nav links a dark fill + cyan
   outline + dark text (color: #0b1220 !important) on hover/focus/active.
   Stripped here:
   - Box styles (background, border, shadow, outline) so only the gradient
     TEXT reads as feedback — never a button background.
   - color: #ffffff !important to override header.css's #0b1220, which on
     mobile sticks after a tap and renders the link almost invisible on
     the dark navbar after closing the dropdown.
   :not(.active) — important: this rule must NOT apply to route-driven
   active links. Otherwise hovering an active link and moving away would
   "flatten" its gradient (same-specificity strip-box rule lands later in
   cascade and color: #ffffff competes with the gradient-text fill). The
   .active rule above already handles transparent background + gradient
   text for the active state in every interactive sub-state. */
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active).hover-active,
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active):focus,
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active):focus-visible,
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active):active,
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active)[aria-expanded="true"],
.main-menu > .nav-item > .nav-link.menu-link:not(.ai-hero-button):not(.active).show {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}
header,
nav.main-header,
header.clearHeader,
header.clearHeader.darkHeader {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* AI / Services / Engage Expert mega menus: span the navbar container
   width (per Figma). Strategy: promote the navbar's .container.mw-16 to
   the positioning context, then set the dropdown-mega <li>s to static so
   the absolutely-positioned .mega-content uses the container as anchor.
   This intentionally affects ONLY .dropdown-mega <li>s (AI / Services /
   Engage Expert). It does NOT touch the More dropdown (uses .dropdown,
   not .dropdown-mega) or any non-dropdown nav items. */
@media (min-width: 992px) {
    nav.main-header > .container.mw-16 {
        position: relative;
    }

    .main-menu > .nav-item.dropdown-mega {
        position: static !important;
    }

    .dropdown-mega .mega-content.ai-mega-menu,
    .dropdown-mega .mega-content.service-mega-menu,
    .dropdown-mega .mega-content.engage-mega-menu {
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        margin-top: 10px !important;
    }
}

/* --- Mega menu containers: transparent dark glass surface --- */
.dropdown-mega .mega-content,
.dropdown-mega .mega-content.ai-mega-menu,
.dropdown-mega .mega-content.service-mega-menu,
.dropdown-menu.more-dropdown {
    background: rgba(15, 20, 35, 0.55) !important;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

/* --- Hover bridge above the dropdown ---
   header.css uses ::before as a small triangle pointer that doubles as a
   hover bridge between the nav link and the mega menu. We don't want the
   visible triangle, but we DO want the bridge so the menu doesn't close
   when the mouse crosses the gap. Solution: make it a full-width
   transparent rectangle (invisible, but still catches hover). */
.dropdown-mega .mega-content::before,
.dropdown-mega .mega-content.ai-mega-menu::before,
.dropdown-mega .mega-content.service-mega-menu::before,
.dropdown-menu.more-dropdown::before {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    transform: none !important;
    left: 0 !important;
    top: -30px !important;
    width: 100% !important;
    height: 30px !important;
}

/* --- Text colours flipped to light over the dark glass --- */
.dropdown-mega .mega-content .menu-description a,
.dropdown-mega .mega-content .menu-description a.text-black,
.dropdown-menu.more-dropdown a,
.dropdown-menu.more-dropdown .nav-link.menu-link,
.menu-description .nav-link.menu-link,
.menu-group a.nav-link.menu-link {
    color: #ffffff !important;
}

.dropdown-mega .mega-content .menu-description p {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* --- Left-side tab pills inside Services mega menu ---
   Markup is now: <li class="service-item"><button>Title</button>
   <p class="mega-menu-subtitle">Subline…</p></li>
   The dark/cyan active background needs to wrap the WHOLE <li> (title +
   subtitle), not just the button — so the visual is one card per category. */
.dropdown-mega .mega-content.service-mega-menu .megatabs_menu {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.dropdown-mega .mega-content .megatabs_menu .service-item {
    padding: 9px 19px !important;
    margin-bottom: 18px !important;
    border-radius: 16px;
    /* Pseudo-element draws the active indicator (see :has rule below).
       border-right is intentionally NOT used — it clips at the rounded
       corners and reads as a "cut" blue strip. */
    position: relative;
    transition: background-color 0.2s ease;
}

/* Drop the bottom margin only on the last item so the cluster doesn't
   pick up an extra trailing gap. */
.dropdown-mega .mega-content .megatabs_menu .service-item:last-child {
    margin-bottom: 0 !important;
}

.dropdown-mega .mega-content .megatabs_menu .service-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* :has() lets us style the parent <li> based on whether its child button
   is active. Modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
.dropdown-mega .mega-content .megatabs_menu .service-item:has(.nav-link.active) {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Right-side active indicator: a cyan stroke on just the right edge that
   follows the card's rounded corners. Trick: transparent borders on the
   other three sides keep border-radius rendering the top-right /
   bottom-right corner curves, while only border-right is colored — so the
   stroke arcs naturally around the corners instead of reading as a clipped
   strip. border-radius: inherit picks up 16px on desktop and 12px on
   mobile from the .service-item rules. */
.dropdown-mega .mega-content .megatabs_menu .service-item:has(.nav-link.active)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    border-right: 3px solid #00d4ff;
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: none;
}

/* Strip the per-button background/border AND its default Bootstrap padding,
   so the .service-item's padding is the only thing controlling spacing.
   Also kill the focus ring/outline that Bootstrap adds — it was reading
   as a faint blue outline around the category buttons. */
.dropdown-mega .mega-content .megatabs_menu .service-item .nav-link,
.dropdown-mega .mega-content .megatabs_menu .service-item .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}

.dropdown-mega .mega-content .megatabs_menu .service-item .nav-link:focus,
.dropdown-mega .mega-content .megatabs_menu .service-item .nav-link:focus-visible,
.dropdown-mega .mega-content .megatabs_menu .service-item .nav-link:active {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Subtitle paragraph below each category title */
.dropdown-mega .mega-content .megatabs_menu .mega-menu-subtitle {
    margin: 6px 0 0 0 !important;
    padding: 0;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

/* AI mega menu: force a 3-column grid layout (per Figma). Defeats the
   breakpoint rules in header.css that drop the items to width:48%
   (2 columns) at smaller desktop widths. */
.dropdown-mega .mega-content.ai-mega-menu .menu-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}

.dropdown-mega .mega-content.ai-mega-menu .menu-item {
    width: auto !important;
    margin-bottom: 0 !important;
}

/* Taller panel per Figma: roomy empty space below the items. Uses
   both min-height AND a generous bottom padding so the panel is forced
   tall even if some parent rule caps something. */
@media (min-width: 992px) {
    .dropdown-mega .mega-content.ai-mega-menu {
        min-height: 240px !important;
        padding-top: 30px !important;
        padding-bottom: 20px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .dropdown-mega .mega-content.ai-mega-menu .tabs-container,
    .dropdown-mega .mega-content.ai-mega-menu .menutabbox,
    .dropdown-mega .mega-content.ai-mega-menu .tab-pane {
        min-height: inherit;
    }
}

/* Engage Expert menu: shrink the menu box itself to fit its 4-column
   content (overrides the full-container-width rule above). Centered
   under the navbar via left:50% + translateX(-50%). */
@media (min-width: 992px) {
    .dropdown-mega .mega-content.engage-mega-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: 90vw !important;
    }
}

/* Engage Expert mega menu: 4-column grid sized to content so labels stay
   on a single line. Columns auto-fit to the widest label in each column;
   the grid as a whole is centered in the wide menu. */
.dropdown-mega .mega-content.engage-mega-menu .menu-group {
    display: grid !important;
    grid-template-columns: repeat(4, max-content);
    column-gap: 40px;
    row-gap: 18px;
    justify-content: center;
    align-items: center;
}

.dropdown-mega .mega-content.engage-mega-menu .menu-item {
    width: auto !important;
    margin-bottom: 0 !important;
}

.dropdown-mega .mega-content.engage-mega-menu .menu-item .nav-link {
    white-space: nowrap !important;
}

/* --- Hover state for individual menu items ---
   Dark rounded background only — no right-border accent (that's reserved
   for the .megatabs_menu category tabs, which use it as a selection cue). */
.dropdown-mega .mega-content .menu-item {
    padding: 10px 14px;
    border-radius: 19px;
    transition: background-color 0.2s ease;
}

.dropdown-mega .mega-content .menu-item:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.dropdown-mega .mega-content .menu-item:hover .menu-description a,
.dropdown-mega .mega-content .menu-item a:hover {
    color: #ffffff !important;
}

.dropdown-menu.more-dropdown a {
    border-radius: 19px;
    transition: background-color 0.2s ease;
}

/* Specificity bumped with .nav-link.menu-link so it beats the neutralize
   rule above (.dropdown-menu.more-dropdown .nav-link.menu-link, 4 classes). */
.dropdown-menu.more-dropdown a.nav-link.menu-link:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

/* --- Chevron icons on nav toggles that open mega menus ---
   Markup: <a class="has-chevron"> ... <span class="chevron chevron-down">…</span>
   <span class="chevron chevron-up">…</span> </a>
   Bootstrap toggles aria-expanded on the toggle element, so the chevron
   swap is driven entirely off that attribute — no JS needed. */
.main-menu .nav-link.menu-link.has-chevron {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

/* Engage Expert uses a <button> while every other nav toggle is an <a>.
   Reset the UA defaults (font, border, background, appearance) so its
   text metrics match the anchors — otherwise hover/active state restyles
   trigger a re-layout that visibly grows the navbar. */
.main-menu .nav-link.menu-link.has-chevron[type="button"],
button.nav-link.menu-link.has-chevron {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: inherit;
}

/* Fixed-size box on the wrapper span so swapping the inner SVG
   (down arrow ↔ up arrow, driven by aria-expanded) cannot change the
   navbar's height. Without this, hover-to-open grows the navbar
   because the two SVGs render at different heights. */
.main-menu .has-chevron .chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Visual size match: down arrow fills its 15x8 viewBox; up chevron path
   only fills the center of its 16x16 viewBox (lots of padding), so it
   reads smaller at the same width. Scale the up SVG up to compensate. */
.main-menu .has-chevron .chevron-down svg {
    display: block;
    width: 12px;
    height: auto;
}

.main-menu .has-chevron .chevron-up svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* The chevron-up's path uses fill="url(#chevron-grad-...)" to pull from an
   inline SVG gradient. If that gradient ID can't be resolved (e.g., duplicate
   IDs when the navbar is rendered twice, or a browser SVG-defs scoping
   quirk), the path silently falls back to the SVG-level fill="none" and
   becomes invisible — making it look like the chevron disappeared on click.
   This guarantees a visible cyan fill regardless of gradient resolution. */
.main-menu .has-chevron .chevron-up svg path {
    fill: #01D8FF;
}

.main-menu .has-chevron .chevron-up { display: none; }
.main-menu .has-chevron[aria-expanded="true"] .chevron-down { display: none; }
.main-menu .has-chevron[aria-expanded="true"] .chevron-up { display: inline-flex; }

/* Blue gradient text fill on hover or when dropdown is open. SVGs are
   unaffected — the down arrow uses currentColor (set on the wrapper, not
   text-fill), the up chevron carries its own inline gradient fill. */
.main-menu .has-chevron .nav-label {
    background-clip: text;
    -webkit-background-clip: text;
    background-image: none;
    transition: color 0.2s ease;
}

/* Two triggers, same gradient on the .nav-label span:
   - [aria-expanded="true"]: set/cleared by Bootstrap on actual click
     (mobile + desktop). Drives mobile's open state.
   - .hover-active: JS-toggled class (header.blade.php), only added on
     hover-capable devices. Drives desktop hover state without the touch
     stickiness that plagued the previous :hover-based rule. */
.main-menu .has-chevron[aria-expanded="true"] .nav-label,
.main-menu .has-chevron.hover-active .nav-label {
    background-image: linear-gradient(90deg, #3390FF, #01D8FF);
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Kill the legacy bright-blue hover background on .nav-link.menu-link
   from header.css ({background:#ebf8ff;color:#0b1220}) when those links
   live inside a mega menu / more dropdown. The .menu-item wrapper (and
   the more-dropdown <a> rules) already provide the correct dark hover.
   NOTE: deliberately NOT including :hover on .more-dropdown links — that
   would block the dark hover defined below. */
.dropdown-mega .mega-content .nav-link.menu-link,
.dropdown-mega .mega-content .nav-link.menu-link:hover,
.dropdown-mega .mega-content .nav-link.menu-link.active,
.dropdown-menu.more-dropdown .nav-link.menu-link,
.dropdown-menu.more-dropdown .nav-link.menu-link.active {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Exception: the left-side category tab buttons inside the Services
   mega menu still need their own hover/active backgrounds restored
   (the rule above would otherwise blank them out). */
/* .dropdown-mega .mega-content .megatabs_menu .service-item .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
} */
/* .dropdown-mega .mega-content .megatabs_menu .service-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.3) !important;
} */

/* --- Icons: invert every image inside any mega menu / more dropdown
   so they read white on the dark glass. Covers AI, Services (.service-icon),
   Engage Expert (.me-2.ex-aspect-image), and More (direct <img> in <a>).
   Also sets a consistent size matching text height (per Figma reference). */
.dropdown-mega .mega-content img,
.dropdown-menu.more-dropdown img {
    filter: brightness(0) invert(1);
    height: 20px;
    width: auto;
    max-width: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Desktop hover-to-open: show a dropdown when its trigger link is hovered,
   hide it when the mouse leaves. Driven off the JS-managed .hover-active
   class on the trigger link (header.blade.php), so the touch-stickiness
   trap with CSS :hover is gone — the JS uses matchMedia to only attach
   listeners on hover-capable devices. The ::before bridge above each
   .mega-content covers the trigger→menu gap, keeping the pointer in the
   <li>'s subtree so mouseleave doesn't fire mid-traversal. Bootstrap's
   data-bs-toggle click still works as a secondary trigger.
   Width gate stays at 992px so the mobile collapsed navbar (which uses
   click only) isn't affected. */
@media (min-width: 992px) {
    .main-menu .nav-item.dropdown > .nav-link.menu-link.hover-active ~ .dropdown-menu {
        display: block;
    }

    /* Sync the chevron flip with hover-open. aria-expanded only changes
       on actual click, so without this the down-arrow would still show
       while the menu is visibly open via hover. */
    .main-menu .has-chevron.hover-active .chevron-down {
        display: none;
    }

    .main-menu .has-chevron.hover-active .chevron-up {
        display: inline-flex;
    }
}

/* ========================================================================
   MOBILE (≤991px): collapse the navbar into a vertical stack and let each
   mega menu open as a full-width scrollable popup beneath its trigger.
   Keeps the dark-glass styling — only layout/positioning changes.
   ======================================================================== */
@media (max-width: 991px) {
    /* Center the AI text inside the pill — flex parent with only an
       <span class="ai-text"> child needs justify-content to actually
       center horizontally (text-align doesn't position flex children). */
    a.nav-link.menu-link.ai-hero-button {
        justify-content: center;
        text-align: center;
    }

    a.nav-link.menu-link.ai-hero-button .ai-text {
        width: 100%;
        text-align: center;
    }

    /* Mobile mega menu: full-width popup that drops below the trigger,
       scrollable, single column. Mirrors the screenshots' layout.
       scrollbar-gutter: stable reserves space for the vertical scrollbar
       so it doesn't visually clip the right side of items inside. */
    .dropdown-mega .mega-content,
    .dropdown-mega .mega-content.ai-mega-menu,
    .dropdown-mega .mega-content.service-mega-menu,
    .dropdown-mega .mega-content.engage-mega-menu,
    .dropdown-menu.more-dropdown {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: none !important;
        margin-top: 6px !important;
        padding: 14px !important;
        max-height: 80vh;
        overflow-y: auto;
        scrollbar-gutter: stable;
        border-radius: 16px !important;
    }

    /* Hide the legacy ::before pointer/bridge on mobile — it isn't needed
       once the menu sits directly under its trigger. */
    .dropdown-mega .mega-content::before,
    .dropdown-mega .mega-content.ai-mega-menu::before,
    .dropdown-mega .mega-content.service-mega-menu::before,
    .dropdown-menu.more-dropdown::before {
        display: none !important;
    }

    /* Force every mega-menu grid down to a single column */
    .dropdown-mega .mega-content.ai-mega-menu .menu-group,
    .dropdown-mega .mega-content.engage-mega-menu .menu-group,
    .dropdown-mega .mega-content .menu-group {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }

    .dropdown-mega .mega-content .menu-item,
    .dropdown-mega .mega-content.ai-mega-menu .menu-item,
    .dropdown-mega .mega-content.engage-mega-menu .menu-item,
    .mega-content.service-mega-menu .menu-item,
    .menu-20 .menu-item {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Services mega menu: stack the left tabs ABOVE the tab content
       as a vertical list so every category is visible without scrolling
       a horizontal rail. */
    .dropdown-mega .mega-content.service-mega-menu .tabs-container {
        flex-direction: column;
        max-height: none !important;
    }

    .dropdown-mega .mega-content.service-mega-menu .tabs-container > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .dropdown-mega .mega-content.service-mega-menu .megatabs_menu {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        flex-direction: column !important;
        gap: 4px;
        /* Horizontal padding compensates for the inner Bootstrap .row's
           -12px horizontal margins (which otherwise push the full-width
           .service-item past the panel's padded edge and clip the active
           right-border indicator). */
        padding: 6px 14px 10px !important;
        margin-bottom: 10px;
    }

    .dropdown-mega .mega-content.service-mega-menu .megatabs_menu .service-item {
        width: 100%;
        margin-bottom: 0 !important;
        padding: 10px 18px 10px 14px !important;
        border-radius: 12px;
    }

    /* Hide the category subtitle on mobile — the tab labels alone are
       enough, and dropping the second line keeps each row compact. */
    .dropdown-mega .mega-content.service-mega-menu .mega-menu-subtitle {
        display: none !important;
    }

    .dropdown-mega .mega-content .tab-content.menutabbox {
        padding: 0 !important;
    }

    /* Shrink the sub-item descriptions (e.g. "Craft high-performance iOS
       apps optimized for…") so the long lists fit comfortably on mobile.
       Matches the compact look of the legacy menu. */
    .dropdown-mega .mega-content .menu-description p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .dropdown-mega .mega-content .menu-description a {
        font-size: 14px !important;
    }

    /* Engage Expert on mobile: tighten the per-item spacing so all 25
       expert links fit without an absurdly tall dropdown. Without this,
       .menu-item adds 10px padding AND the inner .nav-link adds another
       10px, stacking into a very loose list. */
    .dropdown-mega .mega-content.engage-mega-menu .menu-group {
        gap: 0 !important;
    }

    .dropdown-mega .mega-content.engage-mega-menu .menu-item {
        padding: 2px 6px !important;
        border-radius: 12px;
    }

    .dropdown-mega .mega-content.engage-mega-menu .menu-item .nav-link {
        white-space: normal !important;
        padding: 6px 8px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
    }

    .dropdown-mega .mega-content.engage-mega-menu .menu-item img {
        height: 18px !important;
        max-width: 22px;
        margin: 0 !important;
    }
}