/* ============================================================= * SILAVOCA — DEDICATED RTL STYLESHEET (rtl.css) * Loaded ONLY on the Arabic version of the site (pll: 'ar'). * Overrides Astra's LTR defaults cleanly and completely. * * Scope strategy: every rule is anchored to one of * html[lang="ar"] | [dir="rtl"] | body.rtl * so it can NEVER leak into the French (LTR) site. * ============================================================= */ /* ------------------------------------------------------------- * 0. ROOT DIRECTION + ARABIC FONT (Cairo) * ----------------------------------------------------------- */ html[lang="ar"], html[dir="rtl"], body.rtl { direction: rtl; unicode-bidi: embed; } html[lang="ar"] body, [dir="rtl"] body, body.rtl { direction: rtl; text-align: right; font-family: 'Cairo', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Apply Cairo broadly to text + headings + form controls */ html[lang="ar"] body, [dir="rtl"] body, body.rtl, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] label, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] .ast-button, [dir="rtl"] .wp-block-button__link, [dir="rtl"] .menu-item, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl p, body.rtl a, body.rtl span, body.rtl li { font-family: 'Cairo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* Keep Latin-script bits (emails, URLs, the FR switch label) readable LTR */ [dir="rtl"] .silavoca-lang, body.rtl .silavoca-lang, [dir="rtl"] [dir="ltr"], [dir="rtl"] .ltr, [dir="rtl"] code, [dir="rtl"] .silavoca-contact-item span { direction: ltr; unicode-bidi: embed; text-align: right; } /* ------------------------------------------------------------- * 1. GLOBAL TEXT ALIGNMENT * ----------------------------------------------------------- */ [dir="rtl"] .entry-content, [dir="rtl"] .entry-title, [dir="rtl"] .ast-container, [dir="rtl"] .site-content, [dir="rtl"] .widget, [dir="rtl"] article, [dir="rtl"] .post, [dir="rtl"] .page-content, body.rtl .entry-content, body.rtl .entry-title { text-align: right; } /* Centered things must STAY centered */ [dir="rtl"] .ast-container [style*="text-align:center"], [dir="rtl"] .has-text-align-center, [dir="rtl"] [class*="text-center"], [dir="rtl"] .silavoca-footer-bottom { text-align: center !important; } /* Explicit left-aligned (rare) → becomes right in RTL */ [dir="rtl"] .has-text-align-left { text-align: right !important; } [dir="rtl"] .has-text-align-right { text-align: left !important; } /* ------------------------------------------------------------- * 2. FLEXBOX / GRID DIRECTION MIRRORING * ----------------------------------------------------------- */ [dir="rtl"] .ast-flex, [dir="rtl"] .ast-builder-grid-row, [dir="rtl"] .site-header .ast-flex, [dir="rtl"] .main-header-bar .ast-flex, [dir="rtl"] .ast-builder-layout-element, body.rtl .ast-flex { flex-direction: row; } /* Generic content rows built with flex */ [dir="rtl"] .wp-block-columns, [dir="rtl"] .ast-row, [dir="rtl"] .elementor-row, [dir="rtl"] .e-con-inner { flex-direction: row; } /* Grids inherit direction from the document; just enforce it */ [dir="rtl"] .wp-block-columns, [dir="rtl"] [class*="grid"], [dir="rtl"] .silavoca-footer-inner { direction: rtl; } /* ------------------------------------------------------------- * 3. PADDING / MARGIN MIRRORING * Swap left<->right spacing on the most common Astra utilities. * ----------------------------------------------------------- */ [dir="rtl"] .ast-left, body.rtl .ast-left { float: right; } [dir="rtl"] .ast-right, body.rtl .ast-right { float: left; } /* Astra margin helpers */ [dir="rtl"] .ml-auto, [dir="rtl"] .ms-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto, [dir="rtl"] .me-auto { margin-right: 0; margin-left: auto; } /* List bullets / numbers move to the right */ [dir="rtl"] ul, [dir="rtl"] ol, [dir="rtl"] .entry-content ul, [dir="rtl"] .entry-content ol { padding-right: 1.5em; padding-left: 0; margin-right: 0; } /* Blockquotes flip their accent border */ [dir="rtl"] blockquote { border-right: 4px solid #c9a84c; border-left: none; padding-right: 20px; padding-left: 0; } /* ------------------------------------------------------------- * 4. NAVIGATION ALIGNMENT * (Astra default menu + custom silavoca nav) * ----------------------------------------------------------- */ [dir="rtl"] .main-header-menu, [dir="rtl"] .ast-nav-menu, [dir="rtl"] .main-navigation ul, body.rtl .main-header-menu { flex-direction: row; text-align: right; } [dir="rtl"] .main-header-menu .menu-item, [dir="rtl"] .ast-nav-menu .menu-item { text-align: right; } /* Dropdown submenus open toward the right edge */ [dir="rtl"] .main-header-menu .sub-menu, [dir="rtl"] .ast-nav-menu .sub-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .main-header-menu .sub-menu .sub-menu { left: auto; right: 100%; } /* Custom silavoca nav (header + sidebar) */ [dir="rtl"] .silavoca-nav, body.rtl .silavoca-nav { flex-direction: row; } [dir="rtl"] .silavoca-sidebar-nav a, body.rtl .silavoca-sidebar-nav a { text-align: right; } [dir="rtl"] .silavoca-sidebar-top, body.rtl .silavoca-sidebar-top { flex-direction: row; } /* The language switch shows "Français" on AR pages → keep it LTR */ [dir="rtl"] .silavoca-lang, body.rtl .silavoca-lang { direction: ltr; } /* ------------------------------------------------------------- * 5. BUTTON ALIGNMENT * ----------------------------------------------------------- */ [dir="rtl"] .ast-button, [dir="rtl"] .wp-block-button, [dir="rtl"] .wp-block-buttons, [dir="rtl"] .button, body.rtl .ast-button { text-align: right; } [dir="rtl"] .wp-block-buttons { justify-content: flex-start; flex-direction: row; } /* Buttons that contain an icon + label: flip the order */ [dir="rtl"] .ast-button .ast-button-icon, [dir="rtl"] .btn-icon { margin-left: 8px; margin-right: 0; } /* CTA / register / login custom buttons keep their styling, just align */ [dir="rtl"] .silavoca-register, [dir="rtl"] .silavoca-login, [dir="rtl"] .silavoca-sidebar-btn-dark, [dir="rtl"] .silavoca-sidebar-btn-outline { text-align: center; } /* ------------------------------------------------------------- * 6. FOOTER COLUMNS * ----------------------------------------------------------- */ [dir="rtl"] .silavoca-footer, [dir="rtl"] .silavoca-newsletter, body.rtl .silavoca-footer { direction: rtl; text-align: right; } [dir="rtl"] .silavoca-footer-inner { direction: rtl; } [dir="rtl"] .silavoca-footer-col, [dir="rtl"] .silavoca-footer-col h3, [dir="rtl"] .silavoca-footer-about, [dir="rtl"] .silavoca-footer-col a { text-align: right; } /* Newsletter row mirrors; the form input/button order flips */ [dir="rtl"] .silavoca-newsletter { flex-direction: row; } [dir="rtl"] .silavoca-newsletter-form { flex-direction: row; } [dir="rtl"] .silavoca-newsletter-form input[type="email"] { border-left: none; border-right: 1px solid #ddd; border-radius: 0 8px 8px 0; } [dir="rtl"] .silavoca-newsletter-form button { border-radius: 8px 0 0 8px; } /* Contact items: icon leads on the right, text flows right */ [dir="rtl"] .silavoca-contact-item { flex-direction: row; text-align: right; } [dir="rtl"] .silavoca-contact-item span { text-align: right; } /* Astra's own small footer, if ever shown */ [dir="rtl"] .ast-small-footer, [dir="rtl"] .site-footer, [dir="rtl"] .footer-adv { direction: rtl; text-align: right; } [dir="rtl"] .ast-footer-overlay, [dir="rtl"] .footer-adv .ast-flex { flex-direction: row; } /* ------------------------------------------------------------- * 7. ARROWS / ICONS DIRECTION * Horizontal arrows must point the RTL-correct way. * ----------------------------------------------------------- */ /* Submenu caret / "more" arrows: mirror horizontally */ [dir="rtl"] .ast-menu-toggle::before, [dir="rtl"] .dropdown-menu-toggle, [dir="rtl"] .ast-header-navigation-arrow, [dir="rtl"] .slick-next, [dir="rtl"] .slick-prev, [dir="rtl"] .read-more .ast-button::after, [dir="rtl"] [class*="arrow-right"], [dir="rtl"] [class*="arrow-left"], [dir="rtl"] .nav-links .next::after, [dir="rtl"] .nav-links .prev::before { transform: scaleX(-1); display: inline-block; } /* Pagination: previous/next swap sides */ [dir="rtl"] .ast-pagination, [dir="rtl"] .nav-links { flex-direction: row; } [dir="rtl"] .nav-previous { float: right; } [dir="rtl"] .nav-next { float: left; } /* Inline arrow glyphs typed as text (→ ←) flip via mirroring class */ [dir="rtl"] .arrow-flip { transform: scaleX(-1); display: inline-block; } /* Back-to-top, scroll indicators keep vertical orientation (no flip) */ [dir="rtl"] #ast-scroll-top, [dir="rtl"] .ast-scroll-to-top-icon { transform: none; } /* ------------------------------------------------------------- * 8. FORM FIELDS * ----------------------------------------------------------- */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="search"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="password"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] input::placeholder, [dir="rtl"] textarea::placeholder { text-align: right; } /* Search icon / submit moves to the left */ [dir="rtl"] .search-form .search-submit { left: 0; right: auto; } /* Checkboxes & radios: label sits to the right of the control */ [dir="rtl"] input[type="checkbox"] + label, [dir="rtl"] input[type="radio"] + label { margin-right: 6px; margin-left: 0; } /* ------------------------------------------------------------- * 9. TABLES * ----------------------------------------------------------- */ [dir="rtl"] table, [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* ------------------------------------------------------------- * 10. MISC ASTRA WIDGETS / ENTRY META * ----------------------------------------------------------- */ [dir="rtl"] .entry-meta, [dir="rtl"] .ast-author-meta, [dir="rtl"] .post-meta { flex-direction: row; text-align: right; } [dir="rtl"] .ast-cover-meta, [dir="rtl"] .ast-comment-meta { text-align: right; } /* Featured / thumbnail spacing flip when floated */ [dir="rtl"] .wp-block-image.alignleft { float: right; margin-left: 1em; margin-right: 0; } [dir="rtl"] .wp-block-image.alignright { float: left; margin-right: 1em; margin-left: 0; } [dir="rtl"] .alignleft { float: right; margin: 0 0 1em 1em; } [dir="rtl"] .alignright { float: left; margin: 0 1em 1em 0; } /* Widgets sidebar */ [dir="rtl"] .widget, [dir="rtl"] .widget-title, [dir="rtl"] .widget ul { text-align: right; } [dir="rtl"] .widget ul { padding-right: 0; } /* ------------------------------------------------------------- * 11. RESPONSIVE — keep mobile header logic intact * (the silavoca-header-style.css already handles the grid; * here we only reinforce direction on small screens) * ----------------------------------------------------------- */ @media (max-width: 768px) { [dir="rtl"] .silavoca-header-inner, body.rtl .silavoca-header-inner { direction: rtl; } [dir="rtl"] .silavoca-newsletter, body.rtl .silavoca-newsletter { align-items: flex-end; } [dir="rtl"] .silavoca-footer-col, body.rtl .silavoca-footer-col { text-align: right; } } /* ============================================================= * 12. PAGE BUILDER: BEAVER BUILDER (.fl-*) * The Arabic pages are built with Beaver Builder. We set the * writing direction so columns/text flow RTL, WITHOUT forcing * row-reverse (Beaver manages its own column order — forcing it * would double-flip and break the layout). * ----------------------------------------------------------- */ [dir="rtl"] .fl-row-content, [dir="rtl"] .fl-row-content-wrap, [dir="rtl"] .fl-col-group, [dir="rtl"] .fl-col, [dir="rtl"] .fl-col-content, [dir="rtl"] .fl-module-content, [dir="rtl"] .fl-rich-text, [dir="rtl"] .fl-callout-text, [dir="rtl"] .fl-heading { direction: rtl; text-align: right; } /* Beaver button / icon rows */ [dir="rtl"] .fl-button-wrap, [dir="rtl"] .fl-button { text-align: right; } [dir="rtl"] .fl-button i, [dir="rtl"] .fl-icon i { margin-left: 6px; margin-right: 0; } /* Beaver content that is intentionally centered stays centered */ [dir="rtl"] .fl-row-content-wrap .fl-heading.fl-heading-text[style*="center"], [dir="rtl"] [data-align="center"] { text-align: center !important; } /* ============================================================= * 13. SILAVOCAT DIRECTORY / single.php — profile + blog sidebar * Classes come from the theme's single.php and the directory * plugin output (profile bio, CTA box, recent/similar articles). * ----------------------------------------------------------- */ [dir="rtl"] .blog-sidebar, [dir="rtl"] .blog-similar, [dir="rtl"] .blog-similar h3, [dir="rtl"] .sidebar-cta, [dir="rtl"] .sidebar-cta p, [dir="rtl"] .sidebar-cta h3, [dir="rtl"] .sidebar-articles, [dir="rtl"] .sidebar-articles h3, [dir="rtl"] .sila-blog-card, [dir="rtl"] .sila-blog-card-body, [dir="rtl"] .sila-blog-card-title, [dir="rtl"] .sila-blog-card-excerpt { direction: rtl; text-align: right; } /* The "→" arrow on article cards must point left in RTL */ [dir="rtl"] .sila-blog-card-arrow { display: inline-block; transform: scaleX(-1); } /* Tag label icon: inline margin was left-side in LTR → flip it */ [dir="rtl"] .blog-tags-label { margin-left: 0 !important; margin-right: 10px !important; } /* Avatar / mini cluster keeps natural order, just align right */ [dir="rtl"] .sidebar-cta-avatars { direction: rtl; justify-content: flex-start; } /* Directory profile meta labels (Présentation / Honoraires / etc.) * — once translated they are Arabic; ensure they sit right-aligned. */ [dir="rtl"] .silavocat-profile, [dir="rtl"] .silavocat-profile *, [dir="rtl"] .lawyer-profile, [dir="rtl"] .avocat-profile, [dir="rtl"] [class*="profile-field"], [dir="rtl"] [class*="profile-meta"] { text-align: right; direction: rtl; } /* Profile thumbnail that floats left in LTR → float right in RTL */ [dir="rtl"] .silavocat-profile img.alignleft, [dir="rtl"] .lawyer-photo.alignleft { float: right; margin-left: 0; margin-right: 16px; } /* ============================================================= * 14. DIRECTORY FILTER PAGE (specialité) — selects, labels, panel * Fixes the native