/* Right-to-left + Arabic typography. Loaded only when the site is in Arabic (see inc/i18n.php). The theme lays out with logical properties (margin-inline, inset-inline…), so setting dir="rtl" on mirrors the layout for free. This file only handles the two things that don't come for free: Arabic-capable fonts, and a few decorative touches that read better flipped. */ /* --- Arabic fonts --------------------------------------------------------- "Coming Soon" and "Open Sans" carry no Arabic glyphs, so we point the theme's font variables at a solid Arabic system stack. To use a branded Arabic webfont later, bundle it in assets/fonts and swap the values here. */ .alw-ar { --f-body: "Segoe UI", "Noto Sans Arabic", "Helvetica Neue", Tahoma, Arial, sans-serif; --f-display: "Segoe UI Semibold", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; } /* Arabic needs a touch more line-height and weight to breathe. */ .alw-ar { line-height: 1.8; } .alw-ar h1, .alw-ar h2, .alw-ar h3 { font-weight: 700; line-height: 1.4; } /* Keep prices/measurements in Western digits and LTR so "45 EGP" etc. read correctly inside the RTL flow. */ .alw-ar .p-price, .alw-ar .woocommerce-Price-amount, .alw-ar .amount, .alw-ar bdi { direction: ltr; unicode-bidi: isolate; } /* The little hand-drawn arrows in the "Who am I" facts point at the photo in the centre; mirror them so they keep pointing inward after the flip. */ .alw-ar .who-facts--left .arrow, .alw-ar .who-facts--right .arrow--flip { transform: scaleX(-1); } /* Reading arrows in buttons already carry the correct glyph in the Arabic strings (← instead of →), so no extra flipping needed there. */ /* The returns "notebook" is a single open-book image (notebook.png) split into a left and right half. In RTL the two pages swap sides, so each page must now show the OTHER half of the book and mirror its inner padding — otherwise the spine ends up on the outer edge and the text hugs the binding. */ @media (min-width: 720px) { .alw-ar .book-page--left { background-position: 100% 0; padding: 10% 18% 13% 15%; } .alw-ar .book-page--right { background-position: 0 0; padding: 10% 15% 13% 18%; } } @media (max-width: 719px) { .alw-ar .policy-book { padding: 11% 18% 13% 14%; } }