/* ===========================================================
   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;
}

/* 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);
}

/* decorative arrow, top-right of the card (leo9 cue) */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div::before {
    content: "\2192";
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 18px;
    line-height: 1;
    color: #181513;
    opacity: .55;
    transition: transform .25s ease, opacity .25s ease;
}
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget > div:hover::before {
    transform: translateX(5px);
    opacity: 1;
}


/* ---------- 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;
}
/* leo9's full stop after the title */
#mega-menu-wrap-primary #mega-menu-primary .textwidget.custom-html-widget h6::after {
    content: ".";
}
/* 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) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* 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;
    }
}