/* ═══════════════════════════════════════════════════════════════════════════
   zl-a11y.css — حالة تركيز واحدة للمنصّة + رابط التخطّي + لون ذهبي مقروء.
   (ACCESSIBILITY P1, 2026-08-22)

   لماذا `!important` هنا تحديدًا؟
   ─────────────────────────────
   في `style.css` ثماني عشرة قاعدة `outline:none`، أربع منها بلا بديل مرئي
   (`.auth-input` · `.partner-row input` · `.status-filter` …) وبعضها بمُحدِّد
   أقوى من أي قاعدة عامة نكتبها. الغرض من هذا الملف أن يكون **الحكم الأخير**
   على ظهور البؤرة: لا نحذف تلك القواعد (بعضها يمنع الحلقة المزدوجة مع
   `box-shadow`)، بل نضمن فوقها حلقة واحدة مقروءة في كل مكان.

   `:focus-visible` لا `:focus` — فلا تظهر حلقة عند النقر بالفأرة، وتظهر دائمًا
   لمن يتنقّل بلوحة المفاتيح.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --zl-focus-ring: #0A5A72;          /* بترولي داكن: 6.4:1 على الأبيض */
  --zl-focus-ring-dark: #FFD98A;     /* على الأسطح الداكنة */
  /* الذهبي المقروء للنصّ على الخلفيات الفاتحة — قيس 4.76:1 على #F6F2E9.
     هوية زِل الذهبية `#E6B563` تبقى كما هي للحدود والخلفيات والأيقونات؛
     هذا متغيّر **دلالي للنص** لا استبدال للعلامة. */
  --zl-gold-ink: #8C6410;
}

*:focus-visible {
  outline: 3px solid var(--zl-focus-ring) !important;
  outline-offset: 2px !important;
}
/* الأسطح الداكنة: النافبار والفوتر ورؤوس المودالات */
.navbar *:focus-visible,
footer *:focus-visible,
.zl-aem-head *:focus-visible,
.zl-co-head *:focus-visible,
[data-zl-dark] *:focus-visible {
  outline-color: var(--zl-focus-ring-dark) !important;
}
/* الحاوية التي تستقبل البؤرة بعد رابط التخطّي لا تحتاج حلقة */
[role="main"]:focus,
main:focus,
[role="dialog"]:focus {
  outline: none !important;
}

/* ── رابط التخطّي: مخفي حتى يُركَّز عليه ── */
.zl-skip-link {
  position: fixed;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(50%);
  z-index: 100000;
  background: #004F6C;
  color: #fff;
  font-family: Tajawal, 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  padding: 12px 26px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: top .18s ease;
}
.zl-skip-link:focus,
.zl-skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--zl-focus-ring-dark) !important;
  outline-offset: -6px !important;
}

/* ── الحركة المخفَّضة: احترامها قرار منصّة لا قرار قسم ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── وسم مقروء لقارئ الشاشة وغير مرئي بصريًا ──
   يُستعمل حين يكون الوسم البصري غائبًا بالتصميم (حقل بحث بأيقونة مثلًا). */
.zl-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── مساحة اللمس على الشاشات الصغيرة ──────────────────────────────────────
   قِيس على 390: تسعة أهداف دون 44×44، أصغرها زر إغلاق شريط العرض 24×24.
   نوسّع **مساحة اللمس** بطبقة شفافة لا الحجم البصري، فلا يتغيّر التخطيط.
   `#zlCartFab` مستثنى: عنده ::after بهذا الغرض أصلًا (قِيس)، ومضاعفتها تكسره. */
@media (max-width: 768px) {
  .zl-promo-x, .nav-auth-btn, .zl-lang-switcher { position: relative; }
  .zl-promo-x::after,
  .nav-auth-btn::after,
  .zl-lang-switcher::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
    pointer-events: auto;
  }
}