/* =========================================================
   JWPU - Arabic RTL Navigation Fix
   إصلاح اتجاه القائمة الرئيسية في النسخة العربية فقط
   ========================================================= */


/* ---------------------------------------------------------
   1. الاتجاه العام للقائمة العربية
   --------------------------------------------------------- */

html[lang^="ar"] .pkp_navigation_primary_wrapper,
html[lang^="ar"] #navigationPrimary,
html[lang^="ar"] .pkp_navigation_primary {
    direction: rtl !important;
    text-align: right !important;
}


/* ---------------------------------------------------------
   2. القائمة الرئيسية على الشاشات الكبيرة
   الصفحة الرئيسية تبدأ من أقصى اليمين
   والتواصل يكون آخر عنصر في أقصى اليسار
   --------------------------------------------------------- */

@media (min-width: 992px) {

    html[lang^="ar"] #navigationPrimary,
    html[lang^="ar"] .pkp_navigation_primary {

        display: flex !important;

        /* مهم: لا تستخدم row-reverse */
        flex-direction: row !important;

        /* منع نزول "للتواصل" إلى سطر جديد */
        flex-wrap: nowrap !important;

        /* البداية من اليمين بسبب direction: rtl */
        justify-content: flex-start !important;

        align-items: center !important;

        direction: rtl !important;
        text-align: right !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    /* -----------------------------------------------------
       3. عناصر القائمة
       ----------------------------------------------------- */

    html[lang^="ar"] #navigationPrimary > li,
    html[lang^="ar"] .pkp_navigation_primary > li {

        float: none !important;

        display: block !important;

        flex: 0 0 auto !important;

        direction: rtl !important;
        text-align: right !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       4. روابط القائمة
       تقليل المسافات قليلًا حتى تتسع جميع العناصر
       ----------------------------------------------------- */

    html[lang^="ar"] #navigationPrimary > li > a,
    html[lang^="ar"] .pkp_navigation_primary > li > a {

        display: block !important;

        direction: rtl !important;
        text-align: right !important;

        white-space: nowrap !important;

        padding-left: 9px !important;
        padding-right: 9px !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       5. الحاوية التي تضم القائمة
       ----------------------------------------------------- */

    html[lang^="ar"] .pkp_navigation_primary_wrapper {

        display: flex !important;

        direction: rtl !important;

        align-items: center !important;

        justify-content: flex-start !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       6. القوائم المنسدلة إن وجدت
       ----------------------------------------------------- */

    html[lang^="ar"] #navigationPrimary ul,
    html[lang^="ar"] .pkp_navigation_primary ul {

        direction: rtl !important;
        text-align: right !important;
    }

    html[lang^="ar"] #navigationPrimary ul li,
    html[lang^="ar"] .pkp_navigation_primary ul li {

        direction: rtl !important;
        text-align: right !important;
    }

    html[lang^="ar"] #navigationPrimary ul li a,
    html[lang^="ar"] .pkp_navigation_primary ul li a {

        direction: rtl !important;
        text-align: right !important;
    }
}


/* ---------------------------------------------------------
   7. الهواتف والأجهزة اللوحية
   لا نفرض Flex حتى لا نفسد قائمة الهاتف
   --------------------------------------------------------- */

@media (max-width: 991px) {

    html[lang^="ar"] #navigationPrimary,
    html[lang^="ar"] .pkp_navigation_primary {

        direction: rtl !important;
        text-align: right !important;
    }

    html[lang^="ar"] #navigationPrimary li,
    html[lang^="ar"] .pkp_navigation_primary li {

        direction: rtl !important;
        text-align: right !important;
    }

    html[lang^="ar"] #navigationPrimary a,
    html[lang^="ar"] .pkp_navigation_primary a {

        direction: rtl !important;
        text-align: right !important;
    }
}