/* ═══════════════════════════════════════════════════════════════
   نواة تنسيق الدروس — دار قطوف الرقمية
   ───────────────────────────────────────────────────────────────
   تُحمّل مرة واحدة لكل الكتاب بدل تكرارها داخل كل درس.

   لون الكتاب يُحقن من الدرس نفسه:
       <body style="--primary-color:#E67E22; --secondary-color:#D35400">

   المكوّنات الخاصة بدرس واحد تبقى في <style> داخل ذلك الدرس.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* قيم احتياطية — يستبدلها الدرس بلون كتابه */
    --primary-color: #3498DB;
    --secondary-color: #2980B9;
    --accent-color: #9B59B6;
    --success-color: #27AE60;
    --warning-color: #E74C3C;
    --transition: all .3s ease;
}

/* ── الوضعان الفاتح والداكن ── */
body.theme-light {
    --bg-color: #fff;
    --text-color: #2c3e50;
    --card-bg: #f8f9fa;
    --border-color: #e9ecef;
}
body.theme-dark {
    --bg-color: #1a1a1a;
    --text-color: #e8e8e8;
    --card-bg: #2d2d2d;
    --border-color: #404040;
}

/* ── الأساس ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Cairo', system-ui, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* ── شريط التنقل العلوي ── */
.lesson-nav {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.breadcrumb a { color: var(--primary-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── ترويسة الدرس ── */
.lesson-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 40px 0;
    text-align: center;
}
.lesson-header h1 { font-size: clamp(22px, 4vw, 32px); font-weight: 800; line-height: 1.4; }
.lesson-header .subtitle { opacity: .92; margin-top: 8px; font-size: 16px; }
.lesson-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    font-size: 14px;
    opacity: .95;
}

/* ── جسم الدرس ── */
.lesson-content { padding: 50px 0; }
.lesson-content h2 {
    color: var(--primary-color);
    margin: 40px 0 20px;
    font-size: 24px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lesson-content h3 { margin: 28px 0 12px; font-size: 19px; font-weight: 700; }
.lesson-content p { margin-bottom: 20px; font-size: 18px; }
.lesson-content ul,
.lesson-content ol { margin: 20px 30px 20px 0; }
.lesson-content li { margin-bottom: 10px; }
.lesson-content strong { font-weight: 700; }

/* ── صناديق التنبيه ── */
.highlight-box {
    background: var(--card-bg);
    border-right: 4px solid var(--primary-color);
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
}
.highlight-box.success { border-color: var(--success-color); }
.highlight-box.info    { border-color: var(--accent-color); }
.highlight-box.warning { border-color: var(--warning-color); }

/* ── الصور ── */
.lesson-image { text-align: center; margin: 30px 0; }
.lesson-image img {
    width: 100%;
    max-width: 700px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.lesson-image p { font-size: 14px; opacity: .7; margin-top: 10px; font-style: italic; }

/* إطار الصورة الناقصة (وضع التطوير) */
.image-placeholder {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(45deg,
        var(--card-bg), var(--card-bg) 12px,
        transparent 12px, transparent 24px);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    margin: 30px 0;
    text-align: center;
    padding: 20px;
}
.image-placeholder .placeholder-info { font-size: 13px; opacity: .75; }

/* ── الجداول ── */
.lesson-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 15.5px;
}
.lesson-content th,
.lesson-content td {
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    text-align: right;
}
.lesson-content th { background: var(--card-bg); font-weight: 700; }

/* ── أزرار التنقل ── */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    transition: var(--transition);
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--secondary-color); }
.btn-secondary {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover { border-color: var(--primary-color); }
.btn.disabled { opacity: .4; pointer-events: none; }

/* ── الجوال ── */
@media (max-width: 640px) {
    .lesson-content { padding: 32px 0; }
    .lesson-content p { font-size: 16.5px; }
    .lesson-meta { gap: 12px; font-size: 13px; }
    .nav-buttons { flex-direction: column-reverse; }
    .btn { justify-content: center; }
}

/* ── الطباعة ── */
@media print {
    .lesson-nav, .nav-buttons { display: none; }
    .lesson-header { background: none; color: #000; padding: 0 0 20px; }
}

/* ── ترويسة الفصل المبنيّة (بلا صور) ── */
.ch-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 26px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    aspect-ratio: 4 / 1;
    min-height: 130px;
}
.ch-hero svg { width: 100%; height: 100%; display: block; }
.ch-hero-word {
    position: absolute;
    inset-inline-start: 24px;
    bottom: 18px;
    font-size: clamp(17px, 2.6vw, 25px);
    font-weight: 800;
    color: var(--hc);
    letter-spacing: -.01em;
    text-shadow: 0 1px 0 var(--card-bg), 0 0 14px var(--card-bg);
}
@media (max-width: 640px) {
    .ch-hero { aspect-ratio: 3 / 1; }
}

/* ── احترام تفضيل تقليل الحركة ──────────────────────────────
   بعض القرّاء يصابون بدوار حقيقي من الحركة، وقد أعلنوا ذلك في
   إعدادات نظامهم. نُبقي الانتقالات محسوسة بأقصر قدر بدل إلغائها
   تمامًا، حتى لا تختفي الاستجابة التي تؤكّد للمستخدم أن فعله وصل. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
