/* ══════════════════════════════════════════════════════════════
   RTL Support — TOPPIX PRODUCTION (Arabic)
   ══════════════════════════════════════════════════════════════ */

/* ── Base direction ────────────────────────────────────────── */
html[dir="rtl"],
body.rtl {
    direction: rtl;
    unicode-bidi: embed;
    font-family: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif;
}

/* ── Typography ─────────────────────────────────────────────── */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl p,
body.rtl li,
body.rtl span,
body.rtl a {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif;
    letter-spacing: 0 !important; /* Arabic doesn't use letter spacing */
}

/* ── Navigation ─────────────────────────────────────────────── */

/* Main nav container: logo ←→ desktop-menu swap */
body.rtl #main-nav > div {
    flex-direction: row-reverse;
}

/* Desktop nav group: reverse items so CTA | lang | menu reads R→L */
body.rtl #main-nav .hidden.lg\\:flex {
    flex-direction: row-reverse;
}

/* Nav links list */
body.rtl #main-nav ul {
    flex-direction: row-reverse;
}

/* Hover underline: anchor to right in RTL */
body.rtl #main-nav a span.absolute {
    left: auto;
    right: 0;
}

/* Language selector: keep pill order readable */
body.rtl #main-nav .flex.bg-white\\/10 {
    flex-direction: row-reverse;
}

/* Mobile menu: reverse hamburger side */
body.rtl #main-nav > div > button {
    order: -1;
}

/* Mobile menu list */
body.rtl #mobile-menu ul {
    direction: rtl;
}
body.rtl #mobile-menu a {
    flex-direction: row-reverse;
}

/* Chevron icons */
body.rtl [data-lucide="chevron-right"],
body.rtl [data-lucide="arrow-right"] {
    transform: rotate(180deg);
}
body.rtl [data-lucide="chevron-left"],
body.rtl [data-lucide="arrow-left"] {
    transform: rotate(180deg);
}

/* ── Single Project — Hero ───────────────────────────────────── */
body.rtl .absolute.bottom-0.left-0 {
    left: auto;
    right: 0;
    text-align: right;
}

/* ── Single Project — Section headings ──────────────────────── */
body.rtl h2.flex.items-center.gap-3 {
    flex-direction: row-reverse;
}
body.rtl h2.flex.items-center.gap-3 span.inline-block {
    /* The blue accent line: move to right side */
    order: 1;
}
body.rtl h3.text-sm.font-bold.uppercase {
    text-align: right;
}

/* ── Single Project — Description prose ─────────────────────── */
body.rtl .prose {
    text-align: right;
    direction: rtl;
}
body.rtl .prose p,
body.rtl .prose li {
    text-align: right;
}

/* ── Single Project — Sidebar info cards ────────────────────── */
body.rtl .space-y-8 p.flex.items-center {
    flex-direction: row-reverse;
    text-align: right;
}
body.rtl .flex-wrap.gap-2 {
    justify-content: flex-end;
}

/* ── Single Project — Video tabs ─────────────────────────────── */
body.rtl .flex.gap-2.flex-wrap {
    justify-content: flex-end;
}

/* ── Single Project — Post navigation ───────────────────────── */
body.rtl .flex.justify-between.items-center .text-left {
    text-align: right;
}
body.rtl .flex.justify-between.items-center .text-right {
    text-align: left;
}
/* Swap prev/next icon directions */
body.rtl [data-lucide="chevron-left"].group-hover\:-translate-x-1 {
    transform: rotate(180deg);
}
body.rtl [data-lucide="chevron-right"].group-hover\:translate-x-1 {
    transform: rotate(180deg);
}

/* ── Swiper RTL ──────────────────────────────────────────────── */
body.rtl .swiper {
    direction: rtl;
}

/* ── CTA Block ───────────────────────────────────────────────── */
body.rtl .bg-\[\#0a192f\].p-8 h3,
body.rtl .bg-\[\#0a192f\].p-8 p {
    text-align: right;
}

/* ── Footer ──────────────────────────────────────────────────── */
body.rtl footer .grid {
    direction: rtl;
}
body.rtl footer .border-l-2 {
    border-left-width: 0;
    border-right-width: 2px;
    padding-left: 0;
    padding-right: 1rem;
}
body.rtl footer .text-left {
    text-align: right;
}

/* ── Utility overrides ───────────────────────────────────────── */
body.rtl .text-left  { text-align: right; }
body.rtl .ml-auto    { margin-left: 0;  margin-right: auto; }
body.rtl .mr-auto    { margin-right: 0; margin-left: auto;  }
body.rtl .pl-6       { padding-left: 0;  padding-right: 1.5rem; }
body.rtl .pr-6       { padding-right: 0; padding-left: 1.5rem;  }
body.rtl .border-l   { border-left: none; border-right: 1px solid; }
body.rtl .rounded-l  { border-radius: 0 0.25rem 0.25rem 0; }
body.rtl .rounded-r  { border-radius: 0.25rem 0 0 0.25rem; }