/* ============================================================
   Attendly — legal.css : الوثائق القانونية

   وثيقة قانونية خاصها تتقرا، ماشي تبهر. ولذلك: عمود واحد ضيّق،
   سطر مريح، وبلا أي زخرفة كتشوّش على النص.

   كل الألوان من متغيّرات base.css — يعني الوضع الليلي كيخدم
   بلا ما نكتبو حتى سطر زائد.
   ============================================================ */

#lgMain {
  /* ⚠ الحشو السفلي كبير عمداً: الذيل ديال الصفحة القانونية
     رفيع، وبلا هاد الفراغ آخر قسم كيلزق بيه. */
  padding: 34px 22px 80px;
}

.lg-doc {
  /* 68ch ≈ 70 حرف فالسطر. أطول من هادشي والعين كتضيّع السطر
     منين ترجع للراس، وهادي وثيقة كتقرا كاملة ماشي كتمسح. */
  max-width: 68ch;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.85;
}

/* ---------- الرأس ---------- */
.lg-head {
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--line);
}
.lg-head h1 {
  margin: 0 0 12px;
  font-size: clamp(27px, 5vw, 38px);
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -.4px;
}
.lg-lead {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-soft);
}
.lg-date {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}

/* ---------- الفهرس ---------- */
.lg-toc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 38px;
}
.lg-toc h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.lg-toc ol {
  margin: 0;
  /* الترقيم موجود فنص العنوان نفسه («1 · …») — ترقيم ثاني
     كيعطي «1. 1 · …» */
  padding-inline-start: 0;
  list-style: none;
}
.lg-toc li { margin: 3px 0; }
.lg-toc a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
}
.lg-toc a:hover {
  color: var(--brand-600);
  border-bottom-color: currentColor;
}

/* ---------- الأقسام ---------- */
.lg-sec {
  /* scroll-margin: بلاها، النقر فالفهرس كيحط العنوان تحت
     الرأس اللاصق ومحجوب بيه */
  scroll-margin-top: 84px;
  margin-bottom: 34px;
}
.lg-sec h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 800;
}
.lg-sec p { margin: 0 0 13px; }
.lg-sec p:last-child { margin-bottom: 0; }
.lg-sec b { color: var(--text); font-weight: 700; }

.lg-doc code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .9em;
  /* dir=ltr: `localStorage` وسط جملة عربية كيتقلب بلاها */
  direction: ltr;
  display: inline-block;
}
.lg-doc a {
  color: var(--brand-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, .35);
}
.lg-doc a:hover { border-bottom-color: currentColor; }

/* ---------- القيمة الناقصة ----------
   ⚠ ماشي زخرفة: هادي هي اللي كتخلي مستحيل تنشر وثيقة فيها
     «⟨entity⟩» بلا ما تلاحظ. عمّر LEGAL_FILL فـi18n.legal.js
     وكتختافي وحدها. */
.lg-fill {
  background: var(--gold-100);
  color: var(--gold-700);
  border: 1px dashed var(--gold-500);
  border-radius: 5px;
  padding: 0 6px;
  font-size: .88em;
  font-weight: 700;
  direction: ltr;
  display: inline-block;
}
[data-theme="dark"] .lg-fill {
  background: rgba(245, 158, 11, .14);
  color: var(--gold-400);
}

/* ---------- الذيل ---------- */
.lg-foot {
  max-width: 68ch;
  margin: 0 auto;
  padding: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-mute);
}
.lg-foot a {
  color: var(--text-soft);
  text-decoration: none;
}
.lg-foot a:hover { color: var(--brand-600); }
.lg-foot span { margin-inline-start: auto; }

@media (max-width: 560px) {
  #lgMain { padding: 24px 16px 60px; }
  .lg-doc { font-size: 15px; }
  .lg-toc { padding: 16px 18px; }
  .lg-foot span { margin-inline-start: 0; }
}

/* الطباعة: مدير كيطبع الوثيقة باش يوقّعها ولا يضمّها للملف */
@media print {
  .lp-header, .lg-toc, .lg-foot { display: none; }
  #lgMain { padding: 0; }
  .lg-doc { max-width: none; color: #000; font-size: 11pt; }
  .lg-sec { page-break-inside: avoid; }
  .lg-doc a { color: #000; border: 0; }
  .lg-fill { border: 1px solid #000; background: none; color: #000; }
}

/* ⚠ الهواتف الضيّقة جداً (320px): رأس الصفحة القانونية غير رأس
   صفحة الهبوط — فيه زرّ «العودة إلى الرئيسية» بنصّه كاملاً، ولا
   يُخفى تحت 900px كما تُخفى أزرار الهبوط. فكان مجموع الشعار +
   الأزرار 322px داخل شاشة 320px، فيظهر شريط تمرير أفقيّ على
   الصفحة كلّها من أجل بكسلين.

   ⚠ ولا يُحلّ بـ`overflow-x:hidden`: ذلك يخفي الشريط ويترك الزرّ
     مقصوصاً بلا وسيلة للوصول إليه. الحلّ تضييق الحشو حتى يدخل. */
@media (max-width: 380px) {
  .lp-bar { padding: 11px 12px; gap: 8px; }
  .lp-actions { gap: 5px; }
  .lp-actions .btn-sm { padding: 8px 10px; font-size: 12.5px; }
}