/* ====================================================
   navigation-bar.css — סרגל ניווט בגובה אחיד
   ====================================================
   שיטה (29/04/2026 — תיקון):
   ● סטנדרטיזציה לפי GOBAH (גובה), לא לפי רוחב.
     הסיבה: לכל תמונת PNG יחס גובה/רוחב שונה
     (סיכום הכי "צר", רננה הכי "שטוח") — אז רוחב אחיד
     מייצר גבהים שונים. גובה אחיד פותר את זה.
   ● הרוחב נקבע אוטומטית: width:auto, image determines.
   ● מרכוז ע"י transform translateX(-50%).
   ● מרווח בין מרכזים: 14% (היה 13% — נמנע מחפיפה כשפעיל גדול).
   ==================================================== */

#navigation-bar {
    position : absolute;
    inset    : 0;
    pointer-events : none;
    z-index  : 100;
}

.nav-button {
    position : absolute;
    /* height — נקבע ב-JS (27% רגיל, 31.5% פעיל) */
    /* width  — auto (לפי יחס התמונה) */
    cursor   : pointer;
    pointer-events : auto;
    transform : translateX(-50%);  /* מרכוז על ערך left */
    transition : height 0.35s ease, transform 0.35s ease;
}

.nav-button.active {
    /* התרוממות + שמירה על המרכוז */
    transform : translateX(-50%) translateY(-4%);
}

.nav-button img {
    height : 100%;
    width  : auto;
    display : block;
    user-select : none;
    -webkit-user-drag : none;
}