/* =====================================================
   NZ — English / LTR overrides
   لود شدن این فایل بعد از main.css در صفحات /en/*.html
   ===================================================== */

html[lang="en"], html[lang="en"] body {
  direction: ltr;
  font-family: 'Inter', 'Vazirmatn', system-ui, -apple-system, sans-serif;
  text-align: left;
}

html[lang="en"] *:not(.fa) {
  font-family: inherit;
}

/* Reverse a few RTL-specific flexbox/margin patterns */
html[lang="en"] .nav-menu li,
html[lang="en"] .footer-grid,
html[lang="en"] .grid-2 { direction: ltr; }

html[lang="en"] .nav-menu { margin-right: 0; margin-left: auto; }
html[lang="en"] .nav-actions { margin-right: auto; margin-left: 0; }

/* Breadcrumb arrow swap */
html[lang="en"] .breadcrumb-sep::before { content: "›"; }

/* Quote/note left border swap */
html[lang="en"] .lg-hook,
html[lang="en"] .box.purple,
html[lang="en"] .box.gold,
html[lang="en"] .box.green {
  border-right: 0;
  border-left-width: 4px;
  border-left-style: solid;
}
html[lang="en"] .box.purple { border-left-color: var(--primary); }
html[lang="en"] .box.gold { border-left-color: var(--accent); }
html[lang="en"] .box.green { border-left-color: var(--success); }

/* Language switcher — top-right button */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(94,62,184,0.08);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(94,62,184,0.18);
  transition: background 0.2s, transform 0.2s;
}
.lang-switch:hover { background: rgba(94,62,184,0.16); transform: translateY(-1px); }
.lang-switch svg { width: 14px; height: 14px; }

/* Diaspora-specific hero accents */
.diaspora-flag-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.diaspora-flag-row span {
  display: inline-flex; align-items: center; gap: 4px;
  background: white;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* Roots ribbon (Iran–world connector visual) */
.roots-ribbon {
  display: inline-block;
  background: linear-gradient(90deg, #4CAF50 0%, #fff 33%, #fff 66%, #D32F2F 100%);
  background-clip: padding-box;
  padding: 3px 4px;
  border-radius: 999px;
  font-size: 0.75rem;
}
.roots-ribbon span {
  display: inline-block;
  background: white;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
  color: var(--primary);
}

/* =====================================================
   Mobile responsiveness for the English pages.
   The /en/*.html pages use inline-styled multi-column grids
   (repeat(2..5,1fr), "1fr 1fr", "1.4fr 1fr") with no media
   query, so on phones the tracks expand past the viewport and
   cause horizontal scroll. Collapse every multi-column inline
   grid to a single column on narrow screens. !important is
   required to beat the element's inline style.
   ===================================================== */
@media (max-width: 700px) {
  html[lang="en"] [style*="grid-template-columns:repeat("],
  html[lang="en"] [style*="grid-template-columns: repeat("],
  html[lang="en"] [style*="grid-template-columns:1fr 1fr"],
  html[lang="en"] [style*="grid-template-columns: 1fr 1fr"],
  html[lang="en"] [style*="grid-template-columns:1.4fr 1fr"],
  html[lang="en"] [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* En header carries one item more than the Persian header on mobile
   (language switch + trial CTA + hamburger), which pushes the hamburger
   off the right edge. Drop the top-bar CTA on phones — it stays reachable
   in the hero and the menu — so the language switch and hamburger fit. */
@media (max-width: 640px) {
  html[lang="en"] header.header .nav-actions .btn-accent { display: none; }
}