/*
============================================================
  ملف الأنماط الموحد لمجلة جامعة الحضارة
  آخر تحديث: 8 أغسطس 2025
  تمت المراجعة والتحسين بواسطة Gemini
============================================================
*/

/* --- 0. استدعاء الخطوط --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/*
============================================================
  1. إعدادات عالمية وأساسية (Global & Base Styles)
============================================================
*/


/*
============================================================
  -- قاعدة شاملة لفرض خط Cairo على جميع عناصر الموقع --
============================================================
*/
* {
    font-family: 'Cairo', sans-serif !important;
}


/* إعداد اتجاه الصفحة والخطوط الأساسية */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

html[lang="en"] body {
    direction: ltr;
    text-align: left;
}

html,
body.pkp_op_view {
    overflow-x: hidden;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

/* الأنماط العامة للعناوين */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    color: #ffffff;
    margin: 1.25rem 0 0.625rem 0;
    background-color: #C92D3C;
    padding: 0.625rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.25rem;
}

/* الأنماط العامة للروابط */
a {
    font-family: 'Cairo', sans-serif;
    color: #C92D3C;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #9E202E;
    text-decoration: underline;
}

/*
============================================================
  2. تخطيط الصفحة الرئيسي (Main Page Layout)
============================================================
*/

/* استخدام Flexbox للحاوية الرئيسية لتحسين التخطيط */
.pkp_structure_content {
    display: flex;
    flex-wrap: wrap; 
}

.pkp_structure_main {
    flex: 1;
    min-width: 0; /* لمنع المحتوى من تجاوز الحاوية */
}




.pkp_structure_sidebar {
    background-color: #f1f3f5;
    padding: 1.25rem;
    border-inline-start: 0.125rem solid #dee2e6; /* ليعمل بشكل صحيح مع LTR و RTL */
}

.page_index_journal {
    padding: 1.25rem;
}


.description {

        text-align: justify;

}
/*
============================================================
  3. الترويسة والتنقل (Header & Navigation)
============================================================
*/

header.pkp_structure_head {
    background-color: #C92D3C;
    padding: 15px 0;
    position: relative;
    color: #ffffff;
}

.pkp_site_name_wrapper {
    background-color: #C92D3C ;    
}

.pkp_site_name {
    position: relative;
    text-align: center;
    background-color: #C92D3C ;
}

.pkp_site_name img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 25px #ffffff) drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 10px #ffffff);
}

#headerNavigationContainer .pkp_navigation_primary_row {
    background-color: #C92D3C;
    border: 1px solid #ffffff;
}

#headerNavigationContainer a {
    color: #ffffff;
    text-decoration: none;
}

#headerNavigationContainer > div > nav > div.pkp_navigation_primary_row a:hover {
    color: #ffebee;
    background-color: #09644e;
}

#navigationUserWrapper a {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ffffff;
    border-radius: 5px;
    display: inline-block;
    margin: 5px;
}

#navigationUserWrapper a:hover {
    background-color: #9E202E;
    border-color: #ffebee;
}

/*
============================================================
  4. تصميم البطاقات والقوائم (Cards & Lists)
============================================================
*/

/* 4.1. بطاقات ملخص المقالات (Homepage) */
.obj_article_summary {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    text-align: justify;
}

.obj_article_summary:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.obj_article_summary .title a {
    font-size: 1rem;
    color: #ffffff; /* لون داكن وواضح */
    font-weight: 500;
}

.obj_article_summary .authors {
    text-align: justify;
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.5;
    margin: 0.75rem 0 1rem 0;
}

.obj_galley_link.pdf {
    display: inline-block;
    background-color: #C92D3C;
    color: #ffffff !important;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
    align-self: flex-end; /* محاذاة لآخر البطاقة */
    margin-top: auto;
}

.obj_galley_link.pdf:hover {
    background-color: #9E202E;
    transform: scale(1.05);
}

/* 4.2. بطاقات أعداد المجلة (Archives Page) */
/* 4.2. بطاقات أعداد المجلة (صفحة الأرشيف) */

/* حاوية الأعداد الرئيسية */
.issues_archive {
  display: flex; /* تم التغيير من grid إلى flex لترتيب العناصر */
  flex-direction: column; /* يجعل العناصر تترتب عمودياً (كل عدد في سطر) */
  gap: 1.5rem; /* يضيف مسافة رأسية بين البطاقات */
  list-style-type: none;
  padding: 0;
  margin: 2rem auto; /* توسيط الحاوية في الصفحة مع هامش علوي */
  max-width: 850px; /* تحديد عرض أقصى لتحسين القراءة على الشاشات الكبيرة */
}

/* بطاقة العدد الواحد */
.obj_issue_summary {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-align: justify;

 
}

/* تأثير عند مرور الفأرة على البطاقة */
.obj_issue_summary:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* عنوان القسم داخل البطاقة (مثل: العدد الأول - يناير 2024) */
.obj_issue_summary h2 {
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #C92D3C; /* خط سفلي مميز للعنوان */
}

/* رابط عنوان العدد */
.obj_issue_summary a.title {
  font-size: 1.25rem;
  /* !! تصحيح مهم: تم تغيير اللون من الأبيض إلى لون داكن ليكون удоمقروءاً */
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
  transition: color 0.3s ease; /* إضافة انتقال ناعم للون عند المرور */
}

/* تغيير لون الرابط عند مرور الفأرة */
.obj_issue_summary a.title:hover {
  color: #3498db; /* تم اختيار لون أزرق جذاب للتحويم */
}

/* معلومات إضافية (مثل: المجلد 1، العدد 1) */
.obj_issue_summary .series {
  font-size: 0.9rem;
  color: #a7adb3;
  font-style: italic;
}
/*
============================================================
  5. تنسيقات خاصة (Specific Components)
============================================================
*/

/* 5.1. تنسيق الفقرات المضبوطة (Justified Text) */
.homepage_about p,
.item.abstract p {
    text-align: justify;
}

/* 5.2. تنسيق موحد لـ DOI */
.doiInSummary,
.pub_id.doi,
.item.doi {
    direction: ltr;
    text-align: left;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    background-color: transparent !important;
    padding: 0.25rem 0 0.25rem 1rem !important;
    border: none !important;
}

.item.doi {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.item.doi .label {
    background-color: transparent !important;
    color: #333 !important;
    font-size: 1rem !important;
    font-weight: bold;
    padding: 0 !important;
    margin: 0 0.5em 0 0 !important;
    width: auto;
}

.doiInSummary a,
.pub_id.doi a,
.item.doi .value a {
    color: #0056b3;
    word-break: break-all;
}

/* 5.3. تنسيق روابط متفرقة باللون الأزرق */
.cmp_breadcrumbs a,
.item.copyright a,
#citationOutput a {
    color: #0056b3;
    text-decoration: underline;
}

.cmp_breadcrumbs a:hover,
.item.copyright a:hover,
#citationOutput a:hover {
    color: #003366;
}

/*
============================================================
  6. التذييل (Footer)
============================================================
*/

.pkp_structure_footer_wrapper {
    background-color: #C92D3C;
    color: #ffffff;
    padding: 20px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.pkp_structure_footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pkp_structure_footer a {
    color: #ffffff;
    text-decoration: underline;
}

.pkp_brand_footer img {
    max-width: 100px;
    height: auto;
    margin-inline-start: 10px; /* ليعمل بشكل صحيح مع LTR و RTL */
    transition: transform 0.3s;
}

.pkp_brand_footer img:hover {
    transform: scale(1.1);
}

/*
============================================================
  7. قواعد الشاشات الصغيرة (Responsive Media Queries)
============================================================
*/

@media (max-width: 768px) {
    /* تخطيط الصفحة */
    .pkp_structure_content {
        flex-direction: column;
    }

    /* قائمة التنقل */
    .pkp_site_nav_toggle {
        display: block;
        color: #ffffff;
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 15px; /* يفضل استخدام right للغة العربية */
        z-index: 1000;
        font-size: 1.5rem;
    }

    .pkp_site_nav_menu {
        display: none;
        position: absolute;
        top: 60px; /* تعديل المسافة من الأعلى */
        right: 0;
        background-color: #C92D3C;
        width: 100%;
        padding: 0;
        z-index: 999;
        border-top: 1px solid #ffffff;
    }

    .pkp_site_nav_menu.active {
        display: block;
    }
    
    .pkp_navigation_user_wrapper a,
    .pkp_navigation_primary_wrapper ul li a {
        padding: 1rem;
        display: block;
        text-align: inherit;
    }

    /* التذييل */
    .pkp_structure_footer {
        flex-direction: column;
        text-align: center;
    }

    .pkp_brand_footer {
        margin-top: 15px;
    }
}




/*
============================================================
  9. تنسيق القائمة المنسدلة (Dropdown Menu)
============================================================
*/

/* تنسيق الحاوية الرئيسية للقائمة */
.dropdown-menu {
    background-color: #C92D3C !important; /* لون الخلفية الأحمر الرئيسي */
    border: 1px solid rgba(255, 255, 255, 0.5); /* حد أبيض نصف شفاف لمظهر أنعم */
    border-radius: 0 0 5px 5px; /* جعل الزوايا السفلية فقط دائرية */
    padding: 0.5rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-top: 0; /* إزالة أي مسافة علوية */
}

/* تنسيق الروابط داخل القائمة */
.dropdown-menu a {
    color: #ffffff !important;
    padding: 0.6rem 1.5rem; /* زيادة الحشوة لجعل الروابط أكبر وأسهل للضغط */
    display: block;
    text-align: right;
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
}

/* تغيير لون الرابط عند مرور الماوس فوقه */
.dropdown-menu a:hover {
    background-color: #9E202E; /* استخدام اللون الأحمر الأغمق عند التمرير */
    color: #ffffff !important;
    text-decoration: none;
}















/* --- تنسيق قسم المراجع متجاوب ومتعدد اللغات --- */

/* 1. الحاوية الرئيسية للمراجع */
section.item.references {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    overflow: hidden; /* يضمن احتواء العناصر بشكل صحيح */
}

/* 2. عنوان "المراجع" */
section.item.references h2.label {
    font-size: 22px;
    color: #333;
    border-bottom: 2px solid #007ab2;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 3. تهيئة قائمة المراجع للترقيم */
section.item.references .value {
    counter-reset: ref-counter; /* إنشاء العداد */
}

/* 4. تنسيق كل مرجع (فقرة) مع ضبط المحاذاة */
section.item.references .value p {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.9;
    font-size: 12px; /* حجم خط مقبول للقراءة على الحاسوب */
    text-align: justify; /* أهم إضافة: لضبط محاذاة النص */
    color: #444;
}

/* === قواعد اتجاه اللغة (RTL & LTR) === */

/* (أ) في حالة اللغة العربية (من اليمين لليسار) */
:dir(rtl) section.item.references .value p {
    padding-right: 35px; /* مسافة على اليمين للترقيم */
}
:dir(rtl) section.item.references .value p::before {
    counter-increment: ref-counter;
    content: counter(ref-counter) ". ";
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    color: #007ab2;
}

/* (ب) في حالة اللغة الإنجليزية (من اليسار لليمين) */
:dir(ltr) section.item.references .value p {
    padding-left: 35px; /* مسافة على اليسار للترقيم */
}
:dir(ltr) section.item.references .value p::before {
    counter-increment: ref-counter;
    content: counter(ref-counter) ". ";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    color: #007ab2;
}


/* 5. تنسيق الروابط داخل المراجع */
section.item.references .value p a {
    color: #0056b3;
    text-decoration: none;
    word-break: break-all; /* لمنع الروابط الطويلة من الخروج عن الهامش */
}
section.item.references .value p a:hover {
    text-decoration: underline;
}

/* === التجاوب مع شاشات الهاتف (Responsive) === */
/* تطبيق هذه القواعد على الشاشات التي عرضها 768 بكسل أو أقل */

@media (max-width: 768px) {
    section.item.references {
        padding: 15px; /* تقليل المساحة الداخلية في الهاتف */
    }

    section.item.references h2.label {
        font-size: 20px; /* تصغير حجم العنوان قليلاً */
    }

    section.item.references .value p {
        font-size: 12px; /* حجم خط أنسب لشاشات الهاتف */
        line-height: 1.8;
    }
    
    /* تعديل المسافة المخصصة للترقيم في الهاتف */
    :dir(rtl) section.item.references .value p {
        padding-right: 30px; 
    }
    :dir(ltr) section.item.references .value p {
        padding-left: 30px;
    }
}