/* ==========================================================================
   فُصْحَى — طبقة الصفحات الداخلية للطالب (fusha-app.css)
   تُحمَّل بعد style.css في كل صفحة داخلية. غير مطبَّقة في index.html.
   - شريط علوي داكن زجاجي (ink) فوق صفحات فاتحة (paper / parchment)
   - مكوّنات مشتركة بادئتها fa- (لا تتعارض مع أصناف fusha-* في style.css)
   - ارتفاع أسطر يتّسع للتشكيل
   الأصل immutable (قاعدة 5): أي تعديل يرفع ?v= في كل الصفحات.
   ========================================================================== */

:root {
  --fa-ink: #0B1411;
  --fa-ink-deep: #070E0B;
  --fa-ink-soft: #0D1D18;
  --fa-surface: #13241F;
  --fa-surface-high: #1E3730;
  --fa-line: #2F5246;
  --fa-emerald: #1B4D3E;
  --fa-emerald-hover: #236350;
  --fa-gold: #EAA72E;
  --fa-gold-soft: #F2C25E;
  --fa-gold-deep: #8A5E10;
  --fa-gold-tint: #FBF1DA;
  --fa-paper: #FBFBFA;
  --fa-parchment: #F4EFE2;
  --fa-khaki: #D9CFB6;
  --fa-cream: #E8E4DA;
  --fa-text-lines: 1.9;
}

/* ───────── الشريط العلوي: زجاج داكن ───────── */
#navbar {
  background: rgba(11, 20, 17, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(234, 167, 46, 0.22);
  border-radius: 16px;
  box-shadow: 0 0 22px rgba(234, 167, 46, 0.10), 0 10px 30px rgba(7, 14, 11, 0.35);
}
@media (min-width: 640px) { #navbar { border-radius: 18px; } }

/* اسم الأستاذ بجوار الشعار */
#navbar a[href="/"] > div span:first-child { color: var(--fa-cream); }
#navbar a[href="/"] > div span:last-child { color: var(--fa-gold-soft); }
#navbar a[href="/"] > div { border-color: rgba(232, 228, 218, 0.18); }

/* روابط الشريط */
#navbar-links > a,
#navbar-links #navMoreBtn,
.fusha-navlink {
  color: rgba(232, 228, 218, 0.82);
  background: transparent;
  border-radius: 10px;
  position: relative;
}
#navbar-links > a:hover,
#navbar-links #navMoreBtn:hover,
.fusha-navlink:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
#navbar-links svg, #navbar-links i { color: var(--fa-gold); }
#navbar-links > a.is-active,
#navbar-links > a[class*="bg-[#1B4D3E]"],
#navbar-links > a[class*="bg-primary"],
#navbar-links #navMoreBtn[class*="bg-[#1B4D3E]"] {
  color: var(--fa-gold-soft);
  background: rgba(234, 167, 46, 0.14);
  box-shadow: inset 0 -2px 0 var(--fa-gold);
}
#navbar-links > a.is-active svg,
#navbar-links > a[class*="bg-[#1B4D3E]"] svg,
#navbar-links > a[class*="bg-primary"] svg,
#navbar-links #navMoreBtn[class*="bg-[#1B4D3E]"] svg { color: var(--fa-gold-soft); }
#navbar-links #navMoreChevron { color: rgba(232, 228, 218, 0.6); }

/* أزرار الحساب (الدخول/الأفاتار/المحفظة) على الداكن */
#navbar #navWalletPill,
#navbar #navUserMenuBtn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 228, 218, 0.18);
  color: var(--fa-cream);
  box-shadow: none;
}
#navbar #navWalletPill:hover,
#navbar #navUserMenuBtn:hover { background: rgba(255, 255, 255, 0.12); }
#navbar #navWalletBalance,
#navbar #navUserMenuBtn > span { color: var(--fa-cream); }
#navbar #navWalletPill svg { color: var(--fa-gold); }
#navbar #navUserMenuBtn > svg { color: rgba(232, 228, 218, 0.7); }
#navbar #navbar-auth-actions a[href*="login"]:not([href*="register"]) {
  background: transparent;
  border: 1px solid rgba(232, 228, 218, 0.3);
  color: var(--fa-cream);
}
#navbar #navbar-auth-actions a[href*="login"]:not([href*="register"]) svg { color: var(--fa-gold); }
#navbar #navbar-auth-actions a[href*="login"]:not([href*="register"]):hover { background: rgba(255, 255, 255, 0.08); }

/* تبويبات الجوال داخل الشريط */
.fa-mtab { color: rgba(232, 228, 218, 0.72); }
.fa-mtab svg { color: var(--fa-gold); opacity: .85; }
.fa-mtab.is-on { color: var(--fa-gold-soft); background: rgba(234, 167, 46, 0.14); }
.fa-mtab.is-on svg { color: var(--fa-gold-soft); opacity: 1; }
.fa-mtab-more { background: rgba(234, 167, 46, 0.16); color: var(--fa-gold-soft); }
.fa-mtab-more svg { color: var(--fa-gold-soft); }

/* ───────── القوائم المنسدلة («المزيد» · الحساب · قائمة الجوال): سطح فاتح بنص غابي ─────────
 * السبب الجذري لاختفاء النص كان في nav.js (initNavbarActiveLinks كانت تطبّق className الشريط الداكن
 * على كل <a> داخل #navbar-links بما فيها عناصر القائمة) — صُلّح هناك، وهذه القواعد تضمن ألا يتسرّب
 * لون الشريط الداكن (كريمي/ذهبي) لأي عنصر داخل القوائم في أي حالة. كل نص ≥ 4.5:1 على الأبيض/البارتشمنت. */
#navMoreMenu, #navUserMenu, #navMoreMobileMenu {
  background: #fff;
  color: #142B24;
  border: 1px solid rgba(234, 167, 46, 0.38);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(11, 20, 17, 0.18), 0 2px 6px rgba(11, 20, 17, 0.08);
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(a, button) {
  color: #142B24;
  font-weight: 600;
  background: transparent;
  border-radius: 10px;
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(a, button):hover {
  background: #F4EFE2;
  color: #142B24;
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(a, button):focus-visible {
  outline: 2px solid #1B4D3E;
  outline-offset: -2px;
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(a, button) :is(svg, i) { color: #1B4D3E; }
/* الصفحة الحالية: شريط ذهبي جانبي (يمين في RTL) + خلفية بارتشمنت */
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) a.is-current {
  background: #F4EFE2;
  box-shadow: inset -3px 0 0 #EAA72E;
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(a, button):is([disabled], [aria-disabled="true"]) {
  color: #5F7A61;
  cursor: not-allowed;
}
/* عناوين الأقسام («حسابي» · «التنقل» · «مزايا الطالب») */
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) p.font-extrabold {
  color: #5F7A61;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
/* بطاقة المستخدم أعلى القائمة */
:is(#navMoreMenu, #navMoreMobileMenu) div.bg-stone-50 { background: #F4EFE2; }
:is(#navMoreMenu, #navMoreMobileMenu) div.bg-stone-50 > p:first-child { color: #142B24; font-weight: 700; }
:is(#navMoreMenu, #navMoreMobileMenu) div.bg-stone-50 > p:last-child { color: #4A6450; font-size: 12px; font-weight: 600; }
#navUserMenu p { color: #5F7A61; }
#navUserMenu p:first-child, #navUserMenu .overflow-hidden > p:first-child { color: #142B24; font-weight: 700; }
#navUserMenu span[class*="text-emerald-600"] { color: #14532D; }
#navUserMenu span[class*="text-accent"], #navUserMenu span[class*="text-accent"] :is(i, svg) { color: #7A560A; }
/* تسجيل الخروج: أحمر واضح ومفصول بخط خافت */
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(#navLogoutBtn, #navMoreLogoutBtn, #navMobileLogoutBtn),
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(#navLogoutBtn, #navMoreLogoutBtn, #navMobileLogoutBtn) :is(svg, i) {
  color: #B42318;
}
:is(#navMoreMenu, #navUserMenu, #navMoreMobileMenu) :is(#navLogoutBtn, #navMoreLogoutBtn, #navMobileLogoutBtn):hover {
  background: rgba(180, 35, 24, 0.08);
  color: #B42318;
}
#navMoreMenu #navMoreLogoutBtn, #navMoreMobileMenu #navMobileLogoutBtn {
  margin-top: 4px;
  border-top: 1px solid rgba(20, 43, 36, 0.10);
  border-radius: 0 0 10px 10px;
}

/* شريط الأخبار داخل الشريط */
#navbar #newsTicker { border-color: rgba(232, 228, 218, 0.12); }
#navbar #newsTicker > div > div:first-child { background: rgba(255, 255, 255, 0.04); color: var(--fa-gold-soft); border-color: rgba(232, 228, 218, 0.12); }
#navbar #newsTicker .news-ticker-item span.text-\[\#1B4D3E\] { color: var(--fa-gold-soft); }
#navbar #newsTicker .news-ticker-item span.text-slate-500 { color: rgba(232, 228, 218, 0.7); }

/* ───────── مكوّنات مشتركة fa-* ───────── */

/* ملصق كريمي (chip) */
.fa-label {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--fa-parchment); color: var(--fa-ink-soft);
  border: 1px solid var(--fa-khaki); border-radius: 6px;
  padding: .2rem .65rem; font-weight: 800; font-size: .75rem; line-height: 1.6;
}
.fa-label--gold { background: var(--fa-gold-tint); border-color: #E6C57E; color: #5E3F08; }
.fa-label--ink { background: rgba(232, 228, 218, 0.12); border-color: rgba(232, 228, 218, 0.25); color: var(--fa-cream); }

/* فاصل نجمة بين خطين */
.fa-divider { display: flex; align-items: center; gap: .75rem; color: var(--fa-gold-deep); margin: 1rem 0; }
.fa-divider::before, .fa-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--fa-khaki)); }
.fa-divider::after { background: linear-gradient(to right, transparent, var(--fa-khaki)); }
.fa-divider > span, .fa-divider::marker { font-size: .9rem; }
.fa-divider--ink { color: var(--fa-gold); }
.fa-divider--ink::before { background: linear-gradient(to left, transparent, rgba(234, 167, 46, .45)); }
.fa-divider--ink::after { background: linear-gradient(to right, transparent, rgba(234, 167, 46, .45)); }

/* «بطاقة مخطوطة» للشاهد/المثال المشكول */
.fa-scribe {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: 1.25rem; line-height: 2.1;
  background: var(--fa-parchment);
  border: 1px solid var(--fa-khaki);
  border-inline-start: 4px solid var(--fa-gold);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  color: var(--fa-ink);
}
.fa-scribe--sm { font-size: 1.1rem; line-height: 2; padding: .6rem .9rem; }

/* بيت شعر / اقتباس */
.fa-verse { font-family: 'Amiri', serif; line-height: 2.1; color: var(--fa-emerald); }

/* قوس المحراب لصورة أو بطاقة */
.fa-arch { border-radius: 999px 999px 14px 14px / 140px 140px 14px 14px; overflow: hidden; }

/* نقش النجمة الثُمانية بشفافية خفيفة (خلفية فقط) */
.fa-pattern {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='none' stroke='%23EAA72E' stroke-opacity='0.5' stroke-width='1'><rect x='14' y='14' width='36' height='36'/><rect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/></g></svg>");
  background-size: 64px 64px;
}

/* عنوان صفحة بلمسة موتيف خفيفة: ملصق + فاصل */
.fa-pagehead { display: flex; flex-direction: column; gap: .35rem; }
.fa-pagehead .fa-label { align-self: flex-start; }

/* ───────── نص عربي يتّسع للتشكيل ───────── */
.fa-text, .fa-question, .fa-option {
  line-height: var(--fa-text-lines);
}
.fa-question { font-feature-settings: "kern", "liga", "mark", "mkmk"; }
.fa-question .katex, .fa-option .katex { line-height: 1.4; }
.fa-amiri { font-family: 'Amiri', 'Cairo', serif; }
/* نصوص الأسئلة والردود المرسومة بـ richText */
.math-box { line-height: 1.95; }

/* ───────── تباين ثابت: أيقونة واتساب العائمة ───────── */
#fushaWhatsAppFloat { background: #0E7C5A; color: #fff; }
#fushaWhatsAppFloat:hover { background: #0A6046; }


/* خلفية صفحة الكورسات (فاتحة): صور فُصْحَى الجديدة تحل محل صور style.css الموروثة
 * (body. لرفع الخصوصية: style.css تُدمج وتُحمَّل بعد هذا الملف في النسخة المبنية) */
body.courses-bg::before {
  background-image: url("/assets/courses-bg-mobile-v2.webp");
  background-position: center top;
}
@media (min-width: 640px) {
  body.courses-bg::before {
    background-image: url("/assets/courses-bg-v2.webp");
    background-position: center bottom;
  }
}

/* ── العربية: الهمزة والتشكيل فوق الحروف لا تُقصّ ──
   truncate يقصّ رأسياً أيضاً (overflow:hidden) فتُقطع همزة «أ» وحركات التشكيل في العناوين.
   نقصّ أفقياً فقط (clip لا ينشئ قصّاً رأسياً)، ونعطي عناوين Alexandria سطراً أعلى. */
html .truncate { overflow-x: clip; overflow-y: visible; }
html :is(h1, h2, h3).font-alexandria { line-height: 1.6; }