/* RTL + Arabic typography for index.ar.html (go-live preparation).
   Noto Sans Arabic is self-hosted (SIL Open Font License). No external font CDN.
   Inter remains for Latin brand names (eMedia Cards, etc.). */

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/NotoSansArabic-wght.woff2") format("woff2");
  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;
}

html[dir="rtl"] {
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "SF Arabic", "Noto Naskh Arabic", Arial, sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] .emc-consent,
html[dir="rtl"] .emc-consent h2,
html[dir="rtl"] .emc-consent p,
html[dir="rtl"] .emc-consent button,
html[dir="rtl"] .emc-consent-reopen {
  font-family: Inter, var(--font-arabic), -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Once apply_translation.py has filled in Arabic, zero Inter's negative tracking. */
html[dir="rtl"][data-translated="1"] h1,
html[dir="rtl"][data-translated="1"] h2,
html[dir="rtl"][data-translated="1"] h3,
html[dir="rtl"][data-translated="1"] .hero-slogan,
html[dir="rtl"][data-translated="1"] .statement,
html[dir="rtl"][data-translated="1"] .conclusion,
html[dir="rtl"][data-translated="1"] .cloud-subtitle,
html[dir="rtl"][data-translated="1"] .scan-title,
html[dir="rtl"][data-translated="1"] .speed-number,
html[dir="rtl"][data-translated="1"] .heritage-stats strong,
html[dir="rtl"][data-translated="1"] .eyebrow {
  letter-spacing: 0;
}

/* ---- Logical / mirrored physical properties ---- */
html[dir="rtl"] .skip-link { left: auto; right: 20px; }
html[dir="rtl"] .reading-progress { left: auto; right: 0; transform-origin: right; }

html[dir="rtl"] .story-substeps button,
html[dir="rtl"] .story-step-trigger,
html[dir="rtl"] .feature-select,
html[dir="rtl"] .question-list button,
html[dir="rtl"] .portrait-typewriter-copy,
html[dir="rtl"] .emc-consent {
  text-align: right;
}

html[dir="rtl"] .story-step-trigger {
  padding: 10px 18px 10px 6px;
}

html[dir="rtl"] footer .social-links .social-label {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .media-number,
html[dir="rtl"] .media-note,
html[dir="rtl"] .dev-label { left: auto; right: 36px; }
html[dir="rtl"] .media-format { right: auto; left: 36px; }

html[dir="rtl"] .video-toggle { right: auto; left: 20px; }
html[dir="rtl"] .dialog-close { right: auto; left: 20px; }

html[dir="rtl"] .mobile-distance-pause { right: auto; left: 20px; }
@media (max-width: 800px) {
  html[dir="rtl"] .mobile-distance-pause { left: 10px; right: auto; }
}

html[dir="rtl"] .emc-consent-reopen { left: auto; right: 20px; }
@media (max-width: 760px) {
  html[dir="rtl"] .emc-consent-reopen { right: 12px; left: auto; }
}

/* Cookie banner: keep it centered with physical left/right already set on both sides. */
html[dir="rtl"] .emc-consent { text-align: right; }

/* Editions table: feature labels align to the start (right). */
html[dir="rtl"] #editions.editions-comparison .comparison-feature-heading,
html[dir="rtl"] #editions.editions-comparison .comparison-table tbody .feature-category th,
html[dir="rtl"] #editions.editions-comparison .comparison-table tbody tr:not(.feature-category) th {
  text-align: right !important;
}
html[dir="rtl"] #editions.editions-comparison .comparison-value li:before {
  margin-right: 0;
  margin-left: 8px;
}
@media (max-width: 800px) {
  html[dir="rtl"] #editions.editions-comparison .comparison-intro,
  html[dir="rtl"] #editions.editions-comparison .comparison-footnote { text-align: right; }
  html[dir="rtl"] #editions.editions-comparison .comparison-table tbody .feature-category th { padding-left: 20px; padding-right: 13px; }
  html[dir="rtl"] .edition-name span { margin-left: 0; margin-right: 15px; }
}

/* Media frame corners: flip decorative L-brackets. */
html[dir="rtl"] .media::before {
  border-left: 0;
  border-right: 1px solid var(--stage-hairline, #fff);
}
html[dir="rtl"] .media::after {
  inset: auto auto 20px 20px;
  border-right: 0;
  border-left: 1px solid var(--stage-hairline, #dde3e9);
}

/* Heritage / text-entry animations come from the inline-start side. */
html[dir="rtl"] .heritage-stats > div.entry-ready { transform: translateX(clamp(28px, 5vw, 64px)); }
html[dir="rtl"] [data-text-entry="always-ahead"].entry-ready { transform: translateX(60px); }

/* Header: keep the main nav visually centered (left:50% + translateX(-50%) still works).
   Flip the residual margin on the nav when the absolute centering is not active. */
@media (min-width: 801px) {
  html[dir="rtl"] .nav-shell.nav-shell-en > .desktop-nav {
    margin-right: 0;
    /* The shared header rule uses left:50%; transform:translateX(-50%) — remains correct. */
  }
}

/* Editorial journey copy indent and visual bleed. */
html[dir="rtl"] .story-step-panel .journey-visual { margin-left: 0; margin-right: -2px; }

/* License / films: keep artwork LTR so illustrations are not mirrored.
   Captions inside stay RTL via inheritance reset below. */
html[dir="rtl"] .license-story,
html[dir="rtl"] .cloud-scene,
html[dir="rtl"] .cr-scene,
html[dir="rtl"] .coolreader-film,
html[dir="rtl"] .evolution-film,
html[dir="rtl"] .mobile-distance-art,
html[dir="rtl"] .mobile-distance-rail,
html[dir="rtl"] .license-connections,
html[dir="rtl"] .license-final-art,
html[dir="rtl"] .license-art {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .license-step h3,
html[dir="rtl"] .license-step p {
  direction: rtl;
  unicode-bidi: isolate;
}

/* Distance slider: keep 1 m → world from left to right (geographic metaphor). */
html[dir="rtl"] .mobile-distance-selector { direction: ltr; }
html[dir="rtl"] .mobile-distance-stops { direction: ltr; }
html[dir="rtl"] .mobile-distance-value,
html[dir="rtl"] .mobile-distance-caption,
html[dir="rtl"] .mobile-distance-status { direction: rtl; }

/* Language switcher: Arabic label can be slightly larger; keep nowrap. */
html[dir="rtl"] .privacy-lang a[hreflang="ar"] { font-family: var(--font-arabic); }

/* Assistant / text links: decorative arrows are already flipped in the HTML. */

/* Cloud convergence rows are flex, so RTL order + flipped arrow is correct. */
html[dir="rtl"] .cloud-convergence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html[dir="rtl"] .cloud-convergence .cloud-conv-row {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
}

/* Narrative path already uses flex; RTL reverses Idea→Users correctly if arrows are flipped. */


/* Only the second slogan line is blue (the first is wrapped in a span for i18n). */
html[dir="rtl"] .hero-copy .hero-slogan span[data-i18n="hero.slogan.line1"] {
  color: inherit;
}

/* English placeholder copy: isolate so punctuation stays at the end of the Latin sentence.
   Dropped automatically when apply_translation.py sets data-translated="1". */
html[dir="rtl"]:not([data-translated="1"]) [data-i18n],
html[dir="rtl"]:not([data-translated="1"]) [data-i18n-html],
html[dir="rtl"]:not([data-translated="1"]) .availability,
html[dir="rtl"]:not([data-translated="1"]) .emc-consent h2,
html[dir="rtl"]:not([data-translated="1"]) .emc-consent p,
html[dir="rtl"]:not([data-translated="1"]) .emc-consent a,
html[dir="rtl"]:not([data-translated="1"]) .emc-consent button {
  unicode-bidi: isolate;
  direction: ltr;
}

html[dir="rtl"]:not([data-translated="1"]) footer > p {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Keep Latin brand / tech names on one line and in logical order. */
html[dir="rtl"] bdi { white-space: nowrap; }
html[dir="rtl"] .brand span[dir="ltr"] {
  unicode-bidi: isolate;
  direction: ltr;
}
html[dir="rtl"] .footer-credit {
  unicode-bidi: isolate;
  direction: ltr;
}