/* RTL layout overrides */

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

@media (max-width: 767px) {
  [dir="rtl"] .contact-section::before {
    background-position: right top;
    transform: none;
  }
}

/* Directional positioning */
[dir="rtl"] .left-0 {
  left: auto;
  right: 0;
}

[dir="rtl"] .right-0 {
  right: auto;
  left: 0;
}

[dir="rtl"] .-right-\[10\%\] {
  right: auto;
  left: -10%;
}

[dir="rtl"] .-right-10 {
  right: auto;
  left: -2.5rem;
}

[dir="rtl"] .bottom-8.right-8 {
  right: auto;
  left: 2rem;
}

/* Margins & padding */
[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .-ml-\[10\%\] {
  margin-left: 0;
  margin-right: -10%;
}

[dir="rtl"] .md\:pl-gutter {
  padding-left: 0;
  padding-right: 24px;
}

[dir="rtl"] .md\:border-l {
  border-left-width: 0;
  border-right-width: 1px;
}

/* Text alignment */
[dir="rtl"] .text-left {
  text-align: right;
}

/* Grid column start */
[dir="rtl"] .md\:col-start-8 {
  grid-column-start: 1;
}

[dir="rtl"] .md\:col-start-3 {
  grid-column-start: auto;
}

/* Flex / inline spacing — flip arrow icons, not menu */
[dir="rtl"] a .material-symbols-outlined,
[dir="rtl"] button .material-symbols-outlined {
  transform: scaleX(-1);
}

[dir="rtl"] #mobile-menu-btn .material-symbols-outlined {
  transform: none;
}

[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* Forms stay readable */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

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

/* Ablaq story RTL */
[dir="rtl"] .ablaq-story__text--start {
  left: auto;
  right: 0;
  padding-right: 0;
  padding-left: 3rem;
}

[dir="rtl"] .ablaq-story__text--end {
  right: auto;
  left: 0;
  padding-left: 0;
  padding-right: 3rem;
}

[dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-col {
  right: auto;
  left: 0;
}

[dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-col {
  left: auto;
  right: 0;
}

[dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--primary {
  right: auto;
  left: 0;
}

[dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--primary {
  left: auto;
  right: 0;
}

[dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--secondary {
  left: auto;
  right: 0;
}

[dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--secondary {
  right: auto;
  left: 0;
}

[dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--detail {
  left: auto;
  right: 25%;
  transform: translate(50%, -50%);
}

[dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--detail {
  right: auto;
  left: 25%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  [dir="rtl"] .ablaq-story__text--start {
    left: 0;
    right: 0;
    padding: 0;
  }

  [dir="rtl"] .ablaq-story__text--end {
    left: 0;
    right: 0;
    padding: 0;
  }

  [dir="rtl"] .ablaq-story:not(.ablaq-story--static) .ablaq-story__img--primary {
    right: auto;
    left: 0;
  }

  [dir="rtl"] .ablaq-story:not(.ablaq-story--static) .ablaq-story__img--secondary {
    left: auto;
    right: 0;
  }

  [dir="rtl"] .ablaq-story:not(.ablaq-story--static) .ablaq-story__img--detail {
    left: auto;
    right: 20%;
    transform: translate(50%, -50%);
  }

  [dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--primary,
  [dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--primary {
    right: auto;
    left: 0;
  }

  [dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--secondary,
  [dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--secondary {
    left: auto;
    right: 0;
  }

  [dir="rtl"] .ablaq-story__measure--start .ablaq-story__measure-slot--detail,
  [dir="rtl"] .ablaq-story__measure--end .ablaq-story__measure-slot--detail {
    left: auto;
    right: 20%;
    transform: translate(50%, -50%);
  }

  [dir="rtl"] .ablaq-story--static .ablaq-story__img--primary {
    right: auto;
    left: 0;
  }

  [dir="rtl"] .ablaq-story--static .ablaq-story__img--secondary {
    left: auto;
    right: 0;
  }

  [dir="rtl"] .ablaq-story--static .ablaq-story__img--detail {
    left: auto;
    right: 20%;
    transform: translate(50%, -50%);
  }
}