/*
 * RTL (Right-to-Left) overrides for Arabic pages
 * Loaded conditionally when pll_current_language() === 'ar'
 */

/* ─── Base Direction & Font ─── */
body.is-rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Amiri', serif;
}

/* Keep headings in Cormorant Garamond (Latin-friendly) */
body.is-rtl .font-display,
body.is-rtl h1,
body.is-rtl h2,
body.is-rtl h3,
body.is-rtl h4 {
  font-family: 'Cormorant Garamond', serif;
}

/* ─── Flex Layout Mirroring ─── */
body.is-rtl .flex {
  flex-direction: row-reverse;
}

/* Preserve column layouts */
body.is-rtl .flex-col,
body.is-rtl .sm\:flex-col,
body.is-rtl .flex.flex-col {
  flex-direction: column;
}

body.is-rtl .sm\:flex-row {
  flex-direction: row-reverse;
}

/* Grid does not need flipping — CSS grid respects dir=rtl automatically */

/* ─── Navigation ─── */
body.is-rtl #main-nav .flex.items-center.justify-between {
  flex-direction: row-reverse;
}

body.is-rtl #main-nav .hidden.lg\:flex.items-center.gap-8 {
  flex-direction: row-reverse;
}

body.is-rtl #main-nav .hidden.lg\:flex.items-center.gap-4 {
  flex-direction: row-reverse;
}

/* Mobile menu stays stacked */
body.is-rtl #mobile-menu .space-y-4 {
  text-align: right;
}

body.is-rtl #mobile-menu a {
  text-align: right;
}

/* ─── Text Alignment ─── */
body.is-rtl .text-left {
  text-align: right;
}

body.is-rtl .text-center {
  text-align: center; /* keep centered elements centered */
}

/* ─── Margins & Paddings — use logical properties ─── */
body.is-rtl .ml-2 {
  margin-left: 0;
  margin-inline-start: 0.5rem;
}

body.is-rtl .ml-14 {
  margin-left: 0;
  margin-inline-start: 3.5rem;
}

body.is-rtl .mr-auto {
  margin-right: unset;
  margin-inline-start: auto;
}

body.is-rtl .ml-auto {
  margin-left: unset;
  margin-inline-end: auto;
}

body.is-rtl .pl-8 {
  padding-left: 0;
  padding-inline-start: 2rem;
}

body.is-rtl .pr-8 {
  padding-right: 0;
  padding-inline-end: 2rem;
}

body.is-rtl .pr-0 {
  padding-right: unset;
  padding-inline-end: 0;
}

body.is-rtl .pl-0 {
  padding-left: unset;
  padding-inline-start: 0;
}

/* ─── Timeline (Uber uns page) ─── */

/* Mirror the vertical line to the right side on desktop */
body.is-rtl #timeline .absolute.left-6 {
  left: auto;
  right: 1.5rem;
}

@media (min-width: 1024px) {
  body.is-rtl #timeline .absolute.lg\:left-1\/2 {
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }
}

/* Timeline dots */
body.is-rtl #timeline .absolute.left-6.w-3 {
  left: auto;
  right: 1.5rem;
  transform: translateX(50%);
}

@media (min-width: 1024px) {
  body.is-rtl #timeline .absolute.lg\:left-1\/2.w-3 {
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }
}

/* Timeline content cards: flip alternating sides */
body.is-rtl #timeline .lg\:ml-auto {
  margin-left: unset;
  margin-inline-end: auto;
}

body.is-rtl #timeline .lg\:mr-auto {
  margin-right: unset;
  margin-inline-start: auto;
}

body.is-rtl #timeline .lg\:flex-row-reverse {
  flex-direction: row;
}

/* ─── Directional Decorative Elements ─── */

/* Flip the corner border accent (hero portrait) */
body.is-rtl .border-r {
  border-right: none;
  border-left: 1px solid;
  border-left-color: inherit;
}

body.is-rtl .border-b.border-r {
  border-right: none;
  border-left: 1px solid rgba(180, 130, 55, 0.3);
}

/* Left decorative line → flip to right */
body.is-rtl .absolute.left-8 {
  left: auto;
  right: 2rem;
}

@media (min-width: 1024px) {
  body.is-rtl .absolute.lg\:left-16 {
    left: auto;
    right: 4rem;
  }
}

/* ─── Arrows & Icons ─── */

/* Flip horizontal arrows (e.g. chevrons, CTA arrows) */
body.is-rtl .group-hover\:translate-x-1 {
  --tw-translate-x: -0.25rem;
}

body.is-rtl svg[class*="rotate-180"],
body.is-rtl .rotate-180 {
  transform: rotate(0deg);
}

/* Down-arrow in hero CTA stays as-is (vertical) */

/* ─── Spacing between inline items ─── */
body.is-rtl .gap-2,
body.is-rtl .gap-3,
body.is-rtl .gap-4,
body.is-rtl .gap-8 {
  /* gap works direction-agnostic with flexbox, no override needed */
}

/* ─── Breadcrumbs ─── */
body.is-rtl .breadcrumb-separator {
  transform: scaleX(-1);
}

/* ─── Form elements ─── */
body.is-rtl input,
body.is-rtl textarea,
body.is-rtl select {
  text-align: right;
}

/* ─── Blockquote ─── */
body.is-rtl blockquote {
  border-left: none;
  border-right: 3px solid;
  border-right-color: inherit;
}

/* ─── Language switcher in nav — keep LTR order for language codes ─── */
body.is-rtl .flex.gap-2.text-\[11px\] {
  direction: ltr;
}

/* ─── Mobile sticky bar ─── */
body.is-rtl .fixed.bottom-0 {
  direction: rtl;
}

/* ─── Tracking (letter-spacing) adjustment for Arabic ─── */
body.is-rtl .tracking-widest,
body.is-rtl .tracking-wider,
body.is-rtl .tracking-\[0\.5em\],
body.is-rtl .tracking-\[0\.35em\],
body.is-rtl .tracking-\[0\.3em\] {
  letter-spacing: 0.05em; /* reduce exaggerated tracking for Arabic script */
}