/**
 * RTL layer — loaded only when the active locale is right-to-left.
 *
 * The Realiz template is built LTR throughout: a fixed 140px sidebar on the
 * left, content offset by `left-[140px]`, and a menu panel that slides in from
 * the left. Tailwind's compiled utilities hardcode physical `left`/`right`, so
 * there is no logical-property switch to flip — the structural pieces have to be
 * mirrored explicitly. This does that.
 *
 * Scope: layout mirroring, text direction, and the menu panel. Decorative
 * details (diagonal clip paths, the WebGL slider's internal geometry, per-page
 * absolute positioning) are intentionally left alone — mirroring them
 * automatically breaks more than it fixes. Expect to hand-tune specific pages.
 */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

[dir='rtl'] aside.fixed {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid rgb(229 231 235);
    /* The shipped shadow points right, away from the content, once mirrored. */
    box-shadow: -10px 0 30px rgba(var(--rlz-bg-rgb, 13 38 32) / 0.01);
}

[dir='rtl'] .rlz-brand-logo-box {
    border-right: 0;
    border-left: 1px solid rgb(229 231 235);
}

/* ── Content wrappers ────────────────────────────────────────────────────── */

/* Every template offsets its content past the sidebar with md:left-[140px]. */
@media (min-width: 768px) {
    [dir='rtl'] .md\:left-\[140px\] {
        left: 0;
        right: 140px;
    }

    [dir='rtl'] .md\:pl-\[140px\] {
        padding-left: 0;
        padding-right: 140px;
    }

    [dir='rtl'] .md\:ml-\[140px\] {
        margin-left: 0;
        margin-right: 140px;
    }
}

/* ── Menu panel ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    [dir='rtl'] #menu-panel {
        left: auto;
        right: 140px;
        border-right: 0;
        border-left: 1px solid rgb(255 255 255 / 0.05);
    }
}

/*
 * main.js sets `transform: translateX(-100%)` inline to hide the panel, which in
 * RTL would slide it the wrong way — off the side it is already anchored to.
 * The inline style can only be beaten with !important, and the open/closed state
 * is read from the toggle button, because the per-page copies of toggleMenu()
 * mark the button but not the panel.
 */
[dir='rtl'] #menu-panel {
    transform: translateX(100%) !important;
}

[dir='rtl'] body:has(.menu-toggle.menu-open) #menu-panel,
[dir='rtl'] #menu-panel.menu-open {
    transform: translateX(0) !important;
}

/* The accordion list is right-aligned in LTR, which reads as left in RTL. */
[dir='rtl'] #menu-panel ul ul {
    align-items: flex-start;
    padding-right: 0;
    padding-left: 2rem;
}

[dir='rtl'] #menu-panel .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

/* ── Mobile header ───────────────────────────────────────────────────────── */

[dir='rtl'] header.fixed .mr-3 {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

[dir='rtl'] .text-left {
    text-align: right;
}

[dir='rtl'] .text-right {
    text-align: left;
}

/* Arabic has no letterform case and no small-caps tradition; the template's
   heavy uppercase tracking makes it unreadable. */
[dir='rtl'] .uppercase {
    text-transform: none;
    letter-spacing: normal;
}

[dir='rtl'] [class*='tracking-['] {
    letter-spacing: normal;
}

/*
 * Let each block pick its own direction from its first strong character.
 *
 * Until every string is translated, Arabic pages still render English fallback
 * copy, and inside dir="rtl" the bidi algorithm throws its trailing punctuation
 * to the wrong end — "Gallery." shows as ".Gallery". `plaintext` makes an
 * English paragraph behave as LTR and an Arabic one as RTL, per block, so mixed
 * content stays correct without tagging every element by hand.
 */
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] p,
[dir='rtl'] li,
[dir='rtl'] blockquote,
[dir='rtl'] figcaption,
[dir='rtl'] .tft-card__title,
[dir='rtl'] .tft-card__meta {
    unicode-bidi: plaintext;
}

/* Arabic script needs more vertical room than the display faces allow. */
[dir='rtl'] .leading-none,
[dir='rtl'] .leading-\[0\.8\],
[dir='rtl'] .leading-\[0\.85\],
[dir='rtl'] .leading-\[0\.9\],
[dir='rtl'] .leading-\[0\.95\] {
    line-height: 1.15;
}

/* ── Directional decoration ──────────────────────────────────────────────── */

[dir='rtl'] .border-l {
    border-left: 0;
    border-right: 1px solid currentColor;
}

[dir='rtl'] .border-r {
    border-right: 0;
    border-left: 1px solid currentColor;
}

/* Arrow glyphs point the wrong way once the reading direction flips. */
[dir='rtl'] [data-lucide='arrow-right'],
[dir='rtl'] [data-lucide='arrow-left'],
[dir='rtl'] [data-lucide='chevron-right'],
[dir='rtl'] [data-lucide='chevron-left'],
[dir='rtl'] [data-lucide='arrow-up-right'] {
    transform: scaleX(-1);
}

/* The vertical sidebar text reads bottom-to-top in both directions. */
[dir='rtl'] .text-vertical {
    direction: ltr;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

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

[dir='rtl'] .tft-footer-newsletter-input {
    text-align: right;
}