/* ========================================================================== RTL OVERRIDES — Baligh Hamdi Law Firm FZE (Arabic) Loaded AFTER procounsel.css and custom.css. The `dir="rtl"` attribute on already flips a lot of default browser behaviour for free (flex ordering, default text alignment, list bullets, form fields). This file only overrides the specific hard-coded LTR values in our own custom.css that don't flip automatically — spacing, absolute-positioned decorative elements, and a few icon directions. ========================================================================== */ html[dir="rtl"] body { text-align: right; } /* ---------- Font fix: override the theme's root CSS variables ---------- procounsel.css uses font-family: var(--procounsel-heading-font, "Marcellus") and var(--procounsel-font, "Plus Jakarta Sans") in ~110 places across every heading and body element. Marcellus and Plus Jakarta Sans have no Arabic glyphs, which is what was causing headings like "مكتب بليغ حمدي للمحاماة" to render broken/garbled. Overriding the two variables here cascades correctly to every one of those ~110 usages in one shot, instead of chasing each heading class individually. Font choice: Noto Sans Arabic — a clean, humanist Arabic typeface with generous x-height and spacing, openly licensed (SIL OFL) for unrestricted commercial use. This was chosen specifically to match the larger, clearer, more traditional-newspaper feel of alkhaleej.ae's Arabic type as closely as possible. Note: alkhaleej.ae blocks automated access (robots.txt), so their exact font-family could not be directly inspected — this is the closest well-matched, safely-licensed alternative rather than a confirmed exact match. Their look is also very close to Microsoft's "Dubai" font (built into Windows, which is likely why it renders so cleanly on a Windows machine), but that font's web-embedding license isn't clearly confirmed for commercial use, so it wasn't used here without that being sorted out first. IMPORTANT: uses two STATIC single-weight files (Regular/Bold), not the original variable font. The variable font was the actual cause of headings flashing from correct to broken/disconnected Arabic letters shortly after page load — variable fonts pack every weight into one file with a more complex internal structure, and some browsers' Arabic shaping (the logic that joins letters into their correct contextual forms) doesn't reliably read the letter-joining data from that structure, so it silently falls back to isolated, unjoined glyph forms once the font finishes loading and swaps in. Static, single- weight files don't have this failure mode — each one is a plain, simple font with its own complete, unambiguous shaping data. */ @font-face { font-family: 'Noto Sans Arabic'; src: url('../fonts/NotoSansArabic-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Noto Sans Arabic'; src: url('../fonts/NotoSansArabic-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } html[dir="rtl"] { --procounsel-heading-font: 'Noto Sans Arabic', 'Cairo', sans-serif; --procounsel-font: 'Noto Sans Arabic', 'Cairo', sans-serif; } html[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Cairo', sans-serif; font-size: 17px; line-height: 1.9; } html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] .about-page__text, html[dir="rtl"] .service-card__text, html[dir="rtl"] .blog-detail__content p { font-size: 1.05em; line-height: 1.9; letter-spacing: 0; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .sec-title__title, html[dir="rtl"] .page-header__title { line-height: 1.5; font-weight: 700; } /* ---------- Nav spacing: the theme spaces nav items with margin-left on each item after the first (li + li), which is a physical property. Under RTL's automatic flex reversal the visual order flips but margin-left doesn't move with it, so the gap ends up on the outer edge of the menu instead of between items — leaving adjacent items (e.g. "الرئيسية" and "من نحن") touching with no space between them. ---------- */ html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-left: 0; margin-right: 41px; } @media (max-width: 1400px) { html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-right: 35px; } } @media (min-width: 1200px) and (max-width: 1300px) { html[dir="rtl"] .main-menu .main-menu__list > li + li { margin-right: 30px; } } /* ---------- CRITICAL FIX: heading font had no Arabic support ---------- Every heading site-wide (h1-h6, .sec-title__title, .page-header__title, .team-spotlight__name, etc.) references var(--procounsel-heading-font), which defaults to "Marcellus" — a Latin-only decorative serif with zero Arabic glyphs. Depending on the device, the browser was substituting an unpredictable fallback font for the Arabic characters, producing garbled/misconnected letterforms instead of correct Arabic. Overriding the variable itself at the RTL root fixes every heading on every page in one place, since they all already read from this same variable. (Superseded by the more complete fix at the top of this file, which also correctly covers --procounsel-font for body text — this old version had a typo'd variable name that silently did nothing.) */ /* ---------- Topbar : spacing between items was margin-left ---------- */ html[dir="rtl"] .topbar-one__info__item { margin-left: 0; } html[dir="rtl"] .topbar-one__info__item + .topbar-one__info__item { margin-left: 0; margin-right: 34px; } @media (max-width: 1399px) { html[dir="rtl"] .topbar-one__info__item + .topbar-one__info__item { margin-right: 24px; } } /* ---------- Nav dropdown caret / icon direction ---------- */ html[dir="rtl"] .main-menu__list li.dropdown > a::after { transform: scaleX(-1); } /* ---------- Homepage About image — was floated/aligned left ---------- */ html[dir="rtl"] .about-one__image { text-align: right; } html[dir="rtl"] .about-one__image { margin-left: 0; } /* ---------- Service / blog / value card "Read More" arrow ---------- */ html[dir="rtl"] .service-card__link i, html[dir="rtl"] .blog-post-card__link i, html[dir="rtl"] .doc-card__link i { transform: scaleX(-1); } /* ---------- Blog article body — list indentation was padding-left ---------- */ html[dir="rtl"] .blog-detail__content ul { padding-left: 0; padding-right: 20px; } html[dir="rtl"] .blog-detail__content ul li { padding-left: 0; padding-right: 8px; } html[dir="rtl"] .blog-detail__content blockquote { border-left: none; border-right: 4px solid var(--procounsel-base, #c7954a); border-radius: 10px 0 0 10px; } /* ---------- Team spotlight / value-card icon badges — mirror the asymmetric corner so it still reads as "notched toward center" ---------- */ html[dir="rtl"] .service-card__icon, html[dir="rtl"] .value-card .ic { transform: scaleX(-1); } html[dir="rtl"] .service-card__icon i, html[dir="rtl"] .value-card .ic i { transform: scaleX(-1); } /* ---------- Quick-contact / contact-card icon circles: no change needed (already centered), but the info column text should right-align ---------- */ html[dir="rtl"] .contact-one__info__content, html[dir="rtl"] .footer-widget, html[dir="rtl"] .sec-title, html[dir="rtl"] .about-page__text, html[dir="rtl"] .lede { text-align: right; } /* ---------- Breadcrumb separator ---------- */ html[dir="rtl"] .procounsel-breadcrumb li:not(:last-child)::after { transform: scaleX(-1); } /* ---------- Forms: right-align labels/placeholders, keep inputs full width ---------- */ html[dir="rtl"] .form-one input, html[dir="rtl"] .form-one textarea { text-align: right; } /* ---------- Sidebar / footer bullet dots stay visually consistent ---------- */ html[dir="rtl"] .toc-list, html[dir="rtl"] .check-list li { padding-right: 0; } /* ---------- Slider dots / nav arrows: swap left/right screen position ---------- */ html[dir="rtl"] .hero-slider__dots { left: auto; right: 50px; } @media (max-width: 1499px) { html[dir="rtl"] .hero-slider__dots { right: 40px; } } html[dir="rtl"] .hero-slider__arrow--prev { left: auto; right: 30px; } html[dir="rtl"] .hero-slider__arrow--next { right: auto; left: 30px; } html[dir="rtl"] .hero-slider__arrow--prev i, html[dir="rtl"] .hero-slider__arrow--next i { transform: scaleX(-1); } /* ---------- Floating call / WhatsApp buttons: mirror to left edge ---------- */ html[dir="rtl"] .call-now-button, html[dir="rtl"] #wa-widget, html[dir="rtl"] .whatsapp-widget { left: 20px; right: auto; } /* ---------- Author box / doc-card / stat icons: keep centered, no flip needed; just ensure text blocks right-align ---------- */ html[dir="rtl"] .author-box__text, html[dir="rtl"] .value-card p, html[dir="rtl"] .svc-card p { text-align: right; } /* ---------- Misc spacing fixes on cards using gap (gap is direction-agnostic, no change needed) — icons inline with text: swap margin via logical props ---------- */ html[dir="rtl"] .blog-post-card__meta span i, html[dir="rtl"] .contact-card i, html[dir="rtl"] .doc-card__meta i { margin-left: 6px; margin-right: 0; }