/*
 * Arabic typography.
 *
 * Arabic is the PRIMARY language and the design baseline (D-013). English is
 * the adaptation, not the source.
 *
 * The final typeface is still an open decision (question M.6). Until it is
 * settled, this file uses a system-font stack that renders Arabic well across
 * Saudi devices — so the site looks correct today and swapping in the licensed
 * face later is a one-variable change.
 */

:root {
	/*
	 * Arabic stack, in priority order:
	 *   IBM Plex Sans Arabic / Noto Kufi — if self-hosted later (M.6)
	 *   SF Arabic            — iOS/macOS
	 *   Segoe UI             — Windows
	 *   Noto Naskh Arabic    — Android/Linux
	 */
	--ybb-font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "SF Arabic",
		"Segoe UI", "Noto Naskh Arabic", "Dubai", Tahoma, Arial, sans-serif;

	--ybb-font-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	/*
	 * Arabic script needs more vertical room than Latin: ascenders, descenders
	 * and diacritics collide at Latin line-heights.
	 */
	--ybb-line-height-ar: 1.85;
	--ybb-line-height-ar-heading: 1.45;
	--ybb-line-height-en: 1.6;
}

/* ── Arabic (RTL) ───────────────────────────────────────────────────────── */

html[lang^="ar"] body,
body.rtl {
	font-family: var(--ybb-font-ar);
	line-height: var(--ybb-line-height-ar);
	/*
	 * Arabic must never be letter-spaced — it breaks the cursive joins between
	 * glyphs and renders the text visibly wrong. Motova applies tracking to
	 * headings globally, so this reset matters.
	 */
	letter-spacing: normal;
}

html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6,
body.rtl h1, body.rtl h2, body.rtl h3,
body.rtl h4, body.rtl h5, body.rtl h6 {
	font-family: var(--ybb-font-ar);
	line-height: var(--ybb-line-height-ar-heading);
	letter-spacing: normal;
	font-weight: 700;
}

/* Arabic has no uppercase. `text-transform` is a no-op at best and a source of
   inconsistent rendering at worst — Motova applies it to buttons and labels. */
html[lang^="ar"] .btn,
html[lang^="ar"] button,
html[lang^="ar"] .pxl--btn-text,
html[lang^="ar"] .widget-title,
body.rtl .btn,
body.rtl button,
body.rtl .pxl--btn-text,
body.rtl .widget-title {
	text-transform: none;
	letter-spacing: normal;
}

/* Keep numbers, plates, VINs and phone numbers rendering LTR inside RTL text. */
html[lang^="ar"] .ybb-ltr,
body.rtl .ybb-ltr,
.ybb-plate,
.ybb-vin,
.ybb-phone,
.ybb-order-number {
	direction: ltr;
	unicode-bidi: embed;
	text-align: start;
}

/* ── English (LTR) ──────────────────────────────────────────────────────── */

html[lang^="en"] body {
	font-family: var(--ybb-font-en);
	line-height: var(--ybb-line-height-en);
}

html[lang^="en"] h1, html[lang^="en"] h2, html[lang^="en"] h3,
html[lang^="en"] h4, html[lang^="en"] h5, html[lang^="en"] h6 {
	font-family: var(--ybb-font-en);
}

/* ── Readability ────────────────────────────────────────────────────────── */

p {
	text-wrap: pretty;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

/* Arabic body copy benefits from a slightly larger size at the same nominal
   point size, because the script's x-height is proportionally smaller. */
html[lang^="ar"] p,
body.rtl p {
	font-size: 1.03em;
}