/* static/css/nav_strip.css — סרגל-ניווט גלובלי (חזרה / קדימה + פירורי-לחם)
   ממוקם ע"י nav_strip.js כילד הראשון של .main-content, ולכן הוא יורש את
   ההזחה מסרגל-הצד (מורחב/מכווץ) בלי חישוב משלו. צבעים מ-theme.css בלבד,
   כך שמצב כהה עובד בלי כללים נוספים. */

/* 🔑 גובה קבוע אחד לסרגל ולשמירת-המקום שלו — כך ההחלפה ביניהם אינה מזיזה דבר. */
:root { --gnav-h: 30px; --gnav-gap: 6px; }

.gnav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
  height: var(--gnav-h);
  min-height: var(--gnav-h);
  margin: 0 0 var(--gnav-gap);
  padding: 0 2px;
  direction: rtl;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: var(--text-small, 0.78rem);
  line-height: 1.2;
}

/* עד שהסקריפט ממקם את הסרגל — מחוץ לזרימה ובלתי נראה. */
.gnav--pending {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

/* 🔴 שורש קפיצת-הפריסה: הסרגל מרונדר בשרת מחוץ ל-.main-content, ו-nav_strip.js
   (שנטען בסוף העמוד) מעביר אותו לראש .main-content רק **אחרי** שהתוכן כבר צויר —
   ואז כל העמוד יורד בגובה הסרגל.
   ✅ שמירת-מקום מהצביעה הראשונה: כל עוד הסרגל שמרונדר בשרת ממתין
   (`.gnav--pending`), ל-.main-content יש ילד-ראשון מדומה בדיוק בגובה הסרגל ובאותו
   מרווח. כשהסקריפט מציב את הסרגל ומסיר את gnav--pending, שמירת-המקום נעלמת
   באותה מסגרת והסרגל תופס את אותו המקום בדיוק — אפס תזוזה. אין בלוק חדש ואין
   שמירת-מקום כפולה; בלי סרגל (מסכי-אימות / אורח) אין :has ואין רווח.
   דפדפן בלי :has — ההתנהגות הקודמת (קפיצה קטנה), לא שבירה. */
body:has(#guronNav.gnav--pending) .main-content::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: var(--gnav-h);
  margin: 0 0 var(--gnav-gap);
}

.gnav-history {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.gnav-btn {
  width: 30px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  color: var(--text-heading, #16375f);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gnav-btn:hover:not(:disabled) {
  background: var(--surface-card-alt, #f7f9fd);
  border-color: #b5cfea;
}
.gnav-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color, #2e6dc9);
  outline-offset: 1px;
}
.gnav-btn:disabled {
  color: var(--text-muted, #7a8899);
  opacity: 0.45;
  cursor: default;
}

.gnav-trail {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.gnav-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav-crumb {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
}
/* המסך הנוכחי מקבל עדיפות על רוחב — הוא נקטע אחרון. */
.gnav-crumb:last-child { flex-shrink: 0.3; }

.gnav-sep {
  flex-shrink: 0;
  color: var(--text-muted, #7a8899);
  font-size: 0.7rem;
  margin: 0 2px;
}

.gnav-link,
.gnav-text,
.gnav-current {
  display: inline-block;
  min-width: 0;
  max-width: 28ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 5px;
  border-radius: 6px;
  vertical-align: middle;
}
.gnav-link {
  color: var(--focus-ring-color, #2e6dc9);
  font-weight: 600;
  text-decoration: none;
}
.gnav-link:hover {
  background: var(--surface-card-alt, #f7f9fd);
  text-decoration: underline;
}
.gnav-link:focus-visible {
  outline: 2px solid var(--focus-ring-color, #2e6dc9);
  outline-offset: 1px;
}
.gnav-text { color: var(--color-text-secondary, #5f6e7c); }
.gnav-current {
  color: var(--text-heading, #16375f);
  font-weight: 700;
}

@media (max-width: 900px) {
  .gnav-link, .gnav-text, .gnav-current { max-width: 16ch; }
}
@media (max-width: 560px) {
  .gnav { gap: 6px; }
  .gnav-link, .gnav-text, .gnav-current { max-width: 10ch; }
}

@media print {
  .gnav { display: none !important; }
}