/* ============================================================ RTL + Arabic typography — loaded only when viewing in Arabic. (set in functions.php) auto-mirrors text/grid/ flex; this file handles Arabic fonts + the physical left/right rules that don't auto-flip. ============================================================ */ /* ---- Arabic fonts (swap the theme's font variables) ---- */ :root { --font-sans: 'Tajawal', 'DM Sans', sans-serif; --font-serif: 'Cairo', 'Fraunces', serif; } body { font-family: 'Tajawal', 'DM Sans', sans-serif; font-size: var(--ymwa-body); } /* Headings use the same computed sizes as English (no optical auto-scaling). */ h1, h2, h3, h4, .about-intro__title, .affiliations__title, .news-events__title, .impact-stats__title, .chair-msg-title, .sn-hero__title, .sn-hero__subtitle, .sn-body__title, .letter-hero__title, .decade-hero__title, .ne-hero__title, [class*="__title"] { font-optical-sizing: none; } /* Form fields stay right-aligned (justify is meaningless on inputs) */ .message-us__input, .message-us__textarea { text-align: right; } /* ---- Affiliations detail panel ---- */ .affiliations__detail-close { right: auto; left: clamp(0.65rem, 1.5vw, 0.85rem); } .affiliations__detail-layout { padding-right: 0; padding-left: 2rem; } .affiliations__detail-copy { text-align: start; } .affiliations__detail-body, .affiliations__detail-body--secondary { text-align: justify; } /* ---- Quote: Arabic should not be italic ---- */ .about-quote__blockquote, .about-quote__blockquote p { font-style: normal; } /* ---- Single news: mirror editorial accents for RTL ---- */ .sn-hero__byline { text-align: right; } .sn-body__lede { border-left: none; border-right: 4px solid var(--color-primary); padding: 0 1.15rem 1.85rem 0; } /* Mirror image alignment margins for RTL articles. */ .sn-body__content .alignleft { margin: 0.5rem 0 1rem 1.25rem; } .sn-body__content .alignright { margin: 0.5rem 1.25rem 1rem 0; } .sn-body__content blockquote { border-left: none; border-right: 4px solid var(--color-primary); padding: 1.4rem 3.25rem 1.4rem 1.6rem; border-radius: 10px 0 0 10px; } .sn-body__content blockquote::before { left: auto; right: 1rem; } /* ---- Decorative hero curve: mirror it ---- */ .board-hero__curve-svg { transform: scaleX(-1); transform-origin: center; } /* ---- Home gallery marquee: keep internal flow LTR so the seamless translateX loop still works under RTL (the scroll is decorative) ---- */ .home-gallery-marquee__viewport, .home-gallery-marquee__track { direction: ltr; } /* ---- Home lead accent: left border -> right ---- */ .page-home .about-intro__lead { border-left: none; border-right: 3px solid var(--color-primary); padding-left: 0; padding-right: clamp(1rem, 1.8vw, 1.5rem); } /* ---- Honorary card decorative quote mark -> opposite corner ---- */ .team-featured__body::before { right: auto; left: clamp(1rem, 2.5vw, 1.75rem); } /* ---- Footer legal links align to the start (right) ---- */ .site-footer__legal { justify-content: flex-start; } /* ---- Membership phone field: keep the number LTR (+962 …) ---- */ .mship-tel { direction: ltr; justify-content: flex-end; } /* Phone numbers sitewide: keep +962 … in natural LTR order (Arabic layout) */ a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; } .site-footer__list--contact .site-footer__contact-item a[href^="tel:"] { text-align: right; } .contact-card__link[href^="tel:"] { display: inline-block; } .contact-map__open { left: auto; right: 1rem; } /* Latin-only inputs stay LTR for correctness */ input[type="email"], input[type="url"], input[type="tel"], input[type="date"] { direction: ltr; text-align: right; } /* "Click to read more" arrow points the Arabic reading direction (left) */ .mgmt-flip__more svg { transform: scaleX(-1); } .mgmt-flip__card--has-bio:hover .mgmt-flip__more svg { transform: scaleX(-1) translateX(3px); } /* ---- Gallery timeline: mirror physical left/right rules for RTL ---- */ .gl-tl__entry--left .gl-tl__card { margin-right: 0; margin-left: 1.75rem; } .gl-tl__entry--left .gl-tl__desc-panel { padding-left: 0; padding-right: 1.5rem; border-left: none; border-right: 3px solid #18aa9d; text-align: start; } .gl-tl__entry--left .gl-tl__card::after { right: auto; left: -10px; border-left: none; border-right: 10px solid #18aa9d; } .gl-tl__entry--right .gl-tl__card { margin-left: 0; margin-right: 1.75rem; } .gl-tl__entry--right .gl-tl__desc-panel { padding-right: 0; padding-left: 1.5rem; border-right: none; border-left: 3px solid #18aa9d; text-align: start; } .gl-tl__entry--right .gl-tl__card::after { left: auto; right: -10px; border-right: none; border-left: 10px solid #18aa9d; } @media (max-width: 680px) { .gl-tl__entry--left .gl-tl__card, .gl-tl__entry--right .gl-tl__card { margin: 0 1rem 0 0; } .gl-tl__entry--left .gl-tl__desc-panel, .gl-tl__entry--right .gl-tl__desc-panel { margin: 0.75rem 1rem 0 0; padding: 0.75rem 0.85rem 0 0; border-left: none; border-right: 3px solid #18aa9d; text-align: start; } } /* ---- Admin hint: tint the auto-generated Arabic fields (admin only) ---- */