/* Right-to-left foundation (Milestone 9B-2). Enqueued only when is_rtl() (Arabic), after base.css; LTR pages never load it.
   Layout already follows the reading direction through logical properties in the component stylesheets. This file holds only
   what logical properties cannot express: the Arabic font, Arabic typography rules, mirrored directional icons, transform origins
   and the logo. Remaining visual review items are listed in 01_COSMO_BELGE_WP/03_CONTENT_MAP/m9b2-foundation.md. */

/* Cairo, Arabic subset only (SIL OFL 1.1, see assets/fonts/cairo/). Latin text keeps Plus Jakarta Sans. */
@font-face {
	font-family: "Cairo";
	src: url("../fonts/cairo/cairo-arabic-variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	size-adjust: 90%; /* Arabic glyphs read larger than Plus Jakarta Sans at the same size */
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html[dir="rtl"] body,
html[dir="rtl"] .cb-sec,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
	font-family: "Plus Jakarta Sans", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Arabic typography: letter-spacing and capitalisation break letter joining and have no meaning in Arabic; line height needs room. */
html[dir="rtl"] body { line-height: 1.75; }
html[dir="rtl"] :where(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, button, label, legend, summary, address, figcaption, small, td, th, input, textarea) {
	letter-spacing: 0 !important;
	text-transform: none !important;
}
html[dir="rtl"] :where(h1, h2, h3, h4) { line-height: 1.35 !important; }

/* Latin brand names, numbers and e-mail inside Arabic text keep their own direction. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* The official logo is a bitmap cropped with physical offsets: always render it left-to-right. */
html[dir="rtl"] .cb-logo { direction: ltr; }

/* Directional icons mirror (arrow right, up-right); up/down/pin stay. */
html[dir="rtl"] .cb-ico--right,
html[dir="rtl"] .cb-ico--ne { transform: scaleX(-1); }

/* Reveal bars and underlines grow from the reading start. */
html[dir="rtl"] .cb-intro__areas li::before,
html[dir="rtl"] .cb-eco__bar,
html[dir="rtl"] .cb-online a::before,
html[dir="rtl"] .cb-mk__bar,
html[dir="rtl"] .cb-pw__list[data-reveal="rows"] li::before { transform-origin: right; }

/* Language switcher chevron/list follow the direction automatically (logical properties). */

/* ---- 9B-3 refinements ---- */

/* Product line-ups keep one fixed order (Essential, Advanced, Signature, left to right) in every language: they are visual compositions,
   so the stage, the pack rows and the shelf stay left-to-right; text inside them follows the page direction again. */
html[dir="rtl"] :is(.kal-stage, .kal-tabs, .cb-shelf) { direction: ltr; }
/* Absolutely positioned pack rows keep their mirrored offset (direction would flip it back), so only the flex order is reversed. */
html[dir="rtl"] :is(.cb-eco__packs, .cb-mkt__packs) { flex-direction: row-reverse; }
html[dir="rtl"] :is(.kal-tab, .kal-count, .cb-shelf__name) { direction: rtl; }

/* Arrow icons mirror (hero buttons and arrows), except inside the left-to-right product stage (previous/next stay physical). */
html[dir="rtl"] .arrow:not(.kal-stage .arrow) { transform: scaleX(-1); }

/* Asymmetric decorative layers mirror with the layout. */
html[dir="rtl"] :is(.cb-ahero__texture, .cb-ehero__texture, .cb-ch__texture, .cb-ph__texture, .hx-texture),
html[dir="rtl"] :is(.cb-ahero, .cb-ehero, .cb-ch, .cb-act, .cb-ep)::before { transform: scaleX(-1); }
html[dir="rtl"] .cb-partners::before { background: linear-gradient(270deg, rgba(8, 14, 26, 0.55), transparent); }

/* Mixed content: e-mail addresses, phone numbers and domains are isolated left-to-right and never split (markup added by inc/i18n.php). */
html[dir="rtl"] .cb-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* Brand names and other isolated runs are never broken across lines (a split isolate reorders its parts). */
html[dir="rtl"] bdi { white-space: nowrap; }