/* Global page rules — not tied to any single widget.

   Page content and the footer are separate Elementor documents rendered back to
   back, so the last widget on a page sits flush against the top of the footer.
   This reserves a fixed tail beneath the page content itself.

   Scoped to wp-page deliberately. The header and footer templates are Royal
   Theme Builder documents, which Elementor reports as wp-post — matching that
   type would pad the inside of the footer as well and push the copyright line
   off the bottom of the page. Override the amount with --sx-page-tail. */

.elementor[data-elementor-type="wp-page"] {
	padding-bottom: var(--sx-page-tail, 100px);
}

/* Elementor's editor wraps the same document, so the tail is visible while
   building rather than appearing only once the page is viewed. */
.elementor-editor-active .elementor[data-elementor-type="wp-page"] {
	padding-bottom: var(--sx-page-tail, 100px);
}

/* The CookieYes preference dialog stays in the document while hidden. On RTL
   phones its off-screen, fixed-position panel is wider than the viewport and
   expands the root scroll area even though the body is already clipped. The
   stretch header and logo cloud also use 100vw, which can exceed the layout
   viewport by the scrollbar width. Clip at the root so neither hidden UI nor
   intentionally full-bleed widgets can make the page pan sideways. `clip`
   does not create a scroll container, so sticky headers keep working. */
html {
	overflow-x: clip;
}

/* Safari versions without overflow: clip still need the page contained. */
@supports not (overflow: clip) {
	html {
		overflow-x: hidden;
	}
}

/* ------------------------------------------------------- Arabic typography */

/* Every Latin face on this site — Barlow, Manrope, Lato, Poppins — ships without
   Arabic glyphs, so text they are applied to falls back to whatever the visitor's
   device happens to have, and the same page looks different on two machines.

   Almarai is the default here, but only as a default: no !important, and
   specificity deliberately low, so any family chosen per widget in Elementor
   still wins. This only catches what Elementor writes no rule for.

   It replaced PNU together with the 382 per-widget families that were pinned on
   the Arabic pages. Leaving one of the two would have achieved nothing: this
   rule loses to Elementor's `.elementor-3976 .elementor-element-abc123`, and 344
   of those widgets asked for Barlow, which has no Arabic glyphs — so most Arabic
   text was never PNU either, it was each visitor's own fallback. */
body.sx-lang-ar,
body.sx-lang-ar :is(h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th,
	button, input, textarea, select, label, blockquote, figcaption) {
	font-family: "Almarai", system-ui, "Segoe UI", sans-serif;
}

/* The header and footer are one template each, shared by both languages, so their
   typography cannot be set per language from Elementor at all — the footer asks
   for Poppins and Manrope, neither of which can draw Arabic. These are the only
   places that have to be forced, and Elementor's own selectors carry a document
   id and an element id, which nothing scoped to a language class can outrank. */
body.sx-lang-ar .elementor-325 :is(h1, h2, h3, h4, h5, h6, p, span, div, a, li,
	button, input, textarea, select, label),
body.sx-lang-ar .elementor-326 :is(h1, h2, h3, h4, h5, h6, p, span, div, a, li,
	button, input, textarea, select, label) {
	font-family: "Almarai", system-ui, "Segoe UI", sans-serif !important;
}

/* Royal spaces a button icon with a physical margin chosen from the icon-position
   class: position-left writes margin-right. The position itself is done with flex
   `order`, which the browser reverses under RTL — so on an Arabic page the icon
   correctly lands on the right, while its 4px gap stays on the right edge, and the
   icon ends up touching the label.

   Move the gap to the inner side. !important because Elementor's own rule carries
   the page id and the element id, five classes deep, which nothing scoped to a
   language class can outrank. --sx-rtl-icon-gap keeps the amount adjustable. */
body.sx-lang-ar .wpr-button-icon-position-left .wpr-button-icon {
	margin-right: 0 !important;
	margin-left: var(--sx-rtl-icon-gap, 6px) !important;
}

/* The arrow on an Arabic button: on the right of the label, pointing at it.
 *
 * The button's content is a flex row in RTL, so its first item is drawn on the
 * RIGHT. Royal writes the label first and the arrow second, which put the arrow
 * on the left — the far end of the button, pointing away from the words. `order`
 * moves it to the front of the row, and so to the right-hand side.
 *
 * Then the glyph itself has to turn round. It is a chevron drawn pointing right,
 * which was correct when it sat after Latin text and is backwards once it sits
 * before Arabic text: mirroring it makes it point left, at the label. scaleX
 * rather than a different icon, so this holds for whichever arrow any button
 * happens to use.
 *
 * The gap follows the arrow to its inner edge, which under RTL is the left one.
 *
 * !important throughout because Elementor writes these same properties with the
 * page id and the element id, five classes deep, and nothing scoped to a
 * language class can outrank that. */
body.sx-lang-ar .wpr-button-content .wpr-button-icon {
	order: -1 !important;
	transform: scaleX(-1);
	margin-left: var(--sx-rtl-icon-gap, 6px) !important;
	margin-right: 0 !important;
}

/* Breaking a dual-colour heading onto two lines used to be a class applied
   here. It is a switch on the widget now — Content > Break to New Line, with
   Style > Secondary Heading > Space Above for the gap — added from
   includes/class-sx-royal-controls.php, so it is set per widget in the editor
   and written by Elementor at its own specificity. Nothing is needed here. */

/* ------------------------------------------ section label inside a widget */

/* The ported section widgets ship their own eyebrow: 11px uppercase monospace
   in grey. The site's section label is a different thing entirely — Barlow at
   20/500, green, with a 3px gold rule down its leading edge — so a page that
   uses both reads as two designs stacked on each other.

   Only the eyebrow that opens a section is restyled. The same .sxs-eyebrow
   class also carries "TAB 01", metric captions and timeline years inside those
   widgets, where 20px green text behind a rule would be absurd; scoping to
   .sxs-head leaves every one of those alone. The home page renders ten of the
   small kind and no section head at all, so it is untouched by this.

   The colours are read from the Elementor globals the page already defines,
   which is where the label takes them on the home page — repeating the hex
   values here would give the palette two masters. Logical properties put the
   rule on the right edge under RTL without a second rule to maintain. */
.sxs-head .sxs-eyebrow {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-align: start;
	color: var(--e-global-color-text, #087D40);
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--e-global-color-secondary, #CCB58B);
	margin-bottom: 16px;
}

/* --------------------------------------------------------- lead paragraph */

/* The paragraph that opens a section runs the full 1200px of its container,
   which is roughly 150 characters a line — far past the point where the eye
   reliably finds the start of the next one. Held to a readable measure here
   rather than by a width on each widget, so the number is in one place.

   The justification that came with it is set back to the reading direction in
   the widget's own alignment control, not here: Elementor writes text-align
   with the page id and the element id, and nothing at this level could outrank
   it. A rule here would look like it worked. */
.sx-lede .elementor-widget-container > *,
.sx-lede p {
	max-width: var(--sx-measure, 68ch);
}

/* The gold hero line is set at 119px, a size chosen for a Latin handwriting face
   that is very narrow. The Arabic calligraphic face that replaced it is much
   wider — the same line measures 452px against a 310px column on a 390px phone —
   and an Arabic word cannot be broken across lines, so it simply ran off the
   page. Five pages scrolled sideways because of it.

   A ceiling in viewport units rather than a fixed size, so it fits whatever the
   screen is and still stops growing on a large phone. !important because
   Elementor writes this size with the page id and the element id, which nothing
   scoped to a language class can outrank. Arabic only, and only where the column
   is too narrow to hold the line. */
@media (max-width: 767px) {
	body.sx-lang-ar .wpr-dual-title .second {
		font-size: min(20vw, 90px) !important;
	}
}

/* Icon glyphs are letters in a symbol font: force an Arabic face onto them and
   every icon turns into an Arabic character. Elementor and Font Awesome both
   mark their carriers with a class, and some of them are spans, which the rule
   above would otherwise catch. Hand those back their own family. */
body.sx-lang-ar [class*="eicon-"],
body.sx-lang-ar [class*="fa-"],
body.sx-lang-ar .fa,
body.sx-lang-ar .fas,
body.sx-lang-ar .far,
body.sx-lang-ar .fab,
body.sx-lang-ar .fal {
	font-family: revert !important;
}