/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: القالب الفرعي المخصص لمتجر Rihalo
Author: Rihalo
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/


/* ==================================================
   تعريف قالب Rihalo الفرعي

   السطر المهم هو:
   Template: kadence

   وظيفته:
   إخبار ووردبريس بأن هذا القالب تابع لقالب Kadence.

   هذه التعليقات لا تظهر للزائر.
   ================================================== */


/* ==================================================
   شريط تصنيفات Rihalo الرئيسي

   وظيفته:
   إنشاء خلفية بيضاء للشريط الذي يظهر أسفل البحث
   وإضافة خط خفيف أسفله.
   ================================================== */

.rihalo-category-bar {
	width: 100%;
	background-color: #ffffff;
	border-bottom: 1px solid #e7e7e7;
	position: relative;
	z-index: 20;
}


/* ==================================================
   الحاوية الداخلية لشريط التصنيفات

   وظيفتها:
   توسيط التصنيفات داخل الموقع ومنع خروجها عن الشاشة.
   في الهاتف تسمح بسحب التصنيفات أفقيًا.
   ================================================== */

.rihalo-category-bar__inner {
	width: min(1180px, calc(100% - 32px));
	margin-right: auto;
	margin-left: auto;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rihalo-category-bar__inner::-webkit-scrollbar {
	display: none;
}


/* ==================================================
   قائمة التصنيفات الرئيسية

   وظيفتها:
   تحويل القائمة من شكل عمودي ذي نقاط
   إلى صف أفقي واحد.
   ================================================== */

ul.rihalo-category-menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 24px !important;

	width: max-content;
	min-width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
	white-space: nowrap;
}


/* ==================================================
   كل عنصر داخل قائمة التصنيفات

   وظيفته:
   إزالة النقاط والمسافات الافتراضية
   ومنع ضغط أسماء التصنيفات.
   ================================================== */

ul.rihalo-category-menu > li {
	display: block !important;
	flex: 0 0 auto !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

ul.rihalo-category-menu > li::before {
	display: none !important;
	content: none !important;
}

ul.rihalo-category-menu > li::marker {
	content: none !important;
}


/* ==================================================
   روابط التصنيفات

   وظيفتها:
   التحكم في حجم الخط واللون والمسافات
   وإزالة الخط الافتراضي أسفل الروابط.
   ================================================== */

ul.rihalo-category-menu > li > a {
	display: block !important;

	padding: 13px 0 11px !important;

	color: #292929 !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;

	text-decoration: none !important;

	border-bottom: 2px solid transparent;

	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}


/* ==================================================
   تأثير المرور بالفأرة والتصنيف المفتوح

   وظيفته:
   تغيير لون التصنيف وإظهار خط تحته
   عندما يمر الزائر عليه أو يفتح صفحته.
   ================================================== */

ul.rihalo-category-menu > li > a:hover,
ul.rihalo-category-menu > li > a:focus,
ul.rihalo-category-menu > li.current-menu-item > a,
ul.rihalo-category-menu > li.current-menu-ancestor > a,
ul.rihalo-category-menu > li.current-product_cat-ancestor > a {
	color: #c2410c !important;
	border-bottom-color: #c2410c;
}


/* ==================================================
   إعدادات الهاتف والتابلت

   وظيفتها:
   عرض التصنيفات في صف أفقي واحد
   مع إمكانية سحب الشريط يمينًا ويسارًا بالإصبع.
   ================================================== */

@media (max-width: 900px) {

	.rihalo-category-bar__inner {
		width: calc(100% - 24px);
	}

	ul.rihalo-category-menu {
		justify-content: flex-start !important;
		gap: 22px !important;
	}

	ul.rihalo-category-menu > li > a {
		padding: 12px 0 10px !important;
		font-size: 13px;
	}
}


/* ==================================================
   إعدادات الهواتف الصغيرة

   وظيفتها:
   تقليل المسافات قليلًا حتى يكون الشريط مريحًا
   على الشاشات الصغيرة.
   ================================================== */

@media (max-width: 480px) {

	.rihalo-category-bar__inner {
		width: calc(100% - 20px);
	}

	ul.rihalo-category-menu {
		gap: 18px !important;
	}

	ul.rihalo-category-menu > li > a {
		font-size: 12.5px;
		padding: 11px 0 9px !important;
	}
}