/* ==========================================================================
   THERAPEUTIC AREAS — ARABIC BANNERS

   The Arabic site gets its own banner artwork on the Therapeutic Areas
   overview and on each of the eight area pages: the same compositions,
   mirrored, so the subject sits on the left and the right-hand side is clear
   for the Arabic heading.

   WHY THIS IS A STYLESHEET
   Every banner is an Elementor container BACKGROUND image, not an <img>.
   TranslatePress can swap an <img> per language, but a background lives in
   Elementor's generated stylesheet, which TranslatePress never sees. So the
   Arabic artwork is applied here, behind html:lang(ar) — the English site
   cannot match any of it, and Elementor's own settings are untouched.

   WHAT IS REPLACED
   Each page has two banner containers: one shown on desktop and tablet, and a
   separate one shown only on phones. Elementor sets their image per breakpoint;
   these rules carry no media query, so one rule replaces the image at every
   breakpoint for that container. Size (cover), position (center center),
   height and everything placed on top of the banner are left to Elementor.

   Written at (0,5,1), above Elementor's (0,4,0). URLs are root-relative so the
   same file works on the local build and on the live site.

   Artwork source: "Therapeutic Areas Banner (Arabic Version)", matched by
   filename. Media Library ids 8196-8204, all 3:1.
   ========================================================================== */

/* Therapeutic Areas — overview (126) */
html:lang(ar) .elementor-126 .elementor-element.elementor-element-ac2a7d1.e-con,
html:lang(ar) .elementor-126 .elementor-element.elementor-element-3310189.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-overview.png");
}

/* Anti-Neoplastic (127) */
html:lang(ar) .elementor-127 .elementor-element.elementor-element-2f079bf.e-con,
html:lang(ar) .elementor-127 .elementor-element.elementor-element-6465d75.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-anti-neoplastic.png");
}

/* Respiratory (128) */
html:lang(ar) .elementor-128 .elementor-element.elementor-element-4101e67.e-con,
html:lang(ar) .elementor-128 .elementor-element.elementor-element-d158a8a.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-respiratory.png");
}

/* Neurology (129) */
html:lang(ar) .elementor-129 .elementor-element.elementor-element-1b0fda1.e-con,
html:lang(ar) .elementor-129 .elementor-element.elementor-element-06d02aa.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-neurology.png");
}

/* Cardio-Metabolic (130) */
html:lang(ar) .elementor-130 .elementor-element.elementor-element-3f0267b.e-con,
html:lang(ar) .elementor-130 .elementor-element.elementor-element-fb169fe.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-cardio-metabolic.png");
}

/* Rare Diseases (131) */
html:lang(ar) .elementor-131 .elementor-element.elementor-element-fe740c1.e-con,
html:lang(ar) .elementor-131 .elementor-element.elementor-element-962fdaa.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-rare-diseases.png");
}

/* Autoimmune Diseases (132) */
html:lang(ar) .elementor-132 .elementor-element.elementor-element-720308d.e-con,
html:lang(ar) .elementor-132 .elementor-element.elementor-element-b464cd3.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-autoimmune.png");
}

/* Anesthesia (133) */
html:lang(ar) .elementor-133 .elementor-element.elementor-element-e3b14a7.e-con,
html:lang(ar) .elementor-133 .elementor-element.elementor-element-1cb4c11.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-anesthesia.png");
}

/* Miscellaneous (134) */
html:lang(ar) .elementor-134 .elementor-element.elementor-element-0bda5ef.e-con,
html:lang(ar) .elementor-134 .elementor-element.elementor-element-0f96679.e-con {
	background-image: url("/wp-content/uploads/2026/09/ta-banner-ar-miscellaneous.png");
}

/* ==========================================================================
   THE ARABIC TEXT ON THE BANNER — ON THE PAGE'S CONTENT COLUMN

   The breadcrumb, title and description on the desktop/tablet banner are
   indented from the reading edge by PHYSICAL left margins set in the editor
   (55px on the overview, 96-99px on the area pages). In English that indents
   them; in Arabic the margin lands on the left, the far end of the line, so the
   whole block sat flush against the right edge of the screen — 0px — on all
   nine pages, desktop and tablet.

   Rather than mirror those numbers (which differ page to page, and match
   nothing else on the site), the Arabic block is put where the page's own
   content starts — the column every section below the banner uses:

     - 24px inside the site's 1240px content column (--sud-maxw) once the screen
       is wide enough for that column to be centred — 116px at 1440, the same
       place the site's other page banners start their text (alignment.css);
     - and never less than three gutters, 72px, which is where the sections'
       stacked padding (section 24 + boxed container 24 + inner 24) put the
       content on narrower screens — 1280, 1024, a tablet.

   So the text starts on the same line as the headings and paragraphs beneath
   it, identically on all nine pages, at every desktop and tablet width.

   Applied as the text's start margin — the same mechanism the editor uses —
   with the left margin cleared. Widths, the banner, its image, the text and its
   styling are unchanged. Phones use a separate banner container whose Arabic
   title already sits on the standard 24px phone gutter on every page; it is
   not touched.
   ========================================================================== */

[dir="rtl"] :is(
	.elementor-126 .elementor-element-ac2a7d1,
	.elementor-127 .elementor-element-2f079bf,
	.elementor-128 .elementor-element-4101e67,
	.elementor-129 .elementor-element-1b0fda1,
	.elementor-130 .elementor-element-3f0267b,
	.elementor-131 .elementor-element-fe740c1,
	.elementor-132 .elementor-element-720308d,
	.elementor-133 .elementor-element-e3b14a7,
	.elementor-134 .elementor-element-0bda5ef
) > .elementor-element.elementor-widget {
	margin-left: 0;
	margin-right: max(
		calc(3 * var(--sud-gutter, 24px)),
		calc((100% - var(--sud-maxw, 1240px)) / 2 + var(--sud-gutter, 24px))
	);
}

/* ==========================================================================
   THE OVERVIEW PAGE ON A PHONE — ARABIC ONLY

   Three things on the Arabic overview (126) read badly at phone width. All
   three are Elementor's own mobile values, shared with the English page, so
   each is corrected here behind html:lang(ar) and a phone media query and
   nowhere else. Desktop, tablet, English and the eight area pages are not
   touched, and nothing about the artwork, the markup or the copy changes.

   1. THE BANNER WAS A STRIP
   Elementor gives the phone banner --min-height: 116px. The artwork is 3:1,
   so at 390px wide a 116px band is not even short enough to show it whole —
   it is 3.36:1, and cover was trimming the top and bottom.

   The band is now 44vw — 172px at 390 — which is half again as tall and reads
   as a banner rather than a rule. Above 130px the crop turns the other way:
   the full height of the artwork shows and the width is trimmed instead, so
   the position moves off centre to 0% and the trim comes entirely off the
   right.

   That is the correct side. Measuring the artwork column by column, its
   subject — the bubbles, the ring and "نزرع الأمل بالشفاء" — ends at 48.9%
   of the width, and past 60% there is nothing but the faint wave. At 44vw the
   visible slice is 75.8% of the plate, so the subject is complete and clear,
   and what goes is empty background. The Arabic title keeps the quiet right
   third it was drawn to sit on.

   2. THE HEADING WAS SET FOR A WIDER COLUMN
   43px against the 246px the stacked padding leaves is 535px of text on one
   line: it broke to three, one word to a line. At 32px it is 398px and falls
   into two, and is still the largest thing on the screen. Line height is left
   at Elementor's 1.07em, which is a ratio and follows the size down.

   3. THE STANDFIRST WAS TIGHT
   Four lines in a 246px column at 14/1.7. The type size is left alone — it is
   the column that is narrow, not the text that is large — and it is given
   12px back on each side, a more open line, and air above it.
   ========================================================================== */

@media (max-width: 767px) {

	/* 1. The banner: taller, and trimmed off the empty right rather than the top. */
	html:lang(ar) .elementor-126 .elementor-element.elementor-element-3310189.e-con {
		--min-height: 44vw;
		background-position: 0% 50%;
	}

	/* 2. The section heading: two lines instead of three. */
	html:lang(ar) .elementor-126 .elementor-element.elementor-element-b7363d6 .elementor-heading-title {
		font-size: 32px;
	}

	/* 3. The standfirst: a little wider, a little looser, a little lower. */
	html:lang(ar) .elementor-126 .elementor-element.elementor-element-92b52ad,
	html:lang(ar) .elementor-126 .elementor-element.elementor-element-92b52ad p {
		line-height: 1.85;
	}

	html:lang(ar) .elementor-126 .elementor-element.elementor-element-92b52ad {
		margin-inline: -12px;
		/* Elementor caps every widget at max-width:100%, so the 12px reclaimed
		   on each side has to be allowed for or the margins do nothing. */
		max-inline-size: calc(100% + 24px);
		margin-block-start: 14px;
	}
}