/*
* RTL adjustments — loaded only when (i.e. Arabic).
*
* The bulk of the layout uses flexbox + relative units, which already mirrors
* correctly under [dir="rtl"]. This sheet covers the few places we used
* directional properties (margin/padding-left/right, text-align: left, etc.).
*/
[dir="rtl"] body {
text-align: right;
}
[dir="rtl"] .nav-bar-wrapper,
[dir="rtl"] .navbar-button-wrapper,
[dir="rtl"] .footer-widget-wrapper,
[dir="rtl"] .footer-menu-wrapper {
flex-direction: row-reverse;
}
[dir="rtl"] .footer-menu-wrap,
[dir="rtl"] .footer-menu-list,
[dir="rtl"] .footer-menu-title {
text-align: right;
}
[dir="rtl"] .social-icon-wrapper {
flex-direction: row-reverse;
}
[dir="rtl"] .button-primary,
[dir="rtl"] .button-login {
direction: rtl;
}
/* Flip directional arrows used in pagination / read-more chrome */
[dir="rtl"] .pagination-arrow-left::before { content: "→"; }
[dir="rtl"] .pagination-arrow-right::before { content: "←"; }
/* Margin overrides where a left/right margin was used directionally */
[dir="rtl"] .lang-switcher {
margin-right: 0;
margin-left: 12px;
}
/* Ensure the brand logo / hero shapes don't float against the wrong edge */
[dir="rtl"] .right-shape { left: 0; right: auto; }
[dir="rtl"] .left-shape { right: 0; left: auto; }
/* Material Symbols glyphs are unicode — keep them LTR per the existing rule
in base.html (.material-symbols-rounded { direction: ltr }) so the glyph
doesn't flip. */
/* List bullets / numbered items align to the start edge in RTL */
[dir="rtl"] ul,
[dir="rtl"] ol {
padding-right: 1.25em;
padding-left: 0;
}
/* Forms */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
text-align: right;
}