/*
 * Arabic. Loaded only on dir="rtl" pages, by the i18n build.
 *
 * WHY A SHEET AND NOT dir="rtl" ALONE. The browser mirrors text direction and
 * the box order of inline content on its own. What it does not mirror is
 * everything the design states in physical terms: a margin-left, a
 * text-align:left, a border on one side, a translateX in an animation. Those
 * stay where they were and the page comes out half flipped, which reads worse
 * than not translating it at all.
 *
 * Kept as overrides rather than a rewrite of the source CSS, because the source
 * is the approved English design and must not move.
 */

[dir="rtl"] {
  /*
   * A Latin stack renders Arabic through whatever fallback the OS picks, which
   * is usually a face with the wrong weight and no proper joining. Named
   * explicitly, system-first: no network request, no layout shift, and every
   * one of these ships with its platform.
   */
  --ar-font: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI",
             Tahoma, "Traditional Arabic", sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
  font-family: var(--ar-font);
  /* Arabic script sits lower and needs more room between lines than Latin at
     the same size. Without this the diacritics touch the line above. */
  line-height: 1.85;
}

/* Arabic has no capitals. letter-spacing and text-transform on a Latin design
   turn a heading into disconnected letterforms -- the single most obvious
   "this was machine translated" tell. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .eyebrow, [dir="rtl"] .cgroup, [dir="rtl"] .edate {
  letter-spacing: normal;
  text-transform: none;
}

/* Anything the design left-aligned explicitly. */
[dir="rtl"] [style*="text-align:left"],
[dir="rtl"] [style*="text-align: left"] { text-align: right !important; }

/* Flex rows the design ordered visually rather than logically. */
[dir="rtl"] [style*="flex-direction:row"],
[dir="rtl"] [style*="flex-direction: row"] { flex-direction: row-reverse; }

/* Form controls: the label, the text and the caret all start on the right. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }

/* An email address and a phone number are read left to right in every
   language. Left alone they render with the TLD leading. */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* The language switcher the build injects. */
[dir="rtl"] .ebdr-lang { left: auto; right: 0; }
[dir="rtl"] .ebdr-lang select { text-align: right; }

/*
 * The 3D hall. Its camera, its lane logic and its label placement are all
 * authored left to right, and mirroring the canvas would mirror the text on
 * every booth with it. The scene stays as it is -- a trade fair floor does not
 * have a reading direction -- and only the copy around it flips.
 */
[dir="rtl"] canvas,
[dir="rtl"] #hall,
[dir="rtl"] .hall { direction: ltr; }