/* =================================================================
   TWINPLANET — RTL mirror overlay for the Persian site (ناب).
   Loaded AFTER styles.css, only on /fa/ pages (html[dir="rtl"]).
   Goal: same design system, mirrored direction — nav order, hero
   globe/satellite side, journey HUD/steps side, arrows, asymmetric
   paddings/borders, carousels — everything that "flips" in RTL.
   Persian type (Vazirmatn) layers on top of the Latin display/body
   fonts so Latin tokens (API, OpenDRIVE…) still render in Inter/Sora.
   ================================================================= */

html[dir="rtl"]{
  --font-fa: "Vazirmatn", "Inter", "Sora", system-ui, sans-serif;
}
html[dir="rtl"] body{
  font-family: var(--font-fa);
  direction: rtl;
}
/* Keep display headings on Vazirmatn too (Sora has no Arabic glyphs) */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .eyebrow, html[dir="rtl"] .btn,
html[dir="rtl"] .nav a, html[dir="rtl"] .journey__alt, html[dir="rtl"] .journey__steps li,
html[dir="rtl"] .step .n, html[dir="rtl"] .tier__k, html[dir="rtl"] .card .more,
html[dir="rtl"] .prodcard__k, html[dir="rtl"] .door__k, html[dir="rtl"] .stat .lbl{
  font-family: var(--font-fa);
}
/* Numerals & unavoidable technical tokens stay LTR islands */
html[dir="rtl"] .ltr,
html[dir="rtl"] [dir="ltr"]{ direction:ltr; unicode-bidi:isolate; }

/* ---------- header / nav ---------- */
html[dir="rtl"] .header{ direction:rtl; }
html[dir="rtl"] .nav a::after{ left:auto; right:.9em; transform-origin:right; }
html[dir="rtl"] .nav-toggle span::before,
html[dir="rtl"] .nav-toggle span::after{ left:0; right:0; }
@media (max-width:1060px){
  html[dir="rtl"] .nav{ inset:64px 0 auto 0; }
}
html[dir="rtl"] .skip-link{ left:auto; right:-9999px; }
html[dir="rtl"] .skip-link:focus{ right:0; left:auto; }

/* ---------- hero: globe + satellite mirror to the LEFT ---------- */
html[dir="rtl"] .hero__globe{ justify-content:flex-start; }
html[dir="rtl"] .globe{ right:auto; left:-15%; }
html[dir="rtl"] .hero__satellite{ justify-content:flex-end; }
html[dir="rtl"] .hero__satellite img{ margin:11vh 56vw 0 0; transform:scaleX(-1); }
@media (max-width:760px){
  html[dir="rtl"] .globe{ left:-22%; right:auto; }
  html[dir="rtl"] .hero__satellite{ justify-content:flex-start; }
  html[dir="rtl"] .hero__satellite img{ margin:6vh 0 0 5vw; }
}
html[dir="rtl"] .hero__inner{ text-align:right; }
html[dir="rtl"] .hero h1{ margin-inline:0 0; }

/* arrow glyphs in CTAs point the other way in RTL ("→" reads as "back") */
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }
html[dir="rtl"] .card .more svg,
html[dir="rtl"] .prodcard .more svg,
html[dir="rtl"] .door .more svg{ transform:scaleX(-1); }

/* ---------- reveal-on-scroll: same motion, no directional change needed ---------- */

/* ---------- journey scrubber: HUD/steps swap sides ---------- */
html[dir="rtl"] .journey__hud{ left:auto; right:clamp(20px,5vw,64px); text-align:right; }
html[dir="rtl"] .journey__steps{ right:auto; left:clamp(20px,4vw,48px); }
html[dir="rtl"] .journey__steps li{ justify-content:flex-start; }
html[dir="rtl"] .journey__progress{ right:auto; left:clamp(28px,4.5vw,56px); }
html[dir="rtl"] .journey__stage::before{
  background:linear-gradient(270deg, rgba(6,11,24,.92) 0%, rgba(6,11,24,.5) 22%, rgba(6,11,24,0) 44%, rgba(6,11,24,0) 66%, rgba(6,11,24,.6) 100%);
}
@media (max-width:860px){
  html[dir="rtl"] .journey__hud{ left:20px; right:20px; text-align:right; }
}

/* ---------- pipeline flow arrows ---------- */
html[dir="rtl"] .pipeline__flow .step:not(:last-child)::after{
  content:"←"; right:auto; left:-16px;
}

/* ---------- door / prodcard / tier accent bars flip to the right edge ---------- */
html[dir="rtl"] .door::after,
html[dir="rtl"] .prodcard::after{ left:auto; right:0; }
html[dir="rtl"] .tier::before{ left:auto; right:0; }
html[dir="rtl"] .cta{ border-left:none; border-right:3px solid var(--green); }
html[dir="rtl"] .newsletter{ border-left:none; border-right:3px solid var(--green); }
html[dir="rtl"] .webinar-feat{ border-left:none; border-right:3px solid var(--green); }

/* ---------- split feature blocks: media swaps sides ---------- */
html[dir="rtl"] .split.rev .split__media{ order:0; }
html[dir="rtl"] .split:not(.rev) .split__media{ order:-1; }
@media (max-width:880px){
  html[dir="rtl"] .split .split__media{ order:0 !important; }
}
html[dir="rtl"] .split ul.ticks li{ flex-direction:row; }

/* ---------- flow-step (scrollytelling) alternation mirrors ---------- */
html[dir="rtl"] .flow-step:nth-child(even) .split__media,
html[dir="rtl"] .flow-step:nth-child(even) .flow-step__media{ order:0; }
html[dir="rtl"] .flow-step:nth-child(odd) .flow-step__media{ order:-1; }

/* ---------- before/after slider: label sides swap ---------- */
html[dir="rtl"] .ba__label--b{ left:auto; right:12px; }
html[dir="rtl"] .ba__label--a{ right:auto; left:12px; }

/* ---------- gallery / lightbox chrome ---------- */
html[dir="rtl"] .gallery__actions{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .gallery__nav svg,
html[dir="rtl"] .gal-prev svg,
html[dir="rtl"] .gal-next svg{ transform:scaleX(-1); }
html[dir="rtl"] .lightbox__close{ right:auto; left:22px; }
html[dir="rtl"] .pg-lb__close{ right:auto; left:20px; }

/* horizontal galleries scroll naturally rtl (browser flips scrollLeft sign) */
html[dir="rtl"] .gallery__strip,
html[dir="rtl"] .hstory__track,
html[dir="rtl"] .post-gallery{ direction:rtl; }

/* ---------- stats / cards / grids: text alignment ---------- */
html[dir="rtl"] .section-head{ text-align:right; }
html[dir="rtl"] .contact__list li{ text-align:right; }

/* ---------- footer ---------- */
html[dir="rtl"] .footer__bottom{ direction:rtl; }
html[dir="rtl"] .socials{ direction:rtl; }

/* ---------- docs nav rail flips to the right border ---------- */
html[dir="rtl"] .docs__nav ul{ border-left:none; border-right:1px solid var(--line); }
html[dir="rtl"] .docs__nav a{ padding:.4em 14px .4em 0; margin-left:0; margin-right:-1px; border-left:none; border-right:2px solid transparent; }
html[dir="rtl"] .docs__nav a:hover{ border-right-color:var(--cyan); }
@media (max-width:880px){ html[dir="rtl"] .docs__nav ul{ border-right:none; } }
html[dir="rtl"] .doc-table th,
html[dir="rtl"] .doc-table td{ text-align:right; }
html[dir="rtl"] .doc-list li{ padding-left:0; padding-right:18px; }
html[dir="rtl"] .doc-list li::before{ left:auto; right:0; }
html[dir="rtl"] .doc-note{ border-left:none; border-right:2px solid var(--line); padding-left:0; padding-right:14px; }
/* code/pre blocks stay LTR — they hold literal syntax */
html[dir="rtl"] pre, html[dir="rtl"] .code, html[dir="rtl"] code{ direction:ltr; text-align:left; unicode-bidi:isolate; }

/* ---------- post body ---------- */
html[dir="rtl"] .post__body blockquote{ border-left:none; border-right:3px solid var(--green); padding:.2em 1.1em .2em 0; }
html[dir="rtl"] .post__body ul,
html[dir="rtl"] .post__body ol{ margin:0 1.2em 1.1em 0; }
html[dir="rtl"] .post__body th,
html[dir="rtl"] .post__body td{ text-align:right; }
html[dir="rtl"] .post__body td:first-child{ white-space:normal; }

/* ---------- cookie banner ---------- */
html[dir="rtl"] .cookie{ border-left:none; border-right:3px solid var(--green); }

/* ---------- scroll cue / misc centered widgets stay centered ---------- */

/* ---------- forms: labels/inputs already inherit text-align from body ---------- */
html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea,
html[dir="rtl"] .field select{ text-align:right; }
html[dir="rtl"] .field input[type=email],
html[dir="rtl"] .field input[dir=ltr]{ text-align:left; }

/* ---------- coverage wall captions ---------- */
html[dir="rtl"] .cov-card__meta{ direction:rtl; }

/* ---------- untranslated-content escape hatch ----------
   Some data-driven records (blog posts, project write-ups, service copy)
   are still English-only at the data layer. Pages wrap that content in
   .en-body so it reads left-to-right and in Latin type inside an
   otherwise-Persian/RTL page, instead of being force-shaped as RTL. */
html[dir="rtl"] .en-body{
  direction:ltr; text-align:left; unicode-bidi:isolate;
  font-family:var(--body);
}
html[dir="rtl"] .en-body h1, html[dir="rtl"] .en-body h2,
html[dir="rtl"] .en-body h3, html[dir="rtl"] .en-body h4{
  font-family:var(--display); text-align:left;
}
html[dir="rtl"] .en-body ul, html[dir="rtl"] .en-body ol{ padding-left:22px; padding-right:0; }

/* ---------- misc absolute badges/tags that sit on one side ---------- */
html[dir="rtl"] .pcard .im .tag,
html[dir="rtl"] .post-card__cat,
html[dir="rtl"] .pf-card__tags,
html[dir="rtl"] .demo-tile__badge{ left:auto; right:10px; }
html[dir="rtl"] .post__hero .post__back svg{ transform:scaleX(-1); }