/* ==============================================
   MOBILE NAVIGATION - Polished Slide-Down Panel
   Applied at max-width: 993px
   ============================================== */

/* --- Mobile menu: slide-down panel --- */
@media (max-width: 993px) {

    /* Let the dropdown escape the header box */
    header.header-mobile {
        overflow: visible !important;
    }

    /* Reset header-inner so panel isn't clipped */
    header.header-mobile .header-inner {
        position: static;
        z-index: auto;
    }

    header.menu-open {
        height: auto !important;
    }

    /* The menu panel itself */
    header.header-mobile #mainmenu {
        top: 100% !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        margin-top: 0 !important;
        height: auto !important;
        max-height: 0;
        overflow: hidden !important;
        background: #ffffff;
        border-radius: 0 0 20px 20px;
        box-shadow: none;
        padding: 0 24px !important;
        transition: max-height 0.4s ease, padding 0.3s ease, box-shadow 0.3s ease;
    }

    /* Open state */
    header.menu-open #mainmenu {
        max-height: 600px;
        overflow-y: auto !important;
        padding: 8px 24px 20px !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    }

    /* Menu items */
    header.header-mobile #mainmenu > li {
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.header-mobile #mainmenu > li:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    header.header-mobile #mainmenu > li > a.menu-item {
        padding: 14px 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #0F172A !important;
        display: block !important;
    }

    header.header-mobile #mainmenu > li > a.menu-item:hover,
    header.header-mobile #mainmenu > li.active > a.menu-item,
    header.header-mobile #mainmenu > li > a.menu-item.active {
        color: #2585F8 !important;
    }

    /* --- Mega menu -> simple indented list on mobile --- */
    #mainmenu .has-mega-menu .mega-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        transition: none !important;
    }

    /* When the services submenu is toggled open */
    #mainmenu .has-mega-menu.submenu-open .mega-menu {
        display: block !important;
    }

    /* Flatten the mega menu grid */
    #mainmenu .has-mega-menu .mega-menu .mega-menu-inner {
        display: block !important;
        grid-template-columns: none !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-column {
        padding: 0 !important;
        border: none !important;
        float: none !important;
        width: 100% !important;
    }

    /* Hover effect reset for columns */
    #mainmenu .has-mega-menu .mega-menu .mega-menu-column:hover {
        background: transparent !important;
    }

    /* Hide category headings and footer on mobile */
    #mainmenu .has-mega-menu .mega-menu .mega-menu-category {
        display: none !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-footer {
        display: none !important;
    }

    /* Service sub-links */
    #mainmenu .has-mega-menu .mega-menu .mega-menu-links {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-links li {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-links li::before {
        display: none !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-links a {
        display: block !important;
        padding: 10px 0 10px 20px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #64748B !important;
        background: none !important;
        border: none !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-links a:hover {
        color: #2585F8 !important;
        background: none !important;
    }

    #mainmenu .has-mega-menu .mega-menu .mega-menu-links a i {
        display: none !important;
    }

    /* Chevron indicator on Services parent */
    #mainmenu .has-mega-menu > a.menu-item {
        position: relative !important;
    }

    #mainmenu .has-mega-menu > a.menu-item::after {
        content: '' !important;
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #94A3B8 !important;
        border-bottom: 2px solid #94A3B8 !important;
        transform: rotate(45deg) !important;
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        margin-top: -6px !important;
        transition: transform 0.25s ease !important;
        background: none !important;
    }

    #mainmenu .has-mega-menu.submenu-open > a.menu-item::after {
        transform: rotate(-135deg) !important;
        margin-top: -2px !important;
    }

    /* Services border when expanded */
    #mainmenu .has-mega-menu.submenu-open {
        padding-bottom: 6px !important;
    }

    /* --- Mobile menu footer (CTA + phone) --- */
    .mobile-menu-footer {
        display: none;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    header.menu-open .mobile-menu-footer {
        display: block;
    }

    .mobile-cta-btn,
    a.mobile-cta-btn,
    header .mobile-cta-btn {
        display: block;
        width: 100%;
        background: linear-gradient(135deg, #2585F8, #1a6fd6) !important;
        color: #ffffff !important;
        text-align: center;
        padding: 16px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none !important;
        margin-top: 16px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        letter-spacing: 0.3px;
        box-shadow: 0 4px 12px rgba(37, 133, 248, 0.3);
    }

    .mobile-cta-btn:hover,
    a.mobile-cta-btn:hover {
        background: linear-gradient(135deg, #1a6fd6, #1558b0) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: 0 6px 20px rgba(37, 133, 248, 0.4);
    }

    .mobile-phone-link,
    a.mobile-phone-link,
    header .mobile-phone-link {
        display: block;
        text-align: center;
        color: #0F172A !important;
        font-size: 18px;
        font-weight: 600;
        padding: 14px 0 6px;
        text-decoration: none !important;
        letter-spacing: 0.3px;
    }

    .mobile-phone-link:hover,
    a.mobile-phone-link:hover {
        color: #2585F8 !important;
        text-decoration: none !important;
    }

    .mobile-phone-link i {
        margin-right: 6px;
        color: #2585F8;
    }

    /* Nav hide/show on scroll */
    header.nav-hidden {
        transform: translateY(-100%) !important;
        box-shadow: none !important;
    }

    /* Handle case-studies.html regular submenu styling */
    header.header-mobile #mainmenu > li > ul {
        position: static !important;
        display: none !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header.header-mobile #mainmenu > li.submenu-open > ul {
        display: block !important;
    }

    header.header-mobile #mainmenu > li > ul > li {
        border: none !important;
    }

    header.header-mobile #mainmenu > li > ul > li > a {
        display: block !important;
        padding: 10px 0 10px 20px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #64748B !important;
        background: none !important;
    }

    header.header-mobile #mainmenu > li > ul > li > a:hover {
        color: #2585F8 !important;
    }
}

/* Hide the mobile menu footer on desktop */
@media (min-width: 994px) {
    .mobile-menu-footer {
        display: none !important;
    }
}