/* =========================================
   1. الخطوط والألوان الأساسية (Typography & Colors)
   ========================================= */

/* استيراد خط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

@font-face {
  font-family: 'Cairo';
  font-display: swap; 
}

/* تطبيق الخط */
body, h1, h2, h3, h4, h5, h6, .metismenu, .btn, .mod-menu {
    font-family: 'Cairo', sans-serif !important;
}

/* إجبار الألوان - Brand Colors */
:root {
    --cassiopeia-color-primary: #0f1c3f !important; /* الأزرق */
    --cassiopeia-color-link: #0f1c3f !important;
    --cassiopeia-color-hover: #d4af37 !important; /* الذهبي */
}

/* =========================================
   2. تنسيق الهيدر واللوجو (Header & Logo)
   ========================================= */

.container-header {
    background-color: #0f1c3f !important;
    background-image: none !important;
}

.container-header .navbar-brand a, 
.container-header .metismenu > li > a,
.container-header .mod-languages a {
    color: #fff !important;
    opacity: 1 !important;
}

/* تأثير اللوجو (الظل والإضاءة) */
.container-header .navbar-brand img {
    filter: drop-shadow(0px 0px 5px #ffffff) drop-shadow(0px 0px 5px #ffffff);
    brightness(1.1);
    transition: all 0.3s ease;
}

.container-header .navbar-brand img:hover {
     transform: scale(1.05);
     filter: drop-shadow(0px 0px 8px #ffffff) drop-shadow(0px 0px 8px #ffffff);
}

/* عكس اللوجو في الإنجليزي */
html[dir="ltr"] .container-header .navbar-brand img {
    transform: scaleX(-1);
}

/* تحسين القوائم العلوية */
.container-header .metismenu > li > a,
.container-header .mod-languages {
    font-weight: 600 !important;
}

/* تأثير التمرير (Hover) */
.container-header a:hover, 
.container-header .metismenu > li > a:hover {
    color: #ffdb4d !important; 
    text-shadow: 0 0 5px rgba(255, 219, 77, 0.3);
}

/* القائمة المنسدلة (Dropdown) */
.container-header .metismenu.mod-menu .mm-collapse {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-top: 3px solid #d4af37;
    padding: 10px 0;
}

.container-header .metismenu.mod-menu .mm-collapse li a {
    color: #0f1c3f !important;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
}

.container-header .metismenu.mod-menu .mm-collapse li a:hover {
    background-color: #f4f4f4;
    color: #d4af37 !important;
    padding-right: 25px; /* حركة بسيطة */
    transition: all 0.3s;
}

/* زر الموبايل */
.container-header .navbar-toggler {
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
}
.container-header .navbar-toggler-icon {
    filter: invert(1);
}

/* =========================================
   3. تحسينات الموبايل (Mobile Tweaks)
   ========================================= */
@media (max-width: 991.98px) {
    .container-header .navbar-brand img {
        max-width: 120px !important;
        height: auto;
    }
    .container-header { text-align: center; }
    .container-header .navbar-brand { justify-content: center; margin-bottom: 10px; }
    .container-header .metismenu { margin-top: 10px; text-align: center; }
    .container-header .mod-languages { display: inline-block; margin: 10px auto; }
}

/* =========================================
   4. تحسين تجربة القراءة والمسار (Body & Breadcrumbs)
   ========================================= */

/* شريط المسار */
.mod-breadcrumbs {
    background-color: transparent !important;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #666;
}
.mod-breadcrumbs .divider { padding: 0 8px; color: #ccc; }

/* إزالة الخطوط (Underlines) من الروابط */
.mod-breadcrumbs a,
.item-title a,
.page-header h1 a,
.page-header h2 a,
.card-title a,
.metismenu a,
.metismenu.active a,
.metismenu.collapse li a,
.article-info-term a,
.parent-category a,
.category-name a,
.mod-articles-category a {
    text-decoration: none !important;
    color: inherit;
    transition: color 0.3s ease;
}

.mod-breadcrumbs a:hover,
.item-title a:hover,
.page-header h2 a:hover,
.metismenu a:hover,
.article-info-term a:hover {
    color: #d4af37 !important;
}

/* تنسيق جسم المقال */
.com-content-article__body, 
.com-content-article__intro {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}
.com-content-article__body p { margin-bottom: 1.5rem; }

/* === تحديث تنسيق العناوين (Fix Layout & Indentation) === */

.com-content-article__body h2, 
.com-content-article__body h3 {
    color: #0f1c3f;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 10px;
    
    /* الحل السحري: */
    display: block;         /* لضمان أن كل عنوان يحتل سطراً مستقلاً */
    width: fit-content;     /* لجعل الخط الذهبي يلتف حول النص فقط ولا يمتد للنهاية */
}

/* تخصيص H2 (العنوان الرئيسي) */
.com-content-article__body h2 {
    border-bottom: 2px solid #d4af37; /* خط سميك */
}

/* تخصيص H3 (العنوان الفرعي) وإزاحته للداخل */
.com-content-article__body h3 {
    font-size: 1.1rem;       /* أصغر قليلاً */
    border-bottom: 1px solid #d4af37; /* خط أرفع */
    margin-top: 0.5rem;      /* تقليل المسافة بينه وبين العنوان الأب */
    
    /* الإزاحة في النسخة العربية */
    margin-right: 30px;      
}

/* الإزاحة في النسخة الإنجليزية (عكس الاتجاه) */
html[dir="ltr"] .com-content-article__body h3 {
    margin-right: 0;
    margin-left: 30px;
}

/* === تنسيق المحتوى التابع للعناوين الفرعية (Indentation for H3 Content) === */

/* 1. النسخة العربية (RTL): إزاحة الفقرات والقوائم التي تأتي بعد H3 مباشرة */
.com-content-article__body h3 + p,
.com-content-article__body h3 + ul,
.com-content-article__body h3 + ol,
.com-content-article__body h3 + div {
    margin-right: 30px; /* نفس مسافة إزاحة العنوان */
    display: block;
    border-right: 0px solid #eee; /* لمسة جمالية: خط رمادي خفيف يربط العنوان بالنص */
    padding-right: 30px; /* مسافة بين الخط والنص */
}

/* 2. النسخة الإنجليزية (LTR): عكس الاتجاه */
html[dir="ltr"] .com-content-article__body h3 + p,
html[dir="ltr"] .com-content-article__body h3 + ul,
html[dir="ltr"] .com-content-article__body h3 + ol,
html[dir="ltr"] .com-content-article__body h3 + div {
    margin-right: 0;
    margin-left: 30px; /* نفس مسافة إزاحة العنوان */
    border-right: none;
    border-left: 0px solid #eee; /* الخط الرمادي على اليسار */
    padding-right: 0;
    padding-left: 30px;
}

/* صورة المقال الكامل (Full Image) */
.com-content-article .item-image {
    float: none !important;
    width: 100%;
    margin: 0 0 30px 0 !important;
    display: block;
}
.com-content-article .item-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   5. الفوتر (Footer)
   ========================================= */

.container-footer {
    background-color: #0f1c3f !important;
    color: #ffffff;
    padding: 40px 0 20px 0;
    margin-top: 50px;
    border-top: 4px solid #d4af37;
    text-align: center;
}

/* قائمة الفوتر */
.container-footer .mod-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    gap: 20px;
}
.container-footer .mod-menu li a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s;
}
.container-footer .mod-menu li a:hover { color: #d4af37; }

/* --- إصلاح السوشيال ميديا (الحل هنا) --- */
.social-media-icons {
    margin: 20px 0;
    display: flex;             /* جعل الحاوية فليكس */
    justify-content: center;   /* توسيط العناصر أفقياً */
    align-items: center;       /* توسيط العناصر رأسياً */
    gap: 15px;                 /* مسافة بين الأيقونات */
}

.social-media-icons a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-media-icons a:hover {
    background: #d4af37;
    color: #0f1c3f !important;
    transform: translateY(-3px);
}

.social-media-icons a span.fa {
    line-height: 1; /* ضبط ارتفاع الأيقونة داخل الدائرة */
}

/* حقوق الملكية */
.copyright {
    font-size: 0.85rem;
    color: #aaa;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 20px;
}

/* موبايل الفوتر */
@media (max-width: 768px) {
    .container-footer .mod-menu {
        flex-direction: column;
        gap: 10px;
    }
}