/**
 * Eliaa Threads — Arabic / RTL adjustments.
 *
 * Loaded only when is_rtl() (Arabic via Polylang). Layout already mirrors
 * thanks to logical properties in theme.css; this file only handles things
 * logical properties cannot express.
 */

/* 1. Arabic-first font stacks. Latin words inside Arabic text still fall back
 *    to Cormorant Garamond / Jost because the Arabic font files only cover the
 *    Arabic unicode range. */
html[dir="rtl"],
html:lang(ar) {
	--wp--preset--font-family--heading: "Amiri", "Noto Naskh Arabic", "Cormorant Garamond", Georgia, serif;
	--wp--preset--font-family--body: "Tajawal", "Noto Sans Arabic", "Jost", system-ui, sans-serif;
	--eliaa-arrow: "\2190"; /* ← */
}

/* 2. Arabic script is cursive: letter-spacing breaks letter joining and
 *    uppercase does not exist. */
html[dir="rtl"] body,
html[dir="rtl"] body *,
:lang(ar) {
	letter-spacing: 0 !important;
}

html[dir="rtl"] .is-style-eyebrow,
html[dir="rtl"] .wp-element-button,
html[dir="rtl"] .wp-block-button__link,
html[dir="rtl"] .eliaa-footer-heading,
html[dir="rtl"] .wc-block-components-product-sale-badge {
	text-transform: none;
}

/* 3. Arabic needs a slightly taller line-height and a touch more size to
 *    match the optical size of the Latin fonts. */
html[dir="rtl"] body {
	line-height: 1.8;
}

html[dir="rtl"] :where(h1, h2, h3, h4, .wp-block-post-title) {
	line-height: 1.4;
}

html[dir="rtl"] .is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
}

/* 4. Direction-dependent transforms. */
html[dir="rtl"] .eliaa-arrow-link a:hover::after {
	transform: translateX(-0.2em);
}

/* 5. Keep numbers, SKUs, emails and prices left-to-right inside Arabic text. */
html[dir="rtl"] :where(.woocommerce-Price-amount, .wc-block-components-product-price, .wc-block-formatted-money-amount, .wp-block-woocommerce-product-sku, input[type="email"], input[type="tel"], .eliaa-interac-email) {
	unicode-bidi: isolate;
	direction: ltr;
}

/* 6. Select arrows are drawn with physical background-position by some plugins. */
html[dir="rtl"] select {
	background-position: left 0.75rem center;
}