/*
 * Local override for rules that also live in header-mega-menu-overrides.css
 * on the shared CDN (IAPP_CDN). The CDN copy lags behind the Laravel repo's
 * public/css/header-mega-menu-overrides.css until someone re-syncs that
 * bucket, so this file mirrors just the two blocks the App Development
 * 12-item mega-menu needs and is enqueued after the CDN stylesheet.
 * Safe to delete once the CDN copy is confirmed to include these rules.
 */

/* Services mega menu (desktop): show ~6 services per category and scroll
   the rest internally, so a category with a longer list (App Development
   is up to 12 now) doesn't grow the dropdown indefinitely. Scoped to just
   `.tab-content.menutabbox` (the right-hand service list), NOT the whole
   `.tabs-container` row — the left `.megatabs_menu` category rail stays
   fully visible/static and un-scrolled. Height is measured from the live
   two-column item layout: 85px item + 18px row gap, ×3 rows = 309px.
   `::before` (the hover bridge) belongs to the outer `.mega-content`, not
   this inner panel, so it's unaffected and hover-to-open/close still
   works normally. */
@media (min-width: 992px) {
    .dropdown-mega .mega-content.service-mega-menu .tab-content.menutabbox .menu-group {
        max-height: 309px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }

    .dropdown-mega .mega-content.service-mega-menu .tab-content.menutabbox .menu-group::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-mega .mega-content.service-mega-menu .tab-content.menutabbox .menu-group::-webkit-scrollbar-track {
        background: transparent;
    }

    .dropdown-mega .mega-content.service-mega-menu .tab-content.menutabbox .menu-group::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 10px;
    }

    .dropdown-mega .mega-content.service-mega-menu .tab-content.menutabbox .menu-group::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }
}

/* Icon-font substitute for mega-menu items sourced from services_catalog.php
   (Remix Icon classes) that don't have a dedicated SVG in navbar-images/ —
   boxed/spaced to match the .ex-aspect-image.service-icon <img> icons used
   by the rest of the App Development list. */
.dropdown-mega .mega-content .menu-item .service-icon-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

.dropdown-mega .mega-content .menu-item .service-icon-i i {
    font-size: 18px;
    color: #ffffff;
    line-height: 1;
}