/* Arabic (RTL) overrides — loaded after site.css only on /ar/ pages. Owner: AR part-1 agent.
   Keep this file general (shared components only); page-specific fixes go in the page's inline <style>. */

/* ---------- type ---------- */
html[dir="rtl"] body{font-family:'Montserrat','IBM Plex Sans Arabic',system-ui,sans-serif}
html[dir="rtl"] .btn,
html[dir="rtl"] :is(input,textarea,select,button){font-family:'Montserrat','IBM Plex Sans Arabic',sans-serif}
/* letter-spacing breaks Arabic letter joining (the Latin intro wordmark keeps its tracking) */
html[dir="rtl"] :is(h1,h2,h3,h4,h5,h6,p,a,span,li,td,th,dt,dd,div,small,strong,em,b,label,button,figcaption,summary,input,textarea):not(#intro *){letter-spacing:0!important}
/* Arabic glyphs need more vertical room than the tight Latin display line-heights */
html[dir="rtl"] :is(h1,h2,h3){line-height:1.3}
html[dir="rtl"] .hero h1 .l{padding-bottom:.14em}
html[dir="rtl"] [dir="ltr"]{unicode-bidi:isolate}
html[dir="rtl"] .spec th,html[dir="rtl"] .spec td{text-align:right}

/* directional arrows (16×16 arrow icons used in cards, links and buttons) */
html[dir="rtl"] svg[viewBox="0 0 16 16"],
html[dir="rtl"] :is(.go,.more,.arr,.cap) svg{transform:scaleX(-1)}

/* ---------- intro (Latin wordmark stays LTR) ---------- */
html[dir="rtl"] #intro .in{direction:ltr}

/* ---------- header ---------- */
html[dir="rtl"] nav.main{margin-left:0;margin-right:auto}
html[dir="rtl"] .menu-btn{margin-left:0;margin-right:auto}
@media (max-width:960px){html[dir="rtl"] .lang{margin-left:0;margin-right:auto}html[dir="rtl"] .menu-btn{margin-right:0;margin-left:-8px}}
html[dir="rtl"] nav.main a::after{transform-origin:left}
html[dir="rtl"] nav.main a:hover::after{transform-origin:right}
html[dir="rtl"] .lang{direction:ltr}

/* ---------- homepage hero ----------
   The photo is not mirrored (the machine carries the logo), so the copy stays
   on the dark (left) side of the image; the text itself reads right-to-left. */
@media (min-width:961px){
  html[dir="rtl"] .hero{justify-content:flex-end}
  html[dir="rtl"] .hero .copy{max-width:min(860px,58vw)}
}
html[dir="rtl"] .hero h1{font-size:clamp(34px,4.6vw,68px);line-height:1.22}

/* ---------- marquee ribbon: keep the loop maths LTR ---------- */
html[dir="rtl"] .ribbon .track{direction:ltr}
html[dir="rtl"] .ribbon span{-webkit-text-stroke:0;color:rgba(238,240,244,.22)}
html[dir="rtl"] .ribbon span:hover{color:var(--text)}

/* ---------- horizontal machine showcase ----------
   GSAP moves the track with negative x, so the track itself stays LTR;
   every slide is RTL inside. */
html[dir="rtl"] .hs,html[dir="rtl"] .hs-track{direction:ltr}
html[dir="rtl"] .hs-track .slide{direction:rtl}

/* ---------- strips, galleries, captions ---------- */
html[dir="rtl"] .strip figcaption,
html[dir="rtl"] .gal figcaption{left:auto;right:16px}

/* ---------- decorative swirls ---------- */
html[dir="rtl"] .chrome .swirl{right:auto;left:-14vw}
html[dir="rtl"] .why .swirl{left:auto;right:-16vw}

/* ---------- process steps (timeline on the right) ---------- */
html[dir="rtl"] .steps{padding:0 42px 0 0}
html[dir="rtl"] .steps::before,
html[dir="rtl"] .steps .fill{left:auto;right:7px}
html[dir="rtl"] .steps li::before{left:auto;right:-41px}

/* ---------- footer + floating WhatsApp ---------- */
html[dir="rtl"] footer .legal{padding:20px var(--gut) 20px calc(var(--gut) + 70px)}
html[dir="rtl"] .wa{right:auto;left:22px}

/* "© 2026 OneTech Machinery" must not be reordered by the bidi algorithm */
html[dir="rtl"] footer .legal>span:first-child{direction:ltr;unicode-bidi:isolate}
/* Arabic words are wider than Latin ones at the same ch-based measure */
html[dir="rtl"] h2{max-width:22ch}