/* ══════════════════════════════════════════════════════════════════
   منقولٌ من ثيم «لافين فاشن» الابن — a11y-focus.css
   الثيمُ الأبُ واحدٌ في الموقعين (DavinciWoo 1.4.8)، فالنقلُ استبدالُ
   طبقةِ ابنٍ لا هجرةُ ثيم. والمتغيّرُ الوحيدُ **اللوحة**: لوحةُ لافين
   النحاسيّةُ أُبدلت بلوحة الجيل الأخضر التيليّة (5 لوناً).
   الأصلُ يبقى مرجعاً في مستودع لافين؛ لا يُحرَّر هنا إلّا بقياس.
   ══════════════════════════════════════════════════════════════════ */

/**
 * لافين — إظهار مؤشّر التركيز للوحة المفاتيح (WCAG 2.4.7، مستوى AA).
 *
 * **القياس (٢٥ أغسطس ٢٠٢٦، بلوحة مفاتيح حقيقية على صفحة الدفع):** ستّ محطّات
 * تنقّل متتالية، كلّها تطابق `:focus-visible` — أي أن المتصفّح في وضع لوحة
 * المفاتيح فعلاً — وكلّها `outline: none 0px` و`box-shadow: none`. أي **صفر
 * مؤشّر بصري**.
 *
 * و٤٤ قاعدة في أنماط الموقع تُلغي `outline`. وهو نمط شائع: يُلغى الإطار لأنه
 * «قبيح» عند النقر بالفأرة، ثم يُنسى أن أحداً يتنقّل بلوحة المفاتيح.
 *
 * **الأثر ليس تجميلياً.** من لا يستعمل فأرة — لإعاقة حركية، أو لعطل مؤقّت، أو
 * لأنه أسرع بلوحة المفاتيح — يملأ نموذج الدفع **وهو لا يرى أين هو**. وسياسة
 * المالك تُلزم WCAG AA على الشاشات المالية تحديداً.
 *
 * **لماذا `:focus-visible` لا `:focus`:** لأن `:focus` يُظهر الإطار عند النقر
 * بالفأرة أيضاً، وهو ما دفع القالب لإلغائه أصلاً. و`:focus-visible` يُظهره
 * لمن يحتاجه فقط — فيرضي الطرفين بلا مساومة.
 *
 * **حلقتان لا واحدة:** إطار داكن يصلح على الخلفيات الفاتحة، وحلقة بيضاء حوله
 * تصلح على الأزرار الداكنة (بنّي `#05372f`، نحاسي `#0b8571`). فأيّهما اختفى
 * ظهر الآخر — بدل لونٍ واحد يراهن على خلفية واحدة.
 *
 * `!important` ضرورة لا تفضيل: القواعد الـ٤٤ الملغية أعلى نوعيةً من مُحدِّد
 * عام، وتجاوزُها بنوعية مكافئة يعني سرد كل مُحدِّداتها — قائمة تتعفّن مع أول
 * تحديث للقالب.
 */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner button:focus-visible {
	outline: 2px solid #2d2d2d !important;   /* فحمي — على الفاتح */
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .92) !important; /* حلقة — على الداكن */
	border-radius: 2px;
}

/*
 * الحقول ذات الخلفية الفاتحة داخل بطاقات فاتحة: الحلقة البيضاء تختفي فيها بلا
 * ضرر، والإطار الفحمي يحمل الإشارة وحده. لا حاجة لقاعدة منفصلة — تُترك هنا
 * توضيحاً لأن غيابها قد يبدو سهواً.
 */

/* رابط تخطّي المحتوى: يجب أن يظهر عند التركيز لا أن يبقى مخفيّاً. */
/*
 * رابط التخطّي عند التركيز.
 *
 * **كان `position: static !important` — وهو عيبٌ كتبتُه أنا.** القصد كان إخراج
 * الرابط من إخفاء `.screen-reader-text` (وهي `position:absolute; width:1px`)،
 * فأعدتُه إلى التدفّق. والنتيجة قِيست بضغطة Tab حقيقية على 375×812
 * (2026-08-25): الرابط صار **32×7788** — شريطاً بطول المستند كلّه على حافة
 * اليمين، و`elementFromPoint` عند y=100 و400 و700 يُعيده هو. أي أنه **يبتلع كل
 * نقرة** في 32 بكسل من عرض الشاشة (8.5٪ على الجوّال) ما دام مركَّزاً.
 *
 * وعلّتان في السطر الواحد: عنصرٌ في التدفّق بـ`height:auto` يتمدّد بامتداد
 * محتواه/حاويته، و`z-index` **لا يسري على `static` إطلاقاً** — فالمئة ألف
 * كانت زينة بلا أثر.
 *
 * `fixed` لا `absolute`: الرابط قد يُركَّز والصفحة مُمرَّرة، والمثبَّت يظهر في
 * موضعه دائماً. والخصائص المنطقية (`inset-inline-start`) تضع الرابط في بداية
 * السطر — يميناً في RTL ويساراً في LTR — بلا قاعدتين.
 *
 * والإخفاء يُنقض بأربع خصائص لا واحدة: العرض والارتفاع و`clip` و`clip-path`
 * تُضبط جميعاً في `.screen-reader-text`، وتركُ واحدة يُبقي الرابط غير مرئي.
 */
.skip-link:focus-visible,
a[href="#main"]:focus-visible {
	position: fixed !important;
	inset-block-start: .5rem;
	inset-inline-start: .5rem;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	margin: 0 !important;
	overflow: visible !important;
	padding: .5rem 1rem;
	background: #2d2d2d;
	color: #e8f7f4;
	z-index: 100000;
}