/*
 * Mylistingo RTL layer for Arabic pages (Polylang, pilot 25 Sep 2026).
 * Loaded only when is_rtl() (enqueued by the "Mylistingo i18n" code snippet), after JNews's own
 * rtl.css, which already mirrors floats, menus, dropdowns, meta rows and cards. This file adds:
 * the Arabic typefaces, the parts of the Mylistingo layer JNews does not know about, and mirroring
 * for icons that point in a reading direction.
 *
 * No colours are defined here: everything uses JNews's custom properties (--j-accent-color,
 * --j-heading-color, --j-body-color in both schemes; --j-bg-color, --j-border-color, --j-txt-color
 * in dark mode) or the homepage tokens (--line, --card, --text, --meta), with currentColor mixes as
 * fallbacks, so light and dark mode both follow the site palette.
 */

/* ---------- typefaces ---------- */
/* IBM Plex Sans Arabic for UI, navigation and headings; Noto Naskh Arabic for reading text.
   Latin runs inside Arabic text (BSN, DigiD, URLs) fall through to the next family in the stack. */
html[dir="rtl"] body,
html[dir="rtl"] .jeg_menu,
html[dir="rtl"] .jeg_mobile_menu,
html[dir="rtl"] .jeg_post_meta,
html[dir="rtl"] .jeg_meta_container,
html[dir="rtl"] button,
html[dir="rtl"] input {
	font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .jeg_post_title,
html[dir="rtl"] .entry-header .jeg_post_title,
html[dir="rtl"] .jeg_block_title {
	font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
	letter-spacing: 0;            /* Arabic script must never be letter-spaced */
	line-height: 1.45;
}

html[dir="rtl"] .content-inner,
html[dir="rtl"] .content-inner p,
html[dir="rtl"] .content-inner li,
html[dir="rtl"] .content-inner td,
html[dir="rtl"] .content-inner blockquote,
html[dir="rtl"] .entry-content,
html[dir="rtl"] .jeg_post_excerpt,
html[dir="rtl"] .entry-header .jeg_post_subtitle {
	font-family: 'Noto Naskh Arabic', 'Traditional Arabic', 'Times New Roman', serif;
}

html[dir="rtl"] .content-inner p,
html[dir="rtl"] .content-inner li,
html[dir="rtl"] .content-inner td,
html[dir="rtl"] .content-inner th,
html[dir="rtl"] .content-inner blockquote {
	line-height: 1.95;            /* Naskh has tall ascenders and dots; Latin line-height clips them */
	letter-spacing: 0;
	text-align: start;
}

html[dir="rtl"] .content-inner h2,
html[dir="rtl"] .content-inner h3,
html[dir="rtl"] .content-inner h4 {
	font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
	font-weight: 700;
}

/* Uppercase and small-caps treatments mean nothing in Arabic and distort mixed runs. */
html[dir="rtl"] .jeg_post_category a,
html[dir="rtl"] .jeg_meta_category,
html[dir="rtl"] .mlp-eyebrow,
html[dir="rtl"] .ml-eyebrow,
html[dir="rtl"] .ml-kicker {
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- article body: logical sides ---------- */
html[dir="rtl"] .content-inner ul,
html[dir="rtl"] .content-inner ol {
	padding-left: 0;
	padding-right: 0;
	padding-inline-start: 1.6em;
	margin-left: 0;
	margin-right: 0;
}

html[dir="rtl"] .content-inner blockquote {
	border-left: 0;
	border-inline-start: 4px solid var(--j-accent-color, currentColor);
	padding-left: 0;
	padding-inline-start: 20px;
}

html[dir="rtl"] .content-inner table th,
html[dir="rtl"] .content-inner table td {
	text-align: start;
	/* The theme breaks words anywhere in cells; Arabic split between letters is unreadable and
	   "€19.80" split over lines misleads. Cells wrap at spaces only; the table scrolls instead. */
	word-break: normal;
	overflow-wrap: normal;
	min-width: 5.5em;
}

/* Wide tables scroll inside the column instead of pushing the page sideways at 390px. */
html[dir="rtl"] .content-inner table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* "Last updated" box (was an inline border-left in the English source). */
html[dir="rtl"] .content-inner .ml-updated {
	margin: 0 0 24px;
	padding: 12px 16px;
	font-size: 15px;
	border-inline-start: 4px solid var(--j-accent-color, currentColor);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/* "Translated from English" note at the top of each Arabic article. */
html[dir="rtl"] .content-inner .mlg-translated-note {
	margin: 0 0 20px;
	padding: 10px 14px;
	font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: var(--j-meta-txt-color, var(--j-body-color, currentColor));
	border: 1px solid var(--j-border-color, color-mix(in srgb, currentColor 18%, transparent));
	border-inline-start: 4px solid var(--j-accent-color, currentColor);
	border-radius: 4px;
}
html[dir="rtl"] .content-inner .mlg-translated-note a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- English site chrome on Arabic pages ---------- */
/* Widgets, captions, ads and theme strings are still English. Let each paragraph take its direction
   from its own first letter, so English sentences keep their punctuation at the end. */
html[dir="rtl"] .jeg_sidebar,
html[dir="rtl"] .jeg_sidebar *,
html[dir="rtl"] .content-inner .code-block,
html[dir="rtl"] .content-inner .code-block *,
html[dir="rtl"] .content-inner .ml-cta-block,
html[dir="rtl"] .content-inner .ml-cta-block *,
html[dir="rtl"] .content-inner .ml-ad-zone,
html[dir="rtl"] .content-inner .ml-ad-zone *,
html[dir="rtl"] .wp-caption-text,
html[dir="rtl"] .wp-element-caption,
html[dir="rtl"] .jeg_footer p,
html[dir="rtl"] .jeg_footer .widget_title,
html[dir="rtl"] .jeg_search_input,
html[dir="rtl"] .jeg_post_tags,
html[dir="rtl"] .jnews_related_post_container .jeg_post_title {
	unicode-bidi: plaintext;
}

/* ---------- navigation ---------- */
/* Direction-bearing icons: arrows and angles point the other way in RTL. */
html[dir="rtl"] #breadcrumbs .fa-angle-right,
html[dir="rtl"] .jeg_breadcrumbs .fa-angle-right,
html[dir="rtl"] .jeg_readmore .fa-angle-right,
html[dir="rtl"] .jeg_block_loadmore .fa-angle-right,
html[dir="rtl"] .jeg_prevnext_post .fa-angle-right,
html[dir="rtl"] .jeg_prevnext_post .fa-angle-left {
	display: inline-block;
	transform: scaleX(-1);
}

html[dir="rtl"] #breadcrumbs .fa {
	margin: 0 6px;
}

/* Language switcher (built by the i18n snippet): options read in their own direction. */
.mlg-lang-opt > a[dir="ltr"] { text-align: left; }
.mlg-lang-opt > a[dir="rtl"] { text-align: right; }
.jeg_menu .mlg-lang > a,
.jeg_mobile_menu .mlg-lang > a {
	white-space: nowrap;
}
.jeg_menu .mlg-lang-opt.current-menu-item > a,
.jeg_mobile_menu .mlg-lang-opt.current-menu-item > a {
	font-weight: 700;
}

/* ---------- homepage pieces (mirrored for when an Arabic homepage exists) ---------- */
html[dir="rtl"] body.mlg-preview {
	--f-display: 'IBM Plex Sans Arabic', 'Bricolage Grotesque', 'Segoe UI', sans-serif;
	--f-body: 'Noto Naskh Arabic', 'Source Serif 4', Georgia, serif;
}

/* "Your first weeks, in order": the number column sits on the right; grid follows dir. */
html[dir="rtl"] .mlp-steps li {
	direction: rtl;
	text-align: start;
}
html[dir="rtl"] .mlp-steps a {
	letter-spacing: 0;
}

/* Hub and homepage cards: accent bars move to the start edge. */
html[dir="rtl"] .ml-tile {
	border-left: 1px solid var(--ml-line, var(--line, currentColor));
	border-inline-start: 4px solid var(--ml-accent, var(--j-accent-color, currentColor));
}
html[dir="rtl"] .ml-dd ul {
	left: auto;
	right: 0;
}
html[dir="rtl"] .ml-card-body,
html[dir="rtl"] .mlp-card,
html[dir="rtl"] .mlp-dek {
	text-align: start;
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
	html[dir="rtl"] .content-inner p,
	html[dir="rtl"] .content-inner li {
		line-height: 1.9;
	}
	html[dir="rtl"] .entry-header .jeg_post_title {
		line-height: 1.4;
	}
}