/* ============================================
   i18n.css — RTL, language fonts, visual accents
   ============================================ */

/* === RTL (Arabic) === */
html[dir="rtl"] {
  direction: rtl;
}

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

html[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

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

html[dir="rtl"] .section-label {
  flex-direction: row-reverse;
}

html[dir="rtl"] .section-label::after {
  order: -1;
}

html[dir="rtl"] .intro-grid {
  direction: rtl;
}

html[dir="rtl"] .tools-grid {
  direction: rtl;
}

html[dir="rtl"] .tool-card {
  border-left: none;
  border-right: 3px solid var(--border);
}

html[dir="rtl"] .hub-grid {
  direction: rtl;
}

html[dir="rtl"] .hub-card .card-top {
  flex-direction: row-reverse;
}

/* RTL mobile menu — slides from right (same side, but mirror border + active indicators) */
html[dir="rtl"] .pnav-menu {
  right: 0;
  left: auto;
  border-left: none;
  border-right: 1px solid var(--border, #2a2a3a);
  transform: translateX(100%);
}

html[dir="rtl"] .pnav-menu.open {
  transform: translateX(0);
}

html[dir="rtl"] .pnav-menu-links a {
  border-left: none;
  border-right: 3px solid transparent;
}

html[dir="rtl"] .pnav-menu-links a.active {
  border-right-color: #6366f1;
  border-left-color: transparent;
}

html[dir="rtl"] .pnav-menu-header {
  flex-direction: row-reverse;
}

html[dir="rtl"] .footer-nav {
  direction: rtl;
}

/* === Arabic font — Amiri for headings === */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: 'Amiri', serif;
  letter-spacing: 0;
}

html[lang="ar"] .hero h1 {
  font-family: 'Amiri', serif;
  letter-spacing: 0;
  font-size: 2.6rem;
}

/* Arabic accent — gold on hovers and decorative elements */
html[lang="ar"] .tool-card:hover .tool-name,
html[lang="ar"] .hub-card:hover .card-go {
  color: #c9a84c !important;
}

html[lang="ar"] .section-label {
  color: #c9a84c;
}

html[lang="ar"] .section-label::after {
  background: linear-gradient(90deg, #c9a84c33, transparent);
}

html[lang="ar"] .card-badge {
  position: relative;
}

html[lang="ar"] .card-badge::before {
  content: '\25C7';
  margin-inline-end: 4px;
  font-size: 0.5rem;
  color: #c9a84c;
}

/* === Spanish accent — warm copper on section labels === */
html[lang="es"] .section-label {
  color: #e07020;
}

html[lang="es"] .section-label::after {
  background: linear-gradient(90deg, rgba(224,112,32,0.2), transparent);
}

html[lang="es"] .card-go {
  color: #e07020;
}

/* === Language switcher === */
.lang-switch {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.lang-switch a {
  padding: 5px 10px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--card, #12121a);
  color: var(--muted, #6b6b80);
  transition: all 0.2s;
  cursor: pointer;
}

.lang-switch a.active {
  background: var(--accent, #6366f1);
  color: white;
}

.lang-switch a:hover:not(.active) {
  color: var(--text2, #e0e0e8);
}

/* === Responsive RTL === */
@media (max-width: 768px) {
  html[dir="rtl"] .cta-row {
    flex-direction: column;
    align-items: center;
  }

  html[dir="rtl"] header {
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
}