/* * RTL Stylesheet — Arabic Language Support * * Loaded as a supplement to style.css when WordPress site language is set to * Arabic (or any RTL language). The attribute is set * automatically by WordPress language_attributes() in header.php. * * Structure mirrors the main style.css section order for maintainability. * * @package coffee-ioapp */ /* ============================================================ * 1. Arabic Font Variables * Cairo supports full Arabic script + Latin and is used as the * primary face for both headings and body copy in RTL mode. * ============================================================ */ :root { --font-display: 'Cairo', Georgia, serif; --font-body: 'Cairo', -apple-system, sans-serif; } /* ============================================================ * 2. Base * ============================================================ */ /* Ordered/unordered list indentation */ ul, ol { margin-left: 0; margin-right: 1.5em; } /* ============================================================ * 3. Header & Navigation * ============================================================ */ /* Drop-down opens from the right edge of its parent */ .main-navigation ul ul { left: auto; right: 0; } /* Nested sub-sub-menu: open towards the left */ .main-navigation ul ul ul { left: auto; right: 100%; } /* Hamburger lines: transform origin is centred so no flip needed, but the X-close animation uses the same rotation and looks correct in RTL. */ /* ============================================================ * 4. Front Page — Hero * ============================================================ */ /* Scroll indicator arrow stays centred — no change needed. Hero content (text-align: center) works equally in both directions. */ /* ============================================================ * 5. Front Page — Story Section * ============================================================ */ /* CSS Grid with dir=rtl automatically places col-1 on the RIGHT and col-2 on the LEFT, so the image ends up on the right (visual reading start for Arabic) and text on the left. No override needed. */ /* ============================================================ * 6. Front Page — Testimonials * ============================================================ */ /* Reposition the decorative opening quote mark to the right */ .testimonial-card__quote::before { left: auto; right: 1.5rem; /* Arabic opening guillemet */ content: '\00AB'; } /* ============================================================ * 7. Front Page — Blog Grid * ============================================================ */ /* Blog cards with dir=rtl flex naturally flip — no override needed. */ /* ============================================================ * 8. Single Post * ============================================================ */ /* ---- Post breadcrumb ---- */ /* Flexbox + dir=rtl reverses order automatically (Home ‹ Cat ‹ Title becomes Title › Cat › Home visually). The aria separators (›) still read correctly for screen readers. */ /* ---- Post content typography ---- */ .single-post__content ul, .single-post__content ol { padding-left: 0; padding-right: 1.5rem; } /* Blockquote: flip accent border from left to right */ .single-post__content blockquote { border-left: none; border-right: 4px solid var(--color-accent); border-radius: 8px 0 0 8px; } /* Table cell text direction */ .single-post__content th, .single-post__content td { text-align: right; } /* ---- Post navigation (prev / next) ---- */ /* Flex row reverses in RTL: prev appears on the RIGHT, next on the LEFT. */ /* Remove LTR-specific auto-margin that pushed next to the far right */ .post-nav__link--next { margin-left: 0; } /* Flip the chevron arrows to match the RTL reading direction */ .post-nav__link--prev .post-nav__direction svg, .post-nav__link--next .post-nav__direction svg { transform: scaleX(-1); } /* Align "next" text to the left (it now appears on the physical left) */ .post-nav__link--next { text-align: left; align-items: flex-start; } /* ---- Author bio ---- */ /* Flex row reversal puts the avatar on the RIGHT (reading start) — correct for RTL. */ /* Cancel-reply link spacing */ .comment-reply-title small a { margin-left: 0; margin-right: 0.75rem; } /* ---- Related posts grid ---- */ /* CSS Grid with dir=rtl fills columns right-to-left — no override needed. */ /* ============================================================ * 9. Comments * ============================================================ */ /* Threaded comment indentation: flip from left to right */ .comment-item .children .comment-item { margin-left: 0; margin-right: 3rem; border-left: none; border-right: 2px solid var(--color-cream-200); padding-left: 0; padding-right: 1.5rem; } /* Comment edit link spacing */ .comment-edit-link { margin-left: 0; margin-right: 0.5rem; } /* Comment form: reset list indentation */ .comment-form ul, .comment-form ol { padding-left: 0; padding-right: 1.5rem; } /* ============================================================ * 10. Pages * ============================================================ */ /* Breadcrumb and title inherit dir=rtl from — no override needed. */ /* ============================================================ * 11. Responsive Overrides * ============================================================ */ /* Tablet */ @media screen and (max-width: 59.9375em) { .comment-item .children .comment-item { margin-left: 0; margin-right: 1.5rem; } } /* Mobile */ @media screen and (max-width: 37.4375em) { /* Comment threading — tighter on small screens */ .comment-item .children .comment-item { margin-left: 0; margin-right: 1rem; padding-left: 0; padding-right: 1rem; } /* Post nav: stacked vertically in mobile — text-align override */ .post-nav__link--next { text-align: right; align-items: flex-end; } }