/* ==========================================================================
   XINGUANGHUI · Arabic (RTL) layer

   Only the /ar/ pages load this file, and it is loaded after main.css, so it
   overrides by specificity ([dir="rtl"] adds one attribute selector) without
   touching a single line of the English stylesheet. The English site is
   `dir="ltr"`, so nothing here can reach it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Type

   Schibsted Grotesk is a Latin subset: it has no Arabic glyphs. Keeping it
   first means Latin — the XINGUANGHUI wordmark, model codes, IP66, 3000K, DMX512
   — stays in the brand face, while Arabic falls through to a system Arabic
   face. No webfont is downloaded for this.
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  --font-sans: "Schibsted Grotesk", "SF Arabic", "Segoe UI", "Noto Sans Arabic",
    "Dubai", "Geeza Pro", Tahoma, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono",
    "SF Arabic", "Segoe UI", "Noto Sans Arabic", "Dubai", "Geeza Pro", Tahoma,
    monospace;
}

/* Arabic is a joined script: Latin tracking pulls the letters apart and reads
   as a mistake. This sits above single-class rules but below the few compound
   selectors that carry their own spacing, so nothing else moves. */
[dir="rtl"] :lang(ar) {
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   2 · Blocks that were pinned to a physical side
   -------------------------------------------------------------------------- */
[dir="rtl"] .fam__card {
  text-align: right;
}

/* The terms column of the custom-engineering figure. In English it sits left
   of the drawing and aligns toward it; mirrored, it sits right and aligns the
   other way. Narrow screens stack the two, and there the list is simply RTL. */
[dir="rtl"] .custom__terms--left {
  text-align: left;
}

@media (max-width: 899px) {
  [dir="rtl"] .custom__terms--left {
    text-align: right;
  }
}

/* Hairline dashes that hang off the start edge of a list item. */
[dir="rtl"] .transfer__list li {
  padding-left: 0;
  padding-right: var(--space-5);
}

[dir="rtl"] .transfer__list li::before {
  left: auto;
  right: 0;
}

/* --------------------------------------------------------------------------
   3 · Header
   -------------------------------------------------------------------------- */
/* The products dropdown hangs off the item's start edge, which is the right
   one in Arabic. */
[dir="rtl"] .nav__menu {
  left: auto;
  right: calc(-1 * var(--space-4));
}

/* main.css reverses the language bar for RTL because it was written for an
   LTR page holding an RTL string. On a real RTL page the normal row order is
   already correct — العربية first, reading right to left — so undo it. */
[dir="rtl"] .lang {
  flex-direction: row;
}

/* --------------------------------------------------------------------------
   4 · Hover hairlines step the other way
   -------------------------------------------------------------------------- */
[dir="rtl"] .arrow-link:hover::after,
[dir="rtl"] .arrow-link:focus-visible::after,
[dir="rtl"] .way:hover .way__go::after,
[dir="rtl"] .way:focus-visible .way__go::after {
  transform: translateX(-4px);
}

/* --------------------------------------------------------------------------
   5 · About, narrow screens: the timeline turns vertical, so the rule and the
   dots move to the right edge.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  [dir="rtl"] .aj-node {
    padding: 0 26px 26px 0;
  }

  [dir="rtl"] .aj-node::after {
    left: auto;
    right: 3px;
  }

  [dir="rtl"] .aj-node__dot {
    left: auto;
    right: 0;
  }
}

/* The world map and its labels keep their positions: the map is a picture of
   a place, and the two pins are where they are. Only the text inside follows
   the Arabic reading order, which it does by inheritance. */