/**
 * Arabic typography refinements.
 *
 * Loaded only on RTL pages. The theme's mirrored stylesheet already handles
 * layout, so nothing here touches position or direction — this is purely about
 * making Arabic text sit well in a design drawn for GeneralSans.
 *
 * IBM Plex Sans Arabic is placed FIRST in every stack. Its @font-face carries
 * an Arabic unicode-range, so Latin characters skip it and still render in
 * GeneralSans — brand names and numbers keep the original look.
 */

:root {
	--mn-ar-font: 'IBM Plex Sans Arabic', var(--jkd-font-family, 'GeneralSans'), Arial, sans-serif;
}

html[lang^="ar"] body,
body.rtl {
	font-family: var(--mn-ar-font);
}

/* The theme sets --jkd-font-family with !important in places, so restate the
   stack on the elements that actually carry text. */
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang^="ar"] p,
html[lang^="ar"] a,
html[lang^="ar"] span,
html[lang^="ar"] li,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select,
html[lang^="ar"] label,
html[lang^="ar"] blockquote,
html[lang^="ar"] figcaption,
html[lang^="ar"] .elementor-widget-container,
html[lang^="ar"] .jkd-btn {
	font-family: var(--mn-ar-font);
}

/*
 * Arabic has no capitals and its letterforms carry more detail per em, so the
 * theme's Latin display treatment reads badly: uppercase transforms do nothing
 * useful, wide tracking breaks the joins between letters, and tight leading
 * clips ascenders and dot marks.
 */
html[lang^="ar"] {
	--jkd-font-h1-track: 0;
	--jkd-font-h2-track: 0;
	--jkd-font-h3-track: 0;
	--jkd-font-h4-track: 0;
	--jkd-font-h5-track: 0;
	--jkd-font-h6-track: 0;
	--jkd-font-body-track: 0;
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6 {
	letter-spacing: 0;
	line-height: 1.5 !important;
}

html[lang^="ar"] p,
html[lang^="ar"] li {
	letter-spacing: 0;
	line-height: 1.85;
}

/* Uppercase is meaningless in Arabic and the extra tracking that usually
   accompanies it pulls the cursive joins apart. */
html[lang^="ar"] [class*="eyebrow"],
html[lang^="ar"] .jkd-badge,
html[lang^="ar"] .mn-team__eyebrow,
html[lang^="ar"] .jkd-btn,
html[lang^="ar"] .page-header__subtitle {
	letter-spacing: 0;
	text-transform: none;
}

/* Latin runs inside Arabic text (brand names, URLs, emails) need their own
   direction so punctuation does not jump to the wrong end. */
html[lang^="ar"] [dir="ltr"],
html[lang^="ar"] .trp-ls-language-name,
html[lang^="ar"] input[type="email"],
html[lang^="ar"] input[type="url"],
html[lang^="ar"] input[type="tel"] {
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}

/* Numerals: keep Western digits (the brand uses them in Latin material too)
   and stop them reordering inside Arabic sentences. */
html[lang^="ar"] time,
html[lang^="ar"] .jkd-counter,
html[lang^="ar"] [class*="number"],
html[lang^="ar"] .mn-team__index {
	font-feature-settings: 'tnum' 1;
	unicode-bidi: isolate;
}

/* ── Reveal-media video section ────────────────────────────
 * The theme grows this frame from 70% to 100% of the viewport and keeps it
 * centred with a negative x offset: `dx = -(w - startW) / 2`
 * (main.js, reveal-media widget). That only centres a box anchored on the
 * left. Under RTL the frame anchors right, so the same negative offset moves
 * it twice as far as intended — measured at -440px on a 1468px viewport,
 * leaving a 440px empty strip down the right-hand side.
 *
 * The section contains no text whatsoever, only the video, so restoring
 * left-to-right box flow here is invisible to the reader and makes the
 * theme's own arithmetic correct again. Preferred over patching the theme's
 * JavaScript, which would not survive an update.
 * ────────────────────────────────────────────────────────── */

html[lang^="ar"] .jkd-reveal-media {
	direction: ltr;
}

/* ── Process steps: content alignment ──────────────────────
 * `.step-info` is a COLUMN flex container, so align-items governs the
 * horizontal axis. The theme sets `align-items: flex-start`, and flex-start is
 * already direction-relative — it means "right" in RTL all by itself.
 *
 * The theme's generated RTL stylesheet ran a mechanical left/right flip over
 * it anyway and emitted `align-items: flex-end`, which flips it a second time
 * and lands the heading, paragraph and button back on the left. Measured:
 * every child started at x=430 in both languages instead of mirroring.
 *
 * Restoring flex-start puts them on the reading side.
 * ────────────────────────────────────────────────────────── */

/* The theme ships a hand-written RTL override for exactly this element —
   `body.rtl .jkd-process-steps .details-wrp .step-info { align-items: flex-end }`
   — which outranks a plainer selector, so the chain below is matched to beat
   it rather than relying on !important. */
html[lang^="ar"] .jkd-process-steps .details-wrp .step-info,
[dir="rtl"] .jkd-process-steps .steps-content .details-wrp .step-info,
html[lang^="ar"] .jkd-process-steps .steps-content .step-info {
	align-items: flex-start;
}

/* ── Process steps: connector line ─────────────────────────
 * The connector is 150px wide while the space between two dots is only 110px
 * (45px on tablet, 30px on phones — the widget's own inline stylesheet). It is
 * therefore *wider than the gap it sits in*: it runs underneath the
 * neighbouring dot and protrudes ~15px out the far side. In LTR the gradient's
 * transparent end lands on that overhang so nobody notices; mirrored into RTL
 * the same overhang reads as a stray line shooting out past the first step.
 *
 * Rather than move it, the line is sized to the gap so it simply cannot reach
 * a neighbour. The gap values mirror the widget's inline CSS and its
 * breakpoints; if those change, change these.
 * ────────────────────────────────────────────────────────── */

html[lang^="ar"] .jkd-process-steps .steps-nav .step-dot:not(:first-child)::before {
	/* Mirror of the geometry set for LTR in Additional CSS (width 114px,
	   anchored flush to the dot): the same offset moves to the other side. */
	left: calc( 100% + 0px );
	right: auto;
	width: 114px;

	/* A flat rule reads as a rail; the original one-sided fade only made sense
	   while the line ran underneath the dots. */
	background: var( --jkd-border, rgba( 255, 255, 255, 0.18 ) );
	border-radius: 1px;
	transition: background-color 0.45s cubic-bezier( 0.4, 0, 0.2, 1 ),
	            opacity 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/*
 * Make the rail actually report progress.
 *
 * Each dot owns the segment leading back to the previous one, so the travelled
 * path is the active dot's own segment plus every segment before it. `:has()`
 * expresses "comes before the active step" without touching the widget's JS.
 */
html[lang^="ar"] .jkd-process-steps .steps-nav .step-dot.is-active::before,
html[lang^="ar"] .jkd-process-steps .steps-nav .step-dot:has( ~ .step-dot.is-active )::before {
	background: var( --jkd-accent, #E8BC32 );
	opacity: 1;
}

/* Steps still ahead stay quiet. */
html[lang^="ar"] .jkd-process-steps .steps-nav .step-dot.is-active ~ .step-dot::before {
	background: var( --jkd-border, rgba( 255, 255, 255, 0.18 ) );
	opacity: 0.55;
}

/* ── Scrolling ticker ──────────────────────────────────────
 * The ticker duplicates its content and loops it with
 * `gsap.to(track, { x: -halfWidth, repeat: -1 })` (main.js, ticker widget).
 * That is seamless only while the track is anchored on the left: it slides
 * left and the duplicate copy follows into view behind it.
 *
 * Under RTL the track anchors right, so sliding left drags it straight off
 * its own edge — measured as a bare strip on the right that grew from 2188px
 * to 2290px over 2.4 seconds, widening with every loop.
 *
 * Anchoring the track left again restores the seamless loop. Arabic words are
 * unaffected: each text run still shapes and reads right-to-left through the
 * normal bidi algorithm; only the order the tags file past changes, which
 * carries no meaning in a continuously moving strip.
 * ────────────────────────────────────────────────────────── */

html[lang^="ar"] .jkd-ticker,
html[lang^="ar"] .jkd-ticker-track {
	direction: ltr;
}

/* ── Author-set spacing that Elementor will not mirror ─────
 * Spacing typed into the Elementor editor is written out as physical CSS
 * (`padding: 0 70px 5px 0`, `--margin-left: 12px`), so it stays on the same
 * physical side under RTL instead of following the text. Found by comparing
 * computed padding/margin between / and /ar/ — see scratchpad/padding-sweep.mjs,
 * which can be re-run after page edits to catch new cases.
 *
 * These selectors are tied to this homepage's element ids. If a section is
 * rebuilt from scratch in Elementor its id changes and the matching rule here
 * needs updating.
 * ────────────────────────────────────────────────────────── */

/* Hero + section headings: 70px inset that should sit on the reading side.
   Elementor only applies it above its tablet breakpoint. */
@media ( min-width: 1025px ) {

	html[lang^="ar"] .elementor-element.elementor-element-6392220,
	html[lang^="ar"] .elementor-element.elementor-element-b453824 {
		padding-left: 70px;
		padding-right: 0;
	}
}

/* This one keeps its inset at every breakpoint. */
html[lang^="ar"] .elementor-element.elementor-element-80c7d4b {
	padding-left: 70px;
	padding-right: 0;
}

/* Logo/brand container offset. */
html[lang^="ar"] .elementor-element.elementor-element-3706140 {
	--margin-left: 0px;
	--margin-right: 12px;

	margin-left: 0;
	margin-right: 12px;
}

@media ( max-width: 1024px ) {

	html[lang^="ar"] .elementor-element.elementor-element-3706140 {
		--margin-left: 0px;
		--margin-right: 8px;

		margin-left: 0;
		margin-right: 8px;
	}
}

/* ── Language switcher in the header ───────────────────────
 * The theme never styled a switcher, so give the TranslatePress menu item the
 * same restraint as the rest of the nav.
 * ────────────────────────────────────────────────────────── */

.menu-item .trp-language-switcher-container,
.menu-item-object-language_switcher {
	display: flex;
	align-items: center;
}

.trp-language-switcher .trp-flag-image {
	border-radius: 2px;
	height: auto;
	vertical-align: middle;
	width: 18px;
}

.trp-ls-language-name {
	font-size: var(--jkd-font-small-size, 14px);
}

/* ── Breadcrumb separator: mirror the arrow ────────────────
 * template-parts/ui/breadcrumbs.php hard-codes JKDTheme::icon('nav-arrow-right'),
 * and the theme's own RTL sheet does not flip it, so the chevron kept pointing
 * right while the trail reads right-to-left: "الرئيسية > تواصل معنا" pointed
 * back at the crumb it came from. Mirroring the glyph is the correct fix here —
 * the separator carries direction, not text, so scaleX(-1) simply reverses it.
 * .bc-sep is already display:inline-flex (a direct child of .jkd-breadcrumbs),
 * so the transform applies without a display change.
 * ────────────────────────────────────────────────────────── */

html[lang^="ar"] .jkd-breadcrumbs .bc-sep {
	transform: scaleX(-1);
}

/* ── Pagination arrows: mirror next/prev ───────────────────
 * The theme prints iconoir-arrow-right for "next" and -left for "prev", and
 * its own RTL sheet ships the identical .pagination__icon rule with no flip —
 * so in Arabic the "next" arrow pointed back the way the reader came from.
 * These glyphs carry direction rather than text, so mirroring is the correct
 * fix. .pagination__icon is already display:flex, so the transform applies.
 * ────────────────────────────────────────────────────────── */

html[lang^="ar"] .jkd-pagination .pagination__icon,
html[lang^="ar"] .ais-Pagination .pagination__icon {
	transform: scaleX(-1);
}