/*
 * RTL overrides — main.css uses CSS logical properties throughout,
 * so almost everything flips automatically when the locale is RTL.
 * Only direction-specific artwork needs adjusting here.
 * Arabic typography (font stack swap) will be added with the Arabic release.
 */

.hero__stripe {
	inset-inline-end: auto;
	inset-inline-start: -8%;
	clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
}

/* Directional arrows & separators flip in RTL */
.arr { display: inline-block; transform: scaleX(-1); }
.tile__arrow { transform: scaleX(-1); }
.tile:hover .tile__arrow { transform: scaleX(-1) translateX(4px); }
.breadcrumbs .sep { display: inline-block; transform: scaleX(-1); }
.hero__media::after { inset-inline-start: auto; inset-inline-end: -10px; }

/* =====================================================
   Arabic typography — IBM Plex Sans Arabic
   Loaded only on RTL pages (this file). Weights: 400/500/700.
   ===================================================== */
:root {
	--font-display: "IBM Plex Sans Arabic", -apple-system, "SF Arabic", "Segoe UI", Tahoma, sans-serif;
	--font-body: "IBM Plex Sans Arabic", -apple-system, "SF Arabic", "Segoe UI", Tahoma, sans-serif;
}

body { line-height: 1.75; }

/* Arabic headings: no uppercase concept, no tracking, calmer weight & height */
h1, h2, h3, h4 {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
}
h1 { font-size: clamp(27px, 4.2vw, 42px); line-height: 1.25; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: clamp(17px, 2vw, 20px); line-height: 1.4; }

/* UI elements: medium weight, zero tracking */
.eyebrow, .btn, .site-nav__list a, .section__more, .card__cta, .trust__item span,
.stat__label, .topbar, .lang-switch, .card__meta, .post-meta {
	letter-spacing: 0;
	text-transform: none;
}
.btn, .site-nav__list a { font-weight: 500; }
.site-nav__list .sub-menu a { font-weight: 400; }
.eyebrow, .section__more, .card__cta { font-weight: 500; }
.stat__value { font-weight: 700; }
.hero__title { max-width: 22ch; }
.hero__lead, .page-hero__lead { line-height: 1.85; }
.prose, .card__excerpt, .tile__desc { line-height: 1.8; }

/* keep Latin technical names (FM200, NOVEC…) rendering cleanly inside Arabic text */
.prose [lang="en"], .card__excerpt [lang="en"] { font-family: "Barlow", var(--font-body); }