/* ══════════════════════════════════════════════════════════════
   شامونيه — طبقة التحسين الطباعي والبصري
   تُحمّل بعد أنماط _head.php فتتقدّم عليها عند التعارض.
   لا تعدّل _head.php — كل التحسينات هنا.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1 · الطباعة العربية
   الخط العربي متصل: التباعد بين الحروف يكسر
   مواضع الوصل. يُصفَّر في كل نص عربي، ويبقى
   في اللاتيني والأرقام حيث ينفع.
   ───────────────────────────────────────────── */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .lead,
[dir="rtl"] .fact .l,
[dir="rtl"] .fact .v.ar,
[dir="rtl"] .ct-b h4,
[dir="rtl"] .prod .cat,
[dir="rtl"] .cl-chip,
[dir="rtl"] .tl-c h4 { letter-spacing: 0 }

/* الأرقام والرموز اللاتينية تحتفظ بتباعدها */
[dir="rtl"] .eyebrow,
[dir="rtl"] .svc .n,
[dir="rtl"] .stat .n,
[dir="rtl"] .tl-y,
[dir="rtl"] .brand span span { letter-spacing: .13em }

/* أميري خط نسخي بصعود ونزول عميقين — يحتاج فسحة رأسية */
h1 { line-height: 1.34; text-wrap: balance }
h2 { line-height: 1.4;  text-wrap: balance }
[dir="rtl"] h1 { padding-block: .06em }

/* تجاول للنصوص: ارتفاع سطر أهدأ من 2 وأريح للقراءة الطويلة */
[dir="rtl"] .lead { line-height: 1.92 }
[dir="rtl"] p { text-wrap: pretty }

/* أرقام جدولية: تمنع رقص الأرقام في المؤشرات والأسعار */
.stat .n, .price, .fact .v, .tl-y, .qty, .svc .n {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ─────────────────────────────────────────────
   2 · التوقيع البصري — عنوان الواجهة
   شريط الإبراز يُرسم عند التحميل بدل الظهور
   دفعة واحدة. حركة واحدة مقصودة لا زخرفة موزّعة.
   ───────────────────────────────────────────── */
h1 em::after {
  transform-origin: right center;
  animation: sh-swash .82s cubic-bezier(.22,.8,.28,1) .34s both;
}
[dir="ltr"] h1 em::after { transform-origin: left center }

@keyframes sh-swash {
  from { transform: scaleX(0) }
  to   { transform: scaleX(1) }
}

/* في العربية يتوسّط الكلمة بدل أن يجلس على خط الأساس */
[dir="rtl"] h1 em::after {
  inset-inline: -8px;
  bottom: auto;
  top: 50%;
  height: .58em;
  border-radius: 4px;
  opacity: .58;
  animation: sh-swash-rtl .82s cubic-bezier(.22,.8,.28,1) .34s both;
}
@keyframes sh-swash-rtl {
  from { transform: translateY(-46%) scaleX(0) }
  to   { transform: translateY(-46%) scaleX(1) }
}

@media (prefers-reduced-motion: reduce) {
  h1 em::after { animation: none }
  [dir="rtl"] h1 em::after { animation: none; transform: translateY(-46%) }
}

/* ─────────────────────────────────────────────
   3 · إيقاع الأقسام
   حشوة أكبر قليلاً وفاصل شعري بين الأقسام
   المتجاورة من نفس اللون.
   ───────────────────────────────────────────── */
.sec { padding: 96px 0 }
.sec + .sec { padding-top: 76px }
.sec.alt + .sec.alt { border-top: 1px solid var(--line) }
.sec-h { margin-bottom: 54px }

@media (max-width: 760px) {
  .sec { padding: 62px 0 }
  .sec + .sec { padding-top: 48px }
  .sec-h { margin-bottom: 36px }
}

/* خط ذهبي قصير تحت عناوين الأقسام الوسطى */
.sec-h.mid h2 { position: relative; display: inline-block }
.sec-h.mid h2::after {
  content: "";
  position: absolute;
  bottom: -14px;
  inset-inline-start: 50%;
  width: 46px;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: .75;
}
.sec-h.mid p { margin-top: 26px }

/* ─────────────────────────────────────────────
   4 · البطاقات — سلّم ارتفاع موحّد
   ───────────────────────────────────────────── */
.div-card, .svc, .cred, .pj-c, .doc-c, .tl-c, .coop, .stat {
  border-radius: var(--r-l);
}
.div-card:hover, .svc:hover, .cred:hover, .pj-c:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* لمعة داخلية رفيعة تفصل البطاقة عن الخلفية في الوضع الليلي */
[data-theme="dark"] .div-card,
[data-theme="dark"] .svc,
[data-theme="dark"] .cred,
[data-theme="dark"] .doc-c,
[data-theme="dark"] .tl-c,
[data-theme="dark"] .stat,
[data-theme="dark"] .coop {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--sh-1);
}

/* ─────────────────────────────────────────────
   5 · الوضع الليلي — رفع التباين
   النص الثانوي كان باهتاً على الخلفية الداكنة.
   ───────────────────────────────────────────── */
[data-theme="dark"] { --mut: #9AA9BE }
[data-theme="dark"] .lead,
[data-theme="dark"] .sec-h p { color: #A5B3C6 }

/* ─────────────────────────────────────────────
   6 · تفاصيل
   ───────────────────────────────────────────── */
.cl-chip { font-weight: 700 }
.eyebrow { margin-bottom: 22px }
.btn { letter-spacing: 0 }
.crumb { margin-bottom: 18px }

/* الروابط داخل البطاقات لا ترث لون الرابط */
a.cred, a.dc-link, a.pil-link, a.dv-n { text-decoration: none }

/* تحسين حدّة الخط على الشاشات العادية */
body { text-rendering: optimizeLegibility }

/* الصور لا تتجاوز حاويتها أبداً */
img { max-width: 100% }