/* ═══════════════════════════════════════════════════════════════════════
   تذييل الصفحات العامّة — أنماطه الخاصّة
   ═══════════════════════════════════════════════════════════════════════

   🔴 **لماذا وُجد هذا الملف — عطلٌ مقيسٌ لا تحسينٌ نظريّ.**

   كان التذييل مكتوباً بأصناف **Tailwind** (٦٩ صنفاً) وأيقونات
   **Font Awesome** (٩)، وتعليقُ رأسه يقول «لا يفترض أي متغيّر من
   الصفحة — فيعمل في أي صفحة عامّة قائمة أو قادمة بلا تجهيز».
   **وكان ذلك غير صحيح:** هو يفترض إطاراً كاملاً ومكتبةَ أيقونات.

   وجردُ المستدعين الستّة قاله بالأرقام:

       index · services · about      ✅ Tailwind  ✅ FA
       benefits                      ✅ Tailwind  🔴 FA
       photographer                  🔴 Tailwind  🔴 FA   ← صفحةٌ يفتحها عميل
       admin/version                 🔴 Tailwind  🔴 FA

   🔴 **والأثر مقيسٌ بالمتصفّح لا بالنظر:** على `photographer.php` بجوال
      ٣٩٠ بكسل كان `scrollWidth = 1000`. والسبب أن `<img class="w-20">`
      بلا Tailwind تسقط إلى **عرضها الطبيعيّ** — وشعار جذلة ٣١٣٣ بكسل.
      فالصفحة كلُّها تنزاح، وصفحةُ فخرِ المصوّر تُفتح مكسورة عند العميل.

   🔑 **وهو بعينه نمط «صنفٌ مكتوبٌ وملفٌّ موجود ولا `<link>` يجمعهما»**
      الذي وقع في `broker/index.php` مع `.cempty`، وفي
      `admin/employees.css` الميت. **والصنف غير المعرَّف لا يرمي شيئاً.**

   ✅ **والعلاج: التذييل يحمل أنماطه معه.** فلا يعود يهمّ ما تحمّله
      الصفحة، ولا يُطالَب المستدعي القادم بإطارٍ لا يعرف أنه مطلوب.
      والأيقونات صارت **SVG مضمَّناً** لا خطّ أيقونات.

   ⚠️ **والقيم أدناه منقولةٌ من Tailwind حرفاً** (`gray-800` = #1f2937 ·
      `gray-900` = #111827 · `yellow-600` = #ca8a04 …) — فالصفحاتُ
      الأربع التي تحمّل Tailwind **لا يتغيّر شكلها**. محقَّقٌ بمقارنة
      لقطتين قبل/بعد لا بالظنّ.

   ⚠️ **وكلُّ شيءٍ مُنطاقٌ تحت `.jf`** — فلا قاعدةَ هنا تتسرّب إلى صفحةٍ
      تحمّل الورقة ثم تكسر ما فوق التذييل.
   ═══════════════════════════════════════════════════════════════════════ */

.jf{
  padding:2.5rem 0;
  border-top:1px solid #1f2937;
  background:#0a0a0a;
  font-family:inherit;
}
.jf-in{max-width:64rem;margin:0 auto;padding:0 1rem}

/* ═══ الصفوف الفاصلة ═══ */
.jf-band{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid #111827}
.jf-band-c{text-align:center}
.jf-lead{text-align:center;color:#4b5563;font-size:.75rem;line-height:1rem;margin:0 0 1rem}

/* ═══ البطاقة — المزايا والبوابات ═══ */
.jf-card{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;border-radius:.75rem;
  border:1px solid #1f2937;background:#111114;
  text-decoration:none;
  transition:border-color .2s;
  /* ⚠️ والحدّ الأدنى ٤٤ بكسل — والإصبع ليست مؤشّراً. */
  min-height:44px;
}
.jf-card--wide{padding:.75rem 1.25rem}
.jf-card:hover{border-color:#ca8a04}
/* ⚠️ **٠٫٨٧٥rem لا ١rem** — وهو مقيسٌ لا مذوق: أيقونةُ Font Awesome
   السابقة كان عرضها **تقدُّمَ المحرف** لا مربّعاً، فبطاقةُ البوابة كانت
   ١٦٥ بكسل. وبـ١rem صارت ١٨١ ⇒ **بطاقةٌ واحدة في الصفّ بدل اثنتين على
   جوال ٣٩٠**، وارتفاعُ التذييل يقفز ٧٩ بكسل. محقَّقٌ بالقياس قبل/بعد. */
.jf-card-ico{
  flex-shrink:0;width:.875rem;height:.875rem;color:#4b5563;
  transition:color .2s;display:block;
}
.jf-card:hover .jf-card-ico{color:#eab308}
.jf-card-txt{text-align:right}
.jf-card-t{
  display:block;color:#d1d5db;font-size:.875rem;line-height:1.25rem;font-weight:700;
  transition:color .2s;
}
.jf-card:hover .jf-card-t{color:#fff}
.jf-card-d{display:block;color:#4b5563;font-size:.75rem;line-height:1rem}

.jf-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}

/* ═══ الصفّ الأوسط ═══ */
.jf-main{
  display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;gap:2rem;
}
.jf-brand{text-align:center}
/* 🔴 وهذا السطر هو العطل نفسه: بلا `width` يرسم المتصفّح الشعار
   بعرضه الطبيعيّ (٣١٣٣ بكسل) فيتمدّد المستند تحته. */
.jf-brand img{width:5rem;height:auto;display:block;margin:0 auto .5rem}
.jf-brand p{color:#4b5563;font-size:.75rem;line-height:1rem;margin:0}

.jf-social{display:flex;gap:.75rem}
.jf-social a{
  width:2.5rem;height:2.5rem;border-radius:9999px;
  border:1px solid #1f2937;
  display:flex;align-items:center;justify-content:center;
  color:#6b7280;transition:border-color .2s,color .2s;
}
.jf-social a:hover{border-color:#ca8a04;color:#eab308}
.jf-social svg{width:1.05rem;height:1.05rem;display:block}

.jf-by{display:flex;align-items:center;gap:1rem}
.jf-by-a{display:inline-block;text-align:center;text-decoration:none}
.jf-by-a img{
  width:4rem;height:auto;display:block;margin:0 auto .25rem;
  opacity:.5;transition:opacity .2s;
}
.jf-by-a:hover img{opacity:1}
.jf-by-a p{color:#4b5563;font-size:.75rem;line-height:1rem;margin:0;transition:color .2s}
.jf-by-a:hover p{color:#9ca3af}
.jf-tech{height:4rem;width:auto;opacity:.6;transition:opacity .2s;display:block}
.jf-tech:hover{opacity:1}

/* ═══ الذيل ═══ */
.jf-end{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #111827}
.jf-end p{color:#374151;font-size:.75rem;line-height:1rem;margin:0}
.jf-end p + p{margin-top:.75rem}
.jf-end a{color:inherit;text-decoration:none}
.jf-end a:hover{text-decoration:underline}
.jf-sep{color:#1f2937}
.jf-vmp{color:var(--gold,#D4AF37)}

/* ═══ من ٧٦٨ فأوسع — مقابل `md:` في Tailwind حرفاً ═══ */
@media (min-width:768px){
  .jf-main{flex-direction:row}
  .jf-brand{text-align:right}
  .jf-brand img{margin-right:0;margin-left:0}
  .jf-by-a{text-align:left}
  .jf-by-a img{margin-right:0;margin-left:0}
}

/* ⚠️ ومن يُعطّل الحركة في نظامه يُحترم تفضيله — وتجاهلُه يؤذيه. */
@media (prefers-reduced-motion:reduce){
  .jf *,.jf *::before,.jf *::after{transition:none !important}
}