/* ══════════════════════════════════════════════════════════════════════
   sru-a11y.css — حلقاتُ التركيز على هوية جامعة سليمان الراجحي
   إدارة التحول الرقمي · الإصدار 1.0

   **تُحمَّل بعد sru-ui.css ولا تُغني عنها.** ولا تعرّف رمزاً واحداً:
   كلُّ لونٍ وزاويةٍ هنا من رموز الحزمة — كما في sru-forms.css.

   ── لماذا وُجدت ───────────────────────────────────────────────────────
   `sru-ui.css` فيها **صفر** قاعدة `:focus` أو `:focus-visible` أو
   `outline` (مقيس 2026-09-02، وأُعيد قياسُه 2026-09-30). فمن يتنقّل
   بلوحة المفاتيح **لا يرى أين هو** — في كلّ صفحةٍ تلبس الهوية.

   وليس هذا تحسيناً: الوصولُ الشامل بندٌ إلزاميّ في معايير الخدمات
   الرقمية، وفي جامعةٍ هو واجبٌ لا تفضّل.

   ── ولماذا ملفٌّ منفصلٌ لا تعديلٌ في الهوية ──────────────────────────
   `sru-ui.css` **مرآةٌ لا مصدر**: مستخرَجةٌ حرفياً من `sru.css` في
   مستودع `sru-website`، وتُعاد استخراجاً عند كلّ تحديث. فقاعدةٌ تُضاف
   هنا **تُمحى صامتةً** في أوّل مزامنة.

   **والعلاجُ الجذريّ في `sru-website` ثمّ يُزامَن** — وهذا الملفّ يسدّ
   الفجوة حتى يقع ذلك. انظر الدَّين ١٦ و٦٣ في `docs/DEBT.md`.

   ── `:focus-visible` لا `:focus` ─────────────────────────────────────
   عكسُ ما في `sru-forms.css` — وعن قصد. الحقلُ الذي يُكتب فيه يستحقّ
   الحلقة بالفأرة كما بلوحة المفاتيح. **أمّا الزرُّ والرابط فلا**: حلقةٌ
   تظهر عند كلّ نقرةِ فأرةٍ ضوضاءُ بصرية، والمتصفّحُ يميّز النيّة.

   ــ البديلُ في var(--r-btn, 2px): صفحاتٌ تعرّف --sru-purple ولا تعرّف
     --r-btn (البوابة واللوحة وصفحات الورشة). والبديلُ مقاسٌ لا لون،
     وقيمتُه قيمةُ الرمز في sru-ui.css فلا انحراف.

   الاستخدام:
     <link rel="stylesheet" href="sru-ui.css">
     <link rel="stylesheet" href="sru-a11y.css">
   ══════════════════════════════════════════════════════════════════════ */

/* ── الأساس: كلُّ ما يُركَّز عليه ─────────────────────────────────────
   قاعدةٌ واحدةٌ شاملة، ثمّ استثناءاتُ الخلفية الداكنة بعدها. ولو زاد
   عنصرٌ تفاعليٌّ غداً فهو مشمولٌ بها بلا تعديل. */
:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--sru-purple);
  outline-offset: 2px;
  border-radius: var(--r-btn, 2px);
}

/* ── الأزرار ──────────────────────────────────────────────────────────
   الحلقةُ خارج الزرّ لا داخله، فلا تُخفيها خلفيتُه. */
.btn:focus-visible {
  outline: 2px solid var(--sru-purple);
  outline-offset: 2px;
}

/* الزرُّ الأساسيّ بنفسجيٌّ على بنفسجيّ — فالحلقةُ داكنةٌ لتُرى عليه. */
.btn-primary:focus-visible,
.btn-blue:focus-visible {
  outline-color: var(--sru-purple-dark);
  outline-offset: 3px;
}

/* ── الخلفيات الداكنة: الهيدر بطبقتيه ────────────────────────────────
   حلقةٌ بنفسجيةٌ على بنفسجيٍّ داكنٍ لا تُرى. والحزمةُ نفسُها تستعمل
   الأبيض هنا (`.navbar{color:#fff}`)، فالحلقةُ تتبع النصّ لا تخالفه. */
.topbar :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.navbar :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.btn-white:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── البطاقةُ التي تُنقَر ─────────────────────────────────────────────
   بطاقةٌ داخل زرٍّ أو رابط: الحلقةُ على الحاوية لا على النصّ. */
:where(a, button) > .card:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--sru-purple);
  outline-offset: 3px;
}

/* ── تخطّي إلى المحتوى ────────────────────────────────────────────────
   رابطٌ مخفيٌّ يظهر عند أوّل Tab، فلا يُضطَرّ من يتنقّل بلوحة المفاتيح
   إلى المرور بالقائمة كلِّها في كلّ صفحة. يُضاف في أوّل <body>:
     <a class="sru-skip" href="#main">تخطّي إلى المحتوى</a>
   **ولا يعمل بلا هدفٍ بهذا المعرّف** — فإن لم يوجد، لا يُضَف الرابط. */
.sru-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sru-purple);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-btn, 2px);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.sru-skip:focus {
  inset-inline-start: 12px;
  top: 12px;
}

/* ── من أوقف الحركة في جهازه ─────────────────────────────────────────
   الحزمةُ تحترم ذلك في انتقالاتها، والحلقةُ لا تُستثنى. */
@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary, [tabindex]) { transition: none !important; }
}