/* ==========================================================================
   ORBIT — Language Switcher & RTL Fixes
   ========================================================================== */

#lang-switcher { position: relative; }

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-family: var(--font-data);
}
.lang-trigger:hover { color: var(--cosmic-gold); border-color: var(--cosmic-gold); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--space-navy);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.lang-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.lang-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.lang-option:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.lang-option.is-active { color: var(--cosmic-gold); }

/* ==========================================================================
   RTL Layout Fixes
   Strategy: logical CSS properties (margin-inline-*, padding-inline-*,
   text-align via browser default) handle most mirroring automatically.
   The rules below cover the remaining cases that logical properties can't:
   literal directional glyphs, absolutely-positioned decorations, and a
   few flex layouts that are intentionally directional (not text-flow).
   ========================================================================== */

/* Directional arrow glyphs (→) — wrapped in .dir-arrow in the HTML so they
   visually mirror to point toward "forward" in RTL reading order too. */
[dir="rtl"] .dir-arrow { display: inline-block; transform: scaleX(-1); }

/* Navbar */
[dir="rtl"] .navbar-links { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .nav-links a::after,
[dir="rtl"] .navbar-links a::after { left: auto; right: 0; }

/* Missions timeline */
[dir="rtl"] .v-timeline { padding-inline-start: 0; padding-inline-end: var(--space-8); }
[dir="rtl"] .v-timeline::before { left: auto; right: 5px; }
[dir="rtl"] .v-timeline-item::before { left: auto; right: calc(-1 * var(--space-8) + 1px); }

/* Cards: hover-reveal "read more" slides from the correct side */
[dir="rtl"] .card-read { transform: translateX(6px); }
[dir="rtl"] .card:hover .card-read { transform: translateX(0); }

/* Hero */
[dir="rtl"] .scroll-indicator { transform: translateX(50%); }
[dir="rtl"] .hero-stats { direction: ltr; text-align: right; } /* telemetry values stay LTR (altitudes, countdowns) */

/* Forms: inputs/selects should follow reading direction, not force LTR */
[dir="rtl"] .newsletter-form { flex-direction: row-reverse; }
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field textarea,
[dir="rtl"] .filter-bar input,
[dir="rtl"] .filter-bar select { text-align: right; }
[dir="rtl"] .form-field label { right: 0; left: auto; }

/* Badges, meta rows, and status rows: gap-based flex already mirrors
   correctly, but a few use explicit justify-content that needs no change
   since "space-between" is direction-agnostic. Icon-first labels flip: */
[dir="rtl"] .card-meta,
[dir="rtl"] .launch-row,
[dir="rtl"] .integration-row,
[dir="rtl"] .run-row,
[dir="rtl"] .sidebar-link-row { direction: rtl; }

/* Sky map time slider: keep the -12h/+12h labels in reading order */
[dir="rtl"] .sky-controls { flex-direction: row-reverse; }

/* Data tables: numeric columns stay LTR for readability, labels flip */
[dir="rtl"] .data-table,
[dir="rtl"] .compare-table { direction: rtl; }
[dir="rtl"] .data-table td.font-mono,
[dir="rtl"] .font-mono { direction: ltr; unicode-bidi: embed; }

/* 404 glitch numerals stay LTR regardless of language */
[dir="rtl"] .glitch { direction: ltr; }