/* ===================================================================
   Noura Lawyers — i18n stylesheet
   - Language switcher (used by EN, AR, RU pages)
   - RTL overrides for Arabic
   - Russian-friendly font fallback
   =================================================================== */

/* Language switcher in the header — sits before "Speak to us" CTA */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary, #C8C4B8);
  border: 1px solid rgba(201,169,97,.25);
  border-radius: 999px;
  padding: 4px 6px;
  background: rgba(15,27,45,.55);
  backdrop-filter: blur(6px);
}
.lang-switcher a {
  color: inherit;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.lang-switcher a:hover { color: var(--gold, #C9A961); background: rgba(201,169,97,.12); }
.lang-switcher a.is-active {
  background: var(--gold, #C9A961);
  color: var(--navy, #0F1B2D);
}
.lang-switcher .sep {
  width: 1px;
  height: 12px;
  background: rgba(166,124,69,.28);
  margin: 0 2px;
}

/* Footer-level language strip for non-JS users */
.lang-footer {
  text-align: center;
  padding: 18px 0 6px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: .78rem;
  color: rgba(238,229,217,0.74);
}
.lang-footer a {
  color: var(--gold-soft, #D9B07A);
  text-decoration: none;
  margin: 0 6px;
}
.lang-footer a.is-active { color: var(--gold, #C9A961); font-weight: 700; }

/* ===================================================================
   RTL — Arabic
   =================================================================== */
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}
html[dir="rtl"] .h-display,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: 'Tajawal', 'Cairo', 'IBM Plex Sans Arabic', serif;
  letter-spacing: 0;
}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .h-eyebrow,
html[dir="rtl"] .article-tag,
html[dir="rtl"] .triage-badge,
html[dir="rtl"] .lang-switcher {
  letter-spacing: .04em;
}

/* Brand wordmark — Arabic needs a different font + zero letter-spacing.
   The Latin defaults (Cinzel / .16em-.42em tracking) shred Arabic
   ligatures so نورة المازمي rendered as ذورة or disconnected glyphs.
   Tajawal connects properly and keeps the gold-deep colour from the
   base .brand-name rule. The divider stripe also has to flip from the
   left to the right edge in RTL. */
html[dir="rtl"] .brand-name,
html[dir="rtl"] .brand-sub {
  font-family: 'Tajawal', 'Cairo', 'Noto Sans Arabic', sans-serif;
  letter-spacing: 0;
  font-weight: 800;
}
html[dir="rtl"] .brand-name { font-size: 1.4rem; }
html[dir="rtl"] .brand-sub  { font-size: .98rem; font-weight: 500; padding-left: 0; padding-right: 12px; }
html[dir="rtl"] .brand-sub::before { left: auto; right: 0; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .footer-grid { direction: rtl; }
html[dir="rtl"] .float-cta { left: 24px; right: auto; }
html[dir="rtl"] .hero-cta::after,
html[dir="rtl"] .card-link::after { content: " ←"; }
html[dir="rtl"] .hero-magazine .hero-accent-line { left: auto; right: 0; }

/* Numerals stay LTR inside RTL contexts (phone numbers, dates) */
html[dir="rtl"] .ltr-num,
html[dir="rtl"] time,
html[dir="rtl"] [data-ltr],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ===================================================================
   Russian — slightly looser tracking on display headings
   =================================================================== */
html[lang="ru"] body {
  font-family: 'Inter', 'PT Sans', 'Segoe UI', system-ui, sans-serif;
}
/* Cormorant Garamond has no Cyrillic glyphs — fall back to PT Serif
   (similar transitional serif, full Cyrillic support) for Russian headings. */
html[lang="ru"] .h-display,
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4 {
  font-family: 'PT Serif', 'Lora', 'Cormorant Garamond', Georgia, serif;
}
html[lang="ru"] .h-display { letter-spacing: -.012em; }