/* ═══════════════════════════════════════════════════════════════════════════
   RTL Layout Overrides — Arabic (ar) and Hebrew (he)
   Loaded only on RTL locale pages via the build script.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Navigation: move from right to left ─────────────────────────────────── */
[dir="rtl"] .site-nav {
  right: auto;
  left: var(--space-6);
}

[dir="rtl"] .nav-label {
  right: auto;
  left: 24px;
  transform: translateX(-8px);
  text-align: right;
}

[dir="rtl"] .nav-dot:hover .nav-label,
[dir="rtl"] .nav-dot:focus .nav-label {
  transform: translateX(0);
}

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

[dir="rtl"] .hero-cta-group {
  justify-content: flex-end;
}

/* ── Scroll hint arrow: flip ─────────────────────────────────────────────── */
[dir="rtl"] .scroll-hint {
  direction: rtl;
}

/* ── Horizontal slides: keep LTR so GSAP scroll/entry logic works ────────── */
[dir="rtl"] .horizontal-section,
[dir="rtl"] .scroll-track {
  direction: ltr;
}

/* ── Bento cards: text alignment ─────────────────────────────────────────── */
[dir="rtl"] .bento-card {
  text-align: right;
}

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

/* ── Local card header ───────────────────────────────────────────────────── */
[dir="rtl"] .card-local-header {
  flex-direction: row-reverse;
}

/* ── Collaboration indicators ────────────────────────────────────────────── */
[dir="rtl"] .collab-indicators {
  flex-direction: row-reverse;
}

/* ── Comment thread: flip layout ─────────────────────────────────────────── */
[dir="rtl"] .mock-comment {
  flex-direction: row-reverse;
}

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

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

/* ── Notification entries ────────────────────────────────────────────────── */
[dir="rtl"] .notif-entry {
  flex-direction: row-reverse;
}

[dir="rtl"] .notif-entry-body {
  text-align: right;
}

/* ── Avatar stack: reverse overlap direction ─────────────────────────────── */
[dir="rtl"] .avatar-stack {
  flex-direction: row-reverse;
}

/* ── Mock card face ──────────────────────────────────────────────────────── */
[dir="rtl"] .mock-card-title-bar {
  flex-direction: row-reverse;
}

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

/* ── Privacy content: flip list padding ──────────────────────────────────── */
[dir="rtl"] .privacy-content ul,
[dir="rtl"] .privacy-content ol {
  padding-left: 0;
  padding-right: var(--space-6);
}

/* ── Privacy toggle: flip chevron ────────────────────────────────────────── */
[dir="rtl"] .privacy-toggle {
  flex-direction: row-reverse;
}

/* ── Support section ─────────────────────────────────────────────────────── */
[dir="rtl"] .support-header {
  text-align: right;
}

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

/* ── CTA section ─────────────────────────────────────────────────────────── */
[dir="rtl"] .cta-section {
  text-align: right;
}

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

/* ── Footer ──────────────────────────────────────────────────────────────── */
[dir="rtl"] .site-footer {
  text-align: right;
}

/* ── Keycaps: preserve LTR for keyboard shortcuts ────────────────────────── */
[dir="rtl"] .keycaps,
[dir="rtl"] .search-keycap {
  direction: ltr;
}

/* ── Palette dots ────────────────────────────────────────────────────────── */
[dir="rtl"] .palette-dots {
  direction: rtl;
}

/* ── Reaction pills ──────────────────────────────────────────────────────── */
[dir="rtl"] .reaction-pills {
  justify-content: flex-end;
}

/* ── Language switcher ───────────────────────────────────────────────────── */
[dir="rtl"] .lang-switcher {
  text-align: right;
}

/* ── Changelog page: timeline RTL ────────────────────────────────────────── */
[dir="rtl"] .changelog-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .changelog-timeline {
  direction: rtl;
}

[dir="rtl"] .changelog-line {
  left: auto;
  right: 19px;
}

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

[dir="rtl"] .changelog-node {
  margin-left: 0;
  margin-right: 13px;
}

[dir="rtl"] .changelog-card {
  margin-left: 0;
  margin-right: 0;
  text-align: right;
}

[dir="rtl"] .changelog-title,
[dir="rtl"] .changelog-subtitle,
[dir="rtl"] .changelog-future-heading {
  text-align: right;
}

@media (max-width: 768px) {
  [dir="rtl"] .changelog-line {
    right: 15px;
  }
  [dir="rtl"] .changelog-node {
    margin-right: 10px;
  }
}