/* =============================================================================
 * prose.css — تنسيق المحتوى المكتوب في المحرّر.
 *
 * كل قاعدة مكتوبة مرّتين: مرّة لـ .prose-rtl (الصفحة المنشورة) ومرّة لـ
 * .ck-content (صندوق CKEditor في لوحة التحكم). النتيجة أن ما يراه المحرِّر أثناء
 * الكتابة هو نفسه ما يظهر للزائر — بلا ملف أنماط ثانٍ يتباعد عن الأول مع الوقت.
 *
 * الألوان من متغيّرات الجهة (--c-primary وأخواتها، تُضبط لكل جهة في
 * layouts/web.blade.php)، فتأخذ كل جمعية لونها هي من ورقة واحدة مشتركة.
 * ========================================================================== */

/* ---------- فيديو: إصلاح المحتوى المنشور فعلًا ----------
 * مزوّد الفيديو في المحرّر يُخرج غلافًا يعتمد على position:relative/absolute،
 * لكن HTMLPurifier يحذف position (CSS.AllowTricky معطّلة). فما يُحفظ في قاعدة
 * البيانات هو غلاف بـ height:0 + overflow:hidden حول إطار بارتفاع 100% من صندوق
 * ارتفاعه صفر — أي فيديو غير مرئي تمامًا. القاعدتان التاليتان تُبطلان الغلاف
 * المنهار وتمنحان الإطار نسبته الصحيحة، فتظهر كل الفيديوهات القديمة بلا أي
 * تعديل على البيانات. :has() تحصر ذلك في الأغلفة التي تحوي إطارًا فعلًا. */
.prose-rtl div[style*="padding-bottom"]:has(iframe),
.ck-content div[style*="padding-bottom"]:has(iframe) {
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

.prose-rtl iframe,
.ck-content iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 14px;
    background: #000;
    margin: 1.75rem 0;
    box-shadow: 0 10px 30px rgb(0 0 0 / .12);
}

/* ---------- عناوين ---------- */
.prose-rtl h2, .ck-content h2,
.prose-rtl h3, .ck-content h3,
.prose-rtl h4, .ck-content h4 {
    font-weight: 800;
    line-height: 1.5;
    margin: 2rem 0 .75rem;
    color: rgb(var(--c-primary-d, 10 20 16));
}
.prose-rtl h2, .ck-content h2 { font-size: 1.6rem; }
.prose-rtl h3, .ck-content h3 { font-size: 1.3rem; }
.prose-rtl h4, .ck-content h4 { font-size: 1.12rem; }

/* شريط لوني صغير قبل العنوان الرئيسي — هوية بصرية بلون الجهة */
.prose-rtl h2::before, .ck-content h2::before {
    content: "";
    display: inline-block;
    width: .35rem;
    height: 1.05em;
    vertical-align: -.15em;
    margin-inline-end: .6rem;
    border-radius: 3px;
    background: rgb(var(--c-secondary, 198 155 36));
}

/* ---------- فقرات وقوائم ---------- */
.prose-rtl p, .ck-content p { line-height: 2.05; margin: 0 0 1.05rem; }
.prose-rtl ul, .ck-content ul,
.prose-rtl ol, .ck-content ol { margin: 0 0 1.15rem; padding-inline-start: 1.5rem; line-height: 2; }
.prose-rtl ul, .ck-content ul { list-style: disc; }
.prose-rtl ol, .ck-content ol { list-style: decimal; }
.prose-rtl li, .ck-content li { margin-bottom: .4rem; }

/* ---------- روابط ---------- */
.prose-rtl a, .ck-content a {
    color: rgb(var(--c-primary, 13 104 48));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.prose-rtl a:hover, .ck-content a:hover { color: rgb(var(--c-secondary-d, 160 124 25)); }

/* ---------- اقتباس ---------- */
.prose-rtl blockquote, .ck-content blockquote {
    margin: 1.75rem 0;
    padding: 1.1rem 1.3rem;
    border-inline-start: 4px solid rgb(var(--c-secondary, 198 155 36));
    background: rgb(var(--c-primary, 13 104 48) / .05);
    border-radius: 0 14px 14px 0;
    font-size: 1.05rem;
    line-height: 2;
}
.prose-rtl blockquote p:last-child, .ck-content blockquote p:last-child { margin-bottom: 0; }

/* ---------- جداول ---------- */
.prose-rtl figure.table, .ck-content figure.table { margin: 1.75rem 0; overflow-x: auto; }
.prose-rtl table, .ck-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .97rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgb(0 0 0 / .06);
}
.prose-rtl th, .ck-content th {
    background: rgb(var(--c-primary, 13 104 48));
    color: #fff;
    font-weight: 700;
    text-align: start;
    padding: .7rem .85rem;
}
.prose-rtl td, .ck-content td {
    padding: .65rem .85rem;
    border-bottom: 1px solid rgb(0 0 0 / .07);
    vertical-align: top;
}
.prose-rtl tbody tr:nth-child(even), .ck-content tbody tr:nth-child(even) { background: rgb(0 0 0 / .022); }

/* ---------- صور ---------- */
.prose-rtl img, .ck-content img { max-width: 100%; height: auto; border-radius: 14px; }
.prose-rtl figure.image, .ck-content figure.image { margin: 1.75rem 0; }
.prose-rtl figure.image img, .ck-content figure.image img { display: block; width: 100%; }
.prose-rtl figcaption, .ck-content figcaption {
    margin-top: .55rem;
    font-size: .875rem;
    text-align: center;
    color: rgb(100 116 139);
}

/* ---------- متفرّقات ---------- */
.prose-rtl hr, .ck-content hr { margin: 2.25rem 0; border: 0; border-top: 1px solid rgb(0 0 0 / .1); }
.prose-rtl code, .ck-content code {
    background: rgb(0 0 0 / .05);
    padding: .12em .4em;
    border-radius: 6px;
    font-size: .92em;
}
.prose-rtl mark, .ck-content mark {
    background: rgb(var(--c-secondary, 198 155 36) / .28);
    padding: .05em .2em;
    border-radius: 4px;
}

/* =============================================================================
 * الوضع الداكن — الصفحة المنشورة فقط. صندوق المحرّر في لوحة التحكم يبقى فاتحًا
 * دائمًا (اللوحة نفسها فاتحة)، فلا مقابل له هنا.
 * ========================================================================== */
.dark .prose-rtl h2,
.dark .prose-rtl h3,
.dark .prose-rtl h4 { color: rgb(226 232 240); }
.dark .prose-rtl blockquote { background: rgb(255 255 255 / .04); }
.dark .prose-rtl td { border-bottom-color: rgb(255 255 255 / .08); }
.dark .prose-rtl tbody tr:nth-child(even) { background: rgb(255 255 255 / .025); }
.dark .prose-rtl hr { border-top-color: rgb(255 255 255 / .1); }
.dark .prose-rtl code { background: rgb(255 255 255 / .08); }
.dark .prose-rtl figcaption { color: rgb(148 163 184); }