/* * QuickLink theme — RTL overrides. * Loaded only when is_rtl() is true (see functions.php). WordPress core sets dir="rtl" on * when the active language (Polylang: Arabic) is RTL; most of this theme already uses logical * CSS properties via theme.json/core blocks, so this file only overrides the handful of physical * properties that core blocks or this theme's own theme.css still use. */ [dir="rtl"] main.wp-block-group > * + * { margin-top: var(--wp--preset--spacing--40, 1.5rem); } /* NOTE (v0.3 Stage 2): the blanket `[dir="rtl"] .wp-block-group { text-align: right }` that used to live here has been removed. It was redundant — an RTL document already aligns text to the right by default — and it was actively harmful: at (0,2,0) it outranked every single-class rule in theme.css, so every deliberately centred composition that happens to be a core group (.ql-cta, .ql-empty-state, .ql-process__step, .ql-proof__featured, .ql-order-steps, .ql-form-success) silently lost its centring in Arabic only. Alignment now comes from the document direction plus the logical `text-align: start/center` in theme.css, which is correct in both directions. */ /* Buttons and CTA groups: flex-direction naturally mirrors via the browser's bidi algorithm for `flex`, but explicit row-reverse is sometimes needed for stray `justify-content: flex-start`. */ [dir="rtl"] .wp-block-buttons { direction: rtl; } /* Footer columns read right-to-left from the document direction alone; the old `footer.wp-block-group { text-align: right }` had the same specificity problem as the rule above and is gone with it. */ /* Search / form inputs inherit LTR placeholder text direction from the browser by default; force RTL text alignment for consistency in Arabic. */ [dir="rtl"] .wp-block-search__input { text-align: right; } /* --------------------------------------------------------------------------- * Design-phase additions — only what logical CSS properties in theme.css can't * already express (chevron mirroring, shadow direction, form control alignment). * ------------------------------------------------------------------------- */ /* Services mega-menu chevron flips to point the opposite way in RTL reading order. */ [dir="rtl"] .ql-services-menu__trigger .ql-chevron { transform: scaleX(-1); } /* Sticky mobile request bar shadow reads from the block-start edge regardless of direction (box-shadow has no logical-property equivalent yet). */ [dir="rtl"] .ql-request-bar { box-shadow: 0 -8px 24px rgba(20, 45, 58, 0.08); } /* Service finder / form selects and inputs align to the reading start. */ [dir="rtl"] .ql-service-finder select, [dir="rtl"] .ql-request-panel select, [dir="rtl"] .wp-block-group input[type="text"], [dir="rtl"] .wp-block-group input[type="email"], [dir="rtl"] .wp-block-group input[type="tel"], [dir="rtl"] .wp-block-group textarea { text-align: right; } /* --------------------------------------------------------------------------- * v0.3 additions — design-v03/06 §RTL rules. Logical properties (margin-inline, * padding-inline, inset-inline, text-align:start) already cover layout mirroring * in theme.css; only true physical-property cases live here: directional icons, * the route motif's left-to-right narrative direction, and transform-based * motion whose sign must flip. * ------------------------------------------------------------------------- */ /* Icon-sprite chevrons and ledger-row hover chevrons point start-to-end; mirror in RTL so they still point toward the reading direction. */ [dir="rtl"] .ql-icon-chevron, [dir="rtl"] .ql-rail__ledger .ql-icon, [dir="rtl"] .ql-breadcrumb .ql-icon-chevron { transform: scaleX(-1); } /* The route/process motif tells a left-to-right client -> QuickLink -> authority story; mirror the whole drawing (not just flip text) so the narrative still reads start-to-end for RTL languages. */ [dir="rtl"] .ql-motif-route, [dir="rtl"] .ql-process__path { transform: scaleX(-1); } /* Skyline silhouette behind the hero is intentionally asymmetric line-work; mirroring keeps its densest cluster near the hero's visual (inline-end in LTR, inline-start in RTL) rather than always the same physical side. */ [dir="rtl"] .ql-hero__skyline { transform: scaleX(-1); } /* Company-intro offset navy frame is expressed with inset-inline-* already (see theme.css); nothing further needed here — kept as a documented no-op marker so a future physical-property regression is easy to spot in review. */ /* Sticky service-detail bottom bar shadow is vertical only (0 offset on the inline axis), so no mirroring needed; the box-shadow rule below is kept from the v0.2 sticky bar and still applies unchanged under the v0.3 selector. */ [dir="rtl"] .ql-service-request-cta--sticky { box-shadow: 0 -8px 24px rgba(7, 26, 43, 0.12); } /* --------------------------------------------------------------------------- * v0.3 Stage-2 additions — components introduced by the header/mega-menu, * mobile-sheet, services-directory and article rebuilds. * ------------------------------------------------------------------------- */ /* The "All →" / "Order now →" affordances end with a literal arrow glyph. A glyph is not a logical property: in Arabic it must point to the reading end, i.e. left. It is marked aria-hidden in the markup, so the flip is purely visual and changes no accessible name. */ [dir="rtl"] .ql-arrow { display: inline-block; transform: scaleX(-1); } /* Dates are a mixed-direction run: "سبتمبر 4, 2026" contains Arabic month names and Latin digits with a comma, and the bidi algorithm reorders the tail to "2026 ,4 سبتمبر" (visible in article-ar-390-r5.png). `isolate` keeps the formatted date as one unit without changing the surrounding paragraph. Core renders these, so the fix has to live in CSS. */ [dir="rtl"] .wp-block-post-date, [dir="rtl"] .wp-block-post-date time, [dir="rtl"] .ql-article-meta time { unicode-bidi: isolate; } /* The stats figures carry dir="ltr" in the markup (see the stats block's render.php for why it is not a ), which would otherwise left-align them inside an RTL band. Restore the inline alignment. */ [dir="rtl"] .ql-stats__value { text-align: right; } /* Deliberate non-overrides, recorded so a reviewer does not have to re-derive them: - .ql-sheet-accordion__icon is drawn from `border-inline-end` + `border-block-end`, so the chevron already mirrors itself; adding a scaleX(-1) here would double-mirror it back to the LTR shape. - The article TOC rail's active marker uses `border-inline-start`, and the services-directory group intro uses `padding-inline` / `inset-inline`; both are logical and correct in RTL as authored. - The mega-menu panel and the mobile sheet are full-bleed on the inline axis (`inset-inline: 0`), so neither needs a mirrored offset. The sheet's entry transform is already flipped in theme.css §5b. */ /* Language selector popover and mega-menu panel: theme.css already swaps their translate() sign under [dir="rtl"] (see theme.css §5) — this file only lists the two directional motifs and icon flips that logical properties genuinely cannot express, per docs/design-v03/06. */