/* ===================================================== RTL / ARABIC LAYER Loaded only when the active language is Arabic (WordPress is_rtl() === true -> ). Overrides directional rules from main.css / responsive.css. ===================================================== */ [dir="rtl"] body { text-align: right; } /* Arabic reads better with slightly looser line-height for body copy */ [dir="rtl"] .hero-personal__description, [dir="rtl"] .service-row__content p, [dir="rtl"] .about-section__text p, [dir="rtl"] .why-item p, [dir="rtl"] .faq-item__answer, [dir="rtl"] p { line-height: 1.9; } /* Latin letter-spacing looks wrong on Arabic — remove it on eyebrows/labels */ [dir="rtl"] .hero-personal__eyebrow, [dir="rtl"] .services-showcase__eyebrow, [dir="rtl"] .section-heading__eyebrow, [dir="rtl"] .client-logos__eyebrow, [dir="rtl"] .hero-personal__strip { letter-spacing: 0; } /* ---- Hero: orange accent bar moves to the right side ---- */ [dir="rtl"] .hero-personal__description { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 2px solid rgba(255, 106, 0, .8); } /* ---- Hero eyebrow / capability strip dividers ---- */ [dir="rtl"] .hero-personal__strip { padding-left: 0; padding-right: 18px; margin-left: 4px; margin-right: 0; border-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); } /* ---- Hero portrait badges: swap the left/right anchored ones ---- */ [dir="rtl"] .hero-personal__badge--role { left: auto; right: -10px; } [dir="rtl"] .hero-personal__badge--network { right: auto; left: -12px; } /* ---- Service rows: number/arrow sit on the mirrored side ---- */ [dir="rtl"] .service-row__link { transform: scaleX(-1); /* flip the arrow glyph to point right-to-left */ } /* ---- Generic left-auto margins used for pushing items to one edge ---- */ [dir="rtl"] .site-brand { margin-left: 0; margin-right: auto; } /* ---- Client logos: let the marquee travel the other way (optional, feels native in RTL) ---- */ [dir="rtl"] .client-logos__track { animation-direction: reverse; } /* ---- Floating WhatsApp button: move to bottom-left in RTL ---- */ [dir="rtl"] .whatsapp-float { right: auto; left: 24px; } @media (max-width: 700px) { [dir="rtl"] .whatsapp-float { right: auto; left: 14px; } } /* ---- Any list bullets / paddings that used the left edge ---- */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.2em; } /* ---- Numbers / links must stay LTR even in RTL context ---- Fixes the phone number ("+961 70 351 182") rendering wrong in the Arabic footer: the + sign and digit groups get reordered by the bidi algorithm unless we isolate them. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href*="wa.me"], [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }