/* =========================================================
   EJADA — RTL overrides (Arabic pages only)
   Loaded after styles.css + pages.css when dir="rtl".
   Bootstrap's RTL build flips its own utilities; this file
   handles our custom directional CSS.
   ========================================================= */

/* ---------- Typography ---------- */
body{
  font-family:'Cairo', 'Roboto', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.eyebrow, .brand-text .name{
  letter-spacing:0; /* Arabic script must not be letter-spaced */
}
.hero h1{ letter-spacing:0; line-height:1.35; } /* Cairo needs more line height than Roboto */

/* ---------- Arrows: flip direction ---------- */
.bi-arrow-right{
  display:inline-block;
  transform:scaleX(-1);
}
.btn-ej:hover .bi-arrow-right,
.svc-more:hover .bi-arrow-right{
  transform:scaleX(-1) translateX(4px);
}
.sc-arrow{ transform:translate(-6px,-6px) rotate(45deg); }
.service-card:hover .sc-arrow{ transform:translate(0,0) rotate(45deg); }
.ins-card:hover .ins-arrow{ transform:translateX(-3px); }

/* ---------- Hero ---------- */
.hero-media .float-chip{ left:auto; right:-22px; }
.hero--page{
  background:
    linear-gradient(-100deg, rgba(8,26,44,.94) 25%, rgba(8,26,44,.55) 55%, rgba(8,26,44,.12)),
    var(--hero-bg, url('https://placehold.co/1920x800/12314e/a6c339?text=Ejada')) center/cover no-repeat;
}

/* ---------- CTA (home) gradient ---------- */
.cta{
  background:linear-gradient(-100deg, var(--ej-navy-deep) 30%, rgba(8,26,44,.55) 70%, rgba(8,26,44,.15)),
             url('https://placehold.co/1600x700/12314e/a6c339?text=Sustainable+Community') center/cover no-repeat;
}

/* ---------- Process steps (home) ---------- */
.step .ghost-num{ text-align:right; }
.step:hover .ghost-num{ transform:translateX(4px); }

/* ---------- Approach timeline (services) ---------- */
.approach-step{ text-align:right; } /* pages.css sets an explicit left */
@media (min-width: 768px){
  .approach-step:not(:last-child) .approach-head::after{
    left:-1rem; right:calc(60px + .6rem + 2.6rem);
  }
}
@media (max-width: 767px){
  .approach-step:not(:last-child)::after{ left:auto; right:29px; }
}

/* ---------- Footer ---------- */
.footer a:hover{ padding-left:0; padding-right:4px; }
.social-btn{ margin-right:0; margin-left:.5rem; }
.social-btn:hover{ padding-right:0; }

/* ---------- Newsletter/contact input groups already handled by Bootstrap RTL ---------- */
/* intl-tel-input ships its own RTL support and follows dir="rtl" automatically */

/* ---------- Inner-page hero eyebrow trailing rule ---------- */

/* ---------- Project detail ---------- */
.back-link .bi-arrow-left{ display:inline-block; transform:scaleX(-1); }
.proj-cat-chip{ margin:0 0 .3rem .2rem; }
.proj-meta-label{ letter-spacing:0; }
.stat-label{ letter-spacing:0; }

/* Pillars */
.pillar-card .accent-bar{ left:auto; right:0; }
.pillar-num{ left:auto; right:1rem; }
.pillar-content::after{ content:"\2190"; right:auto; left:1.4rem; transform:translateX(6px); }
.pillar-card:hover .pillar-content::after{ transform:translateX(0); }
.service-card::after{ left:auto; right:0; }
.ej-select-trigger{ text-align:right; }
.proj-media .proj-chip{ left:auto; right:.9rem; }
.proj-card::after{ left:auto; right:0; }
.ins-media .ins-chip{ left:auto; right:.8rem; }
.ins-card::after{ left:auto; right:0; }

/* Mobile drawer: slide from the left in RTL */
.ej-drawer{ transform:translateX(-100%); box-shadow:24px 0 60px rgba(6,20,35,.45); }
.ej-drawer.open{ transform:translateX(0); }
.ej-drawer.open .ej-drawer-link{ transform:none; }
.ej-drawer-link{ transform:translateX(-18px); }

/* Horizontal hero/CTA scrims: dark side sits under the text,
   which is on the RIGHT in Arabic — mirror the gradients. */
.hero--home{
  background:
    linear-gradient(to bottom, rgba(8,26,44,.72) 0, rgba(8,26,44,.38) 90px, rgba(8,26,44,0) 170px),
    linear-gradient(260deg, rgba(8,26,44,.94) 22%, rgba(8,26,44,.42) 55%, rgba(8,26,44,0) 82%),
    var(--hero-bg) center/cover no-repeat;
}
.cta{
  background:
    linear-gradient(260deg, rgba(8,26,44,.80) 30%, rgba(8,26,44,.28) 68%, rgba(8,26,44,.08)),
    var(--cta-bg) center/cover no-repeat;
}
.hero--page{
  background:
    linear-gradient(to bottom, rgba(8,26,44,.72) 0, rgba(8,26,44,.38) 90px, rgba(8,26,44,0) 170px),
    linear-gradient(260deg, rgba(8,26,44,.94) 25%, rgba(8,26,44,.42) 55%, rgba(8,26,44,0) 85%),
    var(--hero-bg, url('https://placehold.co/1920x800/12314e/a6c339?text=Ejada')) center/cover no-repeat;
}

/* Arabic labels: connected script should not be letter-spaced —
   tracking is a Latin-uppercase device. Sizes stay consistent
   with the EN label system. */
.eyebrow,
.dir-key{
  letter-spacing:.02em;
}

/* Arabic display headings need more leading than the Latin default,
   and the script sets denser — a slightly wider measure keeps the
   section intro at two lines instead of spilling to three. */
.sec-intro{ --sec-measure:43rem; }
.sec-intro h2{ line-height:1.5; }

/* Clients marquee: drift in the Arabic reading direction (mirror of LTR) */
.cl-marquee .cl-track{ animation-direction:reverse; }
.cl-marquee:nth-child(2) .cl-track{ animation-direction:normal; }

/* Projects filter rail: fades and arrow glyphs follow the reading direction */
.pf-rail{
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
          mask-image:linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
}
.pf-nav i{ display:inline-block; transform:scaleX(-1); }

/* Service pages: Arabic breadcrumb drops the Latin tracking; arrows mirror */
.hero-crumbs ol{ letter-spacing:.02em; }
.svc-nav-label{ letter-spacing:.02em; }
.svc-row-go i{ transform:scaleX(-1); }
.svc-row:hover .svc-row-go i{ transform:scaleX(-1) translate(2px,-2px); }
.area-arrow{ transform:scaleX(-1) translateX(-6px); }
.area-card:hover .area-arrow,
.area-card:focus-visible .area-arrow{ transform:scaleX(-1) translateX(0); }
@media (hover:none){ .area-arrow{ transform:scaleX(-1); } }