/* ============================================================
   Vector 4 — language toggle, RTL & Hebrew typography
   ------------------------------------------------------------
   The Heebo (Hebrew) font is loaded lazily by js/i18n.js only
   when Hebrew is selected — it is not requested for EN visitors.
   ============================================================ */

/* ── Header layout: keep logo left, group links + toggle right ── */
.nav-logo { margin-inline-end: auto; }
.nav-inner { gap: clamp(12px, 2vw, 28px); }

/* ── Language toggle — text "EN|HE" ──────────────────────── */
.lang-toggle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lang-btn {
  padding: 2px 6px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--text);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
/* the "|" divider between EN and HE */
.lang-btn + .lang-btn { border-left: 2px solid rgba(255, 255, 255, 0.45); }
.lang-btn:hover { opacity: 0.85; }
.lang-btn.is-active { opacity: 1; color: var(--accent); }
.lang-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ════════════════════════════════════════════════════════════
   HEBREW / RTL
   ════════════════════════════════════════════════════════════ */
html[lang="he"] body,
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3, html[lang="he"] h4,
html[lang="he"] p, html[lang="he"] a, html[lang="he"] span,
html[lang="he"] li, html[lang="he"] label, html[lang="he"] address,
html[lang="he"] input, html[lang="he"] textarea, html[lang="he"] button,
html[lang="he"] .hero-headline, html[lang="he"] .page-title,
html[lang="he"] .service-card__name, html[lang="he"] .nav-link {
  font-family: 'Heebo', 'Hanken Grotesk', sans-serif;
}

/* Underline indicator flips to the right edge */
html[dir="rtl"] .nav-link::after { left: auto; right: 0; }

/* Directional arrows point the other way */
html[dir="rtl"] .service-card__arrow { display: inline-block; transform: scaleX(-1); }

/* Stats / numbers and brand wordmarks stay LTR even inside RTL text */
html[dir="rtl"] .stat__num,
html[dir="rtl"] .footer-copy,
html[dir="rtl"] .footer-social__handle,
html[dir="rtl"] .video-card__client,
html[dir="rtl"] .video-card__name,
html[dir="rtl"] .project-group__client {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Client logo marquee must stay LTR: in RTL the strip's visible window
   sits at the content's right edge, so the translateX(0 → -50%) loop
   immediately slides every logo out of view (blank strip on HE). */
html[dir="rtl"] .client-strip,
html[dir="rtl"] .client-marquee {
  direction: ltr;
}

/* The latin email / phone links read left-to-right inside RTL blocks */
html[dir="rtl"] .footer-address a,
html[dir="rtl"] .contact-item__value a { unicode-bidi: isolate; }

/* Keep the language toggle visually LTR (EN then HE) in both modes */
.lang-toggle { direction: ltr; }