/* Right-to-left layout for the Arabic and Urdu pages (/ar/, /ur/). Loaded after home.css or styles.css, only on pages with dir="rtl".
   The shared stylesheets already use logical properties (inline-start / inline-end), so most of the page mirrors on its own.
   This file adds what logical properties cannot: text rhythm, and the pieces that are drawn at a fixed angle.
   Rules here use html[dir="rtl"], so they apply to every right-to-left language. The font stacks are per language:
   Arabic's is below, Urdu's is in langfonts.css. */
html:lang(ar) {
  --font: "Atkinson Hyperlegible Next", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Tahoma", "Arial", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Tahoma", "Arial", sans-serif;
}
html[dir="rtl"] {
  /* Arabic needs more line height than Latin for its tall marks. */
  --glow: linear-gradient(245deg, rgba(18,22,25,.94) 0%, rgba(18,22,25,.72) 38%, rgba(10,117,108,.18) 70%, rgba(232,96,74,.10) 100%);
}
html[dir="rtl"] body { line-height: 1.8; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.4; }
html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] dd, html[dir="rtl"] summary { line-height: 1.8; }
/* Letter spacing breaks the joins between Arabic letters, and upper-casing means nothing in Arabic. */
html[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
/* Latin runs (brand, form names, e-mail and web addresses) keep their own direction inside Arabic lines. */
html[dir="rtl"] bdi { unicode-bidi: isolate; }
/* Long web addresses inside a sentence must wrap: on a narrow right-to-left page an unbroken run otherwise pokes out past the left edge, where it is clipped and cannot be scrolled to. */
html[dir="rtl"] bdi { overflow-wrap: anywhere; }
html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] .url, html[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input, html[dir="rtl"] textarea { unicode-bidi: plaintext; }
/* Backgrounds that fade in from one side start from the other side. */
html[dir="rtl"] .stampcard::after { background: linear-gradient(270deg, rgba(14,17,19,.9), rgba(14,17,19,.2)); }
html[dir="rtl"] .hero::before { background: var(--glow), linear-gradient(0deg, rgba(18,22,25,.55), transparent 35%); }
/* Screen-reader-only text is hidden with a physical offset in the English pages; off the right edge of a right-to-left page that offset widens the page. Clip it instead. */
html[dir="rtl"] .sr, html[dir="rtl"] [style*="-9999px"] { left: auto !important; inset-inline-start: 0 !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[dir="rtl"] [style*="text-align:left"] { text-align: start !important; }
/* The hero photo is mirrored so the text (now on the right) stays clear of the plane, which then flies toward the reading direction.
   It is a sky photo with no text or logo in it. The slow zoom keeps the mirror. */
html[dir="rtl"] .hero-bg img { object-position: 50% 50%; transform-origin: 50% 48%; transform: scaleX(-1); animation-name: kb-rtl; }
@keyframes kb-rtl { from { transform: scaleX(-1) scale(1) translate3d(0,0,0); } to { transform: scaleX(-1) scale(1.05) translate3d(1%,-.5%,0); } }
@media (prefers-reduced-motion: reduce) { html[dir="rtl"] .hero-bg img { animation: none; transform: scaleX(-1); } }
/* At 320px the text column of the dark phone section is 310px wide inside a 288px wrapper (also true in English, where it just scrolls right). Right-to-left it would be clipped on the left, so let the column shrink. */
html[dir="rtl"] .screens-in > * { min-width: 0; }
/* The breadcrumb chevron is plain text (›), which does not mirror by itself: in a right-to-left line it would point back at the previous crumb. Flip it. */
html[dir="rtl"] .crumbs span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }