/* ==========================================================================
   Direction & language layer.

   Every layout sheet is authored for Arabic and now uses logical properties,
   so it mirrors on its own. What is left here is the handful of things CSS
   logical properties cannot express: gradient axes, mask axes, generated
   content, and elements that deliberately pin their own direction.

   Loaded last, so its [dir="ltr"] rules win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Elements that pin their own direction
   -------------------------------------------------------------------------- */

/* These wrappers stay LTR in both languages (marquee maths, header grid),
   so their text children need the page direction stated explicitly rather
   than inherited. */
[dir="rtl"] .testimonial-card,
[dir="rtl"] .eh-ticker-track span { direction: rtl; }
[dir="ltr"] .testimonial-card,
[dir="ltr"] .eh-ticker-track span { direction: ltr; }

/* Mobile home wordmark: generated content, so it needs a translated copy. */
[dir="rtl"] body:has(.em-home) .mobile-header::after {
  content: "إسناد المواهب";
  direction: rtl;
}
[dir="ltr"] body:has(.em-home) .mobile-header::after {
  content: "Esnad Al-Mawaheb";
  direction: ltr;
}

/* Counter numerals stay LTR, but the block itself must hug the reading edge.
   start/end would resolve against the element's own ltr direction, so these
   are stated physically. */
[dir="rtl"] .eh-impact-stat strong { text-align: right; }
[dir="ltr"] .eh-impact-stat strong { text-align: left; }

/* --------------------------------------------------------------------------
   2. Gradient and mask axes

   These overlays are empty, absolutely positioned decoration layers, so a
   horizontal flip mirrors the gradient exactly without restating its stops.
   -------------------------------------------------------------------------- */

[dir="ltr"] .eh-hero-overlay,
[dir="ltr"] .em-hero-shade,
[dir="ltr"] .em-service-product-shade,
[dir="ltr"] .eh-service-shade,
[dir="ltr"] .eh-sector-shade,
[dir="ltr"] .hero-bg-overlay,
[dir="ltr"] .heroOverlay,
[dir="ltr"] .heroGrid,
[dir="ltr"] .industry-hero__shade,
[dir="ltr"] .industry-hero__grid,
[dir="ltr"] .home-hero__overlay,
[dir="ltr"] .page-hero__overlay,
[dir="ltr"] .blog-featured-shade {
  transform: scaleX(-1);
}

/* The services rail carries content, so its mask is restated instead. */
[dir="ltr"] .services-carousel {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
  mask-image: linear-gradient(to right, transparent 0, #000 56px);
}

/* Featured blog image shade (was an inline "to left" gradient). */
.blog-featured-shade {
  background: linear-gradient(to left, transparent 60%, rgba(0, 0, 0, .25));
}

/* --------------------------------------------------------------------------
   3. Logical positioning utilities

   The markup used Tailwind's physical right-* helpers to mean "the reading
   edge". These name that intent, so it mirrors automatically.
   -------------------------------------------------------------------------- */

.start-0 { inset-inline-start: 0; }
.start-3 { inset-inline-start: .75rem; }
.start-4 { inset-inline-start: 1rem; }
.start-5 { inset-inline-start: 1.25rem; }
.end-0   { inset-inline-end: 0; }
.end-3   { inset-inline-end: .75rem; }
.end-4   { inset-inline-end: 1rem; }
.end-5   { inset-inline-end: 1.25rem; }

/* Decorative orbs that used to carry inline physical offsets. */
.orb-corner-top-start { top: -200px; inset-inline-start: -100px; }
.orb-mid-start { top: 50%; inset-inline-start: -10%; transform: translateY(-50%); }
.orb-mid-end   { top: 50%; inset-inline-end: -15%; transform: translateY(-50%); }

.orb-card-corner {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 10rem;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--orb-accent), transparent);
}
[dir="rtl"] .orb-card-corner { right: 0; transform: translate(50%, -50%); }
[dir="ltr"] .orb-card-corner { left: 0; transform: translate(-50%, -50%); }

/* Footer heading underline. */
.footer-heading-rule { inset-inline-start: 0; }

/* --------------------------------------------------------------------------
   4. English typography

   IBM Plex Sans Arabic carries a full Latin set, so the type stays on brand.
   Only the tightest display tracking is relaxed, because Latin words run
   longer than their Arabic counterparts at the same size.
   -------------------------------------------------------------------------- */

[dir="ltr"] {
  --font-heading: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --font: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

[dir="ltr"] body {
  font-family: var(--font-body);
  letter-spacing: -.006em;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3 {
  overflow-wrap: break-word;
}

[dir="ltr"] .eh-hero h1 {
  max-width: 740px;
  font-size: clamp(3.4rem, 4.35vw, 5.05rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}
[dir="ltr"] .eh-hero h1 span {
  display: inline;
  margin-left: .12em;
}
[dir="ltr"] .eh-convergence-hero h1 {
  max-width: 690px;
  font-size: clamp(3.6rem, 4.9vw, 5.45rem);
}
[dir="ltr"] .eh-convergence-hero h1 span {
  display: block;
  margin: .12em 0 0;
}
[dir="ltr"] .industry-hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  letter-spacing: -.035em;
}
[dir="ltr"] .aboutPage .heroCopy h1 {
  letter-spacing: -.035em;
}
[dir="ltr"] .em-hero-content h1 {
  letter-spacing: -.03em;
}
[dir="ltr"] .eh-section-head h2,
[dir="ltr"] .eh-manifesto-intro h2,
[dir="ltr"] .eh-impact-title h2,
[dir="ltr"] .eh-sectors-copy h2,
[dir="ltr"] .eh-final-card h2,
[dir="ltr"] .industry-section-head h2,
[dir="ltr"] .industry-cta h2 {
  letter-spacing: -.025em;
}

/* --------------------------------------------------------------------------
   5. Language switcher
   -------------------------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.lang-switch__short { font-size: 12px; letter-spacing: .02em; }
.lang-switch__full { font-size: 12px; }

/* Desktop header pill. The pill styles its direct <a> as the blue CTA,
   so the switcher restates its own look at a higher specificity. */
.exact-action-pill > a.lang-switch--pill {
  min-height: 36px;
  padding: 0 12px;
  color: var(--accent) !important;
  background: rgba(27, 80, 212, .08);
  border: 1px solid rgba(27, 80, 212, .18);
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
}
.exact-action-pill > a.lang-switch--pill:hover {
  background: rgba(27, 80, 212, .16);
  border-color: rgba(27, 80, 212, .34);
}
.lang-switch--pill .lang-switch__full { display: none; }

body:has(.em-home) .exact-action-pill > a.lang-switch--pill,
body:has(.eh-home) .exact-action-pill > a.lang-switch--pill {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
}

/* Mobile header. A fourth grid column is added only when the switcher is
   present, so the existing menu / logo / wordmark layout is untouched. */
.mobile-header:has(.lang-switch--mobile) {
  grid-template-columns: 1fr auto 1fr auto;
  grid-template-areas: "menu logo empty lang";
}
.lang-switch--mobile {
  grid-area: lang;
  justify-self: end;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--accent);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(27, 80, 212, .13);
  border-radius: 14px;
}
.lang-switch--mobile .lang-switch__full { display: none; }
body:has(.em-home) .lang-switch--mobile,
body:has(.eh-home) .lang-switch--mobile {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}

/* Navigation overlay and footer: full language name.
   Specificity is raised past `.exact-overlay-body aside>div a`. */
.exact-overlay-body .lang-switch--inline,
.site-footer .lang-switch--footer {
  margin-top: 10px;
  padding: 8px 14px;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .8;
}
.exact-overlay-body .lang-switch--inline:hover,
.site-footer .lang-switch--footer:hover { opacity: 1; }
.lang-switch--inline .lang-switch__short,
.lang-switch--footer .lang-switch__short { display: none; }

/* --------------------------------------------------------------------------
   6. Skip link — pinned to the reading edge in both directions
   -------------------------------------------------------------------------- */

.skip-link:focus { transform: none; }