/*
RTL overrides for Elsabagh Mag.
Loaded automatically when Arabic is active. Logical properties in the main
stylesheet already reverse most layout; this file handles the few places that
need an explicit flip.
*/

/* Mirror the hero slider chevrons so they read correctly in RTL. */
.hero-nav--prev .dashicons,
.hero-nav--next .dashicons {
	transform: scaleX(-1);
}

/* Directional accents flip with the text direction. */
.single-content h2,
.single-content h3 {
	border-inline-start-width: 4px;
}

/* Ticker flows right-to-left. */
:root[dir="rtl"] .news-ticker-list {
	animation-name: elsabagh-ticker-rtl;
}

/* Card "read more" arrow points back toward the text. */
.post-card-more .dashicons,
.section-more .dashicons {
	transform: scaleX(-1);
}

/* Search result thumbnails sit on the reading side. */
:root[dir="rtl"] .search-result a {
	flex-direction: row-reverse;
}

/* Author box avatar mirrors to the start edge. */
:root[dir="rtl"] .elsabagh-author-box {
	flex-direction: row-reverse;
	text-align: right;
}

/* Trending number badge stays pinned to the outer edge. */
:root[dir="rtl"] .trending-item {
	flex-direction: row-reverse;
}

/* Ranked sidebar cards follow the same order as the trending list. */
:root[dir="rtl"] .widget ul.wp-block-latest-posts > li,
:root[dir="rtl"] .widget ul.wp-block-archives-list > li,
:root[dir="rtl"] .widget ul.wp-block-categories-list > li,
:root[dir="rtl"] .widget ol.wp-block-latest-comments > li {
	flex-direction: row-reverse;
}

/* Footer social grid stays centred regardless of direction. */
.footer-social-menu {
	justify-content: flex-start;
}

:root[dir="rtl"] .footer-social-menu {
	justify-content: flex-end;
}

/* Progress bar still fills left-to-right from the start edge. */
.reading-progress-bar {
	transform-origin: left center;
}

:root[dir="rtl"] .reading-progress-bar {
	transform-origin: right center;
}

/* Mobile menu slides in from the reading start edge. */
:root[dir="rtl"] .main-navigation.is-open .primary-menu {
	animation-name: elsabagh-slide-in-rtl;
}

@keyframes elsabagh-ticker-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}

@keyframes elsabagh-slide-in-rtl {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* Wordmark and long titles stay on the start edge. */
:root[dir="rtl"] .site-title,
:root[dir="rtl"] .single-title,
:root[dir="rtl"] .hero-slide-title {
	text-align: right;
}