/*
 * Content Khana — RTL stylesheet (Arabic).
 *
 * WordPress loads this file automatically when the current locale is RTL
 * (see is_rtl()), so no enqueue is needed in functions.php.
 *
 * 1. Cairo (self-hosted variable font, arabic + latin subsets) replaces
 *    Manrope/Inter for Arabic — neither supports Arabic glyphs.
 * 2. Physical left/right utilities used by a few decorative/absolute
 *    elements are mirrored.
 * 3. Swiper sliders run in RTL mode via the dir attribute (Swiper reads
 *    document direction automatically).
 */

/* ---- 1. Cairo variable font (self-hosted, no CDN) ---- */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/cairo/cairo-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('assets/fonts/cairo/cairo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F;
}

/* Headings + body use Cairo when the page is RTL. */
body.rtl,
body.rtl button,
body.rtl input,
body.rtl select,
body.rtl textarea {
	--ck-font: "Cairo", "Inter", ui-sans-serif, system-ui, Tahoma, sans-serif;
	--ck-font-heading: "Cairo", "Manrope", ui-sans-serif, system-ui, Tahoma, sans-serif;
	--ck-font-body: "Cairo", "Inter", ui-sans-serif, system-ui, Tahoma, sans-serif;
	font-family: var(--ck-font);
}

/* Arabic reads better with slightly tighter heavy weights + normal letter spacing. */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl .font-black {
	letter-spacing: 0 !important;
}

/* Some templates set font-family:'Inter' inline — Cairo must win for Arabic. */
body.rtl input,
body.rtl select,
body.rtl textarea,
body.rtl .ck-form__input {
	font-family: var(--ck-font) !important;
}

/* Uppercase tracking looks broken in Arabic script — neutralize it. */
body.rtl .uppercase {
	letter-spacing: 0.02em;
}

/* ---- 2. Mirrored physical utilities (decorative/absolute only) ---- */

/* Site header is full-width: keep it pinned to the inline-start instead. */
body.rtl .ck-site-header {
	left: auto;
	right: 0;
}

/* Hero scattered micro-labels were absolutely placed for LTR — mirror them. */
body.rtl #hero-main .absolute.top-1\/3.right-16 {
	right: auto;
	left: 4rem;
	text-align: left;
}
body.rtl #hero-main .absolute.bottom-32.right-1\/3 {
	right: auto;
	left: 33.333333%;
	text-align: left;
}
body.rtl #hero-main .absolute.bottom-28.right-10 {
	right: auto;
	left: 2.5rem;
}

/* Copy column padding was LTR-biased (pl-10 pr-6) — flip on large screens. */
@media (min-width: 1024px) {
	body.rtl #hero-main .pl-10 {
		padding-left: 2.5rem;
		padding-right: 6rem;
	}
}

/* Hero decorative leaf sits bottom-left in LTR — move to bottom-right. */
body.rtl #hero-main > svg.absolute.-bottom-2.left-0 {
	left: auto;
	right: 0;
	transform: scaleX(-1);
}

/* Blog card badge + art arrow were LTR-placed. */
body.rtl .absolute.top-4.left-4 {
	left: auto;
	right: 1rem;
}

/* Form inputs inherit alignment — Arabic text starts from the right. */
body.rtl .ck-form__input,
body.rtl input,
body.rtl textarea {
	text-align: right;
}
body.rtl input::placeholder,
body.rtl textarea::placeholder {
	text-align: right;
}

/* WhatsApp FAB mirrors to the left in RTL. */
body.rtl .ck-whatsapp-fab {
	right: auto;
	left: 1.25rem;
}
@media (min-width: 640px) {
	body.rtl .ck-whatsapp-fab {
		left: 2rem;
	}
}

/* Numeric/phone strings stay LTR inside RTL text. */
body.rtl a[href^="tel:"],
body.rtl a[href^="https://wa.me"] {
	direction: ltr;
	unicode-bidi: embed;
}

/* Swiper: let slides flow RTL (Swiper auto-detects dir="rtl" on <html>). */
body.rtl .swiper {
	direction: rtl;
}

/* ---- 3. Section-level mirroring (added after RTL review) ---- */

/* Big faded section numbers + micro-labels pinned to the physical right in LTR. */
body.rtl section > .absolute.top-16.right-8 {
	right: auto;
	left: 2rem;
}
@media (min-width: 768px) {
	body.rtl section > .absolute.top-16.md\:right-16 {
		right: auto;
		left: 4rem;
	}
}
body.rtl section > .absolute.top-16.left-8 {
	left: auto;
	right: 2rem;
}
/* Absolute micro-labels pinned to the physical right (hero/about/portfolio/CTA). */
body.rtl section > .absolute[class*="xl:right-16"] {
	right: auto;
	left: 2.5rem;
	text-align: left;
}
@media (min-width: 1280px) {
	body.rtl section > .absolute[class*="xl:right-16"] {
		left: 4rem;
	}
}

/* CTA pill: asymmetric padding + forward arrow point the other way. */
body.rtl #contact a.pl-9 {
	padding-left: 1.75rem;
	padding-right: 2.25rem;
}

/* Hero "play" triangle optical nudge + stats offset. */
body.rtl #hero-main svg.ml-0\.5 {
	margin-left: 0;
	margin-right: 0.125rem;
}
@media (min-width: 768px) {
	body.rtl #hero-main .md\:ml-10 {
		margin-left: 0;
		margin-right: 2.5rem;
	}
}

/* Services list indent. */
@media (min-width: 1024px) {
	body.rtl #services ul.lg\:pl-\[12\%\] {
		padding-left: 0;
		padding-right: 12%;
	}
}

/* Floating nav: the "CK" badge divider sits on the inline-end side. */
body.rtl .floating-nav > span:first-child {
	padding-right: 0;
	margin-right: 0;
	padding-left: 0.75rem;
	margin-left: 0.25rem;
	border-right: 0 !important;
	border-left: 0.5px solid rgba(11, 53, 88, 0.15);
}

/* ---- 4. Fixes from visual review ---- */

/* Directional arrow icons (lucide arrow-right) point the reading direction. */
body.rtl svg:has(> path[d="m12 5 7 7-7 7"]) {
	transform: scaleX(-1);
}

/* Arabic glyphs are taller than Latin: loosen headings and give gradient-clipped
   text room so the top/bottom of letters + dots are not cut off or overlapped. */
body.rtl h1,
body.rtl h2,
body.rtl h3 {
	line-height: 1.35 !important;
}
body.rtl [style*="background-clip:text"] {
	padding-block: 0.12em;
}

/* Wide letter-spacing breaks Arabic letter joining everywhere. */
body.rtl [class*="tracking-"],
body.rtl .uppercase {
	letter-spacing: 0 !important;
}

/* Client logo marquee animates with translateX — keep its track LTR so the
   loop does not run off-screen / blank in RTL. */
body.rtl .ck-logo-marquee,
body.rtl .ck-logo-marquee__row {
	direction: ltr;
}

/* Services "ecosystem" fan: mirror the origin + dot spacing (JS mirrors the curves). */
body.rtl [data-eco-origin] {
	left: 74% !important;
}
body.rtl .ck-eco-dot {
	margin-right: 0;
	margin-left: -6px;
}