/* ===========================================================
   VIBRANT INFO — Services mega menu (leo9-style tinted cards)

   Enqueued by vibrant_megamenu_styles() in functions.php at priority 100,
   so it loads AFTER Max Mega Menu's own stylesheet and overrides it.

   Menu location slug: primary  →  #mega-menu-wrap-primary
   If the menu is assigned to another location, replace that slug throughout.

   Works with the widget markup you already have:
     <div class="mega-1">
       <h6>Enterprise Mobility</h6>
       <ul>
         <li><a href="..."><img class="menu-icon img-fluid" src="...">Label</a></li>
       </ul>
     </div>
   =========================================================== */


/* ---------- 1. Top level bar (kept from your old CSS) ---------- */
/* was #{$wrap} in the plugin's SCSS box — that syntax is invalid in a real
   stylesheet, so it becomes the literal wrap id here */
#mega-menu-wrap-primary {
    clear: both;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0 5px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    border-radius: 50px;
}


/* ---------- 2. The dropdown panel ---------- */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: rgba(251, 247, 241) !important;
    border: 0 !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: 0 2px 4px rgba(24, 21, 19, .04), 0 24px 60px -28px rgba(24, 21, 19, .25) !important;
    padding: 20px 24px 24px !important;
    /* header is sticky, so the panel moves with the page — let it scroll itself */
    max-height: calc(100vh - 84px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;          /* Firefox — still scrollable, bar hidden */
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari / Edge */
}

/* hide the plugin's own widget titles — each card carries its own <h6> */
#mega-menu-wrap-primary #mega-menu-primary h4.mega-block-title {
    display: none !important;
}


/* ---------- 3. Rows / columns → equal-height grid ---------- */
/* rows are capped at the 1280px site container and centred */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row {
    max-width: 1280px;
    margin: 0 auto !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row + li.mega-menu-row {
    margin-top: 14px !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row > ul.mega-sub-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}
/* EQUAL HEIGHTS.
   The plugin floats the columns and sizes them with
   width: calc(var(--span) / var(--columns) * 100%).
   The row's <ul> above is a flex container, so the floats are ignored and
   align-items:stretch gives every column the height of the tallest one.

   Do NOT put height:100% on the column — a flex item only stretches while its
   height is auto, and 100% of an auto-height parent resolves back to auto,
   which is exactly how each card ended up at its own content height.
   Instead every level below is a flex column that fills what it's given. */
/* EQUAL WIDTHS.
   Rows 2 and 3 have their third column saved as span 3-of-12 (row 1 is 4/4/4),
   so the plugin's width: calc(var(--span)/var(--columns)*100%) renders it at
   25% instead of 33%. Rather than depend on the saved span, let flex divide
   each row evenly: flex-basis 0 + grow 1 = equal shares whatever the span says.
   min-width:0 stops a long link label (e.g. "React Native App Development")
   from pushing its own column wider than its siblings.
   The width override needs !important — the plugin's rule is 2-6-5. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column {
    padding: 0 7px !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;   /* must stay auto or align-items:stretch is a no-op */
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-type-widget {
    padding: 0 !important;
    margin: 0 !important;
}
/* The card sits four levels deep:
     column > ul.mega-sub-menu > li.mega-menu-item > div.textwidget > div.mega-N
   Making each of those levels fill its parent is fragile — every level has to
   cooperate, and the plugin's own rules out-specify ours on some of them
   (e.g. li.mega-menu-item carries padding:15px at 2-6-5 specificity).

   So collapse them instead: display:contents removes the three wrappers from
   the layout tree entirely, and the card becomes a DIRECT flex item of the
   column. Then one flex:1 makes it fill the stretched column height, with no
   intermediate box left to get in the way. This also drops the plugin's 15px
   li padding for free. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > .textwidget.custom-html-widget {
    display: contents !important;
}
/* the card is now a direct child of the flex column — fill what's left */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div {
    flex: 1 1 auto !important;
}


/* ---------- 4. Tint palette, assigned by grid position ---------- */
/* No per-widget class needed — position in the grid picks the colour. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(1) li.mega-menu-column:nth-child(1) { --tint: #FCE4DE; } /* coral */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(1) li.mega-menu-column:nth-child(2) { --tint: #E6EAF4; } /* blue  */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(1) li.mega-menu-column:nth-child(3) { --tint: #EFE7DA; } /* sand  */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(2) li.mega-menu-column:nth-child(1) { --tint: #F1E7F0; } /* mauve */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(2) li.mega-menu-column:nth-child(2) { --tint: #E4EDE7; } /* sage  */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(2) li.mega-menu-column:nth-child(3) { --tint: #FBEEDA; } /* amber */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(3) li.mega-menu-column:nth-child(1) { --tint: #E8E6F2; } /* periwinkle */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(3) li.mega-menu-column:nth-child(2) { --tint: #FBE3E8; } /* rose  */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row:nth-child(3) li.mega-menu-column:nth-child(3) { --tint: #E3EDF2; } /* sky   */


/* ---------- 5. The card ---------- */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div {
    position: relative;
    background: var(--tint, #FBF7F1);
    border-radius: 20px;
    padding: 20px 20px 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(24, 21, 19, .04), 0 8px 24px -16px rgba(24, 21, 19, .18);
}


/* ---------- 6. Card title (replaces the red bar) ---------- */
#mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .textwidget.custom-html-widget h6,
#mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li :is(h1,h2,h3,h4,h5,h6) {
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em;
    color: #181513 !important;
    background: none !important;
    background-color: transparent !important;
    margin: 0 0 14px !important;
    padding: 0 34px 0 0 !important;
    text-transform: none !important;
}
/* if you wrap the title text in <a href="..."> it stays inheriting + turns coral */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget h6 a {
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
    display: inline !important;
    font: inherit !important;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget h6 a:hover {
    color: #B6321F !important;
}


/* ---------- 7. Link list ---------- */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li,
#mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li .custom-html-widget ul li {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #3A332E !important;
    background: none !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
    height: auto !important;
    transition: background .2s ease, color .2s ease;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li a:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: #B6321F !important;
}

/* icon gets a soft white chip so every logo reads on the tint */
#mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu li .custom-html-widget img.menu-icon,
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li a img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px;
    flex: none;
    margin: 0 !important;
    padding: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .85);
    object-fit: contain;
}


/* ---------- 8. Responsive ---------- */
@media (max-width: 1024px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 18px 20px 20px !important;
    }
}

@media (max-width: 767px) {
    /* On mobile the panel sits INSIDE the theme's dropdown (.nav-links.open),
       which is already the scroll container. The desktop max-height/overflow
       made the panel a second, nested scroller with overscroll-behavior:contain
       and a hidden scrollbar — swipes over the cards got trapped there and
       never reached the outer menu, so items below Services were unreachable.
       Let the panel grow to its full height and the outer menu do the scrolling. */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 10px 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto;
        position: static !important;
        width: 100% !important;
    }
    /* ACTIVE STATE ON MOBILE.
       Max Mega Menu's generated CSS swaps in its separate "Mobile Menu" colours
       below its breakpoint, which drops the desktop highlight. Re-apply it here:
       current page, its ancestor (Services while on a service page), the open
       Services toggle, and tap feedback. */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        border-radius: 50px !important;
        transition: background .2s ease, color .2s ease;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.vib-current-ancestor > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:active,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible {
        background: #FCE4DE !important;   /* --primary-soft */
        color: #B6321F !important;        /* --primary-ink  */
    }
    /* current service link inside a card (class added by script.js) + tap feedback */
    #mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li a.vib-current,
    #mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget ul li a:active {
        background: rgba(255, 255, 255, .75) !important;
        color: #B6321F !important;
        font-weight: 500 !important;
    }

    /* no hover lift on touch — it fires on tap and makes the card jump */
    #mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div:hover {
        transform: none;
        box-shadow: none;
    }
    /* stacked on mobile — needs !important to beat the desktop flex rule above */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row > ul.mega-sub-menu {
        display: block !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column {
        padding: 0 !important;
        width: 100% !important;   /* undo the desktop width:auto once stacked */
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column + li.mega-menu-column {
        margin-top: 10px !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
        padding: 0 !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div {
        padding: 16px 16px 12px;
        border-radius: 16px;
    }
    #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .textwidget.custom-html-widget h6 {
        font-size: 17px !important;
    }
}