/* ════════════════════════════════════════════════════════════════════════════
   theme.css — تنسيق واجهة الطالب (الألوان، الخطوط، الأزرار، البطاقات، النوافذ)
   ────────────────────────────────────────────────────────────────────────────
   خريطة التعديل السريعة: ابحث عن العنوان المكتوب هنا
     ١) الألوان ............ غيّر الهوية البصرية كلها (يتبعها Tailwind عبر js/tailwind-config.js)
     ٢) الخطوط ............. عناوين ونصوص وخط عربي مخصص
     ٣) الهيدر ............. .site-header  (شريط الأعلى: لونه، ظله، ارتفاعه)
     ٤) الأزرار ............ .btn  .btn-primary  .btn-outline  .btn-olive  .btn-light
     ٥) بطاقات الدورات ..... .course-card  و  .lesson-row  (المكتبة في الصفحة الرئيسية)
     ٦) مشغل الدروس ........ .side-item (قائمة الدروس) و .item-panel (المهام والاختبارات)
     ٧) النوافذ والشهادة ... .modal-card  .cert-*
   هيكل الصفحة (الأقسام والنصوص) في index.html، وبيانات الدورات والنصوص التسويقية في js/site-config.js.
   تفاصيل أكثر: docs/DESIGN.md
   ════════════════════════════════════════════════════════════════════════════ */


/* ═════════ ١) الألوان ═════════
   كل لون ثلاثة أرقام RGB مفصولة بمسافات (وليس #hex) لتعمل معها الشفافية مثل bg-clay/20.
   لتحويل لون من hex إلى RGB: ابحث «hex to rgb». مثال: #A05329 ← 160 83 41 */
:root {
  --clay-rgb: 160 83 41;          /* #A05329  الأساسي: الهيدر والأزرار والعناوين */
  --clay-dark-rgb: 138 69 33;     /* #8A4521  الأساسي وقت المرور بالمؤشر */
  --deep-rgb: 11 76 98;           /* #0B4C62  أزرق داكن للّمسات الصغرى */
  --olive-rgb: 105 112 71;        /* #697047  الشارات والتحديد */
  --olive-dark-rgb: 87 92 58;     /* #575C3A  الأخضر عند المرور بالمؤشر */
  --moss-rgb: 79 85 53;           /* #4F5535  أخضر داكن لبطاقة دورة */
  --cream-rgb: 247 240 222;       /* #F7F0DE  خلفية الصفحة */
  --fired-rgb: 110 52 20;         /* #6E3414  بني محروق: الفيديو والنوافذ */
  --fired-dark-rgb: 74 34 13;     /* #4A220D  نهاية تدرّج الفيديو */
  --sand-rgb: 237 226 196;        /* #EDE2C4  العناصر الثانوية */
  --soft-rgb: 74 61 48;           /* #4A3D30  لون الفقرات */
  --danger-rgb: 155 44 26;        /* #9B2C1A  الأخطاء */
  --ink-rgb: 42 33 24;            /* #2A2118  النص الأساسي */

  /* أسماء مختصرة تُستعمل في هذا الملف وفي الشهادة (js/certificate.js يقرؤها) */
  --clay: rgb(var(--clay-rgb));
  --olive: rgb(var(--olive-rgb));
  --cream: rgb(var(--cream-rgb));
  --fired: rgb(var(--fired-rgb));
  --sand: rgb(var(--sand-rgb));
  --ink: rgb(var(--ink-rgb));

  /* الأشكال */
  --radius-card: 1rem;                       /* زوايا العناصر المدوّرة العامة */
  --radius-pill: 9999px;                     /* الأزرار */
  --shadow-card: 0 24px 40px -18px rgb(var(--fired-rgb) / .4);   /* ظل البطاقة عند المرور */
  --header-height: 4rem;                     /* ارتفاع الهيدر */
}


/* ═════════ ٢) الخطوط ═════════
   ترتيب الأولوية: الخط اللاتيني Acumin (للأحرف الإنجليزية فقط) ← خط عام الحرف اليدوية للعربي ← Readex Pro (من Google Fonts).
   لتغيير الخط العربي: ضع ملف الخط في المجلد fonts/ وعدّل اسمه في url() أدناه (أو غيّر اسم العائلة في --font-body). */
@font-face {
  font-family: 'Handicrafts';
  src: local('The Year of Handicrafts'),
       url('../fonts/year-of-handicrafts.woff2') format('woff2'),
       url('../fonts/year-of-handicrafts.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Variable Concept';
  src: local('Acumin Variable Concept'),
       url('../fonts/AcuminVariableConcept.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F;     /* لاتيني فقط */
}
:root { --font-body: 'Acumin Variable Concept', 'Handicrafts', 'Readex Pro', system-ui, sans-serif; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
section[id] { scroll-margin-top: 5rem; }          /* لا يخفي الهيدر عنوان القسم عند القفز إليه */
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, header :focus-visible, .course-card :focus-visible { outline-color: var(--cream); }


/* ═════════ ٣) الهيدر ═════════
   هيكله (الشعار، الروابط، زر الدخول) في index.html داخل  <header class="site-header">.
   الشعار: ملف img/logo-light.png (استبدله بشعار بنفس الاسم أو غيّر المسار في index.html). */
.site-header {
  background: var(--clay);                  /* لون الهيدر */
  color: var(--cream);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15);
}
.site-header-inner { min-height: var(--header-height); }   /* ارتفاع الشريط: غيّر --header-height في القسم ١ */
.site-header nav a:hover { opacity: .7; }


/* ═════════ ٤) الأزرار ═════════
   استعملها هكذا:  <button class="btn btn-primary">  (الحجم الافتراضي)  أو أضف btn-sm لزر أصغر. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius-pill);
  padding: .65rem 1.5rem; font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-sm { padding: .4rem 1rem; font-size: .875rem; }
.btn-primary { background: rgb(var(--clay-rgb)); color: #fff; }
.btn-primary:hover { background: rgb(var(--clay-dark-rgb)); }
.btn-olive { background: rgb(var(--olive-rgb)); color: #fff; }
.btn-olive:hover { background: rgb(var(--olive-dark-rgb)); }
.btn-outline { border: 2px solid rgb(var(--clay-rgb)); color: rgb(var(--clay-rgb)); }
.btn-outline:hover { background: rgb(var(--clay-rgb)); color: var(--cream); }
.btn-light { background: var(--cream); color: rgb(var(--clay-rgb)); }          /* زر فاتح على الهيدر */
.btn-light:hover { background: #fff; }


/* ═════════ ٥) بطاقات الدورات (المكتبة) ═════════
   لون كل بطاقة وشكل المزهرية من COURSES في js/site-config.js (الحقلان bg و shape).
   قالب HTML البطاقة: دالة renderLibrary() في js/ui.js. */
.course-card { transition: transform .25s ease, box-shadow .25s ease; }
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }

/* صف درس داخل البطاقة */
.lesson-row {
  width: 100%; display: flex; align-items: center; gap: .625rem; text-align: start;
  padding: .625rem .75rem; border-radius: .75rem; font-size: 15px;
  background: rgb(255 255 255 / .1); transition: background-color .2s;
}
.lesson-row:hover { background: rgb(255 255 255 / .2); }

/* شارة الحالة (مفعّلة / غير مفعّلة) */
.badge-on  { background: var(--cream); color: var(--olive); }
.badge-off { background: rgb(0 0 0 / .25); color: var(--cream); }

/* معرض أعمال المشتركين: حركة بسيطة عند المرور */
.art-tile svg { transition: transform .4s ease; }
.art-tile:hover svg { transform: scale(1.05) rotate(-1.5deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 70s linear infinite; }       /* الدوائر الدوّارة حول الفيديو التعريفي */


/* ═════════ ٦) مشغل الدروس ═════════
   القالب: دالتا renderSidebar() و renderItemPanel() في js/player.js. */

/* عنصر في قائمة الدروس الجانبية. الحالة الحالية: .is-current، المنجز: .is-done */
.side-item {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: start;
  padding: .625rem .75rem; border-radius: .75rem; font-size: 15px; color: rgb(var(--soft-rgb));
  transition: background-color .2s;
}
.side-item:hover { background: var(--sand); }
.side-item.is-current { background: var(--olive); color: #fff; }
.side-item .dot { display: flex; height: 1.5rem; width: 1.5rem; flex: none; align-items: center; justify-content: center; border-radius: 9999px; background: var(--sand); color: var(--olive); }
.side-item.is-done .dot { background: var(--olive); color: #fff; }
.side-item.is-current .dot { background: rgb(255 255 255 / .25); color: #fff; }
.side-item .meta { font-size: .75rem; opacity: .75; }

/* لوحة المهمة / الاختبار / التسليم / القراءة */
.item-panel { border-radius: var(--radius-card); background: rgb(255 255 255 / .7); border: 1px solid rgb(var(--clay-rgb) / .2); padding: 1.25rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
@media (min-width: 640px) { .item-panel { padding: 1.75rem; } }
.item-panel .note { margin-top: 1rem; border-radius: .75rem; background: var(--sand); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; color: var(--olive); }
.item-panel .note.bad { color: rgb(var(--danger-rgb)); }
.item-panel img.pic { margin-top: 1rem; width: 100%; max-height: 70vh; object-fit: contain; border-radius: .75rem; background: var(--sand); }
.choice { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 1rem; border-radius: .75rem; border: 2px solid rgb(var(--clay-rgb) / .2); background: #fff; cursor: pointer; }
.choice:has(input:checked) { border-color: rgb(var(--clay-rgb)); }
.field { width: 100%; border-radius: .75rem; border: 2px solid rgb(var(--clay-rgb) / .3); background: #fff; padding: .75rem 1rem; font-size: 1.125rem; }
.field:focus { border-color: rgb(var(--clay-rgb)); outline: none; }


/* ═════════ ٧) النوافذ المنبثقة والشهادة ═════════ */
.modal-backdrop { background: rgb(var(--fired-rgb) / .7); backdrop-filter: blur(4px); }
.modal-card { background: var(--cream); border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .4); }

/* معاينة الشهادة. شكل الشهادة نفسها (الإطار والخطوط والألوان) يُرسم في js/certificate.js ويقرأ ألوانه من المتغيرات أعلاه. */
.cert-preview { width: 100%; border-radius: .5rem; border: 1px solid rgb(var(--clay-rgb) / .3); box-shadow: 0 4px 12px rgb(0 0 0 / .12); background: #fff; }


/* ═════════ احترام «تقليل الحركة» في إعدادات الجهاز ═════════ */
@media (prefers-reduced-motion: reduce) {
  .spin-slow { animation: none; }
  html { scroll-behavior: auto; }
  .course-card, .art-tile svg { transition: none; }
  .course-card:hover { transform: none; }
}