/**
 * RTL Overrides
 * Applied automatically when is_rtl() is true.
 *
 * @package RaddadDocs
 */

/* Directional property flips */
[dir="rtl"] .docs-sidebar__nav li.is-active > a::before {
	border-radius: 3px 0 0 3px;
}

[dir="rtl"] .docs-article blockquote {
	border-inline-start: none;
	border-inline-end: 4px solid var(--color-primary);
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

[dir="rtl"] .docs-toc__nav a {
	border-inline-start: none;
	border-inline-end: 2px solid transparent;
}

[dir="rtl"] .docs-toc__nav a:hover {
	border-inline-end-color: var(--color-border);
}

[dir="rtl"] .docs-toc__nav a.is-active {
	border-inline-end-color: var(--color-primary);
}

/* Code blocks: LTR always */
[dir="rtl"] pre,
[dir="rtl"] code {
	direction: ltr;
	text-align: left;
	unicode-bidi: embed;
}

/* Sidebar mobile RTL slide direction */
@media (max-width: 900px) {
	[dir="rtl"] .docs-sidebar {
		transform: translateX(100%);
	}
	[dir="rtl"] .docs-sidebar.is-open {
		transform: translateX(0);
	}
}

/* Arabic typography adjustments
   IBM Plex Sans Arabic handles both Arabic and Latin natively,
   so no separate Arabic font fallback needed. Just adjust
   line-height and remove letter-spacing (not used in Arabic). */
[lang="ar"] .docs-article,
[dir="rtl"] .docs-article {
	line-height: 1.9;
}

[dir="rtl"] .docs-article h1,
[dir="rtl"] .docs-article h2,
[dir="rtl"] .docs-article h3 {
	letter-spacing: 0;
}

/* Nav: chevron — default points left in RTL (flip horizontally) */
[dir="rtl"] .docs-sidebar__nav .has-children > a .chevron,
[dir="rtl"] .docs-sidebar__section-toggle .chevron {
	transform: scaleX(-1);
}

/* Nav: chevron — open state in RTL */
[dir="rtl"] .docs-sidebar__nav .has-children.is-open > a .chevron {
	transform: scaleX(-1) rotate(90deg);
}

[dir="rtl"] .docs-sidebar__nav .has-children.is-open > .docs-sidebar__section-toggle .chevron {
	transform: scaleX(-1) rotate(90deg);
}

/* Top nav dropdown RTL */
[dir="rtl"] .docs-topnav__menu li ul {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* CTA button arrow: flip in RTL to point left */
[dir="rtl"] .docs-topnav__cta svg {
	transform: scaleX(-1);
}

/* Article prev/next: reverse order in RTL so
   Next appears on the left and Prev on the right,
   matching the natural reading direction. */
[dir="rtl"] .docs-article__footer {
	flex-direction: row-reverse;
}

[dir="rtl"] .docs-article__nav-link--prev {
	text-align: left;
}

[dir="rtl"] .docs-article__nav-link--next {
	text-align: right;
	margin-inline-start: 0;
}