/* ============================================================
   lang-switch.css — מתג שפה עברית ⇄ אנגלית
   ------------------------------------------------------------
   נטען בשתי השפות (עברית ב-root, אנגלית ב-/en/).
   הקומפוננטה זהה בשתיהן — רק ה-`aria-current` מסמן איפה אנחנו.
   נוצר: 27.7.2026
   ============================================================ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(200, 169, 110, 0.35);
  direction: ltr;            /* הפריטים תמיד עב→EN, בשתי השפות */
  unicode-bidi: isolate;
  flex-shrink: 0;
}

.lang-switch a {
  display: block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Heebo', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--sand-light, #e8dcc4);
  opacity: 0.75;
  transition: background 0.18s, opacity 0.18s, color 0.18s;
  white-space: nowrap;
}

.lang-switch a:hover { opacity: 1; }

.lang-switch a:focus-visible {
  outline: 2px solid var(--sand, #c8a96e);
  outline-offset: 2px;
}

/* השפה הפעילה */
.lang-switch a[aria-current="true"] {
  background: var(--earth, #7a5c3e);
  color: #FFFDF9;   /* היה --sand-light על --earth = 4.26:1 */
  opacity: 1;
  cursor: default;
}

/* ---- בתוך תפריט המובייל: רחב יותר, ממורכז ---- */
.site-mobile-menu .lang-switch {
  margin-top: 1.25rem;
  background: rgba(0, 0, 0, 0.18);
}

.site-mobile-menu .lang-switch a {
  padding: 8px 20px;
  font-size: 0.85rem;
}

/* ---- קצה ה-nav: המתג + ההמבורגר יחד בעמודה 3 של הגריד ----
   המתג חייב לחיות *מחוץ* ל-.nav-links, כי זו מוסתרת מתחת ל-900px —
   תייר דובר אנגלית שנוחת על הדף העברי במובייל לא היה מוצא את המעבר. */
nav .nav-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 🔴 קריטי: כל שלושת ילדי ה-nav חייבים שורה 1 מפורשת.
   סדר ה-DOM הוא logo → nav-end → nav-links, והמיקום האוטומטי של Grid
   **לא חוזר אחורה**: אחרי ש-.nav-end תפס עמודה 3 בשורה 1, ה-.nav-links
   (עמודה 2) נדחף לשורה 2 — התפריט ירד מתחת לבר וריחף על ההירו.
   קודם זה לא קרה כי בעמודה 3 ישב רק ההמבורגר, שמוסתר בדסקטופ. (27.7) */
nav .logo,
nav .nav-links,
nav .nav-end { grid-row: 1; }

nav .nav-end .nav-hamburger {
  grid-column: auto;
  justify-self: auto;
}

/* ---- מצב אימרסיב: ה-nav שם הוא `auto 1fr` (שתי עמודות בלבד) ----
   grid-column:3 יצר שם עמודה *מרומזת* ועיוות את רוחבי המסילות
   (נמדד: 136.8px / 31.1px / 127.1px). מגדירים עמודה שלישית אמיתית. */
body.kesem-immersive nav { grid-template-columns: auto 1fr auto; }
body.kesem-immersive nav .nav-end { grid-column: 3; justify-self: end; }

/* ---- ניגודיות מעל הווידאו (דיווח רועי 27.7) ----
   הגרדיאנט של ה-nav באימרסיב הוא rgba(13,9,4,.62) למעלה → **שקוף לגמרי
   למטה**. ההמבורגר (36px, ממורכז ב-nav של 64px) יושב בדיוק בחצי השקוף
   ו"צף" מעל וידאו בהיר. נותנים לאשכול שבקצה ה-nav רקע חום כהה משלו.
   בגלילה (`.kesem-nav-small`) הבר עצמו כבר אטום — אז הרקע מיותר ויורד. */
body.kesem-immersive nav .nav-end {
  background: rgba(44, 31, 14, 0.55);
  border: 1px solid rgba(200, 169, 110, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease;
}

body.kesem-immersive nav.kesem-nav-small .nav-end {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}

/* ---- כפתור עצירת הרקע, כשהוא יושב בתוך הנאב ----
   ב-immersive.css הוא `position:fixed` וממורכז מעל ההירו (`left:50%`
   + `translateX(-50%)`). שם הוא התנגש בבאדג' "מורה דרך מוסמך" ונראה
   כעיגול מרחף (דיווח רועי 27.7). עכשיו הוא פריט flex רגיל באשכול
   הנאב — מנוטרל מכל המיקום הקבוע. */
nav .nav-end .kbg-pause {
  position: static;
  top: auto; bottom: auto; left: auto; right: auto;
  transform: none;
  width: 32px; height: 32px;
  flex-shrink: 0;
}

body.kesem-immersive nav .nav-end .kbg-pause {
  position: static;
  top: auto; bottom: auto; left: auto; right: auto;
  transform: none;
  width: 32px; height: 32px;
}

/* ה-hover באימרסיב שימר את ה-translateX — כאן רק scale */
body.kesem-immersive nav .nav-end .kbg-pause:hover { transform: scale(1.08); }

/* על רקע ההירו הכהה (nav.nav-top) המתג צריך ניגודיות משלו */
nav.nav-top .lang-switch { border-color: rgba(250, 246, 238, 0.45); }
nav.nav-top .lang-switch a { color: rgba(250, 246, 238, 0.88); }
nav.nav-top .lang-switch a[aria-current="true"] {
  background: rgba(250, 246, 238, 0.22);
  color: #FAF6EE;
}

/* כשה-nav בהיר (גלילה למטה) — טקסט כהה, אחרת חול על חול */
nav:not(.nav-top) .lang-switch { border-color: rgba(122, 92, 62, 0.30); }
nav:not(.nav-top) .lang-switch a { color: var(--text-mid, #5a4a38); opacity: 1; }
/* ⚠️ בלי זה הכלל שמעל צובע גם את הלשונית הפעילה, שהרקע שלה כהה (--earth)
   ⇒ כהה-על-כהה 1.49:1. נתפס במדידת ניגודיות 28.7. */
nav:not(.nav-top) .lang-switch a[aria-current="true"] { color: #FFFDF9; }

@media (max-width: 420px) {
  nav .lang-switch a { padding: 4px 8px; font-size: 0.68rem; }
}