/*
 * My-Wazifah Language Switcher — switcher UI + Arabic RTL typography.
 * Loaded on every front-end page; the RTL rules only apply when the document
 * direction is rtl, so English pages are untouched.
 */

/* ---------------------------------------------------------
   The switcher (identical in header, drawer and footer)
   --------------------------------------------------------- */
.mw-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--mw-line, #e2dccf);
	border-radius: 999px;
	padding: 2px;
	background: var(--mw-card, #fff);
	line-height: 1;
}
.mw-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--mw-soft, #7d776c);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.mw-lang__item:hover { color: var(--mw-ink, #26231e); text-decoration: none; }
.mw-lang__item.is-active {
	background: var(--mw-brand, #14625f);
	color: #fff;
}
.mw-lang__item:focus-visible { outline: 2px solid var(--mw-brand, #14625f); outline-offset: 2px; }

.mw-lang--drawer { display: flex; width: 100%; justify-content: center; margin-top: 16px; }
.mw-lang--drawer .mw-lang__item { flex: 1 1 0; padding: 10px 12px; font-size: 13px; }
.mw-lang--footer { margin-top: 4px; }

/* ---------------------------------------------------------
   Arabic typography and RTL corrections
   --------------------------------------------------------- */
[dir="rtl"] body,
body.rtl,
body.mw-lang-ar {
	font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
	letter-spacing: 0;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
	font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
	letter-spacing: 0;
	line-height: 1.35;
	word-spacing: .02em;
}
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.85; }

/* Numbers, dates and Latin fragments stay left-to-right inside Arabic text. */
[dir="rtl"] time,
[dir="rtl"] .mw-ltr,
[dir="rtl"] [lang="en"] { direction: ltr; unicode-bidi: isolate; }

/* Lists and quotes flip their indentation. */
[dir="rtl"] ul,
[dir="rtl"] ol { padding-inline-start: 20px; padding-inline-end: 0; }
[dir="rtl"] blockquote { border-left: 0; border-right: 3px solid var(--mw-line, #e2dccf); padding-inline-start: 16px; }

/* Directional icons (arrows, chevrons) point the other way. */
[dir="rtl"] .mw-icon--arrow,
[dir="rtl"] .mw-insight__link svg,
[dir="rtl"] .mw-link-more svg { transform: scaleX(-1); }

/* Anything that hard-codes a left/right edge gets logical spacing back. */
[dir="rtl"] .mw-eyebrow,
[dir="rtl"] .mw-section__head,
[dir="rtl"] .mw-card,
[dir="rtl"] .mw-filters { text-align: right; }

/* Long Arabic headlines must never widen the page on mobile. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .mw-card__title { overflow-wrap: anywhere; }