/**
 * Custom mega menu panels: tabbed "Platforms" (.rpm) and "Solutions" (.rsm).
 *
 * Markup lives in Custom HTML widgets inside each item's Mega Menu grid (see
 * megamenu-snippets/platforms-panel.html and solutions-panel.html for the
 * source to paste there). Platforms behaviour: assets/js/megamenu-platforms.js;
 * Solutions needs no JS.
 *
 * Both panels share one look (heading, item hover pill, CTA), so shared rules
 * list both selectors once — add a panel-specific rule only where they
 * genuinely differ.
 *
 * Every selector is scoped under #mega-menu-top so the theme's global
 * ul/li/a/p rules and Max Mega Menu's own column styles can't leak in.
 *
 * The first Platforms tab and panel carry .is-active in the HTML itself — keep
 * it that way. WP Rocket's Remove Unused CSS only keeps selectors that match
 * the initial HTML, so without it the .is-active rules would be stripped.
 */

/* ── Shared: panel base ──────────────────────────────── */

#mega-menu-top .rpm,
#mega-menu-top .rsm {
    background: #fff;
    color: #1a1a1a;
    font-family: "source-sans-pro", "Source Sans 3", sans-serif;
    line-height: 1.4;
    text-align: left;
}

#mega-menu-top .rpm a,
#mega-menu-top .rsm a {
    text-decoration: none;
}

/* ── Shared: panel heading ───────────────────────────── */

#mega-menu-top .rpm-panel-title,
#mega-menu-top .rsm-title {
    margin: 0 0 8px;
    color: #1a1a1a;
    font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

#mega-menu-top .rpm-panel-desc,
#mega-menu-top .rsm-desc {
    margin: 0;
    color: #555;
    font-size: 17px;
}

/* ── Shared: link grid + hover pill ──────────────────── */

#mega-menu-top .rpm-offers,
#mega-menu-top .rsm-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 40px;
    margin: 0 0 32px;
}

/* The negative side margins cancel the padding so the text still lines up
   with the panel heading; the row gap is smaller to compensate for the
   vertical padding. */
#mega-menu-top .rpm-offer,
#mega-menu-top .rsm-item {
    display: block;
    min-width: 0;
    margin: 0 -14px;
    padding: 10px 14px;
    border-radius: 6px;
    background: transparent;
    transition: background-color .25s ease;
}

#mega-menu-top .rpm-offer:hover,
#mega-menu-top .rpm-offer:focus-visible,
#mega-menu-top .rsm-item:hover,
#mega-menu-top .rsm-item:focus-visible {
    background: #f3f3f3;
}

#mega-menu-top .rpm-offer-title,
#mega-menu-top .rsm-item-title {
    display: block;
    margin: 0;
    color: #1a1a1a;
    font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: color .25s ease, transform .25s ease;
}

/* Up to two lines — the site's container is narrower than the design's, so a
   one-line limit would cut most descriptions short. Longer copy ends in "…". */
#mega-menu-top .rpm-offer-desc,
#mega-menu-top .rsm-item-desc {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: #666;
    font-size: 15px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    transition: transform .25s ease;
}

#mega-menu-top .rpm-offer-desc:empty,
#mega-menu-top .rpm-panel-desc:empty,
#mega-menu-top .rpm-offers:empty,
#mega-menu-top .rsm-item-desc:empty,
#mega-menu-top .rsm-desc:empty {
    display: none;
}

#mega-menu-top .rpm-offer:hover .rpm-offer-title,
#mega-menu-top .rpm-offer:focus-visible .rpm-offer-title,
#mega-menu-top .rsm-item:hover .rsm-item-title,
#mega-menu-top .rsm-item:focus-visible .rsm-item-title {
    color: #ff3b0a;
    transform: translateX(8px);
}

#mega-menu-top .rpm-offer:hover .rpm-offer-desc,
#mega-menu-top .rpm-offer:focus-visible .rpm-offer-desc,
#mega-menu-top .rsm-item:hover .rsm-item-desc,
#mega-menu-top .rsm-item:focus-visible .rsm-item-desc {
    transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
    #mega-menu-top .rpm-offer:hover .rpm-offer-title,
    #mega-menu-top .rpm-offer:focus-visible .rpm-offer-title,
    #mega-menu-top .rsm-item:hover .rsm-item-title,
    #mega-menu-top .rsm-item:focus-visible .rsm-item-title,
    #mega-menu-top .rpm-offer:hover .rpm-offer-desc,
    #mega-menu-top .rpm-offer:focus-visible .rpm-offer-desc,
    #mega-menu-top .rsm-item:hover .rsm-item-desc,
    #mega-menu-top .rsm-item:focus-visible .rsm-item-desc {
        transform: none;
    }
}

/* ── Shared: CTA button + chevrons ───────────────────── */

#mega-menu-top .rpm-cta,
#mega-menu-top .rsm-cta {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 12px 22px;
    border: 1px solid #ff3b0a;
    border-radius: 4px;
    color: #ff3b0a;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
}

#mega-menu-top .rpm-cta:hover,
#mega-menu-top .rsm-cta:hover {
    background: #ff3b0a;
    color: #fff;
}

#mega-menu-top .rpm-view-all:after,
#mega-menu-top .rpm-cta:after,
#mega-menu-top .rsm-cta:after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ══ Platforms only ══════════════════════════════════════ */

#mega-menu-top .rpm {
    display: flex;
    align-items: stretch;
}

/* ── Left: platform tabs ─────────────────────────────── */

/* Side columns scale with the container (~21% each, as in the design) —
   the site's .container is ~1330px at a 1920px screen, much narrower than
   the design's, so fixed widths would squeeze the offers grid. */
#mega-menu-top .rpm-tabs {
    flex: 0 0 clamp(250px, 21%, 355px);
    display: flex;
    flex-direction: column;
    padding: 0px 24px 0px 0;
    border-right: 1px solid #ebebeb;
}

#mega-menu-top .rpm-tab {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 4px;
    padding: 14px 22px;
    border-radius: 6px;
    background: transparent;
    color: #1a1a1a;
    font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    transition: background-color .15s ease, color .15s ease;
}

/* scale-down: icons smaller than the 40px box show at their real size
   (crisp) instead of being blown up and blurred; bigger ones shrink to fit. */
#mega-menu-top .rpm-tab img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: scale-down;
}

#mega-menu-top .rpm-tab-name {
    flex: 1 1 auto;
    font-weight: 500;
}

#mega-menu-top .rpm-tab-arrow {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
}

#mega-menu-top .rpm-tab:hover,
#mega-menu-top .rpm-tab:focus-visible,
#mega-menu-top .rpm-tab.is-active {
    background: #f3f3f3;
    color: #ff3b0a;
}

#mega-menu-top .rpm-tab.is-active .rpm-tab-arrow {
    opacity: 1;
    color: #1a1a1a;
}

#mega-menu-top .rpm-view-all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 14px;
    margin: auto 0 0;
    padding: 28px 22px 0 36px;
    white-space: nowrap;
    color: #ff3b0a;
    font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

#mega-menu-top .rpm-view-all:hover {
    color: #1a1a1a;
}

/* ── Right: one panel per platform ───────────────────── */

#mega-menu-top .rpm-panels {
    flex: 1 1 auto;
    min-width: 0;
}

#mega-menu-top .rpm-panel {
    display: none;
}

#mega-menu-top .rpm-panel.is-active {
    display: block;
}

#mega-menu-top .rpm-panel-head {
    padding: 0px 0 20px 40px;
    border-bottom: 1px solid #ebebeb;
}

#mega-menu-top .rpm-panel-body {
    display: flex;
    align-items: stretch;
}

#mega-menu-top .rpm-panel-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 32px 32px 40px;
}

/* Award badges column, same layout in every platform panel: one combined
   badge image per platform, scaled to the column width and capped in height
   (tall images like ServiceNow's would otherwise stretch the panel). An image
   whose src still starts with "REPLACE-ME" is hidden, and the whole column
   (with its divider) hides when it has no real image — so nothing broken
   shows live. */
#mega-menu-top .rpm-awards img[src^="REPLACE-ME"] {
    display: none;
}

#mega-menu-top .rpm-awards:not(:has(img:not([src^="REPLACE-ME"]))) {
    display: none;
}

#mega-menu-top .rpm-awards {
    flex: 0 0 clamp(220px, 27%, 355px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    margin: 12px 0 32px;
    padding: 0 0 0 36px;
    border-left: 1px solid #ebebeb;
}

#mega-menu-top .rpm-awards img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    padding-top: 20px;
    max-height: 360px;
    object-fit: contain;
    object-position: left center;
}

.mega-mega_menu_box_left .mega_menu_box_left-title {
    font-size: 22px;
    font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
    color: #1a1a1a;
    font-weight: 500;
    margin-top: 0;
    padding-left: 16px;
    line-height: 1.2;
    text-transform: capitalize;
    position: relative;
}

/* ══ Solutions only ══════════════════════════════════════ */

#mega-menu-top .rsm-head {
    margin: 0 0 28px;
}

#mega-menu-top .rsm-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#mega-menu-top .rsm-item-title {
    font-size: 16px;
}

#mega-menu-top .rsm-item-desc {
    font-size: 14px;
}

/* ── Smaller desktops ────────────────────────────────── */

@media only screen and (max-width: 1199px) {
    #mega-menu-top .rpm-awards {
        display: none;
    }
    #mega-menu-top .rpm-tab {
        padding: 12px 16px;
        font-size: 17px;
    }
    #mega-menu-top .rpm-panel-head,
    #mega-menu-top .rpm-panel-main {
        padding-left: 32px;
    }
    #mega-menu-top .rsm-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 32px;
    }
    #mega-menu-top .rsm-item-title {
        font-size: 15px;
    }
}

/* ── Mobile (Max Mega Menu breakpoint is 991px) ──────── */
/* Both panels become a plain list of links on the dark mobile menu: Platforms
   shows its tabs (the panels are desktop-only), Solutions shows its item
   names (heading and descriptions are desktop-only). Rows copy the other
   items' mobile sub-links (e.g. Industries): white Poppins 18px/500, 20px row
   padding, #373737 divider. The "view all" link closes each list.
   Note: Max Mega Menu ignores a grid ROW's hide-on-mobile flag — only
   columns honour it — so mobile visibility is controlled here. */

@media only screen and (max-width: 991px) {
    #mega-menu-top .rpm,
    #mega-menu-top .rsm {
        display: block;
        background: transparent;
    }
    #mega-menu-top .rpm-tabs {
        padding: 0;
        border-right: 0;
    }
    #mega-menu-top .rsm-items {
        display: block;
        margin: 0;
    }
    #mega-menu-top .rpm-tab,
    #mega-menu-top .rpm-tab:hover,
    #mega-menu-top .rpm-tab:focus-visible,
    #mega-menu-top .rpm-tab.is-active,
    #mega-menu-top .rsm-item,
    #mega-menu-top .rsm-item:hover,
    #mega-menu-top .rsm-item:focus-visible {
        margin: 0;
        padding: 20px 0;
        border-bottom: 1px solid #373737;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
    }
    #mega-menu-top .rsm-item-title,
    #mega-menu-top .rsm-item:hover .rsm-item-title,
    #mega-menu-top .rsm-item:focus-visible .rsm-item-title {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        transform: none;
    }
    #mega-menu-top .rpm-tab img,
    #mega-menu-top .rpm-tab-arrow,
    #mega-menu-top .rpm-panels,
    #mega-menu-top .rsm-head,
    #mega-menu-top .rsm-item-desc {
        display: none;
    }
    #mega-menu-top .rpm-view-all,
    #mega-menu-top .rsm-cta,
    #mega-menu-top .rsm-cta:hover {
        margin: 0;
        padding: 20px 0;
        font-size: 18px;
    }
    /* Solutions' outlined button becomes a plain text link like
       "View all platforms". */
    #mega-menu-top .rsm-cta,
    #mega-menu-top .rsm-cta:hover {
        gap: 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #ff3b0a;
        font-family: Poppins, "Poppins Fallback", "Poppins Fallback Android", sans-serif;
        text-transform: none;
    }
}