/* Arabic pages (docs/ARABIC.md): the Arabic font and right-to-left fixes for the site's CSS.
   Linked only on /ar/ pages, after the site's own stylesheets. <html dir="rtl"> flips the
   flow; the rules below fix what the site's CSS sets with physical left/right. */

@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root[lang="ar"] {
  /* Arabic letters in Plex Sans Arabic; Latin words and numbers keep the site's Switzer. */
  --font: "IBM Plex Sans Arabic", "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Arabic reads better without the tight negative tracking of the Latin headings. */
  --track-display: 0; --track-hero: 0; --track-xl: 0; --track-head: 0; --track-body: 0; --track-caps: 0;
}
[dir="rtl"] body { font-family: var(--font); }
[dir="rtl"] .eyebrow, [dir="rtl"] .tag { text-transform: none; letter-spacing: 0; }

/* Arrows point the way the text reads. */
[dir="rtl"] .arrow:not(.arrow--back), [dir="rtl"] .icon.i-arrow { transform: scaleX(-1); }
[dir="rtl"] .arrow--back { transform: none; }
[dir="rtl"] .pillar:hover .pillar__more .arrow { transform: scaleX(-1) translateX(4px); }

/* Lists and form controls. */
[dir="rtl"] .select { padding-right: 0; padding-left: 24px; background-position: left 5px top 50%, left 0 top 50%; }
[dir="rtl"] .input-group > .icon { left: auto; right: 0; }
[dir="rtl"] .input-group > .input, [dir="rtl"] .input-group > .select { padding-left: 0; padding-right: 28px; }

/* The language switcher. */
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; font-size: var(--t-s); font-weight: 500; color: var(--ink); text-decoration: none; }
.lang-switch:hover { color: var(--accent-ink); }

/* ---- Typography ---------------------------------------------------------------------------- */
/* Arabic letters have tall ascenders and deep descenders: ~12-15% more line height. */
:root[lang="ar"] {
  --lh-tight: 1.2; --lh-hero: 1.24; --lh-xl: 1.3; --lh-head: 1.38;
  --lh-m: 1.5; --lh-body: 1.72; --lh-read: 1.86; --lh-s: 1.62;
}
[dir="rtl"] .t-lead, [dir="rtl"] .article-head__dek, [dir="rtl"] .story--feature .story__body { line-height: 1.7; }
[dir="rtl"] .nav__group a { line-height: 1.45; }
[dir="rtl"] .nav__group-title, [dir="rtl"] .t-caps, [dir="rtl"] .card__fallback { text-transform: none; letter-spacing: 0; }
/* Phone numbers keep their + in front ("+971 50 …"), alone or inside an Arabic sentence. */
[dir="rtl"] a[href^="tel:"] { unicode-bidi: plaintext; }
[dir="rtl"] .contact-lines a[href^="tel:"], [dir="rtl"] .footer-col a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }
/* Latin-only codes and e-mail addresses read left to right. */
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] .cert__code, [dir="rtl"] .footer-codes span { unicode-bidi: isolate; direction: ltr; }

/* ---- Arrows on hover: they move the way the text reads ------------------------------------ */
[dir="rtl"] a:hover .arrow:not(.arrow--ne, .arrow--back),
[dir="rtl"] button:hover .arrow:not(.arrow--ne, .arrow--back),
[dir="rtl"] .card:hover .card__more .arrow,
[dir="rtl"] .link-grid a:hover .arrow { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .arrow--ne { transform: scaleX(-1); }
[dir="rtl"] a:hover .arrow--ne { transform: scaleX(-1) translate(2px, -2px); }
[dir="rtl"] a:hover .arrow--back { transform: translateX(3px); }
[dir="rtl"] .index-row:hover .index-row__arrow { transform: translateX(-4px); }
[dir="rtl"] .site .entry .article-aside__list a:hover .icon { transform: translateX(-3px); }

/* ---- Skip link and off-screen fields (overflow on the left scrolls in RTL) ---------------- */
[dir="rtl"] .skip-link { left: auto; right: var(--gutter); }
[dir="rtl"] .honeypot { left: auto; right: -10000px; }

/* ---- Header: underline, dropdowns and flyouts --------------------------------------------- */
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="rtl"] .nav__item--menu .nav__link::after { right: 12px; left: 28px; }
@media (max-width: 79.99rem) { [dir="rtl"] .nav__item--menu .nav__link::after { right: 9px; left: 25px; } }
[dir="rtl"] .nav__menu { left: auto; right: 0; }
[dir="rtl"] .nav__item--menu:nth-last-child(-n+3) .nav__menu { right: auto; left: 0; }
[dir="rtl"] .nav__all::after { content: "←"; }
[dir="rtl"] .nav__all:hover::after { transform: translateX(-3px); }
[dir="rtl"] .nav__flyout { left: auto; right: 100%; margin-left: 0; margin-right: 8px; transform: translateX(-4px); }
[dir="rtl"] .nav__flyout::before { left: auto; right: -12px; }
[dir="rtl"] .nav__branch:hover > .nav__flyout, [dir="rtl"] .nav__branch:focus-within > .nav__flyout { transform: none; }
[dir="rtl"] .nav__item--menu:nth-last-child(-n+3) .nav__flyout { right: auto; left: 100%; margin-right: 0; margin-left: 8px; }
[dir="rtl"] .nav__item--menu:nth-last-child(-n+3) .nav__flyout::before { right: auto; left: -12px; }
[dir="rtl"] .nav__flyout-chevron { transform: scaleX(-1); }
[dir="rtl"] .header-search kbd { right: auto; left: 0; }

/* ---- Mobile menu: the language link under the search box ---------------------------------- */
.mobile-nav__lang { margin: var(--s-3, 12px) 0 0; }
.mobile-nav__lang .lang-switch { padding-inline: 0; min-height: 44px; }

/* ---- Forms: the select chevrons sit on the left -------------------------------------------- */
[dir="rtl"] .ask__field select {
  padding-right: 0; padding-left: 32px;
  background-position: left 6px top 45%, left 0 top 45%;
}
[dir="rtl"] .cert__detail { text-align: left; }

/* ---- Pictures with captions and labels in a corner ---------------------------------------- */
[dir="rtl"] .home-figure figcaption { left: auto; right: var(--s-4); }
[dir="rtl"] .card__fallback { left: auto; right: 14px; }
[dir="rtl"] .index__media { right: auto; left: 0; }

/* ---- Projects pager ----------------------------------------------------------------------- */
[dir="rtl"] .project-pager__link--next { text-align: left; }
/* The photo viewer keeps the left/right of the photos (prev on the left, as the keys). */

/* ---- Hub pages (tools, academy, accounts, partners) ---------------------------------------- */
[dir="rtl"] .eng-where, [dir="rtl"] .eng-assume, [dir="rtl"] .hub-errors ul, [dir="rtl"] .hub-steps,
[dir="rtl"] .acad-body ul, [dir="rtl"] .acad-body ol, [dir="rtl"] .hub-summary ul,
[dir="rtl"] .hub-signup__list, [dir="rtl"] .hub-print-list { padding-left: 0; padding-right: 1.25em; }
[dir="rtl"] .gl-anchor { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .hub-cal__group-title .muted { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .acad-note { border-left: 0; border-right: 3px solid var(--accent); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .acad-note--warn { border-right-color: var(--danger); }
[dir="rtl"] .acad-table th, [dir="rtl"] .acad-table td { text-align: right; padding: 10px 0 10px 12px; }
[dir="rtl"] .acad-q legend span { margin-right: 0; margin-left: var(--s-2); }
[dir="rtl"] .acad-pager__next, [dir="rtl"] .acad-cert__academy, [dir="rtl"] .acad-cert__foot > div:last-child { text-align: left; }
[dir="rtl"] .primer__count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .primer__end { left: auto; right: 0; }
[dir="rtl"] .pt-preview__table th, [dir="rtl"] .bd-table th { text-align: right; padding: 0 0 var(--s-2) var(--s-3); }
[dir="rtl"] .pt-thanks { border-left: 0; border-right: 3px solid var(--accent); }
[dir="rtl"] .bd-num, [dir="rtl"] .bd-table th.bd-num { text-align: left; }
[dir="rtl"] .bd-timeline { padding: 0 var(--s-5) 0 0; border-left: 0; border-right: 1px solid var(--rule-strong); }
[dir="rtl"] .bd-timeline li::before { left: auto; right: calc(-1 * var(--s-5) - 4px); }
[dir="rtl"] .hub-ticks li { padding-left: 0; padding-right: 1.25em; }
[dir="rtl"] .hub-ticks li::before { left: auto; right: 0; }
[dir="rtl"] .hub-note { padding-left: 0; padding-right: var(--s-4); border-left: 0; border-right: 2px solid var(--accent); }
[dir="rtl"] .hub-item--inline { padding-left: 0; padding-right: 32px; }