/* Arabic pages, one self-hosted family: Almarai (Aziz 2026-10-15: IBM Plex Arabic read as blocky; Noto Naskh
   floated its dots in Safari's engine, which builds them from GPOS marks). Headings 800, text 300/400/700.
   Same layout mirrored by dir="rtl" + rtl CSS. */
@import url("/fonts/arabic/arabic.css?v=3fb240e6b1");

html[lang="ar"] body,
html[lang="ar"] body :is(p, a, li, span, strong, em, b, label, button, input, select, textarea,
  blockquote, td, th, div):not([class*="fa-"]):not([class*="eicon"]):not([class*="icon"]):not([class*="ekit"]) {
  font-family: "Almarai", "Jost", sans-serif !important;
}
/* :not(#_) lifts specificity above the text rule, which would otherwise win on spans inside headings */
html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .eael-dual-header .title):not(#_),
html[lang="ar"] body :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em, b, a):not(#_) {
  font-family: "Almarai", "Playfair Display", sans-serif !important;
  font-weight: 700 !important;
}
/* Display sizes take the heaviest cut to hold their own against photos and the green */
html[lang="ar"] body :is(h1, h2, h3, .eael-dual-header .title):not(#_):not(#__),
html[lang="ar"] body :is(h1, h2, h3) :is(span, strong, em, b, a):not(#_):not(#__) { font-weight: 800 !important; }
/* Small labels and eyebrows above headings read better in the text face */
html[lang="ar"] body :is(h5, h6, .vh__menu a, .vh__sub-toggle, .vf h2):not(#_):not(#__) { font-family: "Almarai", sans-serif !important; font-weight: 700 !important; }

/* Arabic letters join: tracking and uppercase transforms break the script */
html[lang="ar"] body * { letter-spacing: 0 !important; text-transform: none !important; }

/* Arabic needs room above and below the line for dots and descenders; text reads best a little open */
html[lang="ar"] p, html[lang="ar"] li { line-height: 1.9; }
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { line-height: 1.5; }

/* Numbers, phones and Latin names inside Arabic text keep their own direction */
html[lang="ar"] a[href^="tel:"], html[lang="ar"] a[href*="wa.me"] { direction: ltr; unicode-bidi: isolate; }

/* Page heroes keep the English composition: their photos have the model and the VI mark baked into one side,
   so mirroring would put Arabic text over the face. The block keeps LTR positioning; its text stays RTL. */
html[dir="rtl"] [data-elementor-type="wp-page"] > .e-parent:first-child,
html[dir="rtl"] [data-elementor-type="wp-post"] > .e-parent:first-child { direction: ltr; }
html[dir="rtl"] [data-elementor-type="wp-page"] > .e-parent:first-child .elementor-widget,
html[dir="rtl"] [data-elementor-type="wp-post"] > .e-parent:first-child .elementor-widget { direction: rtl; }
@media (min-width: 1025px) {
  /* Desktop hero: same 80px offset as English (mirroring had moved it to the right edge) and the Arabic
     headline stays on the open green half, never across the face in the photo */
  html[dir="rtl"] [data-elementor-type="wp-page"] > .e-parent:first-child > .elementor-widget {
    padding-left: 80px !important; padding-right: 0 !important; }
  html[dir="rtl"] [data-elementor-type="wp-page"] > .e-parent:first-child > .elementor-widget-eael-dual-color-header,
  html[dir="rtl"] [data-elementor-type="wp-page"] > .e-parent:first-child > .elementor-widget-heading { max-width: 60%; }
}
