/* =========================================================================
   ITEXTRAB – RTL overrides (Arabic)
   Loaded after main.css when the current language is Arabic.
   ========================================================================= */

@font-face {
	font-family: "Cairo";
	src: url("/assets/fonts/Cairo-Variable.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "Cairo";
	src: url("/assets/fonts/Cairo-Latin.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F;
}

body { font-family: "Cairo", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }

/* Arabic must not use negative tracking (breaks joined letters) */
h1, h2, h3, h4, .hero-title, .brand-text, .tag, .ring-num, .ticker span { letter-spacing: 0 !important; }
.brand-text { font-family: "Inter", "Cairo", sans-serif; }
h1, h2 { line-height: 1.35; }
.hero-sub { line-height: 1.6; }
.lead, .panel p, .biz-card p, .cust p, .why p, .svc p { line-height: 1.9; }
.num-item > div, .step4 p { line-height: 1.8; }

/* Directional flips */
.skip-link { left: auto; right: -999px; }
.skip-link:focus { left: auto; right: 8px; }
.progress span { transform-origin: 100% 50%; }
.stats div { border-left: 0; border-right: 2px solid var(--accent); padding: 4px 16px 4px 0; }
.svc:hover { transform: translateX(-8px); }
.prod-card li { padding: 4px 18px 4px 0; }
.prod-card li::before { left: auto; right: 2px; }
.step4 { padding: 0 58px 30px 0; }
.step4::before { left: auto; right: 20px; }
.step4 span { left: auto; right: 0; }
.review dt, .review dd { text-align: right; }
.input-group input { border-radius: 0 9px 9px 0; }
.input-group select { border-radius: 9px 0 0 9px; border-left: 0; border-right: 1px solid rgba(255,255,255,.12); }
.field select { background-position: left 14px center; padding: 12px 14px 12px 36px; }
.to-top { right: auto; left: 22px; }
/* Desktop split layout - keep the same physical arrangement as the LTR pages.
   `dir="rtl"` lays grid columns out right-to-left, which mirrors every section,
   so BOTH the column template and the grid-column assignment are flipped back:
   photo right on About/Products, photo left on Business/Services/Sourcing.
   Scoped to >1024px because the mobile rule is a single column and must not
   be touched. #why is unaffected - its own ID rule forces a single column. */
@media (min-width: 1025px) {
	.split-img-right { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
	.split-img-right .split-media { grid-row: 1; grid-column: 1; }
	.split-img-right .split-text { grid-row: 1; grid-column: 2; }

	.split-img-left { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
	.split-img-left .split-text { grid-row: 1; grid-column: 1; }
	.split-img-left .split-media { grid-row: 1; grid-column: 2; }

	/* Sourcing keeps its narrower 32% photo, on the left. */
	#sourcing { grid-template-columns: minmax(0, 1fr) minmax(0, 32%); }
	#sourcing .split-text { grid-row: 1; grid-column: 1; }
	#sourcing .split-media { grid-row: 1; grid-column: 2; }

	/* #why is a full-bleed single-column section. Its media is absolutely
	   positioned, so it must NOT get a grid placement - an abspos grid child
	   resolves against its grid area, and pointing it at a row/column that does
	   not exist collapses it to zero width. */
	#why { grid-template-columns: minmax(0, 1fr); }
	#why .split-text,
	#why .split-media { grid-row: auto; grid-column: auto; }
}
.btn:hover .icon:last-child { transform: translateX(-3px); }
.nav-toggle { order: 2; }
.header-side { display: flex; align-items: center; gap: 10px; }
.main-nav a:not(.btn)::after { left: 12px; right: 12px; }
.hero-tags, .hero-links { direction: rtl; }
.ring-step:not(:last-child) .ring::after { border-left: 0; border-right: 11px solid var(--ring); right: auto; left: -12px; }

/* Reveal directions - the desktop split layout above now matches the physical
   LTR arrangement, so main.css reveal directions are reused unchanged.
   Only the symmetric customers strip still needs an override. */
.js .customers-strip.reveal-img img { clip-path: inset(0 50% 0 50%); }
@keyframes stepIn { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

/* Mobile: media reveals from top (same as LTR mobile) */
@media (max-width: 1024px) {
	.js .reveal-img img, .js .split-img-left .reveal-img img { clip-path: inset(0 0 100% 0); }
	.split-media::after, .split-img-left .split-media::after { background: linear-gradient(180deg, transparent 50%, var(--bg)) !important; }
	.alt .split-media::after { background: linear-gradient(180deg, transparent 50%, var(--bg-2)) !important; }
}

/* Language switch button – font handling */
.rtl .lang-switch { font-family: "Inter", "Cairo", sans-serif; }
.ltr .lang-switch { font-family: "Cairo", "Inter", sans-serif; }
.rtl .lang-menu { right: auto; left: 0; }
.rtl .lang-menu a { font-family: "Cairo", "Inter", sans-serif; }
.rtl .footer-langs a:first-child { font-family: "Inter", "Cairo", sans-serif; }
.ltr .footer-langs a:last-child { font-family: "Cairo", "Inter", sans-serif; }

@media (max-width: 1024px) {
	.main-nav .lang-switch { margin-top: 18px; font-size: 1.05rem; }
}