/* ══════════════════════════════════════════════════════════════════
   Bilingual layer — shared by index.html, /course/, /games/ and 404.

   Loaded AFTER each page's own styles so it can override them. Three jobs:
     1. the EN / KU switcher control
     2. Kurdish typography (Syne has no Arabic glyphs, and its tight
        tracking / line-height clips Arabic diacritics)
     3. RTL corrections for the handful of direction-sensitive rules

   The design itself does not change between languages — only reading
   direction, the typeface used for Arabic script, and the words.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Rashid IBM Plex Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── 1. The switcher ─────────────────────────────────────────────── */
/* Segmented pill with a thumb that slides between the two codes. The track is
   pinned to LTR so EN is always left and KU always right — the thumb can then
   key off html[data-lang] with one physical translate, no RTL mirror needed. */
.lang-switch {
  position: relative;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(21, 21, 21, .05);
}
.lang-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--black);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
html[data-lang="ku"] .lang-switch::before { transform: translateX(100%); }
.lang-switch .lang-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 1;
  min-width: 42px;
  padding: 7px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .3s ease;
}
.lang-switch .lang-btn:hover { color: var(--black); }
.lang-switch .lang-btn.active { color: #fff; }
.lang-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 999px; }

@media (max-width: 860px) {
  .lang-switch .lang-btn { min-width: 36px; padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch::before, .lang-switch .lang-btn { transition: none; }
}

/* ── 2. Kurdish typography ───────────────────────────────────────── */
html[lang="ku"] body,
html[lang="ku"] button,
html[lang="ku"] input {
  font-family: "Rashid IBM Plex Arabic", "DM Sans", sans-serif;
}

/* Display type: swap Syne out (no Arabic coverage), relax the tracking and
   open up the leading so marks above and below the baseline survive. */
html[lang="ku"] h1,
html[lang="ku"] h2,
html[lang="ku"] .about-right .large,
html[lang="ku"] .project-info h3,
html[lang="ku"] .course-left h3,
html[lang="ku"] .course-badge,
html[lang="ku"] .soon,
html[lang="ku"] .mod h3,
html[lang="ku"] .info h3,
html[lang="ku"] .logo,
html[lang="ku"] .checks li,
html[lang="ku"] .course-list li {
  font-family: "Rashid IBM Plex Arabic", sans-serif;
  font-weight: 400;
  letter-spacing: -.02em;
}
html[lang="ku"] h1 { line-height: 1.3; }
html[lang="ku"] h2 { line-height: 1.28; }
html[lang="ku"] .about-right .large,
html[lang="ku"] .who .lg { line-height: 1.7; }
html[lang="ku"] .course-left h3,
html[lang="ku"] .card-mid h2,
html[lang="ku"] .sec-top h2,
html[lang="ku"] .section-top h2,
html[lang="ku"] .about-left h2,
html[lang="ku"] .contact-card h2,
html[lang="ku"] .notify h2,
html[lang="ku"] .who h2 { line-height: 1.3; letter-spacing: -.02em; }

/* Kurdish reads better a touch larger at body sizes. */
html[lang="ku"] p,
html[lang="ku"] .project-info p,
html[lang="ku"] .mod p,
html[lang="ku"] .info p { line-height: 2; }

/* The logo badge, the giant R, the watermark and the code panel are Latin
   marks — they keep Syne / the mono stack in both languages. */
html[lang="ku"] .logo span:first-child,
html[lang="ku"] .contact-top span,
html[lang="ku"] .card-r,
html[lang="ku"] .vs-window,
html[lang="ku"] .vs-window *,
html[lang="ku"] .vs-chip,
html[lang="ku"] .mcard.face b,
html[lang="ku"] .mcard-team,
html[lang="ku"] .mc.f b,
html[lang="ku"] .mc.f em,
html[lang="ku"] .sk-badge,
html[lang="ku"] .qmark,
html[lang="ku"] .quote-ku > span,
html[lang="ku"] .art b,
html[lang="ku"] .course-note {
  font-family: "Syne", "DM Sans", sans-serif;
}
html[lang="ku"] .contact-top span,
html[lang="ku"] .card-r,
html[lang="ku"] .mcard.face b,
html[lang="ku"] .sk-badge,
html[lang="ku"] .qmark,
html[lang="ku"] .art b { font-weight: 800; }

/* The quote band hard-codes the Arabic face for its own copy. In English
   mode that copy is English, so hand it back. */
html[lang="en"] .kurdish,
html[lang="en"] .kurdish * { font-family: "DM Sans", sans-serif; }
html[lang="en"] .quote-ku .quote-text { font-family: "Syne", sans-serif; font-weight: 700; }
html[lang="en"] .quote-ku .quote-text { font-size: 24px; line-height: 1.35; letter-spacing: -.03em; }

/* ── 3. RTL corrections ──────────────────────────────────────────── */
/* Code always reads left-to-right, whatever the page is doing. */
.vs-code, .vs-window { direction: ltr; }

/* Latin marks whose glyph order must not be reordered by the bidi algorithm.
   Without this "R/" comes out as "/R" and "v1.4.1" can shuffle in RTL. */
.contact-top span,
.card-r,
.vs-chip,
.course-note { direction: ltr; unicode-bidi: isolate; }

html[dir="rtl"] .nav-button span:last-child,
html[dir="rtl"] .contact-bottom b,
html[dir="rtl"] .n-primary b,
html[dir="rtl"] .n-second b,
html[dir="rtl"] .course-cta b,
html[dir="rtl"] .btn-dark b,
html[dir="rtl"] .btn-line b,
html[dir="rtl"] .play b,
html[dir="rtl"] .back span:last-child { margin-left: 0; margin-inline-start: 14px; }

/* The hero code mark carries its own direction:ltr in style.css, so the
   "</>" glyphs keep their order in RTL — nothing to mirror there. The
   ghost pill's ink sweep does need flipping: it must enter from the
   leading edge, which is the right-hand side in RTL. */
html[dir="rtl"] .button.ghost::before { transform-origin: right center; }

/* Absolutely-positioned UI flips; decorative shapes deliberately do not. */
.vs-bar span { margin-left: 0; margin-inline-start: auto; }

/* Reveal animation is a vertical slide — no horizontal component to mirror. */
html[dir="rtl"] .reveal { transform: translateY(22px); }
html[dir="rtl"] .reveal.show { transform: none; }

/* ── Rotating quote card ─────────────────────────────────────────── */
.quote-ku { position: relative; padding-bottom: 58px; }
.quote-ku .quote-text, .quote-ku .quote-by { transition: opacity .25s ease; }
.quote-ku.fading .quote-text, .quote-ku.fading .quote-by { opacity: 0; }
.quote-dots {
  position: absolute;
  inset-inline-start: 35px;
  bottom: 28px;
  display: flex;
  gap: 7px;
}
.quote-dot {
  appearance: none;
  padding: 0;
  border: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(21, 21, 21, .26);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.quote-dot:hover { background: rgba(21, 21, 21, .5); }
.quote-dot.active { background: var(--black); transform: scale(1.3); }
.quote-dot:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .quote-ku .quote-text, .quote-ku .quote-by, .quote-dot { transition: none; }
  .quote-dot.active { transform: none; }
}

/* ── Contact: social row ─────────────────────────────────────────── */
.icon-sprite { display: none; }
/* Centred on the blue card: white tile at rest, brand fill on hover. The
   white border is kept through the hover so the two blues in the set —
   LinkedIn and Telegram — stay separated from the card behind them. */
.social-row { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
/* Rounded tile at rest, widening on hover/focus to reveal the network name.
   The label is real text kept in the a11y tree by clipping, not hiding, so
   the link still announces itself without a duplicate aria-label. */
.social-row a {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  color: var(--black);
  background: #fff;
  overflow: hidden;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.social-row svg { width: 17px; height: 17px; fill: currentColor; display: block; flex: none; }
.social-row a span {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease,
              margin-inline-start .3s cubic-bezier(.4,0,.2,1);
}
.social-row a:hover span,
.social-row a:focus-visible span { max-width: 150px; opacity: 1; margin-inline-start: 8px; }
.social-row a:hover,
.social-row a:focus-visible {
  background: var(--brand, var(--black));
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}
/* Lime, not the browser default — a blue ring would disappear on the card. */
.social-row a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.social-row a[data-social="whatsapp"] { --brand: #25D366; }
.social-row a[data-social="telegram"] { --brand: #26A5E4; }
.social-row a[data-social="instagram"] { --brand: #E4405F; }
.social-row a[data-social="linkedin"] { --brand: #0A66C2; }
.social-row a[data-social="tiktok"] { --brand: #010101; }
.social-row a[data-social="github"] { --brand: #181717; }


@media (prefers-reduced-motion: reduce) {
  .social-row a, .social-row a span, .lang-btn { transition: none; }
  .social-row a:hover { transform: none; }
}
@media (max-width: 460px) {
  .social-row { gap: 7px; }
  .social-row a { height: 38px; padding: 0 10px; border-radius: 11px; }
  .social-row svg { width: 16px; height: 16px; }
}