/*
============================================================
MASKABEH — RIGHT-TO-LEFT OVERRIDES
------------------------------------------------------------
This file loads ONLY when WordPress reports the site as RTL
(is_rtl() === true, i.e. an Arabic / Hebrew / Farsi locale).
In the English site it is never requested at all, so nothing
written here can affect the LTR pages.

WHERE IT SITS IN THE CASCADE
It prints after style.css (and therefore after the Additional
CSS mirrored into it), so it can override anything we wrote.
Match the original's !important flags and it wins.

It does NOT print after the theme's own *-responsive sheets —
the theme injects those outside the normal wp_head flow and
nothing can be ordered behind them. Those carry ~26 one-sided
!important rules under (max-width:1679px). They target theme
selectors rather than our .ht-* / .elementor-element-* ones,
so specificity normally settles it — exactly as it already
does for the MASKABEH rules in style.css. If a theme rule ever
does win, raise the specificity here rather than chasing order.

HOW TO USE IT
  Copy the LTR rule from style.css, paste it below, and swap
  the side:  padding-left  <->  padding-right
             margin-left   <->  margin-right
             text-align: left  <->  text-align: right
             left:         <->  right:
  Keep the same selector and the same !important flags,
  otherwise the original rule keeps winning.

WHAT DOES *NOT* NEED MIRRORING
  Symmetric pairs (padding-left and padding-right set to the
  same value) already look identical in both directions.
  Logical keywords follow the text direction on their own:
    justify-content: flex-start / flex-end
    margin-inline-start / margin-inline-end
    padding-inline-start / padding-inline-end
  Rules using those need nothing here.

!! NEVER SCOPE A RULE HERE WITH .page-id-<id> !!
  WPML gives each translation its own post, with its own id.
  The English About is 18622; the Arabic About is 31950. So
  .page-id-18622 matches nothing on the Arabic page and the
  rule is not merely outranked, it never applies at all.
  Verified on maskabeh.hellotree.dev/ar/about-ar/.

  Use one of these instead — all three confirmed present on
  the live Arabic page:
    .rtl                     body class on every RTL page
    .ht-*                    our own classes, copied into the
                             translation by WPML
    .elementor-element-<id>  widget ids are preserved too
    .elementor-<english-id>  the content wrapper carries BOTH
                             ids: class="elementor elementor-31950
                             elementor-18622"

  Careful with the last one: .elementor-<id> sits on the content
  wrapper, not on body, so it cannot reach the header, footer or
  breadcrumbs. Scope those with .rtl.
============================================================
*/


/* ============================================================
   1. ABOUT (page 18622)
   ------------------------------------------------------------
   The 65/75/85px section padding in HT-ABOUT-ALIGN is symmetric
   (same value both sides), so it already survives the flip and
   is deliberately NOT repeated here.

   What genuinely needs mirroring is the Our Mission column
   indent, which is one-sided.
   ============================================================ */

/* "We work together" sits in the left half of the row, pinned there by
   .e-f7cd501 { margin-left: 0 !important; margin-right: auto !important }
   in style.css. Those are physical, and the class is an Elementor local
   one rather than page-scoped, so the rule applies in Arabic too and the
   section stayed on the left while everything around it flipped.
   Mirrored, the heading ends at 1850 on a 1920 viewport — the same 70px
   logo line the English page uses. Measured on the live Arabic page. */
.rtl .e-f7cd501 {
	margin-left: auto !important;
	margin-right: 0 !important;
}


/* Section padding. On the Arabic page the .page-id-18622 rules in
   style.css do not apply at all, so these sections fall back to
   .ht-about-vision { padding: max(24px, calc((100vw - 1154px) / 2)) },
   which is 143px at a 1440px viewport instead of the intended
   75 / 65 / 85. Scoping on .rtl restores them. Measured on the live
   Arabic page: 143px -> 75 / 65 / 85px. */
@media (min-width: 1025px) {
	.rtl .ht-about-vision  { padding-left: 75px !important; padding-right: 75px !important; }
	.rtl .ht-about-mission { padding-left: 65px !important; padding-right: 65px !important; }
	.rtl .ht-about-wework  { padding-left: 85px !important; padding-right: 85px !important; }
}
/* The two smaller breakpoints in HT-ABOUT-ALIGN (24px at <=1024,
   20px at <=768) are symmetric, so they need no mirror — but they
   are also .page-id-18622 scoped, so they do not reach Arabic either.
   Restore them at the same values rather than mirrored ones. */
@media (max-width: 1024px) {
	.rtl .ht-about-vision,
	.rtl .ht-about-mission,
	.rtl .ht-about-wework { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 768px) {
	.rtl .ht-about-vision,
	.rtl .ht-about-mission,
	.rtl .ht-about-wework { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Our Mission columns — the divider and its indent are both one-sided,
   so both mirror. In LTR (HT-ABOUT-MISSION-BORDER in style.css) the 1px
   rule sits on the LEFT of each column with 22px of padding after it,
   and the first column has neither.

   In RTL the flex row starts from the right, so the first column is the
   RIGHTMOST one. Unmirrored, the divider stayed on each column's left,
   which put a stray line hard against the outer left edge of the row
   and left the two inner gaps unmarked. Measured on the live Arabic
   page: lines at x=60/520/981 instead of x=480/941/1401.

   The divider is drawn as a pseudo-element rather than a border.
   Elementor resolves container borders through --border-*-width custom
   properties and re-maps them for RTL in its own stylesheet
   (body.rtl .e-con { --border-inline-start-width: var(--border-right-width) }).
   Every attempt to set border-right here — shorthand, longhand, logical,
   even with !important — came back as 3px, the "medium" default, because
   the width was resolved from those variables and not from our
   declaration. A pseudo-element sidesteps it and gives an exact 1px. */
@media (min-width: 1025px) {
	.rtl .ht-about-mission > .elementor-element-3560436 > .elementor-element {
		border-left: 0 !important;
		padding-left: 0 !important;
		padding-right: 22px !important;
		position: relative;
	}
	.rtl .ht-about-mission > .elementor-element-3560436 > .elementor-element::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 1px;
		background: white;
		pointer-events: none;
	}
	.rtl .ht-about-mission > .elementor-element-3560436 > .elementor-element:first-child::before {
		display: none;
	}
}


/* ============================================================
   2. DISPLAY HEADINGS — line-height for Arabic
   ------------------------------------------------------------
   Roca has no Arabic glyphs. Measured on the live Arabic page:
   the string "التعاون والرعاية" renders at exactly 299px whether
   the family is Roca, Georgia or serif, while Latin "Handgloves"
   is 272px in Roca against 298px in Georgia. So Roca IS loading,
   and Arabic is silently falling back to the system serif.

   The trouble is that the line-heights were set for Roca, whose
   Latin metrics are compact — 57px text on a 60px line, a ratio
   of 1.05. The fallback Arabic face is far taller, so the glyphs
   overflow their line box and the tops of the letters collide
   with the line above. One heading was worse still: 48px text on
   a 27.5px line, a ratio of 0.57.

   Measured overflow above the box, and after setting 1.4:

       h1.sc_layouts_title_caption  57/60     +7px  ->  -3px
       p.ht-display-title           57/60     +7px  ->  -3px
       p.ht-display-title           48/27.5  +17px  ->  -2px

   1.3 was the point where it merely stopped clipping; 1.4 leaves
   a little air, which is normal for Arabic.

   NOTE: this only stops the clipping. The headings are still
   rendering in whatever serif the visitor's OS supplies — Times
   on macOS, Traditional Arabic on Windows — so they will not look
   the same from machine to machine, and they do not match Roca.
   Picking a proper Arabic display face is a design decision and
   is still open.
   ============================================================ */
.rtl .ht-display-title,
.rtl .sc_layouts_title_caption {
	line-height: 1.4 !important;
}


/* ============================================================
   3. ECOFEMINISM (Arabic page 31996)
   ------------------------------------------------------------
   The bulk of this page was fixed by converting the 98
   .page-id-31055 selectors to .elementor-31055 in style.css —
   without them the Arabic page fell back to the theme's centred
   1154px container for every section, including the two rows that
   are meant to be full-bleed. Measured on the live Arabic page:

       before   all 7 sections at 383..1537
       after    55..1865 x3, 0..1920 x2, 55..1865  — matching English

   Only four rules in that block are one-sided and need mirroring.
   ============================================================ */

/* The two green half-panels carry an asymmetric inset so the copy
   lands on the same 70px edge as the rest of the page:
   `padding: 64px 56px 64px 70px`. Swap the two horizontal values so
   the 70px sits on the trailing edge in Arabic. */
@media (min-width: 1025px) {
	/* Mirror the rule that actually wins — the one in the mirrored Additional
	   CSS with the clamped vertical padding, not the earlier flat 64px one.
	   Leading inset 130px per Figma, trailing 56px. */
	.rtl .elementor-31055 .elementor-element-14d075b,
	.rtl .elementor-31055 .elementor-element-8c2cd7e {
		padding: clamp(56px, 8.91vw, 127px) 130px clamp(44px, 5.82vw, 83px) 56px !important;
	}

	/* Intro heading + paragraph sit 15px deeper than the rest of the
	   column (margin-left: -15px in style.css). */
	.rtl .elementor-31055 .elementor-element-184499b {
		margin-left: 0 !important;
		margin-right: -15px !important;
	}
}

/* "Feminist space-conception" / "Feminist workshops" titles are
   explicitly left-aligned in style.css, which leaves them on the
   trailing edge in Arabic. */
.rtl .elementor-31055 .elementor-element-dcef2e2 .sc_title,
.rtl .elementor-31055 .elementor-element-dcef2e2 .sc_item_title,
.rtl .elementor-31055 .elementor-element-wff57c2 .sc_title,
.rtl .elementor-31055 .elementor-element-wff57c2 .sc_item_title {
	text-align: right !important;
}


/* ============================================================
   4. NETWORK (Arabic page 31975)
   ------------------------------------------------------------
   Two rules in style.css are physical and do not mirror.
   Measured on the live pages at 1920px.
   ============================================================ */

/* The Cooperaccio logo is explicitly left-aligned to sit under the
   text. In Arabic it needs the trailing edge instead — without this
   it fell back to the theme's centre alignment (EN text-align:left,
   AR text-align:center). */
.rtl .elementor-31020 .elementor-element-dc939fe,
.rtl .elementor-31020 .elementor-element-dc939fe .elementor-widget-container {
	text-align: right !important;
}

/* The big section title is pulled out of its centred container so it
   lands on the header logo's 98px edge:

     .elementor-31020 .elementor-element-dca5e32
         { margin-left: calc(98px + 50% - 50vw); }

   That pull has to go the other way in RTL, otherwise the title drags
   toward the left edge while the text runs right-to-left. English puts
   it at x=98; mirrored, it belongs at 1920-98 = 1822. */
@media (min-width: 1025px) {
	.rtl .elementor-31020 .elementor-element-dca5e32 {
		margin-left: 0 !important;
		margin-right: calc(98px + 50% - 50vw) !important;
	}
}
@media (max-width: 1024px) {
	.rtl .elementor-31020 .elementor-element-dca5e32 {
		margin-right: 0 !important;
	}
}

/* The partner blocks — heading, body copy and the Cooperaccio logo —
   are each inset 300px from the left inside the centred 1154px column,
   so English reads as: section title on the left, partner content on
   the right. That inset comes from the Elementor page data, which WPML
   copies verbatim into the translation, so it stayed on the left in
   Arabic and the mirror never happened: every block measured at exactly
   the same 698..1522 as English.

   Mirrored they sit at 398..1222. Verified on the live Arabic page —
   all seven blocks carry margin-left:300px and nothing else. */
@media (min-width: 1025px) {
	.rtl .elementor-31020 .elementor-element-4b65e90,
	.rtl .elementor-31020 .elementor-element-e643651,
	.rtl .elementor-31020 .elementor-element-84cadec,
	.rtl .elementor-31020 .elementor-element-e648a42,
	.rtl .elementor-31020 .elementor-element-dc939fe,
	.rtl .elementor-31020 .elementor-element-1599a23,
	.rtl .elementor-31020 .elementor-element-4da00af {
		margin-left: 0 !important;
		margin-right: 300px !important;
	}
}


/* ============================================================
   5. TEAM SINGLE (Arabic member pages, e.g. 31980)
   ------------------------------------------------------------
   Measured on the live Arabic page at 1920px.
   ============================================================ */

/* The brown bio panel is pinned with a physical `right: 0` in
   HT-TEAM-SINGLE, so it stayed on the right while the photo
   mirrored correctly to the left — the two ended up stacked on
   the same side. English 627..1850; mirrored it belongs on the
   left. Measured after: 70..1400.

   NOTE the compound selector. `.rtl` and `.single-cpt_team` are
   BOTH classes on <body>, so `.rtl .single-cpt_team` — with a
   space — is a descendant selector and matches nothing. This
   applies to every body-level class: page-id-*, single-*, postid-*.

   Both edges are pinned on purpose. The panel's `width: 54%` sits in
   a media query that does not match on desktop, so the winning rule
   is `width: auto` and the width falls out of wherever the box is
   anchored. Anchored only by `left: 0` it took the full container and
   overshot English's width, reaching further across the photo.

   557px, NOT a percentage. In English the panel is flush to the
   container's right edge with a constant 557px gap on its left — the
   gap does not scale, the width absorbs the difference. Measured
   across four container widths:

       container   EN leftGap   EN width
       1460         557px        903
       1780         557px       1223
       2060         557px       1503
       2460         557px       1903

   A percentage only matches at one width. `right: 557px` reproduces
   English exactly at every width — verified at 1600 and 2200, where
   the mirrored panel comes out at 903px and 1503px to the pixel. */
.rtl.single-cpt_team .team_member_content.team_member_page_content {
	left: 0 !important;
	right: 557px !important;
	width: auto !important;
}

/* Submit button: the paper-plane icon is an absolutely positioned
   ::before given BOTH `left: 36px` and `right: 36px`. When an
   absolutely positioned box is over-constrained like that, the
   browser drops one of them — and in RTL it keeps `right`. So the
   icon jumped to the trailing edge and landed on top of the label,
   while the input's 64px of padding still reserved room on the left.

   CORRECTED: this rule previously pinned the icon to the LEFT
   (right:auto; left:36px), on the reading that the padding had not
   flipped. Re-measured on the live pages, that was wrong:

     English  padding 64px left / 35px right, icon left:36px
     Arabic   padding 35px left / 64px right   <- already mirrored

   The padding DOES flip, so the 64px of room for the icon is on the
   right in Arabic while the icon was being held on the left - it sat
   on top of the label, which is the overlap on the contact button.
   Pin it to the trailing edge instead, where the room actually is.
   Measured after: icon right:36px, label clear. */
.rtl .wpcf7-submit-style .submit-style-in::before {
	left: auto !important;
	right: 36px !important;
}

/* ...except on the team single, where the input's padding does NOT mirror.
   The icon is drawn by the .submit-style-in overlay, but the room for it is
   the oversized padding on the <input> underneath, and the two pages differ:

     Contacts     input padding 35 / 64  -> 64px reserve on the RIGHT
     Team single  input padding 64 / 35  -> 64px reserve on the LEFT

   So a single global side is wrong for one of them either way - putting the
   icon right fixed Contacts and broke this page. Follow the reserve instead.
   Forcing the padding to match was tried first and would not budge, even
   from an inline !important, so the icon moves rather than the padding. */
.rtl.single-cpt_team .wpcf7-submit-style .submit-style-in::before {
	right: auto !important;
	left: 36px !important;
}


/* ============================================================
   6. CONTACT (Arabic page 31969)
   ------------------------------------------------------------
   "Work With Us" — the 3-across grid on the indigo panel.
   ============================================================ */

/* HT-CONTACT-WWU in style.css puts the divider on the LEFT of every
   cell that is not first in its row:

     .ht-contact-wwu > *:last-child > *:not(:nth-child(3n+1))
         { border-left: 1px …; padding-left: 34px; }

   In RTL the row runs right-to-left, so cell 1 is the RIGHTMOST.
   A left border then lands on the far side of each cell: the gap
   between cells 1 and 2 gets no divider at all, and cell 3 draws a
   stray line hard against the outer left edge of the panel.
   Measured on the live Arabic page at 1920px — lines at x=785 and
   x=378, where they belong at x=1135 and x=727.

   Drawn as a pseudo-element for the same reason as the About
   dividers: border-right on these containers resolves to 3px from
   Elementor's --border-*-width variables regardless of !important. */
@media (min-width: 1025px) {
	.rtl .ht-contact-wwu > *:last-child > *:not(:nth-child(3n+1)) {
		border-left: 0 !important;
		padding-left: 10px !important;
		padding-right: 34px !important;
		position: relative;
	}
	.rtl .ht-contact-wwu > *:last-child > *:not(:nth-child(3n+1))::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 1px;
		background: rgba(255, 255, 255, 0.35);
		pointer-events: none;
	}
}


/* ============================================================
   7. STUBS — uncomment and adjust as each page is reviewed
   ------------------------------------------------------------
   Every block below corresponds to a one-sided rule that exists
   in style.css. They are left commented out so this file changes
   nothing until you have actually looked at the Arabic page and
   decided the mirror is right.
   ============================================================ */

/* --- CONTACT: form field icons sit on the leading edge ------- */
/*
.wpcf7 .style-line::before { left: auto; right: 0; }
.wpcf7 .style-line input,
.wpcf7 .style-line textarea { padding-left: 0; padding-right: 34px; }
*/

/* --- PUBLICATIONS: intro column pushed to the trailing edge --- */
/*
.ht-pub-intro { margin-left: 0 !important; margin-right: auto !important; }
*/

/* --- WEBINAR 2: hero image bleeds off the trailing edge ------- */
/*
.ht-webinar2-hero { margin-right: 0 !important; margin-left: calc(50% - 50vw) !important; }
*/

/* --- FOOTER: address / legal links --------------------------- */
/*
.footer_wrap .ht-footer-address { text-align: right !important; }
*/

/* --- FOOTER newsletter: submit arrow collides with the envelope ---
   The field carries two icons: the envelope glyph on the reading-START edge
   (.mc4wp-form-fields::before) and the submit arrow on the END edge (the
   button). The theme mirrors the envelope for RTL but pins the arrow with a
   physical right:0, so in Arabic BOTH sat on the right and the arrow was drawn
   on top of the envelope - measured on the live footer, envelope and button
   both landing at ~373. Pin the arrow to the left instead, and swap the
   input's 27px / 35px padding so the text still clears whichever icon is on
   its side. Scoped to .rtl, so the English footer is untouched. */
.rtl .footer_wrap .mc4wp-form button {
	left: 0 !important;
	right: auto !important;
}
/* The arrow itself is a fontello glyph on button::before and points right, the
   direction of travel in English. Nothing in the theme mirrors it (computed
   transform on the live Arabic footer is "none"), so it kept pointing away
   from the text in Arabic. scaleX(-1) turns it around to point left.
   transition:none is required, not cosmetic: the theme puts a blanket
   "transition: 0.3s" on this pseudo, which covers transform too and left the
   computed value stuck at the identity matrix - the flip never resolved.
   Killing the transition on the glyph makes it apply. Scoped to .rtl, so the
   English arrow keeps both its direction and its transition. */
.rtl .footer_wrap .mc4wp-form button::before {
	transition: none !important;
	transform: scaleX(-1) !important;
	transform-origin: center !important;
}
.rtl .footer_wrap .mc4wp-form input[type="email"],
.rtl .footer_wrap .mc4wp-form input[type="text"] {
	padding-left: 35px !important;   /* arrow side    (was the envelope's 27px) */
	padding-right: 27px !important;  /* envelope side (was the arrow's 35px)   */
}

/* --- ARABIC TYPOGRAPHY ---------------------------------------
   Roca Bold  -> Amiri Bold      (display titles)
   Inter      -> Tajawal Regular (everything else)

   Both faces are loaded from Google Fonts in functions.php. Applied here,
   under .rtl, so they only take effect on Arabic views and the English
   stacks are left exactly as they were.

   Specificity note: the Latin stacks are set as "html body ..." with
   !important, from an inline <style> in wp_head. Prefixing body with .rtl
   (html body.rtl ...) adds a class, which outranks them regardless of the
   order the stylesheet and the inline block appear in. */

/* Display titles: EVERY selector that carries Roca in English, mirrored.
   Generated by scanning style.css and functions.php for rules whose
   declarations contain Roca, rather than listed by hand - a partial list
   left Amiri missing from the slider line, the section titles and the
   blogger-slider card titles, each of which sets Roca from its own block. */
/* body.rtl.single-cpt_team, NOT body.rtl .single-cpt_team - single-cpt_team
   is a BODY class, so a descendant combinator looks for it inside body and
   matches nothing. The team member name still came out right by accident,
   via the .content h2 selector below; the "Biography" heading is an h3 and
   had nothing else to catch it, so it stayed on Roca. */
html body.rtl.single-cpt_team .team_member_title,
html body.rtl.single-cpt_team .team_member_brief_info_title,
html body.rtl.single-cpt_team .section_title.team_member_brief_info_title,
html body.rtl .sc_layouts_title_caption,
html body.rtl .sc_layouts_title_caption a,
html body.rtl .content .elementor-widget-heading .elementor-heading-title,
html body.rtl .content h1,
html body.rtl .content h2,
html body.rtl .ht-pub-title,
html body.rtl .ht-display-title,
html body.rtl .elementor-18622 .e-79f9458,
html body.rtl .elementor-31055 .e-26eb6b3-f15c195,
html body.rtl .elementor-31055 .e-2a8c7a4-90c7ccc,
html body.rtl:has(.elementor-18859) .page_content_wrap .sc_item_title,
html body.rtl:has(.elementor-18859) .page_content_wrap .sc_item_title .sc_item_title_text,
html body.rtl.home .page_content_wrap .sc_item_title,
html body.rtl.home .page_content_wrap .sc_item_title .sc_item_title_text,
html body.rtl:has(.elementor-18622) .page_content_wrap .sc_item_title,
html body.rtl:has(.elementor-18622) .page_content_wrap .sc_item_title .sc_item_title_text,
html body.rtl.home rs-layer[id*="-layer-55"],
html body.rtl.home .elementor-element-a002ea0 .e-heading-base,
html body.rtl.home .sc_blogger_slider .sc_blogger_item_title,
html body.rtl.home .sc_blogger_slider .sc_blogger_item_title a,
html body.rtl.home .slider-slide .sc_blogger_item_title,
html body.rtl.home .slider-slide .sc_blogger_item_title a,
html body.rtl .elementor-18622 .sc_blogger_slider .sc_blogger_item_title,
html body.rtl .elementor-18622 .sc_blogger_slider .sc_blogger_item_title a,
html body.rtl .elementor-18622 .slider-slide .sc_blogger_item_title,
html body.rtl .elementor-18622 .slider-slide .sc_blogger_item_title a {
	font-family: 'Amiri', Georgia, serif !important;
}

/* Body / UI faces: EVERY selector that sets Inter directly, mirrored to
   Tajawal. Generated by scanning both files the same way as the Amiri list
   above - hand-listing missed the footer widget titles (.sc_item_title),
   the workshop and article headings, and the blogger card titles, each of
   which sets Inter from its own block.
   The --theme-font-* variables are handled separately below; icon faces
   (fontello) are never touched. */
html body.rtl .elementor-18622 .elementor-element-743215e .sc_blogger_item_title::before,
html body.rtl .elementor-element-wb769e0 .sc_blogger_item_title::before,
html body.rtl .logo_text,
html body.rtl .sc_layouts_logo .logo_text,
html body.rtl .ws-single .ws-title,
html body.rtl .ws-single .ws-subtitle,
html body.rtl .ws-single .ws-desc,
html body.rtl .ws-single .ws-desc p,
html body.rtl,
html body.rtl .elementor-element-d9ad571 .wpml-ls a,
html body.rtl .elementor-element-439faa1 .wpml-ls a,
html body.rtl .elementor-element-7f63cae .wpml-ls a,
html body.rtl .elementor-element-15503a3 .wpml-ls a,
html body.rtl .elementor-element-29ef4f0 .wpml-ls a,
html body.rtl .elementor-element-d9ad571 .wpml-ls a .wpml-ls-native,
html body.rtl .elementor-element-439faa1 .wpml-ls a .wpml-ls-native,
html body.rtl .elementor-element-7f63cae .wpml-ls a .wpml-ls-native,
html body.rtl .elementor-element-15503a3 .wpml-ls a .wpml-ls-native,
html body.rtl .elementor-element-29ef4f0 .wpml-ls a .wpml-ls-native,
html body.rtl .elementor-31055 .ht-eco-type,
html body.rtl.single-webinars .content .elementor-widget-heading .elementor-heading-title,
html body.rtl.single-ecofeminism_items .elementor-element-2bcdad0 .e-heading-base,
html body.rtl.single-ecofeminism_items .elementor-element-c059fe9 .e-heading-base,
/* Network partner titles. The English rule that makes these Inter rather
   than Roca is scoped html body.page-id-31020; the Arabic Network page is
   page-id-31975, so a literal mirror of that selector matched nothing and
   the Amiri sweep above claimed them instead - they rendered as 24px Amiri
   where English shows Inter. Hooked on .elementor-31020, which Elementor
   prints on the Arabic wrapper too. */
html body.rtl:has(.elementor-31020) .content .elementor-widget-heading:not(.elementor-element-dca5e32) .elementor-heading-title,
html body.rtl.single-articles .content h2,
html body.rtl.single-articles .content h3,
html body.rtl.single-articles .content h4,
html body.rtl.single-books .content h2,
html body.rtl.single-books .content h3,
html body.rtl.single-books .content h4,
html body.rtl a.e-con .e-heading-base,
html body.rtl .e-button-base .e-heading-base,
html body.rtl.single-ecofeminism_items .elementor-element-e751340 .e-heading-base,
html body.rtl.single-ecofeminism_items .e-4ace1ed,
html body.rtl h2.ws-title,
html body.rtl .content h2.ws-title,
html body.rtl .ws-title,
html body.rtl.single-workshops .content h1,
html body.rtl.single-workshops .content h2,
html body.rtl .sc_item_title,
html body.rtl .sc_item_title .sc_item_title_text,
html body.rtl .sc_title .sc_item_title,
html body.rtl .sc_title .sc_item_title_text,
html body.rtl .sc_blogger_item_title,
html body.rtl .sc_blogger_item_title a,
html body.rtl .post_item .post_title,
html body.rtl .post_item .post_title a {
	font-family: 'Tajawal', sans-serif !important;
}

/* Headings, menu and buttons run off the theme's own variables, so
   repointing those covers them in one place. */
html body.rtl {
	--theme-font-h1_font-family: 'Tajawal', sans-serif !important;
	--theme-font-h2_font-family: 'Tajawal', sans-serif !important;
	--theme-font-h3_font-family: 'Tajawal', sans-serif !important;
	--theme-font-h4_font-family: 'Tajawal', sans-serif !important;
	--theme-font-h5_font-family: 'Tajawal', sans-serif !important;
	--theme-font-h6_font-family: 'Tajawal', sans-serif !important;
	--theme-font-p_font-family: 'Tajawal', sans-serif !important;
	--theme-font-menu_font-family: 'Tajawal', sans-serif !important;
	--theme-font-button_font-family: 'Tajawal', sans-serif !important;
	--theme-font-other_font-family: 'Tajawal', sans-serif !important;
	--theme-font-submenu_font-family: 'Tajawal', sans-serif !important;
	--theme-font-info_font-family: 'Tajawal', sans-serif !important;
	--theme-font-post_font-family: 'Tajawal', sans-serif !important;
}

/* Body copy and form controls, which set Inter directly rather than through
   a variable. Icon fonts are excluded - fontello glyphs would turn into
   missing-character boxes if they were repointed to a text face. */
html body.rtl,
html body.rtl p,
html body.rtl li,
html body.rtl blockquote,
html body.rtl label,
html body.rtl input,
html body.rtl textarea,
html body.rtl select,
html body.rtl button,
html body.rtl .post_content,
html body.rtl .elementor-widget-text-editor,
html body.rtl .elementor-widget-heading .elementor-heading-title,
html body.rtl .sc_layouts_menu_nav a,
html body.rtl .breadcrumbs,
html body.rtl .breadcrumbs a {
	font-family: 'Tajawal', sans-serif !important;
}

/* Elementor buttons write their typography per widget, so they sit outside
   both the --theme-font-* variables and the Inter sweep above. style.css
   moves them to Inter for English; this is the Arabic half. */
html body.rtl .elementor-button,
html body.rtl .elementor-button .elementor-button-content-wrapper,
html body.rtl .elementor-button .elementor-button-text {
	font-family: 'Tajawal', sans-serif !important;
}

/* The switcher's ENGLISH label stays on Inter in every language - only the
   Arabic label takes Tajawal. WPML tags each item with its language
   (.wpml-ls-item-en / .wpml-ls-item-ar), so the English one is pulled back
   out of the Tajawal sweep above.

   The column class is repeated here on purpose. The sweep matches
   "html body.rtl .elementor-element-<col> .wpml-ls a" - three classes - so a
   shorter selector like "html body.rtl .wpml-ls-item-en a" would lose to it.
   Adding .wpml-ls-item-en on top of the same chain makes it four. */
html body.rtl .elementor-element-d9ad571 .wpml-ls .wpml-ls-item-en a,
html body.rtl .elementor-element-439faa1 .wpml-ls .wpml-ls-item-en a,
html body.rtl .elementor-element-7f63cae .wpml-ls .wpml-ls-item-en a,
html body.rtl .elementor-element-15503a3 .wpml-ls .wpml-ls-item-en a,
html body.rtl .elementor-element-29ef4f0 .wpml-ls .wpml-ls-item-en a,
html body.rtl .elementor-element-d9ad571 .wpml-ls .wpml-ls-item-en a .wpml-ls-native,
html body.rtl .elementor-element-439faa1 .wpml-ls .wpml-ls-item-en a .wpml-ls-native,
html body.rtl .elementor-element-7f63cae .wpml-ls .wpml-ls-item-en a .wpml-ls-native,
html body.rtl .elementor-element-15503a3 .wpml-ls .wpml-ls-item-en a .wpml-ls-native,
html body.rtl .elementor-element-29ef4f0 .wpml-ls .wpml-ls-item-en a .wpml-ls-native {
	font-family: 'Inter', sans-serif !important;
}

/* --- LANGUAGE SWITCHER: EN | عربي ---------------------------- */
/*
.ht-lang-switch { margin-left: 0 !important; margin-right: auto !important; }
*/

/* --- HEADER LOGO: pin to the reading-start edge ---------------
   The logo sits on the content edge - left in English (70..231 at 1440), so
   the Arabic mirror is 1209..1370. It was landing at 1107..1268 on other
   pages and 1075..1236 on the home page. Two separate causes:

   1. Elementor ships its own RTL stylesheet that swaps flex-start <-> flex-end
      on the column. direction:rtl ALREADY mirrors flex-start to the right, so
      the swap is a second flip and pushed the logo back to the left of its
      column. Forcing flex-start restores one flip only.
   2. The logo widget carries a physical margin-right:57.6px - the gap to the
      menu. That stayed on the right in Arabic and held the logo 57.6px short
      of the edge, so it is moved to the left.

   Columns / widgets - one pair per header ROW, and the home page has two:
   the row you see at the top and a separate sticky row that appears on
   scroll, each with its own logo widget.
     7356de4 / 2a2451c  home header, top row      (18438)
     30eced0 / 5c49222  home header, sticky row   (18438, row b81abd3)
     8cf9296 / a5b3724  all other pages           (18361) */
.rtl .elementor-element-7356de4 > .elementor-element-populated,
.rtl .elementor-element-30eced0 > .elementor-element-populated,
.rtl .elementor-element-8cf9296 > .elementor-element-populated {
	justify-content: flex-start !important;
}
.rtl .elementor-element-2a2451c > .elementor-widget-container,
.rtl .elementor-element-5c49222 > .elementor-widget-container,
.rtl .elementor-element-a5b3724 > .elementor-widget-container {
	margin-right: 0 !important;
	margin-left: 57.6px !important;
}

/* --- BREADCRUMBS: Home / About separator --------------------- */
/*
.breadcrumbs .breadcrumbs_delimiter { transform: scaleX(-1); }
*/

/* --- SLIDER PAGINATION: keep bullet order LTR in Arabic -------
   The theme's Swiper pagination lays its bullets out as inline
   boxes, so it simply inherits the page's direction. Under RTL that
   reverses them: the first bullet lands on the right and the last on
   the left, while the slides themselves still advance left-to-right.
   The active dot then travels opposite to the slides.

   Measured on the live home page (1920px viewport), bullets at:
     English   926  946  966  986   (first -> last, left to right)
     Arabic    986  966  946  926   (reversed)
   Same span, size, margins and colours -- only the order differs.

   Forcing the container back to LTR restores the English order; the
   row is centred and symmetric, so every bullet lands on the exact
   same x as English. Text direction is unaffected: the bullets carry
   no text. */
.rtl .slider_pagination_wrap.swiper-pagination,
.rtl .sc_item_slider .swiper-pagination {
	direction: ltr !important;
}

/* --- SLIDER REVOLUTION BULLETS: mirror the group in Arabic ----
   Slider Revolution pins the bullet group with `left: 50%` plus an
   inline transform that carries the configured offset, so the group
   sits 110px LEFT of the module centre -- under the text column,
   which in English is on the left.

   Arabic mirrors the slide layout (the text column moves right) but
   the nav keeps its physical offset, so the dots stay on the left,
   away from the content they belong to.

   Measured on the live home page (1920px module):
     English  group centre at module centre -110px
     Arabic   group centre at module centre -110px  <- should be +110

   The bullets themselves are absolutely positioned by inline `left`
   (0, 26, 52...), so their order and spacing already match English;
   only the group needs mirroring. Using `calc(110px - 50%)` keeps it
   correct for any number of slides -- the 50% resolves against the
   group's own width, so a 2-dot Arabic slider and a 3-dot English one
   both land on the same centre. The -24px keeps the vertical offset
   Slider Revolution set. Verified live: -110px -> +110px. */
.rtl rs-bullets {
	transform: translate(calc(110px - 50%), -24px) !important;
}

/* --- PHONE NUMBER: stop the RTL paragraph reversing the digits ---
   The parent theme already sets `a[href^="tel:"] { direction: ltr }`
   (charity-is-hope/rtl.css line 4009), but that alone does nothing to
   an inline box: per the CSS spec `direction` only reorders content
   when `unicode-bidi` creates a new embedding level. Its computed
   value here is `normal`, so the surrounding RTL paragraph's bidi
   algorithm still reorders the digit groups and
       +1 840 841 25 69   renders as   69 25 841 840 1+
   Adding an isolate gives the number its own bidi context. */
.rtl a[href^="tel:"],
.rtl .widget_contacts .contacts_info .contacts_phone {
	direction: ltr !important;
	unicode-bidi: isolate !important;
}

/* --- FOOTER MOBILE ALIGNMENT: mirror the physical left rules ------
   The <=1024px footer rules in style.css pin everything with the
   physical `text-align: left`, which does not follow direction. In
   Arabic that left-aligns the section headings ("مكتب", "روابط",
   "النشرة البريدية") and the bottom bar while the body text keeps its
   natural right alignment, so the two disagree column by column.

   The matching `align-items` / `justify-content: flex-start` rules
   need no mirror -- flex-start already follows the writing direction --
   and the 24px side padding is symmetric. Only text-align is physical.

   Selectors mirror the five style.css groups exactly, with body.rtl
   for specificity over their `body .footer_wrap` chains. */
@media (max-width: 1024px) {
	body.rtl .footer_wrap .elementor-element-5599fd8 .elementor-element-570445e > *,
	body.rtl .footer_wrap .elementor-element-5599fd8 .elementor-element-570445e > * p,
	body.rtl .footer_wrap .elementor-element-7cc453da .elementor-column,
	body.rtl .footer_wrap .elementor-element-5599fd8 .elementor-column,
	body.rtl .footer_wrap .elementor-element-5599fd8 > *,
	body.rtl .footer_wrap .elementor-element-5599fd8 p,
	body.rtl .footer_wrap .elementor-element-7361e19,
	body.rtl .footer_wrap .elementor-element-580999d {
		text-align: right !important;
	}
}

/* --- LETTERING POSTER: drop the phone right-margin in Arabic ---
   Elementor's per-page CSS gives the poster widget a mobile margin of
   `0% 8% ... 0%`, i.e. margin-right: 8% (30px at a 375px viewport).

   The widget is width:100%, so in LTR that margin is inert — it is
   trailing space with no sibling to push, and the box measures 0..375.
   Under RTL the same physical margin is measured from the right edge,
   so the widget slides left and leaves a 30px gap down the right-hand
   side: measured -30..345 at 375px.

   Zeroing it for RTL restores the full-bleed poster. English is not
   touched: rtl.css only loads on RTL, and the margin has no visible
   effect there anyway. */
@media (max-width: 767px) {
	.rtl .elementor-element-ee0f461 {
		margin-right: 0 !important;
	}
}

/* --- MOBILE HEADER LOGO: mirror it to the right edge ------------
   Same Elementor RTL double-flip that was already fixed for the three
   desktop logo rows (7356de4 / 30eced0 / 8cf9296) — the mobile header
   row was missed.

   The logo column (2dda6f3) is a flex row with justify-content:flex-end.
   Under direction:rtl, flex-end resolves to the LEFT edge, so the logo
   was pinned to the middle of the bar instead of the right:

     768px   logo 384..576  (column 384..738)   should sit at the right
     1024px  logo 512..673
     900px   logo 450..611

   Setting flex-start restores the mirror. Measured after the change the
   logo ends 30px from the right edge at every width, exactly matching
   the 30px the English header leaves on the left, and the burger stays
   put at 30..56.

   Not scoped to a breakpoint on purpose: the row only exists below the
   desktop layout, so the rule is inert above it. */
.rtl .elementor-element-2dda6f3 > .elementor-element-populated {
	justify-content: flex-start !important;
}

/* --- MOBILE MENU PANEL: stop the double margin in Arabic ---------
   The theme insets the menu column with a physical margin-right that
   steps per breakpoint (15% / 28% / 32% / 43%), and the parent theme's
   rtl.css mirrors each one to margin-left with margin-right:0. The LTR
   declarations win back afterwards, so BOTH sides end up applied and
   the column is squeezed to a sliver:

     768px    margin 0 304.44px both sides -> width 99px  (needs 181-227px)
     1024px   margin 0 308.48px both sides -> width 347px

   The Arabic menu labels then wrapped and clipped mid-word — "المنشورات"
   rendered as "المنشو" — while English, which only ever gets the
   right-hand margin, laid out correctly.

   Zeroing margin-right for RTL leaves the mirrored margin-left doing the
   inset on its own. Measured after: 404px at 768 (matching English's
   404) and 656px at 1024, with every label fitting its box exactly. */
.rtl .menu_mobile .menu_mobile_inner.with_widgets .menu_mobile_content_wrap_inner,
.rtl .menu_mobile .menu_mobile_inner .menu_mobile_content_wrap_inner {
	margin-right: 0 !important;
}

/* --- ARTICLE / BOOK header display title: Roca -> Amiri ---------
   The big word painted over the article header ("Publications") is a
   ::after on .sc_layouts_title_caption, not a real element — which is
   why it never picked up the heading font rules.

   It was set to Inter in style.css, so the mechanical Inter->Tajawal
   sweep faithfully mirrored it to Tajawal. Both were wrong: this is a
   display heading, so it is Roca in English and therefore Amiri here.
   The Tajawal entry has been removed from the mirror list above. */
html body.rtl:has(.ht-pub) .sc_layouts_title_caption:after {
	/* The word itself is hard-coded in the ::after content, so it cannot
	   be translated in WPML — a pseudo-element has no text node for the
	   string scanner to find. Overriding `content` here is the only place
	   it can change for Arabic. Same for the two "Ecofeminism" banners
	   below, which inherit their font from the h1 and so need only the
	   word swapped. */
	content: 'المنشورات' !important;
	font-family: 'Amiri', Georgia, serif !important;
}
html body.rtl.single-workshops .sc_layouts_title_caption::after,
html body.rtl.single-webinars .sc_layouts_title_caption::after {
	content: 'النسوية البيئية' !important;
}
/* --- MOBILE HEADER LOGO: push it to the right edge, every template ---
   Supersedes the earlier row-specific fix (2dda6f3), which only covered
   the home header. Each header template has its own mobile logo widget
   — 9380fd0 in 18438 (home), cd729fb in 18361 (articles/books/inner
   pages) — so a per-id rule was always going to miss one.

   Two things were holding the logo away from the right edge:

   1. the logo column uses justify-content:flex-end, which under
      direction:rtl resolves to the LEFT edge — at 768 that parked the
      logo mid-bar (ended at 545, 223px short of the edge);
   2. the widget's inner container is a shrink-wrapped block (159px
      inside a 175px widget), so text-align cannot move it — it needs an
      auto margin. That was the last 16px at phone widths.

   Measured after, logo right edge vs viewport:
     390px  354 -> 370  (20px gap, matching the burger's 20px inset)
     768px  545 -> 738  (30px gap, matching the burger's 33px)

   Matched by :has(.sc_layouts_logo) rather than by widget id so any
   header template is covered, now and later. */
@media (max-width: 1024px) {
	.rtl .top_panel .elementor-element-populated:has(.sc_layouts_logo) {
		justify-content: flex-start !important;
	}
	.rtl .top_panel .elementor-widget-container:has(> .sc_layouts_logo) {
		margin-left: auto !important;
		margin-right: 0 !important;
	}
}