/** * Talacote — Right-to-left (RTL) overrides for Arabic locale * * Loaded only when (i.e. when the active language * has dir=rtl in inc/i18n.php). Currently: ar. * * Strategy: * - Use logical properties (margin-inline-start, padding-inline-end…) * where the rest of the theme uses physical ones — flips * automatically. * - For physical-property leftovers (`margin-left: 16px`), explicit * overrides here. * - Mirror flex / grid direction where left-to-right layout would * break the natural reading flow (logos on the right, CTAs on * the left, etc). * * Anything not overridden here stays neutral — the theme's typography, * colors, spacing remain identical regardless of direction. */ /* ===================================================== GLOBAL DIRECTION ===================================================== */ html[dir="rtl"] body { direction: rtl; text-align: start; } /* ===================================================== HEADER — flip logo + nav + CTA order ===================================================== */ html[dir="rtl"] .tc-header__inner { flex-direction: row-reverse; } html[dir="rtl"] .tc-header__nav { flex-direction: row-reverse; } /* ===================================================== HUB STRIP (header) — items reversed ===================================================== */ html[dir="rtl"] .tc-hub-strip, html[dir="rtl"] [data-hub-strip] { direction: rtl; } /* ===================================================== FOOTER — columns + lists ===================================================== */ html[dir="rtl"] .tc-footer__cols { direction: rtl; } html[dir="rtl"] .tc-footer ul { padding-right: 0; padding-left: 0; } /* ===================================================== CARDS / GRIDS — content alignment ===================================================== */ html[dir="rtl"] .tc-card, html[dir="rtl"] .tc-bm-row, html[dir="rtl"] .tc-bm-card--featured, html[dir="rtl"] .tc-bm-fact { text-align: start; } /* ===================================================== BUTTONS / CTAs — flip directional arrows in RTL Audit fix Apr 2026: Templates concatenate "→" / "←" literals via PHP/translations (e.g. "Voir la prédiction →"). In Arabic the visual reading direction is right-to-left, so a rightward arrow at the end of a label visually jumps OUT of the button and confuses users. We mirror them at the CSS layer so PHP stays simple. Approach: any element whose tail character is a directional arrow gets a horizontal flip via `transform: scaleX(-1)` on an inline-block span. Templates that need this wrap the arrow in →. For legacy strings that don't yet use the wrapper, the per-class overrides below target the most common CTA classes. ===================================================== */ /* Generic helper: any .tc-arrow flips horizontally in RTL, so a single Unicode codepoint suffices in the templates. */ html[dir="rtl"] .tc-arrow { display: inline-block; transform: scaleX(-1); } /* Per-class overrides for templates that haven't been migrated to the .tc-arrow wrapper yet. We use unicode-bidi + direction to neutralize the bidi algorithm on the whole label, so the arrow embedded in the text flows in the correct visual order without needing to touch the PHP strings. */ html[dir="rtl"] .tc-upcoming-matches__see-all-btn, html[dir="rtl"] .tc-upcoming-card__cta, html[dir="rtl"] .tc-fm-banner__cta, html[dir="rtl"] .tc-fm-modal__cta, html[dir="rtl"] .tc-pv3-cta, html[dir="rtl"] .tc-bm-spotlight .tc-btn, html[dir="rtl"] .tc-bm-card--featured .tc-btn--block, html[dir="rtl"] .tc-match-gate__cta { unicode-bidi: plaintext; } /* Article navigation (single.php previous/next) — physical arrow mirroring via content-swap. Targets CSS variables we control. */ html[dir="rtl"] [data-prev-arrow]::before, html[dir="rtl"] [data-next-arrow]::after { transform: scaleX(-1); display: inline-block; } /* ===================================================== FAQ accordion (bookmakers) — chevron flip ===================================================== */ html[dir="rtl"] .tc-bm-faq-item summary { padding-right: 0; padding-left: 28px; } html[dir="rtl"] .tc-bm-faq-item summary::after { right: auto; left: 0; } /* ===================================================== HOWTO LIST — number on the right of step name ===================================================== */ html[dir="rtl"] .tc-bm-howto h3 { flex-direction: row-reverse; justify-content: flex-end; } /* ===================================================== ODDS COMPARATOR — table cells stay numeric LTR (numbers like "1.45" must be read LTR even in Arabic) ===================================================== */ html[dir="rtl"] .tc-bm-odds-table td:not(.tc-bm-odds-name), html[dir="rtl"] .tc-bm-odds-table th:not(:first-child) { direction: ltr; text-align: center; } html[dir="rtl"] .tc-bm-odds-table th:first-child, html[dir="rtl"] .tc-bm-odds-table td:first-child { text-align: start; } /* ===================================================== FREEMIUM BANNER — pin to bottom-left in RTL ===================================================== */ html[dir="rtl"] .tc-fm-banner { right: auto; left: 20px; } @media (max-width: 600px) { html[dir="rtl"] .tc-fm-banner { left: 10px; right: 10px; } } /* ===================================================== LISTS / BULLET POINTS ===================================================== */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.5em; padding-left: 0; } html[dir="rtl"] .tc-bm-pros li { padding-right: 0; padding-left: 0; } /* ===================================================== FORMS — labels + inputs alignment ===================================================== */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: start; } html[dir="rtl"] .tc-form label { text-align: start; } /* ===================================================== FREEMIUM MODAL — close button left ===================================================== */ html[dir="rtl"] .tc-fm-modal__close { right: auto; left: 12px; } /* ===================================================== MATCH PREDICTION GATE — RTL adjustments ===================================================== */ html[dir="rtl"] .tc-match-gate__benefits li { padding-left: 0; padding-right: 28px; } html[dir="rtl"] .tc-match-gate__benefits li::before { left: auto; right: 0; } /* ===================================================== PROGRESS / LANGUAGE SWITCHER (footer) ===================================================== */ html[dir="rtl"] .tc-lang-switcher { direction: rtl; } /* Audit fix: dropdown was opening to the right of the trigger which, in RTL, lands it OUTSIDE the viewport on mobile. Flip to anchor on the left of the trigger. */ html[dir="rtl"] .tc-lang-switcher__dropdown { right: auto; left: 0; } /* ===================================================== TOAST NOTIFICATIONS (mirrored to left edge in RTL) ===================================================== */ html[dir="rtl"] .tc-toast-container { right: auto; left: 20px; } html[dir="rtl"] .tc-toast { transform-origin: left center; } @media (max-width: 600px) { html[dir="rtl"] .tc-toast-container { left: 10px; right: 10px; } } /* ===================================================== HERO STEP PILLS (1️⃣ 2️⃣ 3️⃣ ...) — natural RTL order ===================================================== */ html[dir="rtl"] .tc-hero__steps, html[dir="rtl"] .tc-hero-steps, html[dir="rtl"] .tc-step-pills { flex-direction: row-reverse; } /* ===================================================== STATS BAR — divider direction ===================================================== */ html[dir="rtl"] .tc-stats-bar { flex-direction: row-reverse; } /* ===================================================== Tâche 30 (Apr 2026) — completion pass ----------------------------------------------------- Audit found ~15 components still using physical directional CSS that didn't reflect reading direction in Arabic. Cards/inputs/lists/tables now covered. The text-align rules were migrated to `start`/`end` directly in the source CSS (no override needed); only the physical-only properties (border-left, padding-left etc.) live here. ===================================================== */ /* Decorative left-bar accents — flip the bar to the trailing edge. Each rule sets `border-left: none` first to undo the LTR rule, then redraws with the same color/width on the right. We can't use `border-inline-start` because it would draw on the SAME visual side as the LTR `border-left` (RTL inline-start = right physically), which is what we want. We avoid it here only because the source CSS uses `border-left` and we don't want a sweeping refactor for Tâche 30. */ html[dir="rtl"] .tc-section.tc-article blockquote { border-left: none; border-right: 3px solid var(--tc-green); border-radius: var(--tc-radius) 0 0 var(--tc-radius); } html[dir="rtl"] .tc-snippet-block { border-left: none; border-right: 4px solid var(--tc-green); } html[dir="rtl"] .tc-instant-answer { border-left: none; border-right: 4px solid var(--tc-gold); } html[dir="rtl"] .tc-voice-answer { border-left: none; border-right: 4px solid var(--tc-green, #22c55e); } html[dir="rtl"] .tc-simulator-wrap .results, html[dir="rtl"] .tc-simulator-wrap .history-item { border-left: none; border-right: 4px solid #22c55e; } html[dir="rtl"] .tc-bm-voice-answer { border-left: none; border-right: 4px solid #f1c40f; } html[dir="rtl"] .tc-bm-methodology li { border-left: none; border-right: 3px solid #2ecc71; } /* Mobile narrower viewport accents (cascade from desktop bar width override). Just narrows the right border to match. */ @media (max-width: 479px) { html[dir="rtl"] .tc-snippet-block, html[dir="rtl"] .tc-instant-answer { border-left-width: 0; border-right-width: 3px; } } /* Ordered/numbered list indents: the number lives on the start side, so the indent must follow. */ html[dir="rtl"] .tc-howto-steps { padding-left: 0; padding-right: 20px; } @media (max-width: 479px) { html[dir="rtl"] .tc-howto-steps { padding-left: 0; padding-right: 16px; } } /* Cards / generic .tc-card body — borders are symmetric (full border around the card) so no flip needed. Only the inner text-align needs alignment, and rtl.css already handles that at the top of this file (line ~66). The interactive `:hover` and `:focus-visible` outlines defined in components.css are also direction-agnostic (outline applies to all 4 sides), so cards are a no-op here. Documenting for future readers. */ /* Inputs — focus rings are symmetric (`box-shadow` spreads in all directions, `outline` covers the full perimeter). Padding on inputs is also symmetric in the source CSS. Nothing to override. The text-align: start at line ~191 of this file already covers the value alignment. */