/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {
    display: none;
}

@media (max-width: 767px) {

    .site-footer-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        row-gap: 36px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column {
        width: 100%;
        min-width: 0;
    }

}

@media (max-width: 991px) {

    /* Hide desktop navigation */
    #mainNav {
        display: none !important;
    }

    .site-header .nav-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .site-header .nav-cta {
        display: none !important;
    }


    /* Mobile hamburger */
    #mobileToggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        padding: 0;
         margin-right: 6px !important;

        border: 0 !important;
        background: transparent !important;

        color: #0B2A4A;

        font-size: 25px;
        line-height: 1;

        cursor: pointer;
    }


    /* =====================================================
       MOBILE DRAWER
       ===================================================== */

		#mobileMenu {
		display: block;
		
		position: fixed;
		
		top: 80px;
		
		right: 0;
		
		bottom: 0;
		
		width: min(420px, 100vw);
		
		height: calc(100dvh - 80px);

        margin: 0;
        padding: 0;

        background: #ffffff;

        z-index: 99999;

        overflow-x: hidden;
        overflow-y: auto;

        visibility: hidden;
        opacity: 0;

        transform: translateX(100%);

        transition:
            transform .30s ease,
            opacity .30s ease,
            visibility .30s ease;

        box-shadow: -12px 0 35px rgba(0, 0, 0, .14);
    }


    #mobileMenu.active {
        visibility: visible;
        opacity: 1;

        transform: translateX(0);
    }


    /* =====================================================
       INNER
       ===================================================== */

    #mobileMenu .mobile-menu-inner {
        width: 100%;
        min-height: 100%;

        padding: 0 20px 30px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    #mobileMenu .mobile-menu-header {
        height: 70px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-bottom: 1px solid #E5E7EB;
    }


    #mobileMenu .mobile-menu-title {
        display: block;

        font-size: 18px;
        line-height: 1;

        font-weight: 800;

        color: #111827;
    }


    #mobileMenu .mobile-menu-close {
        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0 !important;
        border-radius: 10px;

        background: #F3F6FA !important;

        color: #374151;

        font-size: 17px;
        line-height: 1;

        cursor: pointer;
    }


    /* =====================================================
       TOP LEVEL
       ===================================================== */

    #mobileMenu .mobile-nav-group {
        width: 100%;

        margin: 0;
        padding: 0;

        border-bottom: 1px solid #E5E7EB;
    }


    #mobileMenu .mobile-nav-toggle {
        width: 100%;
        min-height: 58px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        margin: 0;
        padding: 14px 2px;

        border: 0 !important;

        background: transparent !important;

        color: #111827;

        font-family: inherit;
        font-size: 15px;
        font-weight: 700;

        line-height: 1.3;

        text-align: left;

        cursor: pointer;

        box-shadow: none !important;
    }


    #mobileMenu .mobile-nav-toggle > span {
        display: flex;
        align-items: center;

        gap: 13px;
    }


    #mobileMenu .mobile-nav-toggle > span > i {
        width: 22px;

        color: #0056D6;

        font-size: 17px;

        text-align: center;
    }


    #mobileMenu .mobile-nav-toggle > i {
        color: #6B7280;

        font-size: 13px;

        transition: transform .25s ease;
    }


    #mobileMenu .mobile-nav-toggle.active > i {
        transform: rotate(180deg);
        color: #0056D6;
    }


    /* =====================================================
       SUBMENU
       ===================================================== */

    #mobileMenu .mobile-submenu {
        width: 100%;

        max-height: 0;

        overflow: hidden;

        padding: 0 0 0 35px;

        opacity: 0;

        transition:
            max-height .30s ease,
            opacity .20s ease;
    }


    #mobileMenu .mobile-nav-group.open .mobile-submenu {
        max-height: 1200px;

        padding-bottom: 10px;

        opacity: 1;
    }


    #mobileMenu .mobile-submenu > a {
        width: 100%;
        min-height: 58px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;

        padding: 10px 0;

        border-bottom: 1px solid #F0F2F5;

        background: transparent !important;

        color: #374151;

        text-decoration: none;
    }


    #mobileMenu .mobile-submenu > a:last-child {
        border-bottom: 0;
    }


    #mobileMenu .mobile-submenu > a > span {
        display: flex;
        flex-direction: column;

        gap: 4px;

        min-width: 0;
    }


    #mobileMenu .mobile-submenu strong {
        display: block;

        font-size: 13px;
        line-height: 1.3;

        font-weight: 700;

        color: #111827;
    }


    #mobileMenu .mobile-submenu small {
        display: block;

        font-size: 12px;
        line-height: 1.45;

        color: #6B7280;
    }


    #mobileMenu .mobile-submenu > a > i {
        flex: 0 0 auto;

        color: #0056D6;

        font-size: 13px;
    }


    /* =====================================================
       CATEGORY LABEL
       ===================================================== */

    #mobileMenu .mobile-submenu-label {
        display: block;

        padding: 16px 0 7px;

        font-size: 12px;
        line-height: 1.3;

        font-weight: 800;

        letter-spacing: .8px;

        text-transform: uppercase;

        color: #6B7280;
    }


    /* =====================================================
       PLUM
       ===================================================== */

    #mobileMenu .mobile-plum-link {
        min-height: 58px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 14px 2px;

        margin-top: 8px;

        color: #0056D6;

        font-size: 15px;
        font-weight: 800;

        text-decoration: none;
    }


    #mobileMenu .mobile-plum-link span {
        display: flex;
        align-items: center;

        gap: 13px;
    }


    /* =====================================================
       DEMO
       ===================================================== */

    #mobileMenu .mobile-demo-btn {
        min-height: 52px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        width: 100%;

        margin-top: 8px;
        padding: 13px 20px;

        border-radius: 10px;

        background: #0056D6 !important;
        color: #ffffff !important;

        font-size: 14px;
        font-weight: 800;

        text-decoration: none;

        box-shadow: 0 8px 20px rgba(0, 86, 214, .18);
    }


    body.mobile-menu-open {
        overflow: hidden;
    }

}