/* Mobile off-canvas menu — hidden on desktop by default */
.mobile-menu-header,
.navbar-close,
.navbar-social,
.mobile-menu-cta {
    display: none;
}

@media (max-width: 1200px) {
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10, 12, 20, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        z-index: 999;
    }

    body.menu-open .nav-overlay {
        opacity: 1;
        visibility: visible;
    }

    .navbar {
        display: flex;
        flex-direction: column;
        background: #EEF1F6;
        padding: 24px 24px 28px;
        width: 100%;
        max-width: 100%;
    }

    /* Header row: logo + close */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .mobile-menu-logo img {
        max-height: 42px;
        width: auto;
    }

    .navbar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: transparent;
        border: 0;
        color: #22262f;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
        transition: opacity 0.2s ease;
    }

    .navbar-close:hover {
        opacity: 0.6;
    }

    .nav-menu {
        flex: 1 1 auto;
        padding: 0;
    }

    .nav-menu > li {
        border-bottom: 1px solid rgba(41, 50, 117, 0.14);
    }

    .nav-menu > li:last-child {
        border-bottom: 0;
    }

    .header .nav-menu > li > a {
        padding: 16px 2px;
        color: #293275;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    .submenu-icon {
        filter: brightness(0);
    }

    .has-submenu .submenu {
        background: rgba(41, 50, 117, 0.06);
        padding: 4px 0 12px 14px;
    }

    .arabic-page .has-submenu .submenu {
        padding: 4px 14px 12px 0;
    }

    .has-submenu .submenu li a,
    .header .submenu-menu li a {
        color: #555b66;
    }

    .has-submenu .submenu li a:hover,
    .header .submenu-menu li a:hover {
        color: #293275;
    }

    /* Social icons — same treatment as the footer's .social-links */
    .navbar-social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px 0 0;
        flex-shrink: 0;
    }

    .navbar-social a {
        display: flex;
        width: 43px;
        height: 43px;
        padding: 9px 8px 8px 9px;
        justify-content: center;
        align-items: center;
        border-radius: 24.5px;
        background: #293275;
        transition: transform 0.2s ease;
    }

    .navbar-social a:first-child {
        padding: 0;
        background: transparent;
    }

    .navbar-social a:hover {
        transform: translateY(-2px);
    }

    .navbar-social a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* CTA button */
    .mobile-menu-cta {
        display: block;
        margin-top: 20px;
        flex-shrink: 0;
    }

    .mobile-menu-cta .btn {
        width: 100%;
        justify-content: center;
        border-radius: 30px;
        padding: 16px 20px;
    }

    .mobile-menu-cta .btn span {
        text-transform: uppercase;
        font-weight: 500;
    }

    /* Hamburger sits above the light panel when open, so switch it dark */
    .menu-toggle.active span {
        background: #22262f;
    }

    .menu-toggle.active {
        top: 10px;
    }
}