/* ============================================
   i18n.css — Groupe Scolaire Saphine
   RTL support + Language switcher
   ============================================ */

/* --- Language switcher button --- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 20px;
}

.lang-btn {
  background: transparent;
  border: 1px solid rgba(228,194,65,0.4);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.lang-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  opacity: 1;
}

.lang-btn:hover:not(.active) {
  opacity: 1;
  border-color: var(--gold);
}

/* --- RTL overrides when lang=ar --- */
html[lang="ar"] {
  direction: rtl;
  font-family: 'Amiri', serif;
}

html[lang="ar"] body {
  font-family: 'Amiri', serif;
  font-size: 1.05em;
}

html[lang="ar"] .navbar {
  flex-direction: row-reverse;
}

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

html[lang="ar"] .lang-switcher {
  margin-left: 0;
  margin-right: 20px;
}

html[lang="ar"] .hero-content {
  text-align: right;
}

html[lang="ar"] .hero-btns {
  justify-content: flex-start;
}

html[lang="ar"] .hero-stats {
  flex-direction: row-reverse;
}

html[lang="ar"] .about-grid {
  flex-direction: row-reverse;
}

html[lang="ar"] .about-text {
  text-align: right;
}

html[lang="ar"] .contact-grid {
  flex-direction: row-reverse;
}

html[lang="ar"] .form-row {
  flex-direction: row-reverse;
}

html[lang="ar"] .ci-item {
  flex-direction: row-reverse;
  text-align: right;
}

html[lang="ar"] .prog-header {
  flex-direction: row-reverse;
}

html[lang="ar"] .prog-body {
  text-align: right;
}

html[lang="ar"] .prog-features li {
  direction: rtl;
}

html[lang="ar"] .footer-inner {
  flex-direction: row-reverse;
}

html[lang="ar"] .map-info {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

html[lang="ar"] .info-item {
  flex-direction: row-reverse;
  text-align: right;
}

html[lang="ar"] .obj-card {
  text-align: right;
}

html[lang="ar"] .about-stats {
  flex-direction: row-reverse;
}

html[lang="ar"] .team-features {
  flex-direction: row-reverse;
}

html[lang="ar"] h1, 
html[lang="ar"] h2, 
html[lang="ar"] h3 {
  font-family: 'Amiri', serif;
}

html[lang="ar"] .page-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .section-title {
  font-family: 'Amiri', serif;
  font-weight: 700;
}

/* Mobile RTL */
@media (max-width: 768px) {
  html[lang="ar"] .nav-links {
    flex-direction: column;
  }

  html[lang="ar"] .navbar {
    flex-direction: row-reverse;
  }

  html[lang="ar"] .hero-content {
    text-align: center;
  }

  html[lang="ar"] .form-row {
    flex-direction: column;
  }
}