/* ========================================================================== theme-rtl.css — RTL Direction Overrides for Arabic Language ============================================================================ Loaded conditionally by inc/enqueue.php only when Polylang language = 'ar'. WordPress/Polylang sets: - - All selectors here are prefixed with [dir="rtl"] to ensure zero impact on LTR languages even if this file is accidentally double-loaded. ========================================================================== */ /* ── 1. Base Body Direction ───────────────────────────────────────────────── */ [dir="rtl"] body { direction: rtl; text-align: right; } /* Unordered / ordered lists */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 18px; } /* Utility float reversals */ [dir="rtl"] .f-left { float: right !important; } [dir="rtl"] .f-right { float: left !important; } /* ── 2. Desktop Navigation Sub-menus ──────────────────────────────────────── */ /* Dropdown caret: was padding-right for arrow room, flip to padding-left */ [dir="rtl"] .main-navigation ul > li.menu-item-has-children > a { padding-right: 0; padding-left: 17px; } /* Arrow icon: was anchored to right:2px, flip to left */ [dir="rtl"] .main-navigation ul > li.menu-item-has-children > a:after { right: auto; left: 2px; } /* Last-child override: was right:0, flip to left */ [dir="rtl"] .main-navigation > ul > li.menu-item-has-children:last-child > a:after { right: auto; left: 0; } /* Dropdown panel: was left:-40px, flip to right */ [dir="rtl"] .main-navigation ul li ul { left: auto; right: -40px; } /* Third-level sub-menus: was left:100%, flip to right */ [dir="rtl"] .main-navigation ul li ul ul { left: auto; right: 100%; } /* Sub-menu item text alignment */ [dir="rtl"] .main-navigation ul li li a { text-align: right; } /* Sub-menu item "//" prefix marker: was left:0, flip to right */ [dir="rtl"] .main-navigation ul li li a:before { left: auto; right: 0; } /* Sub-menu hover indent: was padding-left, flip to padding-right */ [dir="rtl"] .main-navigation ul ul li.current-menu-ancestor > a { padding-left: 0; padding-right: 12px; } /* ── 3. Language Switcher Dropdown ────────────────────────────────────────── */ /* * The .lang-switcher .sub-menu inherits .main-navigation ul li ul (left:-40px). * In RTL the menu items flow right-to-left so align the dropdown to the right * edge of its trigger instead. * * TODO: Test in browser — if dropdown clips off-screen adjust right value. */ [dir="rtl"] .lang-switcher .sub-menu { left: auto; right: 0; } /* ── 4. Mobile Header ─────────────────────────────────────────────────────── */ /* Logo was float:left, flip to float:right */ [dir="rtl"] .header_mobile .mlogo_wrapper .mobile_logo { float: right; } /* Hamburger button was on the right (default), place it on the left */ [dir="rtl"] #mmenu_toggle { float: left; } /* Mobile lang switcher flat links: right-align text */ [dir="rtl"] .mobile-lang-switcher { text-align: right; } [dir="rtl"] .mobile-lang-switcher a { display: block; text-align: right; } /* ── 5. Page Header Banner & Breadcrumbs ──────────────────────────────────── */ /* Page title padding: was 10px 20px 10px 0, flip the asymmetric side */ [dir="rtl"] .page-header .page-title { padding: 10px 0 10px 20px; } /* Breadcrumb list: right-align */ [dir="rtl"] .page-header .breadcrumbs { direction: rtl; text-align: right; } /* * Breadcrumb separator: The :before pseudo-element uses FontAwesome chevron-right * (→). In RTL the visual flow is reversed so chevron-right still reads correctly * as a forward-direction separator when text flows right-to-left. * However the margin spacing needs mirroring. * * TODO: If the separator looks wrong in browser, update sencorp_breadcrumbs() * in inc/helpers.php to output ‹ when pll_current_language() === 'ar'. */ [dir="rtl"] .page-header .breadcrumbs li:before { margin: -3px 0 0 8px; /* was: -3px 8px 0 0 (right-then-left → left-then-right) */ } /* ── 6. Contact Info Boxes (.contact-info) ────────────────────────────────── */ /* * Used in: contact-page.php (box-style1) and footer.html (box-style2). * LTR: icon floats left, text has padding-left:50px to clear the icon. * RTL: icon floats right, text has padding-right:50px. */ [dir="rtl"] .contact-info i, [dir="rtl"] .contact-info img { float: right; } [dir="rtl"] .contact-info .info-text { padding-left: 0; padding-right: 50px; text-align: right; } /* ── 7. Icon Box S2 (solutions-grid, services patterns) ──────────────────── */ /* * .icon-box-s2.s1 — icon floats left beside text. * .icon-box-s2.s3 — icon floats right beside text (already "RTL-like" in LTR). */ [dir="rtl"] .icon-box-s2.s1 .icon-main, [dir="rtl"] .icon-box-s2.s3 .icon-main { float: right; } [dir="rtl"] .icon-box-s2.s1 .content-box, [dir="rtl"] .icon-box-s2.s3 .content-box { padding-left: 0; padding-right: 75px; text-align: right; } /* .s3 overrides that assumed LTR — reset to match RTL intent */ [dir="rtl"] .icon-box-s2.s3 .content-box { text-align: right; } /* ── 8. Service Box (services-intro pattern) ──────────────────────────────── */ [dir="rtl"] .service-box .icon-main { float: right; } [dir="rtl"] .service-box .content-box { padding-left: 0; padding-right: 73px; text-align: right; } /* ── 9. Serv-Box Cards (services-intro section) ───────────────────────────── */ [dir="rtl"] .serv-box .content-box { text-align: right; } [dir="rtl"] .serv-box .icon-main { right: inherit; left: -88px; } [dir="rtl"] .serv-box .icon-main span { right: 40px; } [dir="rtl"] .serv-box .content-box > h5 { padding-right: 0; padding-left: 60px; } /* [dir="rtl"] .serv-box .content-box ul li:hover a { padding-left: 0; padding-right: 15px; } */ /* ── 10. Technology Counters (.technology-v3 / .ot-counter) ──────────────── */ [dir="rtl"] .ot-counter span.num, [dir="rtl"] .ot-counter h6 { padding-left: 0; padding-right: 20px; } /* Two-column layout: tech content was margin-right:60px, flip */ [dir="rtl"] .technology-v3-left { margin-right: 0; margin-left: 60px; } /* Tech image grid text overlays */ [dir="rtl"] .technology-v3 .box-overlay { text-align: right; } /* ── 11. OT Heading (section eyebrow + title) ─────────────────────────────── */ [dir="rtl"] .ot-heading { direction: rtl; text-align: right; } [dir="rtl"] .ot-heading span { text-align: right; } /* ── 12. Hero Section (.top-v3) ───────────────────────────────────────────── */ [dir="rtl"] .top-v3 .top-heading { text-align: right; } [dir="rtl"] .top-v3 .ot-heading { text-align: right; } /* Tech shortcut boxes in hero row */ [dir="rtl"] .tech-box { direction: rtl; text-align: center; } [dir="rtl"] .tech-box .icon-main { text-align: center; } /* ── 13. Solutions Grid & Services Intro ─────────────────────────────────── */ [dir="rtl"] .services-v3 { direction: rtl; } [dir="rtl"] .site-intro { direction: rtl; text-align: right; } /* ── 14. Consultation CTA & CTA-Build ────────────────────────────────────── */ [dir="rtl"] .section-consultation, [dir="rtl"] .cta { direction: rtl; text-align: right; } /* ── 15. Footer (.footer-v2) ──────────────────────────────────────────────── */ [dir="rtl"] .site-footer { direction: rtl; text-align: right; } /* Footer nav list items */ [dir="rtl"] .site-footer ul { padding-left: 0; padding-right: 0; text-align: right; } /* Copyright text */ /* [dir="rtl"] .copyright-text { text-align: right; } */ /* Footer contact boxes use .box-style2 — centered, no float issues */ /* .box-style2 uses text-align:center so no float flip needed */ /* Footer nav item spacing */ [dir="rtl"] .site-footer .menu li { text-align: right; } /* ── 16. Buttons & CTA Links ──────────────────────────────────────────────── */ /* * Arrow icons inside buttons (→) need flipping or the margin needs reversing. * TODO: If Flaticon arrow icons point the wrong way in RTL, add: * [dir="rtl"] .btn-details i { transform: scaleX(-1); } * to mirror them horizontally. */ [dir="rtl"] .btn-details i, [dir="rtl"] .btn-details:hover i { margin-right: 0; margin-left: 8px; } [dir="rtl"] .octf-btn i, [dir="rtl"] .octf-btn:hover i { margin-right: 0; margin-left: 8px; } /* ── 17. Owl Carousel RTL ─────────────────────────────────────────────────── */ /* * Owl Carousel JS RTL is enabled via sencorpData.isRtl in theme.js. * rtl: sencorpData.isRtl is passed to all three .owlCarousel() inits. * These CSS rules ensure the stage direction and arrow icons are mirrored. */ [dir="rtl"] .owl-carousel { direction: rtl; } [dir="rtl"] .owl-carousel .owl-stage-outer { direction: rtl; } /* Swap prev/next arrow visual icon rotation */ [dir="rtl"] .owl-carousel .owl-nav .owl-prev i { transform: scaleX(-1); display: inline-block; } [dir="rtl"] .owl-carousel .owl-nav .owl-next i { transform: scaleX(-1); display: inline-block; } /* ── 18. WPForms Contact Form ─────────────────────────────────────────────── */ [dir="rtl"] .wpforms-form { direction: rtl; text-align: right; } [dir="rtl"] .wpforms-form input, [dir="rtl"] .wpforms-form textarea, [dir="rtl"] .wpforms-form select { direction: rtl; text-align: right; } [dir="rtl"] .wpforms-form label { text-align: right; display: block; } [dir="rtl"] .wpforms-form .wpforms-field-label { text-align: right; } /* ── 19. Box Style Borders (dividers between footer contact boxes) ─────────── */ /* * .border-left .box-style2:before uses left:0 as a left-side divider. * .border-right .box-style2:after uses right:0 as a right-side divider. * In RTL these flip visually, which is acceptable for symmetric footer layouts. * * TODO: If the footer border dividers look wrong between boxes in RTL, * swap .border-left → .border-right and vice versa in the footer.html template. */ /* ── 20. Polylang / Admin Bar ─────────────────────────────────────────────── */ /* * WordPress admin bar in RTL — WP handles this natively via wp-admin-bar-rtl.css. * No override needed here. */ /* ── RTL TODO Checklist ───────────────────────────────────────────────────── */ /* * The following require manual browser testing at http://localhost:8080/ar/ : * * [ ] NAV: Verify Services sub-menu dropdown opens in correct position (right-aligned) * [ ] NAV: Confirm dropdown arrow icon faces correct direction (down in Arabic) * [ ] BREADCRUMBS: Separator "›" — if it visually reads as backward, update * sencorp_breadcrumbs() in inc/helpers.php to output "‹" for RTL. * [ ] HERO TECH-BOXES: Confirm icon and label layout is readable RTL * [x] CAROUSEL: rtl: sencorpData.isRtl added to all 3 .owlCarousel() inits * in assets/js/theme.js (clients, portfolio, testimonials) * [ ] BUTTONS: Check Flaticon arrow icons (flaticon-right-arrow etc.) — * if they look backwards add: [dir="rtl"] .flaticon-right-arrow:before { transform: scaleX(-1); } * [ ] FOOTER: Verify contact info box dividers (.border-left/.border-right) in RTL * [ ] STICKY HEADER: Test sticky header scroll class is applied correctly * [ ] MOBILE NAV: Open mobile menu in Arabic and verify item order and layout */