/* ==========================================================================
   توحيد تنسيقات المقالات (بديل Tailwind Config)
   ========================================================================== */

/* 1. تنسيق الحاوية الأساسية للمقالة */
.prose {
    color: #374151;       /* لون الفقرات الموحد (رمادي غامق مريح للعين) */
    font-family: 'Cairo', sans-serif;
    line-height: 1.8;     /* تباعد الأسطر للقراءة المريحة */
    font-size: 18px;      /* حجم خط مناسب للقراءة */
}

/* 2. توحيد ألوان وأحجام العناوين (H1, H2, H3...) */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #111827;       /* لون العناوين (أسود تقريباً) */
    font-weight: 800;     /* سماكة الخط */
    margin-top: 1.5em;    /* مسافة فوق العنوان */
    margin-bottom: 0.8em; /* مسافة تحت العنوان */
    line-height: 1.3;
}

.prose h2 { font-size: 1.8rem; border-bottom: 2px solid #E8F5E9; padding-bottom: 10px; }
.prose h3 { font-size: 1.5rem; }

/* 3. توحيد تنسيق الصور داخل المقال */
.prose img {
    border-radius: 12px;  /* زوايا دائرية للصورة */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    margin: 2rem 0;       /* مسافة فوق وتحت الصورة */
    max-width: 100%;      /* لضمان عدم خروج الصورة عن النص */
    height: auto;
}

/* 4. تنسيق الروابط داخل المقال */
.prose a {
    color: #2A5C43;       /* اللون الأخضر المميز (Oryx Green) */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted #2A5C43;
}

.prose a:hover {
    color: #1A3C2F;
    background-color: #E8F5E9; /* خلفية خفيفة عند مرور الماوس */
}

/* 5. القوائم النقطية والرقمية */
.prose ul, .prose ol {
    margin: 1.5em 0;
    padding-right: 1.5em; /* مسافة للغة العربية */
}
.prose li {
    margin-bottom: 0.5em;
}