/*
 * roomline.css — تجاوزات Blocksy لمحاكاة هوية روم لاين البصرية.
 *
 * هذا الملف يأتي بعد ستايل Blocksy ليغطّيه (يُحمَّل بـ priority 20 في enqueue.php).
 * نظام التصميم المركزي (الألوان، الخطوط، الحواف، الظلال) معرّف في theme.json،
 * لذلك هنا فقط التعديلات التي لا تغطّيها theme.json أو Blocksy.
 *
 * منظمة حسب الترتيب التالي:
 *   1. متغيرات إضافية وتصحيحات RTL
 *   2. إعادة ضبط خفيفة لـ Blocksy
 *   3. أزرار وروابط
 *   4. أنماط الكتل (Hero، Cards، Bento...)
 *   5. RTL/LTR خلافيات
 *   6. الوصول (a11y) وحركة مخفّضة
 *
 * @package Roomline_Child
 */

/* ==========================================================================
   1. متغيرات إضافية
   ========================================================================== */

:root {
	/* هذه المتغيرات معرّفة في theme.json ك preset، لكن نوفّرها هنا أيضًا
	   لاستخدامها داخل CSS اليدوي (Blocksy لا يعرض كل preset دائمًا). */
	--rl-color-primary:      #ed1f25;
	--rl-color-primary-dark: #b9151b;
	--rl-color-ink:          #141414;
	--rl-color-muted:        #5f646d;
	--rl-color-line:         #e7e1dc;
	--rl-color-surface:      #ffffff;
	--rl-color-soft:         #f7f2ee;
	--rl-color-dark:         #090909;
	--rl-color-dark-soft:    #191919;

	--rl-radius-sm: 8px;
	--rl-radius-md: 14px;
	--rl-radius-pill: 999px;

	--rl-shadow-soft:   0 18px 45px rgba(20, 20, 20, 0.09);
	--rl-shadow-strong: 0 24px 70px rgba(0, 0, 0, 0.22);
	--rl-shadow-button: 0 12px 24px rgba(237, 31, 37, 0.24);

	--rl-transition-fast: 180ms ease;

	--rl-container: 1180px;
	--rl-font: Tahoma, Arial, sans-serif;
}

/* ==========================================================================
   2. إعادة ضبط خفيفة لـ Blocksy (لتقليل التداخل مع الهوية)
   ========================================================================== */

/* خط Tahoma لكل العناصر (Blocksy قد يفرض خطه الافتراضي). */
body,
.wp-block,
.editor-styles-wrapper {
	font-family: var(--rl-font);
}

/* الحاوية المركزية بمطابقة الموقع الأصلي (1180px). */
.wp-block-post-content,
.entry-content {
	width: min(100% - 32px, var(--rl-container));
	margin-inline: auto;
}

/* لون النص الأساسي. */
body {
	color: var(--rl-color-ink);
	background: var(--rl-color-surface);
}

/* ==========================================================================
   3. أزرار وروابط (محاكاة .btn, .btn-outline, .text-link الأصلية)
   ========================================================================== */

/* الأزرار الرئيسية — تأخذ من Gutenberg's button block لكن نضبط التصميم. */
.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	border-radius: var(--rl-radius-sm);
	transition: transform var(--rl-transition-fast), box-shadow var(--rl-transition-fast), background-color var(--rl-transition-fast);
}

/* رفع الزر قليلًا عند المرور. */
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(237, 31, 37, 0.28);
}

/* ==========================================================================
   4. أنماط الكتل (Placeholder — يُملأ في المراحل 5 و 6)
   ========================================================================== */

/* الأقسام المتناوبة — خلفية سطح/ناعمة/داكنة. */
.rl-section-soft  { background: var(--rl-color-soft); }
.rl-section-dark  { background: var(--rl-color-dark); color: #fff; }
.rl-section-dark h1,
.rl-section-dark h2,
.rl-section-dark h3 { color: #fff; }
.rl-section-dark p { color: rgba(255, 255, 255, 0.78); }

/* العنوان الفرعي (.eyebrow) — شريط أحمر صغير قبل النص. */
.rl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--rl-color-primary);
	text-transform: none; /* لا uppercase للعربية */
	margin-bottom: 14px;
}

.rl-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: currentColor;
}

/* بطاقات الخدمة. */
.rl-service-card {
	background: var(--rl-color-surface);
	border: 1px solid var(--rl-color-line);
	border-radius: var(--rl-radius-md);
	overflow: hidden;
	box-shadow: var(--rl-shadow-soft);
	transition: transform var(--rl-transition-fast), box-shadow var(--rl-transition-fast);
}

.rl-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 60px rgba(20, 20, 20, 0.16);
}

.rl-service-card img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.rl-service-card-body {
	padding: 22px;
}

/* بطاقات الميزات (داكنة بشريط أحمر يسارًا). */
.rl-feature-card {
	background: rgba(25, 25, 25, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--rl-radius-md);
	padding: 26px;
	position: relative;
	color: #fff;
}

.rl-feature-card::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--rl-color-primary);
	border-start-start-radius: var(--rl-radius-md);
}

/* قائمة مراحل العمل المرقّمة. */
.rl-process-list {
	counter-reset: rl-step;
}

.rl-process-list > li {
	counter-increment: rl-step;
}

.rl-process-list > li::before {
	content: counter(rl-step, decimal-leading-zero);
	font-weight: 800;
	color: var(--rl-color-primary);
}

/* شبكة المشاريع (Bento مع بطاقة كبيرة). */
.rl-project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 255px;
	gap: 16px;
}

.rl-project-grid .rl-project-large {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 1080px) {
	.rl-project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 760px) {
	.rl-project-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.rl-project-grid .rl-project-large {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ==========================================================================
   5. RTL/LTR — الأرقام والروابط اللاتينية تبقى LTR
   ========================================================================== */

.rl-ltr,
.rl-ltr a,
.rl-ltr span {
	direction: ltr;
	unicode-bidi: isolate;
}

/* رقم الهاتف في التذييل يبقى LTR. */
footer .rl-phone,
footer a[href^="https://wa.me/"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
   5.5. تجاوزات Blocksy (محاكاة الرأس الزجاجي اللاصق وغيرها)
   ========================================================================== */

/*
 * Blocksy يبني الرأس عبر Header Builder. هذه التجاوزات تضمن مطابقة الـ Header
 * لهوية روم لاين: لاصق + زجاجي + خلفية شبه شفافة + blur.
 *
 * الإعداد الأساسي يُفعَّل في Customizer (راجع STAGE-3-GUIDE.md)، لكن هنا نضمن
 * القيم الحرجة في حال لم تُضبط يدويًا أو بعد تحديث Blocksy.
 */

/* الرأس اللاصق الزجاجي — محاكاة style.css:200-208 الأصلي. */
header[data-sticky],
.ct-header-sticky,
header.sticked,
header[class*="sticky"] {
	background: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
}

/* تقليل الظل الزائد في Blocksy للرأس ليطابق الهدوء الأصلي. */
header[data-sticky] {
	border-bottom: 1px solid rgba(231, 225, 220, 0.6);
}

/* محاذاة عمودية لرأس Blocksy ليطابق min-height: 78px الأصلي. */
.ct-header .ct-header-inner-row > div {
	min-height: 78px;
}

@media (max-width: 760px) {
	.ct-header .ct-header-inner-row > div {
		min-height: 68px;
	}
}

/*
 * روابط القائمة في Blocksy — محاكاة الـ hover الأحمر.
 * style.css الأصلي: 280-284.
 */
header .ct-menu > li > a,
header .menu > li > a {
	color: #141414;
	font-weight: 700;
	font-size: 0.95rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: color var(--rl-transition-fast), background-color var(--rl-transition-fast);
	border-radius: var(--rl-radius-sm);
	padding: 8px 10px;
}

header .ct-menu > li > a:hover,
header .menu > li > a:hover,
header .ct-menu > li.current-menu-item > a,
header .menu > li.current-menu-item > a {
	color: var(--rl-color-primary);
	background: rgba(237, 31, 37, 0.08);
}

/* لون خلفية الـ Hero المحاكي للقسم الداكن. */
.ct-section-dark,
.rl-section-dark {
	background: var(--rl-color-dark);
	color: #fff;
}

/* خط Tahoma قسريًا في عناصر Blocksy (يقاوم خط Blocksy الافتراضي). */
.ct-section,
.ct-container,
.ct-header,
.ct-footer,
.entry-content,
.wp-block {
	font-family: var(--rl-font) !important;
}

/* تجاوز الشعار: عرض مطابق للأصل (158px desktop / 132px mobile). */
header .custom-logo,
header .site-logo img {
	max-height: 52px;
	width: auto;
}

@media (max-width: 760px) {
	header .custom-logo,
	header .site-logo img {
		max-height: 44px;
	}
}

/*
 * تذييل Blocksy — محاكاة التذييل البسيط الأسود الأصلي.
 * style.css:1736-1758.
 */
footer.ct-footer,
.site-footer {
	background: #000000 !important;
	color: rgba(255, 255, 255, 0.78);
	padding-block: 24px;
}

footer.ct-footer a,
.site-footer a {
	color: rgba(255, 255, 255, 0.78);
}

/* رقم الهاتف في التذييل يبقى LTR. */
footer.ct-footer .rl-phone,
footer.ct-footer a[href^="tel:"],
footer.ct-footer a[href^="https://wa.me/"],
.site-footer a[href^="tel:"],
.site-footer a[href^="https://wa.me/"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
   5.7. أنماط الرأس والتذييل (Block Patterns من المرحلة 4)
   ========================================================================== */

/*
 * هذه الأنماط تُستهلك من Header Builder في Blocksy أو من قوالب الصفحات.
 * كل كلاس يطابق نمطًا من مجلد patterns/.
 */

/* --------------------------------------------------------------------------
   زر واتساب (.rl-whatsapp-button)
   -------------------------------------------------------------------------- */

.rl-whatsapp-button .wp-block-button__link {
	background: var(--rl-color-primary);
	color: #fff;
	font-weight: 700;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: var(--rl-radius-sm);
	box-shadow: var(--rl-shadow-button);
	transition: transform var(--rl-transition-fast),
	            box-shadow var(--rl-transition-fast),
	            background-color var(--rl-transition-fast);
}

.rl-whatsapp-button .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: var(--rl-color-primary-dark);
	box-shadow: 0 16px 30px rgba(237, 31, 37, 0.28);
}

/* الزر الصغير في الرأس (حجم مدمج). */
.rl-whatsapp-button.rl-btn-small .wp-block-button__link,
header .wp-block-button__link {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   عنوان القسم (.rl-section-heading, .rl-eyebrow, .rl-section-title)
   -------------------------------------------------------------------------- */

.rl-section-heading {
	max-width: 720px;
	margin-bottom: 38px;
}

/* العنوان الفرعي (.eyebrow) — معرّف مسبقًا، هنا نضيف للمجموعة. */
.rl-section-heading .rl-eyebrow {
	margin-bottom: 14px;
}

.rl-section-heading .rl-section-title {
	font-size: var(--wp--preset--font-size--x-large, clamp(1.9rem, 3vw, 3rem));
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 16px;
}

.rl-section-heading .rl-section-lead {
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
	color: var(--rl-color-muted);
	max-width: 680px;
}

/* --------------------------------------------------------------------------
   قسم التواصل CTA (.rl-contact-cta)
   -------------------------------------------------------------------------- */

.rl-contact-cta {
	background: var(--rl-color-dark);
	color: #fff;
	padding-block: 78px;
}

.rl-contact-cta h1,
.rl-contact-cta h2,
.rl-contact-cta h3 {
	color: #fff;
}

.rl-contact-cta p {
	color: rgba(255, 255, 255, 0.78);
}

.rl-contact-cta .rl-eyebrow {
	/* يبقى أحمر (موروث) لكن نضمن التباين. */
}

.rl-contact-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.rl-contact-content {
	flex: 1 1 360px;
}

.rl-contact-content h2 {
	margin-bottom: 16px;
}

.rl-contact-details {
	margin-top: 18px;
	font-size: 0.95rem;
}

.rl-contact-details a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	transition: border-color var(--rl-transition-fast);
}

.rl-contact-details a:hover {
	border-color: var(--rl-color-primary);
}

/* زر CTA كبير على الخلفية الداكنة. */
.rl-contact-cta .wp-block-button__link {
	background: var(--rl-color-primary);
	color: #fff;
	font-weight: 700;
	min-height: 52px;
	padding: 14px 28px;
	font-size: 1.05rem;
	box-shadow: var(--rl-shadow-button);
}

.rl-contact-cta .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: var(--rl-color-primary-dark);
	box-shadow: 0 16px 30px rgba(237, 31, 37, 0.4);
}

@media (max-width: 760px) {
	.rl-contact-box {
		flex-direction: column;
		align-items: flex-start;
	}
	.rl-contact-cta {
		padding-block: 60px;
	}
}

/* --------------------------------------------------------------------------
   التذييل البسيط (.rl-footer-simple)
   -------------------------------------------------------------------------- */

.rl-footer-simple {
	background: #000;
	color: rgba(255, 255, 255, 0.78);
	padding-block: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.rl-footer-copy {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.92rem;
	margin: 0;
}

.rl-footer-phone {
	margin: 0;
}

.rl-footer-phone a {
	color: rgba(255, 255, 255, 0.78);
	direction: ltr;
	unicode-bidi: isolate;
	transition: color var(--rl-transition-fast);
}

.rl-footer-phone a:hover {
	color: var(--rl-color-primary);
}

@media (max-width: 760px) {
	.rl-footer-simple {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   5.8. أنماط أقسام الصفحات (Block Patterns من المرحلة 5)
   ========================================================================== */

/*
 * كل مجموعة من القواعد هنا تطابق قسمًا واحدًا من الموقع الأصلي.
 * القيم مأخوذة حرفيًا من assets/css/style.css (هوية روم لاين المرجعية)
 * لإعادة إنتاج الهوية بأقصى دقة ممكنة داخل كتل Gutenberg.
 *
 * الأقسام المغطّاة:
 *   - .rl-hero             : واجهة الصفحة الرئيسية (style.css:286-386)
 *   - .rl-page-hero        : واجهة الصفحات الداخلية (style.css:1294-1340)
 *   - .rl-about-split      : قسم من نحن المقسوم (style.css:415-431)
 *   - .rl-services-section : شبكة الخدمات الأربع (style.css:432-542)
 *   - .rl-why-section      : لماذا روم لاين الداكن (style.css:544-682)
 *   - .rl-process-section  : قائمة مراحل العمل (style.css:684-700)
 *   - .rl-projects-section : شبكة المشاريع Bento (style.css:702-865)
 *   - .rl-testimonials     : آراء العملاء الداكن (style.css:1231-1261)
 *   - .rl-faq-section      : الأسئلة الشائعة (style.css:1263-1292)
 */

/* مسافة عمودية موحّدة للأقسام (مطابقة لـ .section { padding-block: 88px }). */
.rl-section {
	padding-block: 88px;
}

@media (max-width: 760px) {
	.rl-section {
		padding-block: 60px;
	}
}

/* --------------------------------------------------------------------------
   الواجهة الرئيسية Hero (.rl-hero)
   style.css:286-386 — خلفية صورة + تدرج داكن + لوحة جانبية بثلاث خطوات.
   -------------------------------------------------------------------------- */

.rl-hero {
	position: relative;
	min-height: calc(100dvh - 78px);
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	/*
	 * الخلفية الأصلية تستخدم theater-commercial-facade.jpeg.
	 * الصور تُرفع في المرحلة 7؛ حتى ذلك الحين نستخدم لونًا داكنًا متدرجًا
	 * يحافظ على إحساس الـ Hero. يمكن للمالك تغيير صورة الخلفية من Gutenberg.
	 */
	background:
		linear-gradient(135deg, #090909 0%, #1b0d0e 60%, #121212 100%);
}

/* تلاشي سفلي للدمج مع القسم التالي (style.css:298-305). */
.rl-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(0deg, rgba(9, 9, 9, 0.72), transparent);
	pointer-events: none;
}

.rl-hero .rl-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
	align-items: end;
	gap: 48px;
	padding-block: 110px 64px;
	width: 100%;
}

.rl-hero-content {
	max-width: 760px;
}

.rl-hero .rl-hero-title {
	max-width: 820px;
	margin-bottom: 22px;
	color: #fff;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2.35rem, 5vw, 5.35rem));
	font-weight: 800;
	line-height: 1.25;
}

.rl-hero-lead {
	max-width: 650px;
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--medium, clamp(1.05rem, 2vw, 1.35rem));
}

.rl-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* الزر الرئيسي في الـ Hero — أحمر قوي. */
.rl-hero-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--rl-color-primary);
	color: #fff;
	min-height: 52px;
	padding: 14px 28px;
	font-size: 1.05rem;
	box-shadow: var(--rl-shadow-button);
}

.rl-hero-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--rl-color-primary-dark);
}

/* الزر الثانوي المخطّط (outline) — شفاف بحد أبيض. */
.rl-hero-actions .is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.42);
	min-height: 52px;
	padding: 14px 28px;
	font-size: 1.05rem;
}

.rl-hero-actions .is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.18);
}

/* اللوحة الجانبية بثلاث خطوات (style.css:361-386). */
.rl-hero-panel {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--rl-radius-md);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: var(--rl-shadow-strong);
}

.rl-hero-step {
	padding: 22px;
	background: rgba(9, 9, 9, 0.62);
}

.rl-hero-step-num {
	display: block;
	margin: 0 0 8px;
	color: var(--rl-color-primary);
	font-size: 1.55rem;
	font-weight: 800;
}

.rl-hero-step-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-weight: 700;
}

@media (max-width: 960px) {
	.rl-hero .rl-hero-grid {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 36px;
		padding-block: 80px 56px;
	}
}

@media (max-width: 760px) {
	.rl-hero {
		min-height: auto;
	}
}

/* --------------------------------------------------------------------------
   واجهة الصفحة الداخلية (.rl-page-hero)
   style.css:1294-1340 — شريط عنوان فوق محتوى الصفحة.
   -------------------------------------------------------------------------- */

.rl-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: 70px 50px;
	color: #fff;
	background:
		linear-gradient(90deg, rgba(9, 9, 9, 0.18), rgba(9, 9, 9, 0.86)),
		linear-gradient(135deg, #090909, #1b0d0e 60%, #121212);
}

.rl-page-hero .rl-eyebrow {
	color: var(--rl-color-primary);
}

.rl-page-hero-title {
	color: #fff;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2.35rem, 5vw, 5.35rem));
	font-weight: 800;
	margin-bottom: 16px;
}

.rl-page-hero-lead {
	max-width: 760px;
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
}

/* --------------------------------------------------------------------------
   قسم من نحن المقسوم (.rl-about-split)
   style.css:415-431 — عمود عنوان + عمود نص مع رابط «اقرأ المزيد».
   -------------------------------------------------------------------------- */

.rl-about-split {
	background: var(--rl-color-surface);
}

.rl-split-layout {
	display: grid;
	grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
	gap: 50px;
	align-items: start;
}

.rl-split-copy p {
	max-width: 760px;
	margin-bottom: 14px;
	font-size: 1.05rem;
}

/* رابط «اقرأ المزيد» على شكل زر نصي محاط (style.css:161-198). */
.rl-text-link {
	margin: 0;
}

.rl-text-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 18px;
	margin-top: 8px;
	border: 1px solid rgba(237, 31, 37, 0.18);
	border-radius: var(--rl-radius-sm);
	color: var(--rl-color-primary);
	background: rgba(237, 31, 37, 0.07);
	font-weight: 800;
	line-height: 1.2;
	box-shadow: 0 10px 22px rgba(237, 31, 37, 0.08);
	transition: transform var(--rl-transition-fast),
	            border-color var(--rl-transition-fast),
	            color var(--rl-transition-fast),
	            background-color var(--rl-transition-fast),
	            box-shadow var(--rl-transition-fast);
}

.rl-text-link a::after {
	content: "←";
	font-size: 1.05rem;
	line-height: 1;
	transition: transform var(--rl-transition-fast);
}

.rl-text-link a:hover,
.rl-text-link a:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(237, 31, 37, 0.32);
	color: var(--rl-color-primary-dark);
	background: rgba(237, 31, 37, 0.11);
	box-shadow: 0 14px 28px rgba(237, 31, 37, 0.14);
}

.rl-text-link a:hover::after,
.rl-text-link a:focus-visible::after {
	transform: translateX(-3px);
}

@media (max-width: 860px) {
	.rl-split-layout {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* --------------------------------------------------------------------------
   شبكة الخدمات (.rl-services-section)
   style.css:432-542 — أربع بطاقات صور مرقّمة مع زر CTA لكل بطاقة.
   -------------------------------------------------------------------------- */

.rl-services-section {
	background: var(--rl-color-surface);
}

/* رأس القسم مع زر جانبي (style.css:392-407). */
.rl-section-heading-actions {
	max-width: none;
}

.rl-section-heading-actions h2 {
	margin-bottom: 0;
}

.rl-services-section .rl-service-grid,
.rl-services-section .rl-service-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.rl-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--rl-color-line);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-surface);
	box-shadow: var(--rl-shadow-soft);
	transition: transform var(--rl-transition-fast), box-shadow var(--rl-transition-fast);
}

.rl-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 60px rgba(20, 20, 20, 0.16);
}

.rl-service-card .rl-service-card-img,
.rl-service-card img {
	width: 100%;
	height: 260px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}

.rl-service-card .rl-service-card-img {
	margin: 0;
	padding: 0;
}

.rl-service-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}

.rl-service-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	width: fit-content;
	height: 44px;
	padding: 0 12px;
	margin: 0 0 16px;
	border-radius: 999px;
	color: var(--rl-color-primary);
	background: rgba(237, 31, 37, 0.08);
	font-weight: 800;
}

.rl-service-card-body h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-weight: 800;
}

.rl-service-card-body > p:not(.rl-service-card-cta) {
	flex: 1;
	margin-bottom: 0;
}

/* زر «عرض تفاصيل الخدمة» داخل البطاقة (style.css:505-542). */
.rl-service-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	margin-top: 20px;
	border: 1px solid rgba(237, 31, 37, 0.16);
	border-radius: var(--rl-radius-sm);
	color: var(--rl-color-primary);
	background: rgba(237, 31, 37, 0.07);
	font-weight: 800;
	line-height: 1.2;
	transition: transform var(--rl-transition-fast),
	            border-color var(--rl-transition-fast),
	            color var(--rl-transition-fast),
	            background-color var(--rl-transition-fast),
	            box-shadow var(--rl-transition-fast);
}

.rl-service-card-cta a {
	color: inherit;
	text-decoration: none;
}

.rl-service-card-cta::after {
	content: "←";
	font-size: 1.05rem;
	line-height: 1;
	transition: transform var(--rl-transition-fast);
}

.rl-service-card:hover .rl-service-card-cta,
.rl-service-card:focus-within .rl-service-card-cta {
	transform: translateY(-2px);
	border-color: rgba(237, 31, 37, 0.32);
	color: #fff;
	background: var(--rl-color-primary);
	box-shadow: 0 14px 28px rgba(237, 31, 37, 0.2);
}

.rl-service-card:hover .rl-service-card-cta::after,
.rl-service-card:focus-within .rl-service-card-cta::after {
	transform: translateX(-3px);
}

@media (max-width: 1080px) {
	.rl-services-section .rl-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.rl-services-section .rl-service-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   قسم لماذا روم لاين (.rl-why-section) — داكن مع شبكة مميزات وصورة.
   style.css:544-682.
   -------------------------------------------------------------------------- */

.rl-why-section {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 18% 18%, rgba(237, 31, 37, 0.18), transparent 32%),
		linear-gradient(135deg, #090909 0%, #121212 48%, #1b0d0e 100%);
}

/* شبكة خفيفة كزخرفة (style.css:553-563). */
.rl-why-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 72%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 72%);
	pointer-events: none;
}

.rl-why-section .rl-why-grid,
.rl-why-section .rl-why-grid.wp-block-columns {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
	gap: 40px;
	align-items: center;
}

.rl-why-section h2,
.rl-why-section h3 {
	color: #fff;
}

.rl-why-section p {
	color: rgba(255, 255, 255, 0.72);
}

.rl-why-section .rl-section-heading {
	max-width: 760px;
}

.rl-why-section .rl-section-lead {
	max-width: 680px;
	margin-bottom: 0;
	font-size: 1.05rem;
}

.rl-why-section .rl-feature-grid,
.rl-why-section .rl-feature-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 30px;
}

/* بطاقة الميزة الداكنة (style.css:605-642). */
.rl-feature-card {
	position: relative;
	overflow: hidden;
	padding: 26px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--rl-radius-md);
	background: rgba(25, 25, 25, 0.78);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
	transition: transform var(--rl-transition-fast),
	            border-color var(--rl-transition-fast),
	            background-color var(--rl-transition-fast);
}

.rl-feature-card::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: var(--rl-color-primary);
}

.rl-feature-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	width: fit-content;
	height: 42px;
	padding: 0 12px;
	margin: 0 0 16px;
	border: 1px solid rgba(237, 31, 37, 0.34);
	border-radius: 999px;
	color: #fff;
	background: rgba(237, 31, 37, 0.16);
	font-weight: 800;
}

.rl-feature-card h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
}

.rl-feature-card p {
	margin-bottom: 0;
}

.rl-feature-card:hover {
	transform: translateY(-4px);
	border-color: rgba(237, 31, 37, 0.36);
	background: rgba(29, 29, 29, 0.92);
}

/* الصورة الجانبية مع تدرج وتسمية (style.css:644-682). */
.rl-why-media {
	position: relative;
	min-width: 0;
}

.rl-why-img {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-dark-soft);
	box-shadow: var(--rl-shadow-strong);
}

.rl-why-img img {
	width: 100%;
	height: clamp(260px, 34vw, 420px);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rl-why-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(9, 9, 9, 0.78));
	pointer-events: none;
}

.rl-why-img figcaption {
	position: absolute;
	inset-inline: 20px;
	inset-block-end: 20px;
	z-index: 1;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--rl-radius-sm);
	color: #fff;
	background: rgba(9, 9, 9, 0.72);
	font-weight: 800;
	line-height: 1.45;
}

@media (max-width: 1080px) {
	.rl-why-section .rl-why-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 620px) {
	.rl-why-section .rl-feature-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   قائمة مراحل العمل (.rl-process-section)
   style.css:684-700 — أربع خطوات في شبكة أفقية.
   -------------------------------------------------------------------------- */

.rl-process-section {
	background: var(--rl-color-soft);
}

.rl-process-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.rl-process-step {
	min-height: 100%;
	padding: 26px;
	border: 1px solid var(--rl-color-line);
	border-radius: var(--rl-radius-md);
	background: #fff;
}

/* الرقم داخل كل خطوة — فقاعة حمراء فاتحة (style.css:477-489). */
.rl-process-section .rl-process-list {
	counter-reset: rl-step;
}

.rl-process-step {
	counter-increment: rl-step;
	position: relative;
}

.rl-process-step h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	font-weight: 800;
}

.rl-process-step p {
	margin-bottom: 0;
}

/* رقم تلقائي أعلى كل خطوة (يظهر إن لم يُكتب يدويًا). */
.rl-process-step::before {
	content: counter(rl-step, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	width: fit-content;
	height: 44px;
	padding: 0 12px;
	margin-bottom: 16px;
	border-radius: 999px;
	color: var(--rl-color-primary);
	background: rgba(237, 31, 37, 0.08);
	font-weight: 800;
}

@media (max-width: 960px) {
	.rl-process-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.rl-process-list {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   شبكة المشاريع Bento (.rl-projects-section)
   style.css:702-865 — بطاقة كبيرة + ثلاث بطاقات أصغر مع طبقة تمرير.
   -------------------------------------------------------------------------- */

.rl-projects-section {
	background:
		linear-gradient(180deg, #fff 0%, #fff 44%, var(--rl-color-soft) 44%, var(--rl-color-soft) 100%);
}

/* زر «مشاهدة كل المشاريع» (style.css:707-724). */
.rl-projects-section-cta a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border: 2px solid var(--rl-color-primary);
	border-radius: 100px;
	color: var(--rl-color-primary);
	font-weight: 700;
	font-size: 0.92rem;
	white-space: nowrap;
	transition: background var(--rl-transition-fast), color var(--rl-transition-fast);
}

.rl-projects-section-cta a:hover {
	background: var(--rl-color-primary);
	color: #fff;
}

.rl-project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 255px;
	gap: 16px;
}

.rl-project-item {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-dark);
	box-shadow: 0 18px 44px rgba(20, 20, 20, 0.12);
	transition: box-shadow 300ms ease, transform 300ms ease;
}

.rl-project-large {
	grid-column: span 2;
	grid-row: span 2;
}

/* تدرج داكن فوق الصورة (style.css:762-771). */
.rl-project-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.1) 48%, rgba(20, 20, 20, 0.72) 100%);
	pointer-events: none;
	transition: opacity 300ms ease;
}

.rl-project-item figure,
.rl-project-item img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.rl-project-item img {
	object-fit: cover;
	opacity: 0.96;
	transition: transform 380ms ease, opacity 380ms ease;
}

.rl-project-item:hover,
.rl-project-item:focus-within {
	box-shadow: 0 28px 60px rgba(20, 20, 20, 0.24);
	transform: translateY(-5px);
}

.rl-project-item:hover::after,
.rl-project-item:focus-within::after {
	opacity: 0.4;
}

.rl-project-item:hover img,
.rl-project-item:focus-within img {
	transform: scale(1.06);
	opacity: 0.82;
}

/* شارة التصنيف أسفل يسار الصورة (style.css:798-823). */
.rl-project-caption {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-end: 16px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin: 0;
	padding: 7px 14px;
	border-radius: 100px;
	color: #fff;
	background: var(--rl-color-primary);
	box-shadow: 0 6px 20px rgba(237, 31, 37, 0.38);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.4;
	transition: background 260ms ease, transform 260ms ease;
}

.rl-project-item:hover .rl-project-caption,
.rl-project-item:focus-within .rl-project-caption {
	background: var(--rl-color-primary-dark);
	transform: translateY(-2px);
}

@media (max-width: 1080px) {
	.rl-project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 760px) {
	.rl-project-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.rl-project-large {
		grid-column: auto;
		grid-row: auto;
	}
	.rl-project-item {
		min-height: 260px;
	}
}

/* --------------------------------------------------------------------------
   آراء العملاء (.rl-testimonials-section) — داكن.
   style.css:1231-1261.
   -------------------------------------------------------------------------- */

.rl-testimonials-section {
	background: var(--rl-color-dark);
	color: #fff;
}

.rl-testimonials-section h2 {
	color: #fff;
}

.rl-testimonials-section .rl-testimonial-grid,
.rl-testimonials-section .rl-testimonial-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.rl-testimonial blockquote,
.rl-testimonials-section blockquote {
	margin: 0;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--rl-radius-md);
	background: var(--rl-color-dark-soft);
	box-shadow: none;
}

.rl-testimonial p,
.rl-testimonials-section blockquote p {
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.03rem;
}

.rl-testimonial cite,
.rl-testimonials-section blockquote cite {
	color: #fff;
	font-style: normal;
	font-weight: 800;
}

@media (max-width: 960px) {
	.rl-testimonials-section .rl-testimonial-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   الأسئلة الشائعة (.rl-faq-section) — خلفية بديلة دافئة.
   style.css:1263-1292.
   -------------------------------------------------------------------------- */

.rl-faq-section {
	background: var(--rl-color-soft);
}

.rl-faq-layout,
.rl-faq-layout.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
	gap: 44px;
	align-items: start;
}

.rl-faq-list {
	display: grid;
	gap: 14px;
}

.rl-faq-list details {
	border: 1px solid var(--rl-color-line);
	border-radius: var(--rl-radius-md);
	background: #fff;
	box-shadow: 0 10px 24px rgba(20, 20, 20, 0.05);
}

.rl-faq-list summary {
	min-height: 58px;
	padding: 18px 22px;
	color: var(--rl-color-ink);
	font-weight: 800;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* مؤشر فتح/إغلاق مخصص (سهم بدل المثلث الافتراضي). */
.rl-faq-list summary::-webkit-details-marker {
	display: none;
}

.rl-faq-list summary::after {
	content: "+";
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--rl-color-primary);
	transition: transform var(--rl-transition-fast);
}

.rl-faq-list details[open] summary::after {
	content: "−";
}

.rl-faq-list summary:hover {
	color: var(--rl-color-primary);
}

.rl-faq-list p {
	padding: 0 22px 20px;
	margin-bottom: 0;
	color: var(--rl-color-muted);
}

@media (max-width: 860px) {
	.rl-faq-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ==========================================================================
   6. الوصول (a11y) وحركة مخفّضة
   ========================================================================== */

/* حلقة تركيز واضحة باللون الأحمر. */
:focus-visible {
	outline: 3px solid rgba(237, 31, 37, 0.35);
	outline-offset: 4px;
}

/* احترام تفضيل تقليل الحركة. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* اختيار النص باللون الأحمر. */
::selection {
	background: var(--rl-color-primary);
	color: #fff;
}

/* منع التمرير الأفقي. */
html,
body {
	overflow-x: hidden;
}