/* Hand-written RTL fixups for Hebrew — loaded after the auto-generated *-rtl.css.
   Add targeted corrections here for anything RTLCSS could not flip automatically. */

/* Global safety: prevent horizontal overflow from transforms designed for LTR. */
html[dir="rtl"] body { overflow-x: hidden; }

/* Keep Latin-script brand words / inline code readable inside RTL text. */
html[dir="rtl"] .ltr,
html[dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---- Hebrew typography: Open Sans (has Hebrew glyphs; replaces SF Pro Display) ---- */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] li,
html[dir="rtl"] button, html[dir="rtl"] input,
html[dir="rtl"] textarea, html[dir="rtl"] select,
html[dir="rtl"] label, html[dir="rtl"] blockquote,
html[dir="rtl"] span:not([class*="fa"]):not([class*="icon"]):not([class*="slick"]),
html[dir="rtl"] div:not([class*="fa"]):not([class*="icon"]):not([class*="slick"]) {
  font-family: "Open Sans", "SF Pro Display", "Segoe UI", Arial, sans-serif !important;
}

/* ---- Mirror the decorative hero background for RTL ----
   RTLCSS already flips its position (right:0 -> left:0); this flips the image
   itself so the whole composition mirrors the English layout. .hero-bg is a
   background-only layer (z-index:-1, no children), so scaleX is safe. */
html[dir="rtl"] .hero-bg { transform: scaleX(-1); }

/* ---- Mirror benefits-slider arrow icons for RTL ----
   RTLCSS swaps the arrow positions but rotate(180)->rotate(-180) is a visual
   no-op, so the arrowheads never flip. Prepending scaleX(-1) reflects the
   rendered arrow across the vertical axis = a true horizontal mirror. */
html[dir="rtl"] .arrow,
html[dir="rtl"] .arrL,
html[dir="rtl"] .arrR { transform: scaleX(-1) rotate(180deg) !important; }

/* ---- Mirror the category-filter (Slick) arrow images for RTL ----
   RTLCSS swaps arrow positions but not the image direction (rotate 180 -> -180
   is a no-op). Prepending scaleX(-1) horizontally flips each arrow icon so they
   point the correct way in RTL. Slick's rtl:true handles the slide logic. */
html[dir="rtl"] .category-filter .slick-next { transform: scaleX(-1) !important; }
html[dir="rtl"] .category-filter .slick-prev { transform: scaleX(-1) rotate(-180deg) !important; }

/* ---- About page: mirror the mission section background + gradient image for RTL ----
   RTLCSS already flips their positions (top-right -> top-left, right -> left);
   here we flip the image content. The background uses a pre-flipped PNG; the
   <img> is flipped in place with scaleX(-1). */
html[dir="rtl"] .mission.section { background-image: url(../images/vision-bg-rtl.png); }
html[dir="rtl"] .mission .flgPos img { transform: scaleX(-1); }

/* ---- About/FAQ: mirror the decorative faq_bg images for RTL ----
   RTLCSS already flips their alternating left/right positions; this flips the
   image content so the composition mirrors the English layout. */
html[dir="rtl"] .faq_bg { transform: scaleX(-1); }