/* =============================================================================
   uom-a11y.css — تصحيحات وصولية لا تمسّ التصميم
   =============================================================================
   **العيب الذي استدعاه:** قِيس في المحاكاة أن **عشرة** عناصر قابلة للتبويب
   في الصفحة الرئيسية وصفحة الكلية لا تُظهر أي مؤشّر تركيز:

       outline: rgb(255,255,255) none 0px   ·   box-shadow: none

   أي أن من يتنقّل بلوحة المفاتيح لا يعرف أين هو. القالب التجاري يُلغي
   `outline` عمداً لأسباب جمالية، وهو من أكثر أخطاء الوصولية شيوعاً وأشدّها
   أثراً: لا يظهر لمستخدم الفأرة إطلاقاً، ويُعطّل التصفّح بالكامل لغيره.

   المعالجة `:focus-visible` لا `:focus`: الأوّل لا يظهر عند النقر بالفأرة
   فلا يُزعج التصميم، ويظهر عند التنقّل بلوحة المفاتيح حيث يلزم. وتُضاف
   نسخة احتياطية للمتصفّحات التي لا تدعمه.

   اللون `#f69c27` من لوحة القالب نفسها (‏لون التمييز في رسائل النظام)،
   وتباينه كافٍ على الأزرق الداكن وعلى الأبيض معاً.
   ============================================================================= */

:focus-visible {
  outline: 3px solid #f69c27;
  outline-offset: 2px;
  /* يعلو فوق العناصر المجاورة فلا يُقصّ الإطار */
  position: relative;
  z-index: 1;
}

/* **`box-shadow` مع `outline` لا `outline` وحده.**
   القالب و‏Bootstrap 3 يتنازعان على `outline` بقواعد `!important` متعدّدة،
   فبقيت أيقونات التواصل بعرض `0px` رغم قاعدة صريحة. قِيس ذلك في المتصفّح:
   `matches(':focus-visible') === true` والعرض `0px` واللون لون النصّ —
   أي أن قاعدة أخرى تكسب على `outline-width` وحده.
   `box-shadow` غير متنازَع عليه في هذا القالب، فيضمن ظهور المؤشّر مهما
   كان الفائز على `outline`. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f69c27 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #f69c27, 0 0 0 5px rgba(0, 0, 0, .45) !important;
}

/* متصفّحات بلا دعم `:focus-visible` — يظهر الإطار عند أي تركيز */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 3px solid #f69c27 !important;
    outline-offset: 2px;
  }
}

/* **الفيض الأفقي على الأجهزة الصغيرة — WCAG 1.4.10 (‏Reflow).**
   صفوف Bootstrap 3 تحمل هامشاً سالباً 15px يُفترض أن تمتصّه حشوةُ الحاوية.
   وأصناف المشروع تضبط الحشوة إلى 5px عند `sm`، فيبقى 10px يفيض خارج
   الشاشة: قِيس فعلياً عند 768px على أربع صفحات. الفيض الأفقي أشدّ ما يصيب
   صفحات RTL على الهاتف لأن الانزياح يقع في جهة القراءة.
   تصفير الهامش السالب يزيح المحتوى 15px إلى الداخل ولا يقصّ شيئاً. */
@media (max-width: 991px) {
  .container-fluid > .row,
  .container > .row,
  [class*="col-"] > .row {
    margin-right: 0;
    margin-left: 0;
  }
}

/* شريط العرض الدوّار يبني مساراً أعرض من الشاشة عمداً، ويُفترض أن يقصّه
   غلافُه. قِيس فيضٌ 5px على الصفحة الرئيسية عند 768px مصدره `owl-stage`. */
.owl-stage-outer {
  overflow: hidden;
}

/* إطارات الطرف الثالث (‏reCAPTCHA مثلاً) لا تُظهر مؤشّر تركيز خاصاً بها،
   وهي محطّة تبويب فعلية */
iframe:focus-visible {
  outline: 3px solid #f69c27 !important;
  outline-offset: 2px;
}

/* **`hidden` لا يكفي وحده في هذا القالب.**
   السمة تُترجَم في متصفّح المستخدم إلى `display:none` من ورقة الأنماط
   الافتراضية، وأيّ قاعدة مؤلِّف تضبط `display` على العنصر تغلبها. قِيس
   فعلياً: عنصر `<li … hidden>` في فتات الخبز بقي مرسوماً ومُعلَناً لأن
   قواعد القالب تضبط `display` على `li`. */
[hidden] {
  display: none !important;
}

/* **نصٌّ لقارئ الشاشة وحده.**
   `display:none` و`visibility:hidden` يُخفيان العنصر عن قارئ الشاشة أيضاً،
   و`text-indent` السالب يكسر الاتجاه في RTL. القَصّ إلى بكسل واحد هو
   الأسلوب الوحيد الذي يُبقي العنصر في شجرة الوصولية ولا يشغل حيّزاً.
   يُستعمل لعنوان المستوى الأوّل الذي يصف الصفحة: القالب التجاري لا يضع
   `h1` في أي صفحة، والعنوان المرئي يكتبه جافاسكربت بعد التحميل. */
.uom-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* يظهر متى رُكِّز عليه بلوحة المفاتيح */
.uom-visually-hidden:focus,
.uom-visually-hidden:focus-visible {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* المحتوى الرئيس هدفُ رابط التخطّي؛ `tabindex="-1"` يجعله قابلاً للتركيز
   برمجياً، ولا يجوز أن يُظهر إطاراً لأن التركيز عليه ليس تفاعلاً */
#main-content:focus {
  outline: none;
}

/* رابط «تخطّي إلى المحتوى» — يظهر عند التركيز وحده. */
.uom-skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #2a1f6c;
  color: #fff;
  text-decoration: none;
}

.uom-skip-link:focus,
.uom-skip-link:focus-visible {
  right: 0;
}