/* ================= 1. الشريط الرئيسي (أخضر) ================= */
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    background-color: #008357 !important;
}

/* لون نصوص الروابط الرئيسية (أبيض مبدئياً) */
.pkp_navigation_primary_wrapper a,
.pkp_navigation_user_wrapper a,
.pkp_navigation_primary > .pkp_navigation_list > li > a {
    color: #ffffff !important;
}

/* ================= 2. عند الضغط أو فتح القائمة ================= */
/* تحويل لون نص الزر الرئيسي للأزرق عند الضغط عليه */
.pkp_navigation_primary > .pkp_navigation_list > li > a:active,
.pkp_navigation_primary > .pkp_navigation_list > li > a:focus,
.pkp_navigation_primary > .pkp_navigation_list > li.open > a,
.pkp_navigation_primary > .pkp_navigation_list > li[aria-expanded="true"] > a {
    color: #007bff !important; /* النص يصبح أزرق */
    background-color: #ffffff !important; /* خلفية بيضاء لتمييز الزر */
}

/* ================= 3. القائمة المنسدلة (الحل الجذري) ================= */

/* إجبار صندوق القائمة المنسدلة أن يكون بخلفية زرقاء */
.pkp_navigation_primary .dropdown-menu {
    background-color: #1d8a5b !important; /* أخضر*/
   
}

/* معالجة الروابط داخل القائمة المنسدلة لتكون بيضاء */
.pkp_navigation_primary .dropdown-menu li a {
    color: #ffffff !important; /* نص أبيض */
    background-color: transparent !important; /* خلفية شفافة لتأخذ لون الصندوق الأزرق */
}

/* عند مرور الماوس على عنصر داخل القائمة المنسدلة */
.pkp_navigation_primary .dropdown-menu li a:hover,
.pkp_navigation_primary .dropdown-menu li a:focus {
    background-color: #1d8a5b !important; /* خلفية أخضر غامق */
    color: #ffffff !important;
}

/* تصحيح إضافي لضمان عدم وجود خلفية بيضاء من عناصر li */
.pkp_navigation_primary .dropdown-menu li {
    background-color: transparent !important;
}