/* =========================================================================
   SIGNAL — Right-to-left layer (Arabic).
   Loaded only when is_rtl() is true. Stacks on top of signal.css + the
   overrides layer. Two jobs:
     1. Mirror the few non-symmetric layouts (brand reveal transform,
        scroll-cue arrow, lifecycle thread, conveyor direction, etc.).
     2. Swap the Latin display+body fonts for Tajawal + Reem Kufi so
        Arabic still reads as the same editorial design (Plus Jakarta
        Sans + Instrument Serif have no Arabic glyphs).
   ========================================================================= */

/* ── 1. ARABIC FONT STACK ─────────────────────────────────────────────── */
body.is-eduway {
	--font:         "Tajawal", "Plus Jakarta Sans", system-ui, sans-serif;
	--font-display: "Reem Kufi", "Instrument Serif", serif;
	/* JetBrains Mono renders Arabic via fallback to the system mono. */
	letter-spacing: 0;
}

body.is-eduway,
body.is-eduway h1, body.is-eduway h2, body.is-eduway h3,
body.is-eduway h4, body.is-eduway h5, body.is-eduway h6,
body.is-eduway p, body.is-eduway a, body.is-eduway button,
body.is-eduway input, body.is-eduway textarea, body.is-eduway label,
body.is-eduway li, body.is-eduway span {
	font-family: var(--font);
	letter-spacing: 0 !important;
}
body.is-eduway .hl-italic,
body.is-eduway .hl-italic-peach,
body.is-eduway em,
body.is-eduway .h-1, body.is-eduway .h-2, body.is-eduway .h-3,
body.is-eduway [class*="-headline"],
body.is-eduway [class*="__headline"],
body.is-eduway [class*="__title"] {
	font-family: var(--font-display);
	font-style: normal; /* Arabic has no italic; Reem Kufi conveys editorial */
}
body.is-eduway .eyebrow,
body.is-eduway .mono,
body.is-eduway .num,
body.is-eduway [class*="__num"],
body.is-eduway [class*="__digits"],
body.is-eduway [class*="__suffix"],
body.is-eduway .credibility-mark {
	font-family: "JetBrains Mono", monospace;
}

/* ── 2. BRAND REVEAL ANIMATION — flip the slide-in direction ─────────── */
body.is-eduway .eduway-nav .brand {
	transform: translateX(6px) scale(0.96);
}
body.is-eduway .eduway-nav.is-revealed .brand {
	transform: translateX(0) scale(1);
}

/* ── 3. HERO RIBBON-SWEEP — mirror per-letter glint + tilt + image side ─ */
body.is-eduway .ribbon-tilt {
	transform-origin: right center;
}
/* Ribbon staircase indents — these are decorative offsets that build the
   tilted, cascading feel. In LTR they use margin-left; in RTL they need
   to live on the right side so the cascade still reads in the same
   leading-edge direction the eye is moving. */
body.is-eduway .ribbon-tilt--logo,
body.is-eduway .ribbon-tilt--applications,
body.is-eduway .ribbon-tilt--dropouts,
body.is-eduway .ribbon-tilt--alumni {
	margin-left: 0;
}
body.is-eduway .ribbon-tilt--logo     { margin-right: clamp(4px, 1.6vw, 22px); }
body.is-eduway .ribbon-tilt--dropouts { margin-right: clamp(14px, 6vw, 96px); }
body.is-eduway .ribbon-tilt--alumni   { margin-right: clamp(6px, 3vw, 48px); }

/* Glint sweep — LTR plays left→right (translateX -130% → 230%). For RTL
   the reader's eye runs right→left so the highlight should chase that
   direction. `animation-direction: reverse` plays the same keyframes
   backwards, which inverts both the X position and the easing curve. */
body.is-eduway .ribbon-glint-clip::after {
	animation-direction: reverse !important;
}

/* The hero backdrop image lives at `inset: 0 0 0 38%` in LTR — pinned to
   the right edge, filling the right 62% of the section. In v3.2.x we
   tried to mirror that with `inset: 0 38% 0 0`, which left the image's
   RIGHT edge cut as a hard vertical line at the 62% mark (the
   `.ribbon-preview__image::after` pseudo that softens the LTR cut is
   set to display:none in signal.css, so there's nothing to soften
   anything for our mirrored layout).

   Fix: make the image span the FULL viewport in RTL, then use a
   CSS mask-image gradient to fade the right portion out smoothly
   into the copy column. No more visible cut. */
body.is-eduway-home .ribbon-preview__image {
	inset: 0 !important;
	-webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 78%);
	mask-image: linear-gradient(to right, black 0%, black 45%, transparent 78%);
}
body.is-eduway .hero__scroll-cue svg,
body.is-eduway .arr,
body.is-eduway .article-header__back svg,
body.is-eduway .legal-header__back svg {
	transform: scaleX(-1);
}
/* Arrow hover: signal.css does `.btn:hover .arr { transform: translateX(3px) }`
   which obliterates our scaleX(-1) flip and the arrow snaps back to pointing
   right mid-hover. Re-assert both transforms together so the arrow stays
   flipped AND moves in the leading direction (negative X in RTL). */
body.is-eduway .btn:hover .arr,
body.is-eduway .btn:focus-visible .arr {
	transform: scaleX(-1) translateX(3px) !important;
}

/* ── 4. SECTION HEADER ALIGNMENT — keep eyebrow + lede left-aligned in
       the natural Arabic reading direction (i.e., logical-start). The
       Signal base CSS uses text-align: left in places, which becomes
       text-align: right under RTL — that's what we want everywhere except
       centered headers, which keep text-align:center. */

/* ── 5. LIFECYCLE THREAD — flip the dashed path so it sweeps the same
       visual direction (start → end) the reader is following. */
body.is-eduway .lifecycle-thread__svg { transform: scaleX(-1); }

/* ── 6. INTEGRATIONS CONVEYOR — force LTR internal layout.
   The conveyor is a flex container with two identical .conveyor__set
   copies placed side-by-side. JS measures one set's width and sets
   --ticker-distance; the keyframe animates translateX(-distance) so
   copy 2 slides into copy 1's slot for a seamless loop.
   Under RTL body direction, flex children render in reverse visual
   order — the seam ends up in the wrong place and the loop shows a
   gap mid-animation. Pinning `direction: ltr` on the conveyor tree
   keeps the internal layout, measurement, and animation math
   identical to English. The brand names inside are Latin anyway so
   there's no Arabic text being mirrored incorrectly. */
body.is-eduway .conveyor,
body.is-eduway .conveyor__lanes,
body.is-eduway .conveyor__lane,
body.is-eduway .conveyor__track,
body.is-eduway .conveyor__set {
	direction: ltr;
}

/* ── 7. ABOUT HERO image bleed — was right-anchored in LTR, should
       anchor left in RTL so the copy column sits on the right. */
body.is-eduway-about .about-hero__bg img {
	right: auto;
	left: -5%;
	transform: translateY(-50%) scaleX(1); /* undo the LTR flip */
}
@media (min-width: 900px) {
	body.is-eduway-about .about-hero__bg img { left: 0; right: auto; }
}
@media (min-width: 1200px) {
	body.is-eduway-about .about-hero__bg img { left: 2%; right: auto; }
}

/* ── 8. TALK HERO mirror — same pattern as About. */
body.is-eduway-talk .talk-hero__bg img {
	right: auto;
	left: -10%;
}
@media (min-width: 900px) {
	body.is-eduway-talk .talk-hero__bg img { left: -2%; right: auto; }
}
@media (min-width: 1200px) {
	body.is-eduway-talk .talk-hero__bg img { left: 4%; right: auto; }
}

/* ── 9. PROBLEM STAT — vertical divider should be on the RIGHT (logical
       start in Arabic), not the left. */
@media (min-width: 768px) {
	body.is-eduway .eduway-section--problem .problem-stat {
		border-left: 0;
		border-right: 2px solid var(--mist);
		padding-left: 0 !important;
		padding-right: 40px !important;
	}
	body.is-eduway .eduway-section--problem .problem-stat:first-child {
		border-right: 0;
		padding-right: 0 !important;
	}
}

/* ── 10. ABOUT PRINCIPLES — pull-quote bar on right side. */
body.is-eduway-about .about-pullquote {
	border-left: 0;
	border-right: 3px solid var(--fire-500);
	padding-left: 0;
	padding-right: 24px;
}
@media (min-width: 900px) {
	body.is-eduway-about .about-pullquote {
		margin: 48px 0 48px -60px;
		padding-right: 32px;
		padding-left: 0;
	}
}

/* ── 11. LEGAL — flip TOC + cross-link spacing if any directional rules. */
body.is-eduway-legal .legal-header__back svg { transform: scaleX(-1); }

/* ── 12. FOOTER columns and signoff — align to the new reading direction
       (text-align in Arabic flips naturally; this just keeps the social
       icon row pinned to the right edge instead of the left). */
body.is-eduway .eduway-footer__social { direction: ltr; } /* icons stay LTR */

/* ── 13. FLOATING CTA — show on left edge instead of right so it doesn't
       collide with native RTL-side overlays. */
body.is-eduway .floating-cta {
	right: auto;
	left: 24px;
}
@media (max-width: 480px) {
	body.is-eduway .floating-cta { left: 16px; right: 16px; }
}

/* ── 14. NAV — keep the language chip + CTA on the right edge (logical
       end). Flexbox auto-handles most of this; this is just a safety net
       for the lang chip's chevron position. */
body.is-eduway .eduway-nav .lang svg { transform: scaleX(-1); }

/* ── 15. ARTICLE BODY — give bulleted lists the right padding side. */
body.is-eduway .article-body__inner ul,
body.is-eduway .article-body__inner ol,
body.is-eduway .legal-body__inner ul,
body.is-eduway .legal-body__inner ol {
	padding-right: 24px;
	padding-left: 0;
}

/* ── 16. BLOCKQUOTE bar on right side. */
body.is-eduway .article-body__inner blockquote {
	border-left: 0;
	border-right: 3px solid var(--fire-500);
	padding-left: 0;
	padding-right: 24px;
}

/* ── 17. KEEP Latin brand glyphs LTR even inside RTL flow. */
body.is-eduway .credibility-brand,
body.is-eduway .eduway-footer__brand-pop,
body.is-eduway .diff-close__brand {
	unicode-bidi: isolate;
	direction: ltr;
	display: inline-block;
}