/* ==========================================================================
   فواتيري — صفحة الأسئلة الشائعة
   لا يُعرَّف هنا أي لون أو مسافة: كل شيء من tokens.css.
   الأكورديون نفسه يأتي من sections.css (.faq__*) فلا يُكرَّر هنا — هذا الملف
   لا يضيف إلا ما تحتاجه الصفحة المستقلة: مجموعات الأسئلة وتنسيق الأجوبة.
   يُحمَّل على هذه الصفحة وحدها.
   يعتمد على legal.css لترويسة الصفحة والفهرس (نفس لغة الصفحات الداخلية).
   ========================================================================== */

/* ---------- مجموعة أسئلة ---------- */
.faq-group + .faq-group { margin-block-start: var(--s-8); }

/* العنوان بنفس هيئة عناوين البنود في الصفحات القانونية: الصفحات الداخلية
   الثلاث تُقرأ كعائلة واحدة */
.faq-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-block-end: var(--s-3);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--gold-mist);
  scroll-margin-block-start: var(--s-9);   /* الهيدر ثابت — لا يبتلع العنوان */
}

.faq-group__num {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.faq-group__lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  margin-block-end: var(--s-4);
}

.faq-group .faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* الرابط المباشر لسؤال بعينه (‎faq.html#q-...‎) يفتحه ويقفز إليه:
   الهيدر الثابت لا يبتلع السؤال */
.faq-group .faq__item { scroll-margin-block-start: var(--s-9); }

/* ---------- الأجوبة ----------
   sections.css يحشو الفقرة الواحدة من أسفلها؛ هنا الأجوبة قد تكون فقرتين
   أو قائمة، فتنتقل الحشوة إلى الغلاف لتبقى المسافة واحدة مهما طال الجواب */
.faq-group .faq__a-inner { padding-block-end: var(--s-5); }
.faq-group .faq__a p { padding-block-end: 0; }
.faq-group .faq__a p + p { margin-block-start: var(--s-3); }

.faq-group .faq__a a {
  color: var(--gold-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-soft);
  transition: color var(--t-fast) var(--ease);
}

.faq-group .faq__a a:hover { color: var(--gold-dark); }

.faq-group .faq__a ul {
  list-style: none;
  margin-block: var(--s-3) 0;
  padding-inline-start: 0;
  display: grid;
  gap: var(--s-2);
}

.faq-group .faq__a li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-inline-size: 64ch;
}

/* نقطة ذهبية بدل النقطة الافتراضية — نفس لغة البصر في بقية الموقع */
.faq-group .faq__a li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--lh-body) * 0.5em - 3px);
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
}

/* ==========================================================================
   ذيل الصفحة — سؤالك ليس هنا؟
   ========================================================================== */
.faq-help {
  margin-block-start: var(--s-9);
  padding: var(--s-6);
  background: var(--gold-wash);
  border: 1px solid var(--gold-mist);
  border-radius: var(--r-lg);
}

.faq-help__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-block-end: var(--s-3);
}

.faq-help__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-block-end: var(--s-5);
  max-inline-size: 60ch;
}

.faq-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ==========================================================================
   الشاشات الصغيرة
   ========================================================================== */
@media (max-width: 599px) {
  .faq-help { padding: var(--s-5); }
  .faq-help__links .btn { inline-size: 100%; }
}

/* ==========================================================================
   الطباعة — الأجوبة كلها مفتوحة على الورق
   ========================================================================== */
@media print {
  .faq-group .faq__a {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .faq-group .faq__sign,
  .faq-help { display: none; }
}