/*
 * English / LTR pages (/en/…, loaded only when !is_rtl()). The theme mostly uses logical properties
 * (inset-inline, margin-inline…) that flip by themselves; these are the spots written for RTL only.
 */

/* «قصتنا»: image and text swap sides (side by side from 768px; phones keep the stacked layout) */
@media (min-width: 768px) {
    .sanam-about-section > .sanam-about-layout {
        grid-template-areas: "copy image";
        grid-template-columns: minmax(0, 1fr) minmax(205px, 255px);
    }
}
.sanam-about-section .sanam-about-copy,
.sanam-about-section .sanam-about-copy p { direction: ltr; text-align: left !important; } /* justified English leaves gaps on phones */

/* «نحظى بثقة» heading with its gold line */
.sanam-trust-section .sanam-trust-heading { padding-right: 0; padding-left: 54px; text-align: left; }
.sanam-trust-section .sanam-trust-heading::before { right: auto; left: 0; }

/* Request form: phone and email fields */
.elementor-widget-form.sanam-request-form .elementor-field-type-tel .elementor-field,
.elementor-widget-form.sanam-request-form .elementor-field-type-email .elementor-field { text-align: left; }

/* Careers: job card footer on phones */
@media (max-width: 700px) {
    .sanam-job-card__side { text-align: left; }
}

/* Direction arrows point forward in reading order: mirror the ones drawn for RTL. */
.sanam-mm__arrow,
.sanam-job-card__more [aria-hidden="true"],
.service-card__more [aria-hidden="true"],
.sanam-job-back [aria-hidden="true"],
.sa-player__course svg {
    display: inline-block;
    transform: scaleX(-1);
}
.sanam-mm__list a:hover .sanam-mm__arrow,
.sanam-mm__list a:focus-visible .sanam-mm__arrow { transform: scaleX(-1) translateX(-4px); }

/* Latin text: the accent font (Wahaj) has no Latin letters, use the heading font instead. */
html[lang^="en"] { --sanam-font-accent: "Kufam", Tahoma, Arial, sans-serif; }

/* Homepage hero. The large logo is 140% of its column and Elementor shifts it toward the text with a
   left margin written for RTL; this mirrors it exactly (measured at 1280/1440/1920). The English
   heading is much wider than the Arabic one, so it gets a smaller size and a width limit to stay
   clear of the logo. */
@media (min-width: 1025px) {
    .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo {
        margin: 0 0 0 calc(-20% - 40px) !important;
        align-self: auto !important;
    }
    html[lang^="en"] .elementor-18 .elementor-element-79712149 h1.elementor-heading-title {
        font-size: clamp(44px, 3.1vw, 60px) !important;
        max-width: min(100%, 520px);
    }
}


/* 404: the camel faces the text and the big "404" sits on the outer side, as in Arabic. */
.sanam-404__art img { transform: scaleX(-1); }
.sanam-404__code { left: auto; right: 0; }

/* ===== English: the header, the top bar and the footer keep the Arabic arrangement (logo on the right,
   same order of links and columns), and the logo keeps its own shape (mark on the right of the wordmark).
   Only the containers are right-to-left; the English words inside still read left-to-right. ===== */
html:not([dir="rtl"]) .sanam-topbar,
html:not([dir="rtl"]) .site-header,
html:not([dir="rtl"]) .elementor-location-header .cedkw-logo { direction: rtl; }
html:not([dir="rtl"]) :is(.sanam-topbar, .site-header) :is(a, p, h2, h3, li, span, address, label, input, button) { unicode-bidi: isolate; }
html:not([dir="rtl"]) :is(.sanam-topbar__list > li:not(.sanam-topbar__brand) > a, .header-menu a, .header-cta) { direction: ltr; }
/* Footer: the columns keep the Arabic order (About on the right), but inside each column the English
   reads normally: left-aligned, icons before the text. The logo keeps its own shape. */
html:not([dir="rtl"]) .sanam-footer__cols { direction: rtl; }
html:not([dir="rtl"]) .sanam-footer__col { direction: ltr; text-align: left; }
html:not([dir="rtl"]) .sanam-footer__brand { direction: rtl; }
/* The logos grow out of the mark to the left, as in Arabic. */
html:not([dir="rtl"]) .sanam-topbar__word { animation-name: sanam-tb-logo !important; }
html:not([dir="rtl"]) :is(.site-header, .elementor-location-header) .sanam-alogo__word { animation-name: sanam-alogo !important; }
html:not([dir="rtl"]) .site-header .brand .sanam-alogo { transform-origin: right center; }