/* =========================================================
   MAHEDI ALTAYS — SITE FOOTER
   =========================================================

   لماذا هذا الملف منفصل عن base.css

   التذييل يظهر في 21 صفحة، لكن ليست كلها تُحمّل base.css.
   صفحات الوثائق (documents وأخواتها) بُنيت على documents.css
   وحدها، فكان التذييل فيها يظهر نصًّا مكدّسًا بلا تنسيق —
   العلّة التي ظهرت في public-section.html.

   الحل ليس تحميل base.css كاملًا هناك (فيصطدم بتنسيق صفحات
   الوثائق)، بل عزل قواعد التذييل في ملف واحد تُحمّله كل صفحة
   فيها تذييل. مصدر واحد، فلا فرق بين صفحة وأخرى.

   التوكِنات تُعرَّف على .site-footer نفسه لا على :root، لأن
   الأسماء المختصرة (--bronze و --line …) تُعلَن في base.css.
   إعلانها هنا موضعيًّا يجعل الملف مكتفيًا بذاته فوق tokens.css
   وحده، دون أن يزاحم base.css حيث يكون محمّلًا.

   يحرس qa-navigation-security.js هذا العقد: كل صفحة فيها
   <footer class="site-footer"> يجب أن تُحمّل هذا الملف.
   ========================================================= */

.site-footer{
  --bg:var(--brand-bg);
  --bg-soft:var(--brand-bg-soft);
  --text:var(--brand-text);
  --soft:var(--brand-soft);
  --muted:var(--brand-muted);
  --bronze:var(--brand-bronze);
  --bronze-soft:var(--brand-bronze-soft);
  --line:var(--brand-line);
  --radius-sm:14px;
}

/* صفحات الوثائق لا تُحمّل base.css، فلا تعرف .container */
.site-footer > .container{
  width:min(var(--container, 1180px), 92%);
  margin-inline:auto;
  min-width:0;
}


.site-footer{
  margin-top:96px;
  padding:64px 0 34px;

  border-top:1px solid var(--line);
  background:var(--bg-soft);
}

.site-footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:44px;

  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}

.site-footer-brand .brand-mark{
  margin-bottom:16px;
}

.site-footer-brand strong{
  display:block;
  margin-bottom:6px;

  color:var(--text);
  font-size:15px;
  font-weight:800;
  letter-spacing:3px;
}

.site-footer-brand p{
  max-width:320px;
  margin:0 0 20px;

  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.site-footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.site-footer-social a{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  color:var(--soft);
  font-size:15px;

  border:1px solid var(--line);
  border-radius:12px;

  transition:
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}

.site-footer-social a:hover{
  color:var(--bronze);
  border-color:var(--bronze);
  background:var(--bronze-soft);
}

.site-footer-col strong{
  display:block;
  margin-bottom:16px;

  color:var(--text);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.site-footer-col a{
  padding:6px 0;

  display:block;

  color:var(--muted);
  font-size:14px;
  text-decoration:none;

  transition:color var(--motion-fast) var(--motion-ease);
}

.site-footer-col a:hover{ color:var(--bronze); }

/* مدخل المنطقة الخاصة — مميّز عمدًا ومنفصل عن روابط الموقع */
.site-footer-col a.is-private{
  margin-top:10px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;

  color:var(--bronze);
  font-weight:700;

  border:1px solid rgba(var(--brand-bronze-rgb), .34);
  border-radius:999px;
  background:rgba(var(--brand-bronze-rgb), .07);
}

.site-footer-col a.is-private:hover{
  color:var(--bg);
  background:var(--bronze);
  border-color:var(--bronze);
}

/*
شريط التنقّل السريع ثابت في أسفل يسار الشاشة، فيقع فوق سطر
الحقوق تمامًا في نهاية الصفحة. مساحة سفلية بقدر ارتفاعه
تُبقي النص مقروءًا دون تحريك الشريط عن موضعه المقصود.
*/
.site-footer-bottom{
  padding-top:30px;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;

  color:var(--muted);
  font-size:13px;
}

.site-footer-legal{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.site-footer-legal a{
  color:var(--muted);
  text-decoration:none;

  transition:color var(--motion-fast) var(--motion-ease);
}

.site-footer-legal a:hover{ color:var(--bronze); }

@media(max-width:900px){
  .site-footer-grid{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .site-footer-brand{ grid-column:1/-1; }
}

@media(max-width:560px){
  .site-footer-grid{ grid-template-columns:1fr; }
  .site-footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
}


/* =========================================================
   IDENTITY SUMMARY
   =========================================================
   بطاقة الهوية أسفل الصفحة الرئيسية: الاسم بكل صيغه،
   والمجال، والموقع الجغرافي.

   يكتبها الخادم في المصدر لا JavaScript، لأن أكثر أدوات
   الذكاء الاصطناعي لا تشغّل JavaScript — وما لا يكون في
   المصدر لا يُقرأ إطلاقًا.

   وهي مرئية عمدًا، لا مخفية. النص المخفي المحشو بالأسماء
   يعاقب عليه محرك البحث، والمكتوب بهدوء يقرؤه الإنسان
   والآلة معًا.
   ========================================================= */

.site-identity-summary{
  --line:var(--brand-line);
  --soft:var(--brand-soft);
  --muted:var(--brand-muted);
  --text:var(--brand-text);
  --bronze:var(--brand-bronze);

  width:min(var(--container, 1180px), 92%);
  margin:0 auto;
  padding:26px 0 40px;

  border-top:1px solid var(--line);
  text-align:start;
}

.site-identity-summary h2{
  margin:0 0 10px;
  color:var(--text);
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:.02em;
}

.site-identity-summary p{
  margin:0 0 6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

.site-identity-summary__names span{ color:var(--soft); }

.site-identity-summary__names i{
  margin:0 8px;
  color:var(--bronze);
  font-style:normal;
  opacity:.55;
}

@media(max-width:560px){
  .site-identity-summary{ padding:22px 0 32px; }
  .site-identity-summary__names i{ margin:0 5px; }
}