@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/noto-sans-arabic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Loaded only by RTL layouts: keep the shared LTR stylesheet and HTML unchanged.
   Flex and grid follow inherited direction; override only physical edges. */
html[dir="rtl"] {
  --font-body: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: var(--font-body);
}
[dir="rtl"] body { font-family: var(--font-body); font-size: 18px; }
/* Arabic joining must survive every heading utility and inherited Latin style. */
[dir="rtl"] body, [dir="rtl"] body * {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
/* Wide leading is for Arabic prose only; display headings stay compact so a long title fits in 2-3 lines. */
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); }
[dir="rtl"] .article-body { font-size: 1.125rem; }
[dir="rtl"] .article-body > p:first-of-type { font-size: 1.185rem; }
[dir="rtl"] .article-body :is(p, li, td, th) { line-height: 1.85; }
[dir="rtl"] :is(h1, h2, h3, h4) { line-height: 1.3 !important; letter-spacing: normal; }
[dir="rtl"] .hero-copy h1 { max-width: none; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.25 !important; }
[dir="rtl"] .article-title { line-height: 1.3 !important; }
/* A Latin name in a heading never wraps inside itself, so its brackets cannot split across lines. */
[dir="rtl"] :is(h1, h2, h3, h4) bdi { white-space: nowrap; }
[dir="rtl"] .article-body { line-height: 1.85; }
[dir="rtl"] .eyebrow, [dir="rtl"] .category-label { letter-spacing: normal; }
[dir="rtl"] .language-switcher > ul { right: auto; inset-inline-end: 0; }
[dir="rtl"] .language-switcher a { unicode-bidi: isolate; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-inline-start: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-inline-start: 0.5rem; }
[dir="rtl"] .right-4 { right: auto; inset-inline-end: 1rem; }
[dir="rtl"] .right-3 { right: auto; inset-inline-end: 0.75rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-inline-start: 1.5rem; }
[dir="rtl"] .text-left { text-align: start; }
[dir="rtl"] .lucide-chevron-right, [dir="rtl"] .lucide-arrow-right,
[dir="rtl"] .lucide-arrow-left, [dir="rtl"] .lucide-chevron-left, [dir="rtl"] .lucide-external-link { transform: scaleX(-1); }
/* Tailwind rotate-180 uses the individual rotate property: reset it before
   mapping a closed down-chevron to left and an expanded one to down. */
[dir="rtl"] button[aria-expanded] > .lucide-chevron-down { rotate: none; transform: rotate(90deg); }
[dir="rtl"] button[aria-expanded="true"] > .lucide-chevron-down { transform: none; }
[dir="rtl"] summary::marker { content: "◂  "; }
[dir="rtl"] details[open] > summary::marker { content: "▾  "; }
[dir="rtl"] .stat-card { border-left-width: 1px; border-inline-start: 3px solid var(--site-accent); }
[dir="rtl"] .badge-new { right: auto; inset-inline-end: 0; border-bottom-left-radius: 0; border-end-start-radius: 0.75rem; }
[dir="rtl"] .category-card::before { left: auto; inset-inline-start: 0; }
[dir="rtl"] .toc-link { border-left: 0; border-inline-start: 2px solid transparent; }
[dir="rtl"] .toc-link[aria-current="true"] { border-inline-start-color: var(--site-accent); border-radius: 0.5rem 0 0 0.5rem; }
[dir="rtl"] .article-body h2 { padding-left: 0; padding-inline-start: 1.1rem; }
[dir="rtl"] .article-body h3 { padding-left: 0; padding-inline-start: 1rem; }
[dir="rtl"] .article-body h2::before, [dir="rtl"] .article-body h3::before { left: auto; inset-inline-start: 0; }
[dir="rtl"] .article-body h2::after { background: linear-gradient(270deg, var(--site-accent), var(--site-accent-2), transparent); }
[dir="rtl"] .article-body ul > li { padding-left: 0; padding-inline-start: 1.6rem; }
[dir="rtl"] .article-body ul > li::before { left: auto; inset-inline-start: 0.25rem; content: "\25C2"; }
[dir="rtl"] .article-body ol > li { padding-left: 0; padding-inline-start: 2.4rem; }
[dir="rtl"] .article-body ol > li::before { left: auto; inset-inline-start: 0; unicode-bidi: isolate; }
[dir="rtl"] .article-body th { text-align: start; letter-spacing: normal; }
[dir="rtl"] .article-body blockquote { border-left: 0; border-inline-start: 4px solid var(--site-accent); border-radius: 0.75rem 0 0 0.75rem; }
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] bdi[dir="ltr"],
[dir="rtl"] .step-number { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] pre { text-align: left; }
/* Ad creative documents use their own LTR coordinate system; outer placements mirror.
   No width/height or inventory change. */
[dir="rtl"] iframe[data-ad-size] { direction: ltr; }
@media (min-width: 640px) {
  [dir="rtl"] .sm\:text-right { text-align: end; }
}
@media (min-width: 768px) {
  [dir="rtl"] .hub-header::after { inset: 0 45% 0 0; mask-image: linear-gradient(270deg, transparent, var(--fixed-scrim) 60%); -webkit-mask-image: linear-gradient(270deg, transparent, var(--fixed-scrim) 60%); }
}
@media (min-width: 1024px) {
  [dir="rtl"] .lg\:pr-1 { padding-right: 0; padding-inline-end: 0.25rem; }
}
@media (min-width: 1280px) and (min-height: 720px) {
  [dir="rtl"] .ad-side-left { left: auto; right: max(12px, calc(50% - 788px)); }
}
@media (min-width: 1280px) and (min-height: 420px) {
  [dir="rtl"] .ad-side-right { right: auto; left: max(12px, calc(50% - 788px)); }
}

[dir="rtl"] time { direction: rtl; unicode-bidi: isolate; }

/* Keep Arabic prose 2px above the matching Latin text size. */
[dir="rtl"] .hero-description { font-size: calc(0.98rem + 2px); }
[dir="rtl"] .home-content p.text-sm { font-size: 1rem; }
[dir="rtl"] .article-card-body p, [dir="rtl"] .pager p { font-size: calc(0.8rem + 2px); }
[dir="rtl"] .article-body table { font-size: calc(0.88rem + 2px); }
[dir="rtl"] .article-body th { font-size: calc(0.78rem + 2px); }

/* Keep the shared client bundle identical for LTR; expose the Arabic native name visually. */
[dir="rtl"] .language-switcher > summary > span { font-size: 0; }
[dir="rtl"] .language-switcher > summary > span::after { content: "العربية"; font-size: 0.75rem; }
[dir="rtl"] .article-body blockquote { font-size: calc(0.95rem + 2px); }
[dir="rtl"] .article-body pre { font-size: calc(0.8rem + 2px); }
[dir="rtl"] .article-body #related-guides + ul a { font-size: calc(0.9rem + 2px); }
/* Stat chips are flex containers, which drop the space between the number and its label; a margin on the
   LTR bdi resolves to the wrong side, so space the flex items instead. */
[dir="rtl"] .hero-stats span { gap: 0.3em; }