/* rtl.css — RTL mirror layer for Arabic (ar) pages.
   Loaded after style.css / home.css / product.css on pages under /ar/.
   Scope: html[dir=rtl] only — English pages never load this file. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-arabic-400.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-arabic-500.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-arabic-700.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/noto-naskh-arabic-500.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/noto-naskh-arabic-700.ttf") format("truetype");
}

/* --- Type stacks -------------------------------------------------------- */

[dir=rtl] body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
}
[dir=rtl] .hero-copy h1,
[dir=rtl] .section-intro h2,
[dir=rtl] .feature-copy h2,
[dir=rtl] .product-availability h2,
[dir=rtl] .friction-foot,
[dir=rtl] .spec-strip dd,
[dir=rtl] .home-closing h2,
[dir=rtl] .legal h1,
[dir=rtl] .legal h2,
[dir=rtl] .legal h3 {
  font-family: "Noto Naskh Arabic", "Fraunces", Georgia, serif;
}
/* Arabic script is connected — letterspacing harms it. Latin-only labels
   (brand wordmark, spec numerals) keep their tracking via their own stacks. */
[dir=rtl] .home-eyebrow,
[dir=rtl] .friction-heading,
[dir=rtl] .app-status,
[dir=rtl] .home-made,
[dir=rtl] .product-eyebrow,
[dir=rtl] .feature-number,
[dir=rtl] .status-chip,
[dir=rtl] .ledger-title,
[dir=rtl] .spec-strip dt,
[dir=rtl] .availability-panel strong,
[dir=rtl] .product-label {
  letter-spacing: 0;
}
[dir=rtl] .hero-copy h1,
[dir=rtl] .section-intro h2,
[dir=rtl] .feature-copy h2,
[dir=rtl] .product-availability h2,
[dir=rtl] .home-closing h2,
[dir=rtl] .home-brand,
[dir=rtl] .site-brand,
[dir=rtl] .app-identity strong {
  letter-spacing: 0;
}
[dir=rtl] .hero-copy h1 { line-height: 1.12; }
[dir=rtl] .section-intro h2,
[dir=rtl] .feature-copy h2,
[dir=rtl] .product-availability h2,
[dir=rtl] .home-closing h2 { line-height: 1.15; }

/* --- Chrome ------------------------------------------------------------- */

[dir=rtl] .skip-link { left: auto; right: 16px; }
/* The "mle apps" wordmark is Latin — keep its internal LTR lockup so it
   never reads "apps mle". */
[dir=rtl] .home-brand,
[dir=rtl] .site-brand,
[dir=rtl] .brand { direction: ltr; }
[dir=rtl] .home-brand svg,
[dir=rtl] .site-brand svg { margin-right: 0; margin-left: 4px; }
[dir=rtl] .home-nav,
[dir=rtl] .product-nav { margin-left: 0; margin-right: auto; }
[dir=rtl] .home-made {
  padding-left: 0; padding-right: 28px;
  border-left: 0; border-right: 1px solid var(--home-line);
}
[dir=rtl] .product-label {
  padding-left: 0; padding-right: 28px;
  border-left: 0; border-right: 1px solid var(--product-line);
}

/* --- Homepage ----------------------------------------------------------- */

[dir=rtl] .hero-copy h1 span::after {
  left: auto; right: 1%;
  transform-origin: right;
}
[dir=rtl] .app-row::before { inset: 0 0 0 auto; }
[dir=rtl] .friction-board { box-shadow: -14px 14px 0 rgba(23, 32, 28, 0.09); }
[dir=rtl] .feature-shot > div { box-shadow: -14px 14px 0 rgba(244, 241, 233, 0.08); }
[dir=rtl] .feature-shot figcaption { text-align: start; }

/* --- Product page -------------------------------------------------------- */

[dir=rtl] .shot-frame { box-shadow: -14px 14px 0 rgba(245, 242, 234, 0.08); }
[dir=rtl] .workspace-ledger {
  left: auto; right: -32px;
  box-shadow: -10px 10px 0 rgba(32, 41, 58, 0.16);
}
[dir=rtl] .feature-copy li { padding: 15px 22px 15px 0; }
[dir=rtl] .feature-copy li::before { left: auto; right: 0; }

/* --- Legacy dark pages (support, privacy links) ------------------------- */

[dir=rtl] nav a { margin-left: 0; margin-right: 22px; }
[dir=rtl] ul.tight { padding-left: 0; padding-right: 22px; }
[dir=rtl] th, [dir=rtl] td { text-align: right; }
[dir=rtl] footer.site a { margin-left: 0; margin-right: 18px; }
[dir=rtl] .brand { letter-spacing: 0.02em; }

/* --- Directional glyphs -------------------------------------------------- */
/* ↗ / ↓ / ↑ link glyphs mirror horizontally in RTL; translateX flips too. */

[dir=rtl] .home-button > span[aria-hidden],
[dir=rtl] .feature-link > span[aria-hidden],
[dir=rtl] .closing-actions a > span[aria-hidden],
[dir=rtl] .product-text-link > span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}
[dir=rtl] .app-arrow { display: inline-block; transform: scaleX(-1); }
[dir=rtl] a.app-row:hover .app-arrow,
[dir=rtl] a.app-row:focus-visible .app-arrow {
  transform: translate(-3px, -3px) scaleX(-1);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1000px) {
  [dir=rtl] .workspace-ledger { left: auto; right: 20px; }
}