/* ============================================================
   ArEgCon — RTL Design Tokens (Arabic)
   Logical properties for RTL layouts. Import AFTER tokens.css.
   ============================================================ */

[dir="rtl"] {
  /* ---- Direction-aware spacing (logical properties) ---- */
  --sp-inline-start: var(--sp-3);
  --sp-inline-end: var(--sp-3);

  /* ---- Radius logical (no change needed, symmetric) ---- */

  /* ---- Border logical ---- */
  --border-start: var(--border-hairline);
  --border-end: var(--border-hairline);

  /* ---- Icon flip for directional icons ---- */
  --icon-flip: scaleX(-1);
}

/* ============================================================
   RTL Layout Overrides
   Apply to [dir="rtl"] or html[lang="ar"]
   ============================================================ */

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

/* ---- Container ---- */
[dir="rtl"] .container {
  padding-inline-start: var(--sp-3);
  padding-inline-end: var(--sp-3);
}

/* ---- Header / Nav ---- */
[dir="rtl"] .nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav__links {
  flex-direction: row-reverse;
  gap: var(--sp-4);
}

[dir="rtl"] .nav__dropdown-wrap {
  order: 1;
}

[dir="rtl"] .nav__brand {
  order: 2;
}

[dir="rtl"] .nav__cta {
  order: 3;
  flex-direction: row-reverse;
}

[dir="rtl"] .nav__dropdown {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

[dir="rtl"] .nav__dropdown a {
  text-align: right;
  padding-inline-start: var(--sp-2);
  padding-inline-end: var(--sp-2);
}

[dir="rtl"] .nav__dropdown a small {
  text-align: right;
}

/* Mobile nav */
@media (max-width: 880px) {
  [dir="rtl"] .nav__links {
    flex-direction: column;
    align-items: stretch;
  }

  [dir="rtl"] .nav__links a {
    text-align: right;
    padding-inline-end: 0;
  }

  [dir="rtl"] .nav__dropdown {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    text-align: right;
  }

  [dir="rtl"] .nav__dropdown a {
    text-align: right;
  }
}

/* ---- Footer ---- */
[dir="rtl"] .footer__top {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer__brand-col {
  text-align: right;
}

[dir="rtl"] .footer__links {
  text-align: right;
}

[dir="rtl"] .footer__bottom {
  flex-direction: row-reverse;
  justify-content: space-between;
}

[dir="rtl"] .footer__social {
  flex-direction: row-reverse;
}

/* ---- Hero ---- */
[dir="rtl"] .hero__inner {
  text-align: right;
}

[dir="rtl"] .hero__actions {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .hero__meta {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .hero__meta-item {
  border-inline-start: 2px solid var(--bronze-500);
  border-inline-end: none;
  padding-inline-start: var(--sp-2);
  padding-inline-end: 0;
}

/* ---- Service Cards ---- */
[dir="rtl"] .service-card {
  text-align: right;
}

[dir="rtl"] .service-card__link {
  flex-direction: row-reverse;
}

[dir="rtl"] .service-card:hover .service-card__link svg {
  transform: translateX(-3px);
}

/* ---- Why Grid ---- */
[dir="rtl"] .why-item {
  text-align: right;
}

/* ---- Testimonials ---- */
[dir="rtl"] .testimonial-rail {
  direction: rtl;
}

[dir="rtl"] .testimonial-card {
  text-align: right;
}

[dir="rtl"] .testimonial-card__meta {
  flex-direction: column-reverse;
  align-items: flex-end;
}

/* ---- Social Preview ---- */
[dir="rtl"] .social-post {
  text-align: right;
}

[dir="rtl"] .social-post__body {
  text-align: right;
}

/* ---- Service Pages ---- */
[dir="rtl"] .service-hero__breadcrumb {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .service-detail-item {
  grid-template-columns: 1fr 60px;
  text-align: right;
}

[dir="rtl"] .service-detail-item__features li {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .service-detail-item__features li::before {
  margin-inline-start: 0.6em;
  margin-inline-end: 0;
}

/* ---- Process Rail ---- */
[dir="rtl"] .process-rail {
  direction: rtl;
}

[dir="rtl"] .process-step {
  text-align: right;
}

/* ---- Use Case Grid ---- */
[dir="rtl"] .use-case-card {
  text-align: right;
}

/* ---- Related Cards ---- */
[dir="rtl"] .related-card {
  text-align: right;
}

/* ---- About Page ---- */
[dir="rtl"] .mv-grid {
  direction: rtl;
}

[dir="rtl"] .mv-block {
  text-align: right;
}

[dir="rtl"] .values-grid {
  direction: rtl;
}

[dir="rtl"] .value-card {
  text-align: right;
}

[dir="rtl"] .leader-card {
  grid-template-columns: 1fr 84px;
  text-align: right;
}

[dir="rtl"] .leader-card__bio {
  text-align: right;
}

[dir="rtl"] .team-tier {
  grid-template-columns: 1fr 200px;
  text-align: right;
}

[dir="rtl"] .team-tier__roles {
  justify-content: flex-end;
}

[dir="rtl"] .commitment-item {
  grid-template-columns: 3fr 1fr;
  text-align: right;
}

/* ---- Contact Page ---- */
[dir="rtl"] .contact-layout {
  direction: rtl;
}

[dir="rtl"] .contact-info {
  text-align: right;
}

[dir="rtl"] .form-field label {
  text-align: right;
}

[dir="rtl"] .form-row {
  flex-direction: row-reverse;
}

/* ---- Buttons ---- */
[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

/* ---- Title Tab ---- */
[dir="rtl"] .title-tab {
  flex-direction: row-reverse;
}

/* ---- Eyebrow ---- */
[dir="rtl"] .eyebrow {
  flex-direction: row-reverse;
}

[dir="rtl"] .eyebrow::before {
  margin-inline-start: 0.5em;
  margin-inline-end: 0;
}

/* ---- Icon Flip ---- */
[dir="rtl"] .icon-flip,
[dir="rtl"] [class*="icon-"]:not(.service-card__icon):not(.footer__brand-mark):not(.nav__brand-mark):not(.use-case-card__icon):not(.service-hero__tabs .title-tab) {
  transform: var(--icon-flip);
  display: inline-block;
}

/* Arrow icons specifically */
[dir="rtl"] img[src*="arrow-right"],
[dir="rtl"] .service-card__link img,
[dir="rtl"] .related-card .title-tab img {
  transform: scaleX(-1);
}

/* ---- Form ---- */
[dir="rtl"] input,
[dir="rtl"] textarea {
  text-align: right;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="text"] {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] textarea {
  direction: rtl;
}

/* ---- Calendar ---- */
[dir="rtl"] #calendarGrid {
  direction: rtl;
}

[dir="rtl"] .calendar-mini__day {
  text-align: center;
}

/* ---- Tables (if any) ---- */
[dir="rtl"] table {
  direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}

/* ---- Skip Link ---- */
[dir="rtl"] .skip-link {
  left: auto;
  right: -999px;
}

[dir="rtl"] .skip-link:focus {
  left: auto;
  right: var(--sp-2);
}

/* ---- Focus Visible ---- */
[dir="rtl"] :focus-visible {
  outline-offset: 3px;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] *,
  [dir="rtl"] *::before,
  [dir="rtl"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}