/**
 * إصلاحات Phase 7 — تركيز الكيبورد وحالات الـ focus + تجاوز التخطيط في الموبايل.
 *
 * كل قاعدة هنا بتصلّح سبب جذري مُتحقَّق منه في ثيم Woodmart 8.5.7،
 * ومكتوبة كأصغر تدخّل ممكن بدون تعديل ملفات الثيم الأب.
 */

/* ------------------------------------------------------------------ *
 * 1) اللوحات الجانبية (mobile-nav / cart-widget-side / login-form-side)
 *    الثيم بيخبّيها بـ transform بس، فبتفضل visibility:visible
 *    وعناصرها (23 عنصر) تفضل داخل ترتيب الـ Tab وهي مقفولة.
 *    الثيم: .wd-side-hidden{transition:transform .5s cubic-bezier(.19,1,.22,1)}
 *          .wd-side-hidden.wd-opened{transform:none}
 *    visibility بتتأخّر 0.5s عند الغلق حتى ما تقطعش أنيميشن الخروج.
 * ------------------------------------------------------------------ */
/* مهم: الـ visibility بتتحط على محتوى اللوحة مش على اللوحة نفسها،
   عشان الثيم بيعمل panel.focus() لحظة الفتح، وعنصر visibility:hidden
   مابيقبلش التركيز فكنا بنكسر نقل الـ focus جوّه اللوحة. */
.wd-side-hidden:not(.wd-opened) > * {
	visibility: hidden;
	transition: visibility 0s .5s;
}

/* ------------------------------------------------------------------ *
 * 2) زر «العودة للأعلى» بيفضل قابل للتركيز وهو مخفي.
 *    الثيم: .scrollToTop{opacity:0;pointer-events:none}
 *          .scrollToTop.button-show{opacity:1;pointer-events:auto}
 * ------------------------------------------------------------------ */
.scrollToTop:not(.button-show) {
	visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * 3) عناصر جوّه أغلفة أنيميشن الظهور بتكون opacity:0 لكن قابلة للتركيز،
 *    فالـ focus بيروح لمكان غير مرئي.
 *    الثيم: .wd-animation{opacity:0}  /  .wd-animation.wd-in{opacity:1}
 *    نفس أسلوب الثيم نفسه في .wd-insta-item:is(:hover,:focus-within).
 * ------------------------------------------------------------------ */
.wd-animation:focus-within {
	opacity: 1;
	--wd-transform-translateX: 0;
	--wd-transform-translateY: 0;
}

/* ------------------------------------------------------------------ *
 * 4) الثيم بيشيل حلقة التركيز عن كل حقول النص و textarea و select
 *    على مستوى الموقع كله:
 *    input[type=email]:focus,…,.wd textarea:focus,.wd select:focus{outline:none}
 *    نرجّعها لمستخدم الكيبورد فقط (:focus-visible) بدون إزعاج الماوس.
 * ------------------------------------------------------------------ */
:is(
	input[type="email"],
	input[type="date"],
	input[type="search"],
	input[type="number"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea,
	select
):focus-visible {
	outline: 2px solid var(--wd-otl-color, #111) !important;
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ *
 * 5) مقابض شريط السعر (span[tabindex="0"]) — الثيم بيلغي حلقته بنفسه:
 *    .widget_price_filter .ui-slider .ui-slider-handle{--wd-otl-style:none;outline:none}
 * ------------------------------------------------------------------ */
.widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	--wd-otl-style: solid;
	outline: 2px solid #111 !important;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 6) نظام الألوان الفاتح بيفرض حلقة تركيز بيضاء:
 *    [class*=color-scheme-light],.whb-color-light{--wd-otl-color-scheme:#FFF}
 *    والكلاس دي مستعملة في مكانين مختلفين تماماً: هيدر شفّاف فوق خلفية
 *    فاتحة (مقاس: 1.6:1 — فشل WCAG 1.4.11)، وفوتر خلفيته سودة (الأبيض
 *    هناك صح: 21:1). فإجبار لون غامق بيصلّح الهيدر ويكسر الفوتر.
 *    الحل: حلقة من شريطين — أبيض جوّه وغامق بره — فأيّ خلفية بيبقى فيها
 *    شريط واحد على الأقل محقّق التباين. الـ outline بتاع الثيم بيفضل
 *    زي ما هو كطبقة احتياطية جوّه العنصر.
 * ------------------------------------------------------------------ */
:is([class*="color-scheme-light"], .whb-color-light)
	:is(a, button, input[type="submit"], input[type="checkbox"], input[type="button"], input[type="file"], [tabindex="0"]):focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 4px rgba(17, 17, 17, .95);
}

/* ------------------------------------------------------------------ *
 * 7) هيدر الموبايل: أيقونة عربة التسوق كانت خارج الشاشة تحت 386px.
 *    الثيم: .whb-general-header-inner{display:flex;flex-wrap:nowrap}
 *           .wd-tools-element > a{padding-inline:10px}  (أيقونة 42 → 62px)
 *           .site-logo{padding-inline:10px} + الصورة max-width:150px (inline)
 *    مقاس: عرض الصف = عرض الشاشة − 30، ومجموع الأعمدة ثابت
 *    62 + 170 + 62 + 62 = 356 لأن min-width:auto على عناصر الفلكس
 *    بيمنع أي تقليص، فبيحصل تجاوز لما 356 > العرض − 30، أي تحت 386px.
 *    عند 320 التجاوز 66px والعربة بتختفي تماماً (مش بتعمل سكرول) بسبب
 *    body{overflow-x:clip} الموجودة أصلاً في الثيم الأب.
 *    الحل: تقليل الحشو الأفقي للأدوات (36px) وحشو حاوية اللوجو (20px)
 *    فالمجموع يبقى 300 ويكفي من 330px وطالع؛ وتحت 340px نقلّل اللوجو 20px
 *    كمان. الأيقونة نفسها بتفضل 42×42 فهدف اللمس أكبر من 24px.
 * ------------------------------------------------------------------ */
@media (max-width: 385px) {
	.whb-general-header-inner .wd-tools-element > a {
		padding-inline: 4px;
	}

	.whb-general-header-inner .site-logo {
		padding-inline: 0;
	}
}

@media (max-width: 340px) {
	/* !important لأن الـ max-width متحطّة inline على وسم الصورة نفسه. */
	.whb-general-header-inner .site-logo img {
		max-width: 130px !important;
	}
}

/* ------------------------------------------------------------------ *
 * 8) الشريط السفلي في الموبايل: زر «حسابي» كان بيختفي في صفحات الأرشيف.
 *    الثيم: .wd-toolbar{display:flex;flex-wrap:nowrap} وعناصره flex:1 0 20%
 *    يعني مبنية على 5 عناصر بالظبط. صفحات المتجر/التصنيف بتزوّد عنصر
 *    «فلاتر» → 6 × 20% = 120%، فالعنصر السادس بيخرج بره الشاشة
 *    (عند 320 على left:-57) وبيتقصّ بـ body{overflow-x:clip}.
 *    الحل: العناصر تتقاسم العرض بالتساوي مهما كان عددها. مع 5 عناصر
 *    الناتج نفس 20% بالظبط، فمافيش أي تغيير بصري في الصفحات السليمة.
 *
 *    مُحدِّد الثيم `.wd-toolbar > a, .wd-toolbar > div` نوعيته (0,1,1)
 *    فبيكسب أي `.wd-toolbar > *`، و LiteSpeed بيدمج كل الـ CSS في ملف واحد
 *    فترتيب التحميل مابيضمنش الأولوية (مقاس: قاعدتنا عند عمود 150264
 *    وقاعدة الثيم عند 365353 في نفس الملف المدموج). فنطابق نفس المُحدِّد
 *    ونزوّد `body` قدّامه عشان نكسب بالنوعية (0,1,2) بدون !important.
 * ------------------------------------------------------------------ */
body .wd-toolbar > :is(a, div) {
	flex: 1 1 0;
	min-width: 0;
}

/* ==================================================================
 * PHASE 8 — تباين الألوان والوصول بالكيبورد (2026-08-28)
 * كل قاعدة هنا نوعيّتها أعلى بدرجة واحدة من القاعدة اللي بتغلبها، فبتكسب
 * مهما كان ترتيب الملفات جوه ملف LiteSpeed المدموج، وبدون !important.
 * التحقق: axe-core على 8 أنواع صفحات — color-contrast من 9 أزواج إلى 0.
 * ================================================================== */

/* 1) الرمادي الأساسي للنص: #777777 بيفشل عند 4.43:1 على خلفية #fefcf9.
 *    #6f6f6f بيعدّي AA على خلفيات الموقع الخمس كلها
 *    (5.02 / 5.01 / 4.91 / 4.63 / 4.55). html:root نوعيّتها (0,1,1)
 *    فبتغلب :root (0,1,0) بتاعة الثيم. */
html:root {
	--wd-text-color: #6f6f6f;
}

/* 2) السعر المشطوب: قاعدة الثيم .price del عند (0,1,1)
 *    فمحتاجين (0,1,2) على الأقل. */
span.price del,
span.price del * {
	color: #6f6f6f;
}
.wc-block-grid__product-price.price del,
.wc-block-grid__product-price.price del * {
	color: #6f6f6f;
}

/* 3) كاتب المقالة والودجتس والبريدكرَمب بياخدوا --wd-link-color الرمادي.
 *    الخاصية المُعلَنة بتغلب المورَّثة، فـ body + :is() كفاية.
 *    .wd-last في البريدكرَمب بيفضل على gray-900 زي ما هو. */
.wd-post-author a.author {
	color: #6f6f6f;
}
body :is(.widget, .wd-widget, div[class^="vc_wp"]) {
	--wd-link-color: #6f6f6f;
}
body .wd-breadcrumbs {
	--wd-link-color: #6f6f6f;
}

/* 4) لينك "تخطَّ إلى القائمة" بيشاور على <ul> القائمة الرئيسية اللي مش
 *    مرسومة تحت 1025px (مقاس: 0×0 و offsetParent=null على الموبايل،
 *    321×42 على الديسكتوب). لينك تخطّي لهدف مخفي = هدف مش موجود،
 *    فنخفيه على الموبايل بس. ده صفّى قاعدة region على 8 صفحات كمان.
 *
 *    تصحيح 2026-09-03: الهيدر بيلدر بيعرض menu-home-menu-kids-light-icon
 *    على الديسكتوب، مش main-navigation اللي الـ skip link بيشاور عليه.
 *    العلاج: إخفاء skip-navigation على الديسكتوب وعلى الموبايل، والاعتماد
 *    على skip-content اللي بيشاور على #main-content (موجود) فقط. */
.wd-skip-links .wd-skip-navigation {
	display: none;
}

/* 5) إكمال للقاعدة رقم 1 في أول الملف: إحنا خلّينا محتوى البانل المخفي
 *    visibility:hidden، بس الثيم سايب overflow-y:auto!important، فالبانل
 *    بقى منطقة تمرير فيها 55 عنصر مش قابلين للفوكس
 *    (scrollable-region-focusable). نقفل التمرير طالما البانل مقفول. */
.e-con.wd-side-hidden:not(.wd-opened) {
	overflow-y: hidden !important;
}
/* 6) أزرار الأيقونات (قائمة الأمنيات / المقارنة) نصّها الوحيد جوّه
 *    <span class="wd-action-text"> والثيم مخفيه بـ display:none عند (0,3,0)،
 *    فالرابط بيوصل لقارئ الشاشة بدون أي اسم خالص
 *    (link-name: 30 على /shop/، 14 على الرئيسية و/en/، 4 على صفحة المنتج).
 *    النص أصلاً مترجم في الـ DOM، فبدال إننا نزوّد aria-label في قوالب
 *    PHP ونكرّر الترجمة، نحوّل الإخفاء لإخفاء بصري بس: العنصر
 *    يفضل في شجرة الوصول ومايشغلش أي مساحة في التخطيط.
 *    قاعدة واحدة بتغطي كل الأزرار وكل اللغات.
 *    تكرار الكلاس بيدينا (0,4,0) فبتغلب قاعدة الثيم (0,3,0) بدون !important.
 *    متحقق على الموقع الحيّ: link-name 30/14/14/4 -> 0، وزرار «أضف للسلة»
 *    فضل ظاهر بنفس المقاس بالظبط (4560px² قبل وبعد) على /shop/ و/ و/cart/. */
.wd-action-btn.wd-style-icon .wd-action-text.wd-action-text {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 9) أسهم الكاروسيل (wd-pos-sep) بتتحط بره مسار الكاروسيل بالكامل،
 *    ...
 */
.wd-nav-arrows.wd-pos-sep {
	--wd-arrow-offset-h: calc(var(--wd-arrow-width, var(--wd-arrow-size, 50px)) / -1);
}

/* ------------------------------------------------------------------ *
 * 10) قوائم الفلاتر: المسافة بين عناصر التحديد أقل من 24px (WCAG 2.5.8).
 *     ...
 */
ul.wd-checkboxes-on > li {
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------ *
 * 11) استكمال للقاعدة 9: السلايدر الرئيسي بيفضل بارز 10px بره الشاشة.
 *     الثيم بيحدّد للأسهم دي قيمة أعلى في الترتيب:
 *     .wd-slider-arrows.wd-style-1{
 *        --wd-arrow-offset-h: calc((var(--wd-arrow-width,…) - 10px) / -1)}
 *     نوعيّتها (0,2,0) — نفس نوعيّة قاعدتنا — لكنها بتيجي بعدها في الملف
 *     المدموج (مقاس: قاعدتنا عند عمود 81443 وقاعدة الثيم عند 149937)،
 *     فبتكسب بالترتيب. النتيجة عند 375: السهم من 345 لـ 385 والتالي من
 *     ‎-10‎ لـ 30، يعني 10px بره الشاشة من الناحيتين (over = 10).
 *     والسلايدر ده stretch فمافيش هامش يستقبل البروز.
 *     الحل: نفس تعبير القاعدة 9 بالظبط، بس بنوعيّة (0,3,0) عشان تكسب
 *     بالنوعية مش بالترتيب. القيمة دي هي نفسها اللي الثيم بيستعملها
 *     للسلايدرات التانية (.wd-slider-arrows.wd-pos-sep عند عمود 147817).
 * ------------------------------------------------------------------ */
.wd-nav-arrows.wd-slider-arrows.wd-style-1 {
	--wd-arrow-offset-h: calc(var(--wd-arrow-width, var(--wd-arrow-size, 50px)) / -1);
}

/* ------------------------------------------------------------------ *
 * 12) الأسهم المفصولة (wd-pos-sep) بالـهوفر-1 style بيحصل لها hover
 *     animation (translateX ±30px) في الثيم الأصلي، فبتطلع بره الشاشة
 *     (22px overflow @1280). الأسهم المفصولة بطبيعتها على حافة الـ track
 *     فما تحتاج animation — إلغاء الــ transform عليها بس.
 *     الثيم: .wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-prev{
 *            transform: translateX(30px)}  (وللــ next بالسالب)
 *     الحل: نلغي الترجمة للأسهم المفصولة *بس جوّه الغلاف الكامل* — الأسهم
 *     بترجع لحافة المسار (8 و 1257)، والكاروسيلات العادية ما تتأثّرش.
 * ------------------------------------------------------------------ */
.wd-section-stretch-content .wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-prev,
.wd-section-stretch-content .wd-nav-arrows.wd-hover-1.wd-pos-sep .wd-next {
	transform: none !important;
}

/* ------------------------------------------------------------------ *
 * 13) صورة الفوتر بتخرج 4px بره الشاشة في الموبايل على كل الصفحات.
 *     المصدر مش الثيم — ده هامش سالب مكتوب من الـ builder على ودجت
 *     واحدة في قالب الفوتر 403:
 *     .elementor-403 .elementor-element.elementor-element-2f6484f9
 *       > .elementor-widget-container{margin: 0 0 0 -4px}
 *     على الديسكتوب الودجت عمود عرضه 253px جوّه محتوى 1192px، فالـ ‎-4px‎
 *     مجرد إزاحة بسيطة للوجو وما بتخرجش بره حاجة (مقاس 1280: 941.5..1198.5).
 *     لكن من 768px وتحت أعمدة الفوتر بتبقى فوق بعضها فالعمود بياخد عرض
 *     الشاشة بالكامل (375 → 374.98px)، وساعتها الهامش السالب بيطلع الصورة
 *     لـ l=-4 وبيوسّعها لـ 378.98 → bodyScrollWidth 379 بدل 375.
 *     مقاس عبر المقاسات: 375 و 480 و 768 العمود بعرض الشاشة والتجاوز 4px؛
 *     800 (l=586, w=191) و 900 و 1024 و 1280 العمود جوّه صفّه ومافيش تجاوز.
 *     فحدّ التكديس عند 768px بالظبط.
 *     الحل: نصفّر الهامش السالب في نطاق التكديس بس (≤768px) فالديسكتوب
 *     مايتغيّرش ولا 1px. بنستعمل margin-left الفيزيائي — مش المنطقي — لأن
 *     ده بالظبط الخصيصة اللي الـ builder كتبها، فالتصفير بيشيلها في RTL
 *     و LTR الاتنين (لو استعملنا margin-inline-end كانت هتشيلها في العربي
 *     بس وتسيب التجاوز في الإنجليزي). و `body` قدّام المُحدِّد بترفع
 *     النوعية من (0,4,0) لـ (0,4,1) فنكسب على قاعدة الـ builder بدون
 *     !important ومن غير الاعتماد على ترتيب الملف المدموج.
 *     ملاحظة: المُحدِّد مربوط بمعرّفات مولّدة من الـ builder (403 و
 *     2f6484f9)؛ لو الودجت اتعمِلت من جديد القاعدة بتبقى بلا أثر (مش ضرر).
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	body .elementor-403 .elementor-element.elementor-element-2f6484f9 > .elementor-widget-container {
		margin-left: 0;
	}
}

/* ==================================================================
 * PHASE 9 — تباين شارات المنتج (P1-03 / CHANGE-A1) — 2026-09-02
 *
 * المصدر مش ملف CSS في الثيم ولا ملف مولّد من LiteSpeed — دي خيارات
 * الثيم في xts-woodmart-options (sale/new/hot_label_bg_color + *_text_color)
 * وودمارت بيطبعها في xts-theme_settings_default-css-data كـ:
 *
 *     .wd .product-label.onsale   { background-color: rgb(126,164,222); color: rgb(255,255,255) }
 *     .wd .product-label.new      { background-color: rgb(171,186,129); color: rgb(255,255,255) }
 *     .wd .product-label.featured { background-color: rgb(227,162,141); color: rgb(255,255,255) }
 *
 * القياس (WCAG 2.x relative luminance) مع الأبيض:
 *     onsale 2.54:1   •   new 2.08:1   •   featured 8=الـhot 2.14:1   — كلها تفشل AA (4.5:1)
 *
 * ليه غيّرنا لون النص مش لون الخلفية:
 * عشان الخلفية توصل 4.5:1 مع الأبيض لازم لمعانها ينزل من
 * 0.44 لـ 0.18، يعني البيج/الزيتوني يبقوا بنّي غامق — خروج كامل
 * عن باليت صاحب الموقع. تغيير لون النص وحده بيسيب الخلفيات
 * الثلاث زي ما هي بالبايت.
 *
 * #111 مش لون جديد: هو نفسه primary-color بتاع الثيم rgb(17,17,17).
 * النتيجة: onsale 7.42:1 • new 9.06:1 • featured 8.83:1 — كلها AA و AAA.
 *
 * النوعية: قاعدة الثيم (0,3,0)؛ `body` قدّامنا بتدينا (0,3,1) فنكسب
 * بالنوعية مش بالترتيب جوّه ملف LiteSpeed المدمج، وبدون !important.
 * خاصية واحدة (color) — مفيش أي تأثير على التخطيط فمفيش CLS،
 * ومفيش خاصية اتجاهية فـ RTL/LTR الاتنين زي بعض.
 *
 * Rollback: احذف كتلة PHASE 9 دي، أو ارجع من
 *           /home/u258219607/jaurea-remediation-backups/a11y.css.20260902-P1-03.bak
 *
 * تصحيح 2026-09-03: المُحدِّد كان `body .wd .product-label` بمسافة،
 * وده بيطلب عنصر بكلاس .wd *جوّه* body — لكن كلاس .wd متحطّة
 * على body نفسه، فالقاعدة كانت مابتطابقش أي عنصر خالص.
 * مقاس (PSI 2026-09-03): color-contrast لسّة فاشل بـ 41 عنصر.
 * الحل: `body.wd` بدون مسافة — نفس النوعية (0,3,1) وبتطابق فعلاً.
 * ================================================================== */
body.wd .product-label:is(.onsale, .new, .featured) {
	color: #111;
}

/* ==================================================================
 * PHASE 10 — color-contrast: wd-action-text (PSI 2026-09-03)
 * #b08d57 with #fff = 3.09:1 (fail); with #111 = 6.11:1 (AA+AAA).
 * Selector targets: .product-element-bottom .wd-add-btn a.button .wd-action-text
 * (0,2,4) beats theme .wd-action-text (0,1,1).
 * ================================================================== */
.product-element-bottom .wd-add-btn a.button .wd-action-text {
	color: #111 !important;
}