/* styles/pages/cookie-bar.css — סבב 02, 27.7.2026.
   נטען אוטומטית ע"י ה-glob של styles/pages/*.css → חל על כל האתר.

   למה קובץ חדש ולא עריכה של assets/components.css: הכללים שם
   (.cookie-bar, .cookie-bar-close) הם חלק מהתבנית הגנרית של פרוזיטיב ומשמשים
   אתרים נוספים. הקובץ הזה דורס אותם לספיר בלבד, בלי !important.

   ספציפיות: הבסיס ב-components.css הוא (0,1,0). כאן מוסיפים prefix של
   אלמנט html → (0,1,1), שמנצח תמיד ולא תלוי בסדר הטעינה בפועל.

   ⛔ הרקע כאן כהה (אספרסו) ולכן הטקסט חייב להיות בהיר בלבד. הקישור בזהב —
   לא בפטל. פטל הוא רקע/הדגשה בלבד בפרויקט הזה. */

/* מצב מוסתר/גלוי — לא מוגדר כאן במכוון. assets/components.css כבר מגדיר
   .cookie-bar{transform:translateY(100%)} ו-.cookie-bar.is-visible{transform:translateY(0)},
   ו-assets/main.js מחליף את המחלקה. נבדק ואומת שזה עובד — אין צורך בדריסה.

   ⚠️ מלכודת מדידה, נשרפו עליה חמש בדיקות ב-27.7: באיפרם שממוקם מחוץ למסך
   (left:-99999px) הדפדפן מחניק את הרינדור, ולכן מעברי CSS לא מתקדמים כלל —
   הבאנר "נראה תקוע" ב-translateY(100%) גם כשהמחלקה הוצמדה נכון.
   זה ארטיפקט של שיטת המדידה, לא באג באתר.
   לבדיקת אלמנט עם transition: או למקם את האיפרם על המסך עם opacity נמוך,
   או לאפס את ה-transition לפני המדידה. */

html .cookie-bar {
  background: var(--espresso, #33201a);
  color: var(--cream, #f6ede1);
  border-top: 1px solid rgba(201, 162, 75, .35);
  padding: var(--sp-3) var(--sp-5);
  gap: var(--sp-4);
  font-size: .84rem;
  line-height: 1.55;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
}

html .cookie-bar p {
  color: var(--cream, #f6ede1);
  opacity: .92;
}

html .cookie-bar a {
  color: var(--gold, #c9a24b);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html .cookie-bar a:hover,
html .cookie-bar a:focus-visible {
  color: var(--gold-soft, #e0c88a);
}

/* כפתור הסגירה — עיגול, יעד מגע 44 פיקסל (הכלל הנעול באתר).
   הצורה הנראית קטנה יותר מהיעד, וזה בסדר: מה שנמדד הוא שטח הלחיצה. */
html .cookie-bar .cookie-bar-x {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(246, 237, 225, .28);
  border-radius: 50%;
  background: transparent;
  color: var(--cream, #f6ede1);
  cursor: pointer;
  transition: var(--transition, .25s ease);
}
html .cookie-bar .cookie-bar-x:hover,
html .cookie-bar .cookie-bar-x:focus-visible {
  border-color: var(--gold, #c9a24b);
  color: var(--gold-soft, #e0c88a);
}

/* מובייל — האיקס נשאר בשורה אחת עם הטקסט ולא נמתח לרוחב מלא.
   ⚠️ components.css מחיל ב-‎≤480px גם flex-direction:column וגם text-align:center
   על הבאנר; עם כפתור איקס זה נראה שבור (עיגול ענק מתחת לטקסט). מבוטל כאן. */
@media (max-width: 480px) {
  html .cookie-bar {
    flex-direction: row;
    align-items: center;
    text-align: start;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
    font-size: .78rem;
  }
  html .cookie-bar .cookie-bar-x { width: 40px; height: 40px; flex-basis: 40px; }
}