/* =============================================================================
   SEVEN POINTS — sp-i18n.css
   Additions to sp-style.css (which is unchanged):
     1. the language switch (English / العربية / کوردی)
     2. Arabic and Sorani Kurdish: fonts and right-to-left layout
   Rules for Arabic and Kurdish only start with html[dir="rtl"], so the English page
   keeps exactly the original design.
   ============================================================================= */

/* 1. LANGUAGE SWITCH ---------------------------------------------------------- */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 34px; }
.lang { display: flex; align-items: center; font-size: 12px; font-weight: 500; line-height: 1; }
.lang a { position: relative; padding: 8px 0; color: rgba(245, 244, 240, .55); transition: color .3s ease; }
.lang a + a { margin-inline-start: 22px; }
.lang a + a::before {   /* a thin slash between the languages */
  content: ""; position: absolute; inset-inline-start: -11px; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px; background: rgba(245, 244, 240, .28);
  transform: skewX(-20deg);
}
.lang a:hover, .lang a:focus-visible { color: var(--off); }
.lang a[aria-current="true"] { color: var(--off); }
.lang a[aria-current="true"]::after {   /* the same small dot as the main links */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; background: var(--yellow);
}
.lang a:lang(ar), .lang a:lang(ckb) { font-size: 13px; }

/* in the mobile menu, above the phone and email */
.lang--menu { margin-bottom: 18px; font-size: 15px; }
.lang--menu a { color: var(--grey); padding: 10px 0; }
.lang--menu a[aria-current="true"] { color: var(--yellow); }
.lang--menu a[aria-current="true"]::after { display: none; }
.lang--menu a:lang(ar), .lang--menu a:lang(ckb) { font-size: 16px; }

@media (max-width: 1099px) {
  .nav__end { display: none; }   /* phones and tablets: the switch is in the menu */
}

/* The opening: the switch waits behind the loader and appears with the Contact link
   (same rules as sp-style.css → "What waits behind the intro"). */
.nav__end .lang { transition: opacity .7s ease .16s, transform .9s cubic-bezier(.16, 1, .3, 1) .16s; }
.is-intro:not(.is-intro-reveal) .nav__end .lang { opacity: 0; transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  .is-intro .nav__end .lang { opacity: 1 !important; transform: none !important; }
}

/* 2. ARABIC AND SORANI KURDISH ------------------------------------------------- */
@font-face {
  font-family: "SP Sans Arabic"; src: url("assets/fonts/noto-sans-arabic.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "SP Kufi Arabic"; src: url("assets/fonts/noto-kufi-arabic.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
/* Arabic letters from Noto; Latin (Seven Points, email, phone) keeps the original Manrope. */
html[dir="rtl"] { --font: "SP Sans Arabic", "Manrope", "Helvetica Neue", Arial, sans-serif; }
html[dir="rtl"] :is(.hero__title, .about__title, .services__title, .statement__title, .story__title,
  .projects__title, .partners__title, .contact__title, .contact__sub, .stage__title,
  .chapter__statement, .value__title, .project__name h3, .menu__links a, .founder__name) {
  font-family: "SP Kufi Arabic", "Manrope", "Helvetica Neue", Arial, sans-serif;
}
/* No capitals or letter-spacing in Arabic script; more room between lines. */
html[dir="rtl"] body * { letter-spacing: 0 !important; text-transform: none !important; }
html[dir="rtl"] :is(.hero__title, .about__title, .services__title, .statement__title, .story__title,
  .projects__title, .partners__title, .contact__title, .contact__sub, .stage__title, .chapter__statement) {
  line-height: 1.32; font-weight: 600;
}
/* Arabic letters look larger than the original capitals at the same size: about 82% of each original size. */
html[dir="rtl"] :is(.hero__title, .statement__title) { font-size: calc(var(--fs-display) * .82); }
html[dir="rtl"] :is(.about__title, .services__title, .projects__title) { font-size: calc(var(--fs-h1) * .82); }
html[dir="rtl"] .chapter__statement { font-size: calc(var(--fs-h2) * .82); }
html[dir="rtl"] .stage__title { font-size: calc(var(--fs-stage) * .82); }
html[dir="rtl"] .story__title { font-size: clamp(43px, 6.6vw, 123px); }
html[dir="rtl"] .partners__title { font-size: clamp(31px, 4.3vw, 82px); }
html[dir="rtl"] .contact__title { font-size: clamp(36px, 6.1vw, 112px); }
html[dir="rtl"] .contact__sub { font-size: clamp(28px, 3.8vw, 70px); }
@media (max-width: 1099px) { html[dir="rtl"] .partners__title { font-size: clamp(31px, 6.6vw, 66px); } }
@media (max-width: 767px) {
  html[dir="rtl"] .about__title { font-size: clamp(30px, 9.3vw, 49px); }
  html[dir="rtl"] .chapter__statement { font-size: clamp(27px, 7.7vw, 36px); }
  html[dir="rtl"] .story__title { font-size: clamp(38px, 11.2vw, 52px); }
}
html[dir="rtl"] .ln { padding-top: .1em; margin-top: -.1em; padding-bottom: .16em; margin-bottom: -.16em; }
html[dir="rtl"] :is(.hero__copy, .about__lead, .chapter__text, .services__intro, .stage__text, .story__copy,
  .partners__lead, .contact__copy, .value__text, .statement__foot p, .commitments p) { line-height: 1.85; }
html[dir="rtl"] :is(.value__title, .project__name h3) { line-height: 1.35; }
/* numbers keep their figures; phone numbers and emails read left to right */
html[dir="rtl"] :is(.stats dd, .proof__num, .services__count, .story__count) { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .stats dd { text-align: right; }

/* Mirrored positions (the original stylesheet uses left/right in these places) */
html[dir="rtl"] .skip-link { left: auto; right: 12px; }
html[dir="rtl"] .link-arrow::after { content: "←"; }
html[dir="rtl"] .link-arrow:hover::after { transform: translateX(-6px); }
html[dir="rtl"] .project__open::after { content: " ←"; }
html[dir="rtl"] .hero__cue { right: auto; left: var(--pad); }
html[dir="rtl"] .chapters a { transition: color .4s ease, padding-right .6s var(--ease); }
html[dir="rtl"] .chapters a::before { left: auto; right: 0; transform-origin: right; }
html[dir="rtl"] .chapters a.is-active { padding-left: 0; padding-right: 38px; }
html[dir="rtl"] .stats__item { padding-right: 0; padding-left: 24px; }
html[dir="rtl"] .stats__item:nth-child(even) { padding-left: 24px; padding-right: 28px; border-left: 0; border-right: 1px solid var(--line-light); }
html[dir="rtl"] .proof__item { border-left: 0; border-right: 1px solid rgba(8, 8, 8, .22); }
html[dir="rtl"] .proof__item:first-child { padding-left: 2vw; padding-right: 0; border-right: 0; }
html[dir="rtl"] .services__count { left: auto; right: 24px; }
html[dir="rtl"] .gallery__count { margin-right: 0; margin-left: auto; }
/* the running word strips keep scrolling the same way; each word reads right to left */
html[dir="rtl"] .ticker { direction: ltr; }
html[dir="rtl"] .ticker span { unicode-bidi: isolate; }

@media (min-width: 1100px) {
  html[dir="rtl"] .chapters { padding-left: 0; padding-right: 30px; }
  html[dir="rtl"] .chapters a { padding-right: 0; }
  html[dir="rtl"] .chapters a.is-active { padding-left: 0; padding-right: 14px; }
  html[dir="rtl"] .chapters a::before { left: auto; right: -30px; }
  html[dir="rtl"] .chapters__progress { left: auto; right: 0; }
  html[dir="rtl"] .chapters__progress::before { left: auto; right: 0; }
  html[dir="rtl"] .chapters__progress i { left: auto; right: -4px; }
}
@media (min-width: 900px) {
  html[dir="rtl"] .js .stories.is-pinned .stories__bar { right: auto; left: var(--pad); }
}
@media (max-width: 1099px) {
  html[dir="rtl"] .nav__burger { margin-right: 0; margin-left: -10px; }
  html[dir="rtl"] .chapters a.is-active { padding-right: 0; }
  html[dir="rtl"] .proof__item:nth-child(3) { padding-left: 2vw; padding-right: 0; border-right: 0; }
}
@media (max-width: 767px) {
  html[dir="rtl"] .stats__item { padding-left: 14px; padding-right: 0; }
  html[dir="rtl"] .stats__item:nth-child(even) { padding-left: 14px; padding-right: 16px; }
  html[dir="rtl"] .proof__item { padding: 4px 16px 4px 0; }
  html[dir="rtl"] .proof__item:nth-child(odd) { padding-right: 0; border-right: 0; }
  html[dir="rtl"] .proof__item:nth-child(3) { padding-left: 0; }
}