/**
 * Tabbed "Platforms" mega menu panel.
 *
 * Markup lives in a single Custom HTML widget inside the Platforms item's
 * Mega Menu grid (see megamenu-snippets/platforms-panel.html for the source
 * to paste there). Behaviour: assets/js/megamenu-platforms.js.
 *
 * Every selector is scoped under #mega-menu-top .rpm so the theme's global
 * ul/li/a/p rules and Max Mega Menu's own column styles can't leak in.
 *
 * The first 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.
 */

#mega-menu-top .rpm {
    display: flex;
    align-items: stretch;
    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 {
    text-decoration: none;
}

/* ── 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, 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, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

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

#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-title {
    margin: 0 0 8px;
    color: #1a1a1a;
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

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

#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;
}

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

#mega-menu-top .rpm-offer {
    display: block;
    min-width: 0;
}

#mega-menu-top .rpm-offer-title {
    display: block;
    margin: 0 0 6px;
    color: #1a1a1a;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    transition: color .15s 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 {
    display: -webkit-box;
    overflow: hidden;
    color: #666;
    font-size: 15px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

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

#mega-menu-top .rpm-offer:hover .rpm-offer-title {
    color: #ff3b0a;
}

#mega-menu-top .rpm-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 {
    background: #ff3b0a;
    color: #fff;
}

/* 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, sans-serif;
    color: #1a1a1a;
    font-weight: 500;
    margin-top: 0;
    padding-left: 16px;
    line-height: 1.2;
    text-transform: capitalize;
    position: relative;
}

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

/* ── Mobile (Max Mega Menu breakpoint is 991px) ──────── */
/* The tabs become a plain list of platform links; panels are desktop-only.
   Rows copy the other items' mobile sub-links (e.g. Industries): white
   Poppins 18px/500 on the dark menu, 20px row padding, #373737 divider. */

@media only screen and (max-width: 991px) {
    #mega-menu-top .rpm {
        display: block;
        background: transparent;
    }
    #mega-menu-top .rpm-tabs {
        padding: 0;
        border-right: 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 {
        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 .rpm-tab img,
    #mega-menu-top .rpm-tab-arrow {
        display: none;
    }
    #mega-menu-top .rpm-view-all {
        margin: 0;
        padding: 20px 0;
        font-size: 18px;
    }
    #mega-menu-top .rpm-panels {
        display: none;
    }
}