/* Right-to-left layer for Arabic (and any future RTL locale).
 *
 * Every rule is scoped under [dir="rtl"], so this file is completely inert on
 * the default left-to-right site — it only takes effect once the document
 * direction is flipped for a locale-prefixed Arabic page (/ar/…). Flexbox and
 * text alignment mirror automatically under dir="rtl"; this layer fixes the
 * places that rely on physical left/right (dropdown anchoring, directional
 * padding, and the few icons that must not be mirrored). */

/* Base: numbers, brand names and code stay LTR inside the RTL flow. Modern
 * browsers do this via the Unicode bidi algorithm already; keep code/mono
 * runs explicitly LTR so API snippets and figures never reorder. */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .mono-num,
[dir="rtl"] .stat-value,
[dir="rtl"] .brand-name,
[dir="rtl"] .code-body { direction: ltr; unicode-bidi: isolate; }

/* Keep the wordmark itself left-to-right ("Sudarva" is a Latin brand). */
[dir="rtl"] .brand { text-align: center; }

/* Language dropdown: anchor to the left edge and align item text to the right. */
[dir="rtl"] .lang-dd-menu { right: auto; left: 0; }
[dir="rtl"] .lang-dd-item { text-align: right; }
[dir="rtl"] .lang-dd-item.is-active::after { margin-right: auto; margin-left: 0; }

/* Mobile menu: mirror the item indent and the current-language label. */
[dir="rtl"] .mm-item { padding-left: 0; padding-right: 14px; }
[dir="rtl"] .mm-head { text-align: right; }
[dir="rtl"] .lang-dd--mobile .lang-dd-cur { text-align: right; margin-left: 0; margin-right: 4px; }

/* Chevrons / directional arrows that point along the reading direction should
 * flip so they still point "forward" in RTL. */
[dir="rtl"] .lang-banner-go svg,
[dir="rtl"] .nav-cta svg,
[dir="rtl"] .btn svg.arrow,
[dir="rtl"] .arrow-svg { transform: scaleX(-1); }

/* Generic safety net: content sections read right-aligned. Body text and
 * headings already follow dir; this catches any element that hard-set
 * text-align:left inline-equivalent via class defaults. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .lead,
[dir="rtl"] .section-lead { text-align: right; }

/* Hero globe. In LTR it sits off the RIGHT edge, behind the left-aligned hero
 * copy. Under RTL the copy is right-aligned, so the globe must move to the LEFT
 * edge or it collides with the text. Mirror the box and flip the horizontal
 * fade so it still blends toward the text side. Desktop and mobile use
 * different offsets; the mobile fade is vertical-only, so it is left as-is. */
@media (min-width: 981px) {
  [dir="rtl"] .globe-box { right: auto; left: -8%; }
  [dir="rtl"] .globe-fade {
    background: linear-gradient(270deg, var(--bg) 0%, transparent 46%),
                linear-gradient(180deg, transparent 56%, var(--bg) 90%);
  }
}
@media (max-width: 980px) {
  [dir="rtl"] .globe-box { right: auto; left: -18%; }
}

/* The animated widgets in the mega-menu panels — the provisioning terminal
 * (provision.sh / "$ curl … /v1/profiles"), the cable/packet flow and the
 * signal graphic — are code/telemetry readouts. They must stay left-to-right
 * even on an RTL page (exactly like code and API snippets), or the terminal's
 * traffic-light header, its typing animation and the "$" prompt render
 * mirrored and misaligned. */
[dir="rtl"] .mega-term,
[dir="rtl"] .mega-cable,
[dir="rtl"] .mega-signal { direction: ltr; text-align: left; }
/* The Developers mega leads with the terminal on the right in LTR; under RTL
 * the surrounding grid mirrors automatically, so only the code direction above
 * needs pinning — the block itself follows the flipped column order. */

/* The animated widgets are absolutely pinned to the RIGHT edge in LTR (the
 * terminal, the cable/packet flow, the signal graphic), with a fade mask that
 * dissolves their inner edge into the panel. Under RTL the menu content
 * mirrors to the right, so the animation must move to the LEFT edge and the
 * mask must flip (fade the now-inner right edge instead), or it collides with
 * the links and sits on the wrong side. */
[dir="rtl"] .mega-term {
  right: auto; left: clamp(20px, 4vw, 64px);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
          mask-image: linear-gradient(270deg, transparent 0%, #000 14%);
}
[dir="rtl"] .mega-cable {
  right: auto; left: clamp(24px, 5vw, 76px);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 26%);
          mask-image: linear-gradient(270deg, transparent 0%, #000 26%);
}
[dir="rtl"] .mega-signal {
  right: auto; left: clamp(28px, 6vw, 96px);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 24%);
          mask-image: linear-gradient(270deg, transparent 0%, #000 24%);
}