/* RTL Override File */

/* Basic Reset for RTL */
[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .font-heading,
[dir="rtl"] .font-body,
[dir="rtl"] body {
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    color: white;
}

[dir="rtl"] .text-transparent {
    color: transparent;
}

/* Flip directional icons if they are not symmetrical */
[dir="rtl"] .ph-caret-right,
[dir="rtl"] .ph-caret-left {
    transform: scaleX(-1);
}

/* Ensure absolute positioning respects RTL where necessary if utility classes fail */
/* Generally, try to use logical properties (start/end) in Tailwind first. 
   Use this file for complex overrides. */

/* Navigation positioning overrides if needed */
[dir="rtl"] .transform-flip {
    transform: scaleX(-1);
}

/* Force Marquee to be LTR so logos scroll in the same direction as the English version.
   Both the overflow container (.mask-linear-gradient) and the animated element need
   direction: ltr to ensure consistent scroll direction. The overflow parent determines
   the initial positioning of the content, and the child determines flex item order. */
[dir="rtl"] .mask-linear-gradient {
    direction: ltr;
}

[dir="rtl"] .animate-marquee {
    direction: ltr;
}

/* Force Navbar to be LTR-like (Logo Left, Menu Right) */
[dir="rtl"] nav .container {
    flex-direction: row-reverse;
}