/* Custom Mobile Nav Overrides - loaded last */
@media (max-width: 991.98px) {
    .nav-offcanvas.offcanvas {
        background: #f9f9fb !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .08) !important;
    }

    .nav-offcanvas .offcanvas-header {
        background: #f9f9fb !important;
        border-bottom: 1px solid #f0f2f5 !important;
        padding: .85rem .9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .5rem;
        position: relative;
    }

    .nav-offcanvas .offcanvas-header .navbar-brand img {
        max-height: 32px !important;
        height: 32px !important;
        width: auto !important;
    }

    .nav-offcanvas .offcanvas-header .btn-close {
        filter: invert(20%);
        opacity: .9;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        background-size: 16px 16px;
        position: absolute;
        inset-inline-end: .9rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    .nav-offcanvas .offcanvas-header .btn-close:hover {
        opacity: 1;
    }

    .nav-offcanvas .offcanvas-body {
        padding: .75rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .nav-offcanvas .nav-links {
        gap: .5rem !important;
    }

    /* Old look: text with underline */
    .nav-offcanvas .nav-links .nav-item {
        margin: .25rem 0 !important;
    }

    .nav-offcanvas .nav-links .nav-link,
    .nav-offcanvas .nav-links button.nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: .65rem .2rem !important;
        border: 0 !important;
        border-bottom: 2px solid #ececf4 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #1f1f23 !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: color .2s ease, border-color .2s ease !important;
    }

    /* Ensure the same underline/hover behavior in LTR explicitly */
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link,
    [dir="ltr"] .nav-offcanvas .nav-links button.nav-link {
        border-bottom: 2px solid #ececf4 !important;
        color: #1f1f23 !important;
        font-weight: 800 !important;
    }
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link:hover,
    [dir="ltr"] .nav-offcanvas .nav-links button.nav-link:hover {
        color: #532494 !important;
        border-bottom-color: #d7cbed !important;
    }
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link.active,
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link.is-active,
    [dir="ltr"] .nav-offcanvas .nav-links button.nav-link.active,
    [dir="ltr"] .nav-offcanvas .nav-links button.nav-link.is-active {
        color: #532494 !important;
        border-bottom-color: #532494 !important;
    }

    .nav-offcanvas .nav-links .nav-link:hover {
        color: #532494 !important;
        border-bottom-color: #d7cbed !important;
    }

    .nav-offcanvas .nav-links .nav-link.active,
    .nav-offcanvas .nav-links .nav-link.is-active {
        color: #532494 !important;
        border-bottom-color: #532494 !important;
    }

    /* Unify behavior: English uses the same underline style as Arabic */
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link { position: static; }
    [dir="ltr"] .nav-offcanvas .nav-links .nav-link::after { content: none !important; }

    /* Projects collapse list with simple text rows */
    .nav-offcanvas #mNavProjects {
        padding: .25rem 0 0 .25rem !important;
    }

    .nav-offcanvas #mNavProjects .nav-link {
        padding: .5rem .2rem !important;
        border: 0 !important;
        border-bottom: 1px dashed #e6e6ee !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-weight: 600 !important;
    }

    /* Language dropdown as simple block */
    .nav-offcanvas .language-selector {
        width: 100% !important;
    }

    .nav-offcanvas .language-options {
        position: static !important;
        display: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border: 1px solid #ececf4 !important;
        border-radius: .75rem !important;
        box-shadow: none !important;
        background: #fff !important;
        margin-top: .35rem;
    }

    .nav-offcanvas .language-options.show {
        display: block !important;
    }
}