/* ============================================================
   1. فرض الخط والتهيئة العامة للموقع (جامعة المسيلة)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

*, html, body, p, a, h1, h2, h3, h4, span, div, .pkp_navigation_primary a, .pkp_structure_footer_wrapper {
    font-family: 'Tajawal', sans-serif !important;
}

body {
    max-width: 1300px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 0 50px rgba(0,0,0,0.15);
    overflow-x: hidden; /* لمنع أي تمرير جانبي بسبب تمدد الصورة */
}

html {
    background-color: #f4f4f4;
}

/* ============================================================
   2. الهيدر: خلفية بنية قاتمة وصورة ممتدة بنسبة 110% لملء الفراغ
   ============================================================ */
.pkp_structure_head {
    background-color: #3d0a0a !important; /* بني قاتم ملكي */
    padding: 0 !important; 
    margin: 0 !important;
    border-bottom: 5px solid #D4AF37 !important;
    line-height: 0 !important;
    overflow: visible !important; /* للسماح بظهور القوائم المنسدلة */
}

.pkp_site_name_wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.pkp_site_name_wrapper img {
    /* تمديد الصورة بنسبة 110% لضمان ملء العرض وإلغاء الحواف الجانبية */
    width: 110% !important; 
    margin-left: -5% !important;
    height: auto !important; 
    max-height: 300px !important;
    display: block !important;
    object-fit: cover !important;
    border: none !important;
}

/* ============================================================
   3. النافيجاتور والقوائم الفرعية (حل مشكلة التداخل والظهور)
   ============================================================ */
.pkp_navigation_primary_wrapper {
    background: #D4AF37 !important; /* أصفر ملكي */
    max-width: 95% !important;
    margin: 15px auto !important;
    border-radius: 8px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: 1px solid #B8860B !important;
    position: relative !important;
    z-index: 1000 !important; /* ضمان بقاء الشريط فوق البودي */
    overflow: visible !important;
}

.pkp_navigation_primary > li > a {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 0 20px !important;
    line-height: 52px !important;
    text-decoration: none !important;
}

/* ضبط القوائم الفرعية (المنسدلة) فوق البودي */
.pkp_navigation_primary li ul {
    background-color: #3d0a0a !important; /* خلفية بنية قاتمة */
    border-top: 3px solid #D4AF37 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
    min-width: 220px !important;
    padding: 10px 0 !important;
    position: absolute !important;
    z-index: 99999 !important; /* قيمة قصوى لضمان الظهور فوق المحتوى */
    display: none; 
    right: 0 !important; /* للموقع العربي */
    top: 100% !important;
    visibility: visible !important;
}

.pkp_navigation_primary li:hover > ul {
    display: block !important;
}

.pkp_navigation_primary li ul li a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 12px 20px !important;
    line-height: 1.5 !important;
    display: block !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;
    text-align: right !important;
}

.pkp_navigation_primary li ul li a:hover {
    background-color: #D4AF37 !important;
    color: #1a1a1a !important;
    padding-right: 25px !important;
}

/* ============================================================
   4. السايد بار (مربعات المعلومات الجانبية المتناسقة)
   ============================================================ */
.pkp_block {
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.pkp_block .title {
    background: linear-gradient(90deg, #3d0a0a, #4a0000) !important; /* تدرج بني ملكي */
    color: #D4AF37 !important; /* نص ذهبي */
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    border-bottom: 3px solid #D4AF37 !important;
    text-align: right !important;
}

/* ============================================================
   5. الفوتر (التذييل) وإخفاء هوية OJS
   ============================================================ */
.pkp_structure_footer_wrapper {
    background-color: #1a1a1a !important;
    color: #D4AF37 !important;
    border-top: 5px solid #D4AF37 !important;
    padding: 40px 0 !important;
    z-index: 10 !important;
}

.pkp_brand_footer {
    display: none !important;
    visibility: hidden !important;
}

/* روابط المقالات لتحسين الظهور الأكاديمي */
.obj_article_summary .title a {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.obj_article_summary .title a:hover {
    color: #4a0000 !important;
}