/* * Right-to-left overrides, loaded only for RTL locales (Arabic) via the * `[lang]` layout. The base stylesheets (style.css, enhancements.css) are all * written with physical LTR properties (float, text-align:left, padding-left…); * `` mirrors text and default alignment, and the rules below * mirror the layout primitives that don't flip on their own: floats, explicit * alignments, the masthead scrim, breadcrumb/nav/footer flow and CTA arrows. * * Scoped entirely under [dir="rtl"] so it is inert for LTR locales even if the * file were ever served to them. */ [dir="rtl"] body { text-align: right; } /* Float helpers from the original template flip wholesale. */ [dir="rtl"] .fl { float: right; } [dir="rtl"] .fr { float: left; } /* The header logo floats left in LTR; keep it on the reading-start side. */ [dir="rtl"] .logo.fl { float: right; } [dir="rtl"] .rightDiv.fr { float: left; } /* Editorial system: left-aligned copy and start-edge accents mirror. */ [dir="rtl"] .ed, [dir="rtl"] .ed p, [dir="rtl"] .ed li, [dir="rtl"] .ed-lead, [dir="rtl"] .ed-section-label, [dir="rtl"] .ed-eyebrow, [dir="rtl"] .ed h1, [dir="rtl"] .ed h2, [dir="rtl"] .ed h3, [dir="rtl"] .ed-h2 { text-align: right; } /* Masthead: the horizontal scrim runs from the reading-start edge. */ [dir="rtl"] .ed-masthead { background-position: right center; } [dir="rtl"] .ed-masthead::before { background: linear-gradient(to left, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 40%, transparent 78%); } [dir="rtl"] .ed-masthead-inner { text-align: right; } /* Breadcrumb runs right-to-left; its separators are drawn with ::before. */ [dir="rtl"] .crumbList { padding-right: 0; } [dir="rtl"] .crumbItem { float: right; } /* Blog byline / TOC / cards align to the start edge. */ [dir="rtl"] .blog-byline, [dir="rtl"] .blog-byline-credential, [dir="rtl"] .blog-toc, [dir="rtl"] .blog-body, [dir="rtl"] .ed-link, [dir="rtl"] .ed-links { text-align: right; } /* Footer columns and contact rows mirror. */ [dir="rtl"] .footerDiv, [dir="rtl"] .footerDiv .listDiv, [dir="rtl"] .footerDiv .lxDiv, [dir="rtl"] .footerDiv .banquan { text-align: right; } /* Directional arrows in CTAs (→) point the reading-forward way in RTL. */ [dir="rtl"] .ed-btn { unicode-bidi: plaintext; } /* Language switcher dropdown opens from the start edge. */ [dir="rtl"] .lang-switch > ul { right: auto; left: 0; direction: rtl; text-align: right; } /* Header: preserve the Arabic reading order while keeping every control in its own flex cell. Dropdowns open inward instead of off the viewport edge. */ [dir="rtl"] header .rightDiv, [dir="rtl"] header .rightDiv .menu > ul { direction: rtl; } [dir="rtl"] header .rightDiv .menu > ul > li > a { text-align: center; } [dir="rtl"] header .rightDiv .menu > ul > li > ul { left: auto; right: -9999px; } [dir="rtl"] header .rightDiv .menu > ul > li:hover > ul { left: auto; right: 0; } [dir="rtl"] header .rightDiv .menu > ul > li li a { text-align: right; } [dir="rtl"] header .searchDiv .formDiv { right: auto; left: 0; } [dir="rtl"] header .searchDiv input { text-align: right; } /* Homepage and editorial image/text compositions start with copy on the right and supporting imagery on the left. */ [dir="rtl"] .indexDiv1 .row, [dir="rtl"] .indexDiv2 .row, [dir="rtl"] .indexDiv3 .bdDiv, [dir="rtl"] .indexDiv7 .bdDiv, [dir="rtl"] .ed-split, [dir="rtl"] .ed-grid, [dir="rtl"] .blog-grid, [dir="rtl"] .ed-steps, [dir="rtl"] .ed-tri, [dir="rtl"] .ed-capcards { direction: rtl; } [dir="rtl"] .ed-section.is-centered, [dir="rtl"] .ed-section.is-centered .ed-section-label, [dir="rtl"] .ed-section.is-centered .ed-h2, [dir="rtl"] .ed-close, [dir="rtl"] .ed-close h2, [dir="rtl"] .ed-close p { text-align: center; } /* Accordions, search inputs and start-edge accents use the physical right side in Arabic instead of retaining their LTR padding and icons. */ [dir="rtl"] .ed-q > summary { padding-right: 0; padding-left: 52px; } [dir="rtl"] .ed-q > summary::before { right: auto; left: 4px; } [dir="rtl"] .ed-q > summary::after { right: auto; left: 10px; } [dir="rtl"] .ed-a { padding-right: 0; padding-left: 52px; } [dir="rtl"] .blog-search svg { left: auto; right: 14px; } [dir="rtl"] .blog-search input { padding: 0 40px 0 16px; text-align: right; } [dir="rtl"] .blog-tldr { border-left: 0; border-right: 3px solid var(--ed-teal); } [dir="rtl"] .blog-byline-meta, [dir="rtl"] .blog-card-meta { direction: rtl; } /* Data tables remain easy to scan in RTL; product codes and dimensions keep their natural bidirectional rendering inside the Arabic text. */ [dir="rtl"] .blog-table caption, [dir="rtl"] .blog-table th, [dir="rtl"] .blog-table td, [dir="rtl"] .ed-rich table th, [dir="rtl"] .ed-rich table td { text-align: right; } [dir="rtl"] .ed-grid2 figcaption { left: auto; right: 8px; } [dir="rtl"] .ed-band-item { border-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); } [dir="rtl"] .ed-band-item:first-child { border-right: 0; } /* Floating contact tools mirror with the rest of the interface. */ [dir="rtl"] .fab-rail { right: auto; left: 16px; } [dir="rtl"] .fab-label { right: auto; left: 62px; } [dir="rtl"] .fcm-close { right: auto; left: 12px; } [dir="rtl"] .fcm-form input, [dir="rtl"] .fcm-form textarea, [dir="rtl"] .fcm-title, [dir="rtl"] .fcm-sub { text-align: right; } @media (max-width: 991px) { /* The legacy mobile header uses floats plus an absolutely positioned menu button. Mirroring only the floats puts that button underneath the logo in Arabic, making the navigation impossible to open. Give the RTL header an explicit single-row layout: logo | menu, language, search. */ [dir="rtl"] header .header-container > .wrap { display: flex; align-items: center; justify-content: space-between; direction: rtl; } [dir="rtl"] header .header-container > .wrap::after { display: none; } [dir="rtl"] header .logo { float: none; flex: 0 0 130px; width: 130px; } [dir="rtl"] header .logo a, [dir="rtl"] header .logo img { width: 130px; max-width: 100%; } [dir="rtl"] header .rightDiv { float: none; display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: flex-start; direction: ltr; } [dir="rtl"] header .mbtn { position: static; flex: 0 0 40px; width: 40px; } [dir="rtl"] header .searchDiv { float: none; flex: 0 0 20px; margin: 0 8px !important; } [dir="rtl"] header .lang-switch { float: none; flex: 0 0 auto; margin: 0 6px !important; } [dir="rtl"] body:not(.on-fixed):has(.ed-masthead) header .lang-switch > summary, [dir="rtl"] body:not(.on-fixed):has(.index-banner) header .lang-switch > summary, [dir="rtl"] body:not(.on-fixed):has(.ed-masthead) header .lang-switch-trigger, [dir="rtl"] body:not(.on-fixed):has(.index-banner) header .lang-switch-trigger { color: #333; text-shadow: none; } [dir="rtl"] header .rightDiv .menu { right: auto; left: -100%; } [dir="rtl"] body.on-menu header .rightDiv .menu { right: auto; left: 0; } [dir="rtl"] header .rightDiv .menu > ul > li > ul, [dir="rtl"] header .rightDiv .menu > ul > li:hover > ul { right: 0; left: auto; } } @media (max-width: 768px) { [dir="rtl"] .ed-a, [dir="rtl"] .ed-q > summary { padding-left: 40px; } [dir="rtl"] .fab-rail { left: 12px; } }