/* Estate Capital Arabic layer
   Extends ec.css for RTL-specific behavior and Arabic typography polish. */

@font-face {
  font-family: "Helvetica Neue LT Arabic";
  src: url("../fonts/helvetica-neue-lt-arabic.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LT Arabic";
  src: url("../fonts/helvetica-neue-lt-arabic-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html[lang="ar"],
html[lang="ar"] body {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] {
  --ec-ar-font-stack: "Helvetica Neue LT Arabic", "Tajawal", "Cairo", "Noto Kufi Arabic", Arial, sans-serif;
  --tj-ff-body: var(--ec-ar-font-stack);
  --tj-ff-heading: var(--ec-ar-font-stack);
}

html[lang="ar"] body {
  font-family: var(--ec-ar-font-stack) !important;
}

/* Enforce Arabic typography consistently across UI text elements. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] label,
html[lang="ar"] .faq-title,
html[lang="ar"] .mainmenu a,
html[lang="ar"] .sub-menu a,
html[lang="ar"] .sec-title,
html[lang="ar"] .tj-page-title {
  font-family: var(--ec-ar-font-stack) !important;
}

html[lang="ar"] .mainmenu > ul > li > a,
html[lang="ar"] .sub-menu li a,
html[lang="ar"] .tj-page-title,
html[lang="ar"] .sec-title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
  font-family: var(--ec-ar-font-stack) !important;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "liga" 1, "calt" 1, "rlig" 1;
  letter-spacing: 0;
  text-transform: none;
}

/* Header layout parity with English structure (logo | centered menu | actions). */
html[lang="ar"] .header-wrapper {
  justify-content: flex-start;
}

/* Below the desktop-nav cutover (≤1599px): mobile/tablet header — logo at RTL-start, hamburger + lang switcher at RTL-end. */
@media (max-width: 1599.98px) {
  html[lang="ar"] .header-wrapper {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  html[lang="ar"] .header-wrapper .site_logo {
    order: 1;
    margin-inline-end: auto;
  }
  html[lang="ar"] .header-wrapper .ec-lang-switcher-mobile-header {
    order: 2;
  }
  html[lang="ar"] .header-wrapper .mobile_menu_bar {
    order: 3;
  }
}

html[lang="ar"] .header-wrapper .site_logo {
  order: 1;
  margin: 0;
  flex-shrink: 0;
}

html[lang="ar"] .site_logo .logo img[src*="logo-ar.svg"] {
  display: block;
  width: 100%;
  height: auto;
}

html[lang="ar"] .site_logo .logo {
  max-width: 152px;
}

/* Footer Arabic logo: keep consistent size/aspect in h6 footer layout. */
html[lang="ar"] .tj-footer-section.h6-footer .h6-footer-logo img[src*="logo-large-ar.svg"] {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
}

html[lang="ar"] .header-wrapper .menu-area {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  justify-content: center;
}

html[lang="ar"] .header-right-item {
  order: 3;
  margin: 0;
  flex-shrink: 0;
}

html[lang="ar"] .tj-primary-btn .btn-icon i,
html[lang="ar"] .text-btn .btn-icon i,
html[lang="ar"] .tji-icon-btn i {
  transform: scaleX(-1);
}

html[lang="ar"] .tj-page-link span i.tji-arrow-right {
  transform: scaleX(-1);
}

html[lang="ar"] .offcanvas-text p,
html[lang="ar"] .banner-desc,
html[lang="ar"] .desc,
html[lang="ar"] p,
html[lang="ar"] li {
  text-align: right;
}

html[lang="ar"] .list-items li i {
  margin-right: 0;
  margin-left: 10px;
}

html[lang="ar"] .social-links ul,
html[lang="ar"] .tj-page-link {
  flex-direction: row-reverse;
}

/* Footer legal links: keep clean RTL spacing and separator alignment. */
html[lang="ar"] .copyright-content-area .copyright-menu ul {
  flex-direction: row;
}

html[lang="ar"] .copyright-content-area .copyright-menu ul li a {
  white-space: nowrap;
}

html[lang="ar"] img.ec-sub-icon {
  margin-right: 0;
  margin-left: 7px;
}

html[lang="ar"] .ec-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  margin-right: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  background: rgba(10, 25, 52, 0.45);
  backdrop-filter: blur(6px);
}

html[lang="ar"] .ec-lang-switcher a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

html[lang="ar"] .ec-lang-switcher a.active {
  color: #12284b;
  background-color: #ffffff;
  border-radius: 999px;
  padding: 4px 8px;
}

html[lang="ar"] .ec-lang-switcher span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

/* Sticky header – switch to light theme matching English sticky switcher */
html[lang="ar"] .header-area.header-sticky.sticky .ec-lang-switcher {
  border-color: rgba(18, 40, 75, 0.22);
  background: rgba(18, 40, 75, 0.12);
}
html[lang="ar"] .header-area.header-sticky.sticky .ec-lang-switcher a {
  color: #12284b;
}
html[lang="ar"] .header-area.header-sticky.sticky .ec-lang-switcher a.active {
  color: #ffffff;
  background-color: #12284b;
}
html[lang="ar"] .header-area.header-sticky.sticky .ec-lang-switcher span {
  color: rgba(18, 40, 75, 0.65);
}

html[lang="ar"] .ec-lang-switcher.ec-lang-switcher-mobile {
  margin: 14px 0 8px;
  background: rgba(10, 25, 52, 0.45);
}

html[lang="ar"] .footer-contact-info .contact-item a,
html[lang="ar"] .footer-contact-info .contact-item span {
  direction: rtl;
}

/* Homepage hero stat card: keep Arabic copy centered and readable. */
html[lang="ar"] .h4-banner-section .banner-img-area .h4-rating-box .title {
  direction: ltr;
  unicode-bidi: isolate;
}

html[lang="ar"] .h4-banner-section .banner-img-area .h4-rating-box .title::before {
  top: 50%;
  height: 100%;
  transform: translateY(-50%);
}

html[lang="ar"] .h4-banner-section .banner-img-area .h4-rating-box .title::after {
  top: 50%;
  height: 100%;
  transform: translateY(-50%) scaleX(-1);
}

html[lang="ar"] .h4-banner-section .banner-img-area .h4-rating-box .desc {
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 220px;
  margin: 0 auto;
}

/* Keep phone/email tokens readable in RTL contexts. */
html[lang="ar"] .call-text,
html[lang="ar"] .contact-link[href^="tel:"],
html[lang="ar"] .contact-link[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

html[lang="ar"] .header-contact {
  direction: ltr;
}

/* Footer/contact rows with Arabic labels + LTR values. */
html[lang="ar"] .footer-contact-info a[href^="tel:"],
html[lang="ar"] .footer-contact-info a[href^="mailto:"] {
  direction: rtl;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

html[lang="ar"] .ec-ltr-inline {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline;
  white-space: nowrap;
}

/* Core values accordion icons: align properly for Arabic RTL. */
html[lang="ar"] .h7-faq .accordion-item .ec-value-body {
  display: flex;
  align-items: center;
  gap: 18px;
}

html[lang="ar"] .h7-faq .accordion-item .ec-value-body p {
  margin: 0;
  flex: 1 1 auto;
}

html[lang="ar"] .h7-faq .accordion-item .ec-value-icon {
  position: static;
  transform: none;
  width: 72px;
  height: 72px;
  opacity: 0.5;
  flex: 0 0 72px;
}

@media only screen and (max-width: 991px) {
  html[lang="ar"] .header-wrapper {
    justify-content: space-between;
  }
  html[lang="ar"] .header-wrapper .site_logo,
  html[lang="ar"] .header-wrapper .menu-area,
  html[lang="ar"] .header-wrapper .header-right-item {
    order: initial;
    flex: initial;
    min-width: initial;
  }
  html[lang="ar"] .site_logo .logo {
    max-width: 136px;
  }
  html[lang="ar"] .h7-faq .accordion-item .ec-value-body {
    display: block;
  }
  html[lang="ar"] .h7-faq .accordion-item .ec-value-icon {
    display: none;
  }
}

/* ── Fix letter-spacing breaking Arabic ligatures sitewide ── */
html[lang="ar"] .sub-title,
html[lang="ar"] .sec-heading .sub-title,
html[lang="ar"] .sec-heading-wrap .sub-title,
html[lang="ar"] .banner-content .sub-title,
html[lang="ar"] .h4-banner-content .sub-title,
html[lang="ar"] .tj-banner-section-2 .banner-content-2 .sub-title,
html[lang="ar"] .blog-date .month,
html[lang="ar"] .h6-client-title,
html[lang="ar"] .hamburger_menu .mean-nav ul li a {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"] .ec-core-heading {
  text-align: center;
}

/* ── Disable button hover animations in Arabic ── */
html[lang="ar"] .tj-primary-btn .btn-text span,
html[lang="ar"] .text-btn .btn-text span {
  text-shadow: none;
  transition: none;
}
html[lang="ar"] .tj-primary-btn:hover .btn-text span,
html[lang="ar"] .text-btn:hover .btn-text span {
  transform: none;
}
html[lang="ar"] .tj-primary-btn:hover .btn-icon i,
html[lang="ar"] .text-btn:hover .btn-icon i {
  transform: rotate(-45deg);
}
html[lang="ar"] .text-btn:hover .btn-icon {
  background-color: inherit;
}

/* ── Fix Arabic text clipping inside buttons ── */
html[lang="ar"] .tj-primary-btn {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.5;
}
html[lang="ar"] .tj-primary-btn .btn-text {
  overflow: visible;
}
html[lang="ar"] .tj-primary-btn .btn-text span {
  line-height: 1.5;
}
html[lang="ar"] .tj-primary-btn-lg {
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.5;
}

/* ── RTL button arrow: NW default, W on hover ── */
html[lang="ar"] .tj-primary-btn .btn-icon i {
  transform: rotate(-135deg);
}
html[lang="ar"] .tj-primary-btn:hover .btn-icon i {
  transform: rotate(-180deg);
}


/* Stat badge label: no letter-spacing or uppercase in Arabic */
html[lang="ar"] .ec-intl-stat-label {
  letter-spacing: 0;
  text-transform: none;
}

/* Core business lead block: center heading, right-align para in Arabic */
html[lang="ar"] .ec-core-lead-heading,
html[lang="ar"] .ec-core-heading {
  text-align: center !important;
}
html[lang="ar"] .ec-core-lead-para,
html[lang="ar"] .ec-text-right {
  text-align: right !important;
}

/* ── Banner orbit: move to visual-left (physical right) in RTL ──
   ec.css positions .ec-banner-fullwidth .ec-hero-orbit with left:30px
   which is the physical left edge. In RTL that reads as the visual
   right/end side. Swap to right:30px so it sits at the physical right
   edge, which is the visual start/left side for Arabic readers.        */
html[lang="ar"] .ec-banner-fullwidth .ec-hero-orbit {
  left: auto;
  right: 30px;
}

/* ── Ventures ornament: move to visual-left in RTL ──
   ec.css sets margin-left:auto on .ec-ventures-ornament, which in a
   flex row pushes the element to the physical right edge regardless of
   text direction. In RTL the ornament should sit on the physical left
   (screen-left), mirroring the LTR layout. Override the margin so
   the flex auto-margin fills from the right instead.                  */
html[lang="ar"] .h6-project .ec-ventures-ornament {
  margin-left: 0;
  margin-right: auto;
}

/* ── Breathing space for Arabic text in bordered badges and category tags ──
   main.css sets very tight padding on .sec-heading .sub-title (2px 10px)
   and .categories a (2px 7px 4px). Arabic text has taller ascenders and
   descenders that clip against the border at those sizes.                  */
html[lang="ar"] .sec-heading .sub-title {
  padding: 10px 16px;
}
html[lang="ar"] .categories a {
  padding: 8px 14px;
}

/* Prevent Arabic text clipping in text-btn links (e.g. "اقرأ المزيد") */
html[lang="ar"] .text-btn .btn-text {
  overflow: visible;
}
html[lang="ar"] .text-btn .btn-text span {
  line-height: 1.3;
}

/* ── Arabic accordion: match English text sizing and allow full width ──
   main.css caps .accordion-body at max-width:585px which causes Arabic
   text (wider glyphs) to wrap excessively. The fs-5 class (1.25rem)
   also renders visually larger in Arabic, so we reduce it slightly.     */
html[lang="ar"] .h7-faq-wrapper.style-2 .accordion-item .accordion-body {
  max-width: none;
}
html[lang="ar"] .tj-faq .accordion-item .accordion-body p.fs-5 {
  font-size: 1.1rem;
}