/* ═══════════════════════════════════════════════════════════
   אייקוני הדר — עגלה עם מונה + אינסטגרם (2026-07-22)
   נטען אוטומטית ע"י ה-glob של styles/pages/*.css (חל על כל האתר).

   שתי מלכודות ידועות שנשמרות כאן במכוון:
   1. חוק "HEADER FIT" ב-styles/sapir.css מוגבל ל-‎≥1025px. אין להרחיב —
      הרחבה בעבר גרמה ללוגו לברוח ימינה במובייל. לכן ההצמדה של הבלוק הזה
      לצד ההמבורגר נעשית ב-‎≤1024px בלבד (עכשיו דרך grid-column, ראו למטה).
   2. יעד מגע מינימלי 44x44 — בעבר האייקונים כווצו ל-34px. אין להקטין.
═══════════════════════════════════════════════════════════ */

/* WordPress standard — התבנית לא הגדירה אותו, וה-CSS של ווקומרס נטען
   רק בעמודי החנות. בלי זה טקסט הנגישות של הבאדג' מוצג כטקסט רגיל בהדר. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sa-header-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-header .sa-header-tools .sa-header-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 237, 225, .3);
  background: transparent;
  color: var(--cream);
  text-decoration: none;
  transition: var(--transition);
}

.site-header .sa-header-tools .sa-header-tool:hover,
.site-header .sa-header-tools .sa-header-tool:focus-visible {
  border-color: var(--gold);
  color: var(--gold-soft);
}

/* ─── באדג' המונה ─── */
.site-header .sa-header-cart .sa-cart-count {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--espresso);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* עגלה ריקה — הבאדג' מוסתר ויזואלית אך נשאר ב-DOM,
   כדי ש-woocommerce_add_to_cart_fragments ימשיך למצוא את היעד. */
.site-header .sa-header-cart .sa-cart-count.is-empty {
  display: none;
}

/* אינסטגרם משני מבחינה ויזואלית לעגלה — קצת יותר עמום, לא מתחרה בבאדג'.
   תיבת המגע נשארת 44x44 (המלכודת למעלה) — רק אטימות, לא גודל. */
.site-header .sa-header-tools a.sa-header-tool:not(.sa-header-cart) {
  opacity: .7;
}
.site-header .sa-header-tools a.sa-header-tool:not(.sa-header-cart):hover,
.site-header .sa-header-tools a.sa-header-tool:not(.sa-header-cart):focus-visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   הדר מובייל — לוגו שמאל, המבורגר+כלים ימין, שורה אחת (2026-07-27)
   ═══════════════════════════════════════════════════════════
   הוראת טל 27.07: "דסקטופ בדיוק כמו שהוא — לא לגעת. במובייל: הדר נפרד,
   לוגו משמאל, השאר (המבורגר+עגלה+אינסטגרם) מימין, בלי לגלוש לשורה שנייה."

   assets/components.css (מחוץ לתחום שלי) מגדיר ב-‎≤1024px גריד 3 עמודות
   (1fr auto 1fr) עם לוגו במרכז, המבורגר בעמודה 1 (הימנית ב-RTL), כלים
   בעמודה 3 (השמאלית) — ספציפיות 0-3-0 / 0-4-0.

   מנגנון הדריסה כאן: אותם סלקטורים בדיוק + prefix של אלמנט html, שמעלה
   את הספציפיות ל-0-3-1 / 0-4-1 — מנצח תמיד את components.css, בלי תלות
   בסדר הטעינה בפועל ובלי !important.

   מבנה חדש — עמודות auto auto 1fr:
     עמודה 1 (ימין)      → המבורגר
     עמודה 2             → כלים (עגלה+אינסטגרם), צמוד להמבורגר, שורה אחת
     עמודה 3 (1fr, שמאל) → לוגו, צמוד לקצה השמאלי
   שתי העמודות הראשונות מתכווצות בדיוק לתוכן שלהן, וכל השטח הפנוי עובר
   לעמודה 3 — כך שהלוגו יושב לבד בקצה השמאלי וההמבורגר+הכלים נשארים
   קבוצה אחת צמודה מימין, בלי לגלוש לשורה שנייה (זו הייתה התקלה אתמול).
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  html .site-header .container.header-inner {
    grid-template-columns: auto auto 1fr;
  }

  /* grid-row:1 מפורש על כל השלושה — קריטי. בלי זה מנוע ה-auto-placement
     דוחף את .sa-header-tools לשורה שנייה סמויה (נמדד בדפדפן: יצר
     grid-template-rows: 44px 44px והכלים גלשו מתחת לגובה ההדר). */
  html .site-header .container.header-inner .hamburger {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  html .site-header .container.header-inner .sa-header-tools {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  html .site-header .container.header-inner .site-logo-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* לוגו מעט גדול יותר — טל: "נקרא קטן מדי". עדיין נכנס בנוחות בלי
     ללחוץ על קבוצת הכלים מימין (נמדד בדפדפן בפועל אחרי השינוי). */
  html .site-header .custom-logo,
  html .site-logo-link .custom-logo {
    max-height: 48px;
  }
}

/* מסכים צרים מאוד (‎≤400px) — רווח מוקטן בין האייקונים, לא יעד המגע,
   ולוגו יורד מדרגה אחת כדי שלא ייגע בקבוצת הכלים. */
@media (max-width: 400px) {
  .sa-header-tools { gap: var(--sp-1); }

  html .site-header .custom-logo,
  html .site-logo-link .custom-logo {
    max-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════
   עיגולי הדר קטנים יותר במובייל בלבד — הרשאה מפורשת מטל (29.07.2026)
   ═══════════════════════════════════════════════════════════
   ⚠️ סתירה מודעת להערה למעלה ("יעד מגע מינימלי 44x44 — אין להקטין").
   טל אישר במפורש הפעם: העיגולים (עגלה+אינסטגרם) גדולים מדי ביחס
   להמבורגר. שטח המגע יורד מ-44x44 ל-38x38 בכוונה, רק מתחת ל-900px.
   ⛔ תחום: max-width:899px בלבד. אסור לגעת ב-≥900 (הדסקטופ ותיקון ה-
   1024px-breakpoint שמעליו נשארים בדיוק כפי שהיו).
   קובץ זה (styles/pages/header-tools.css) אינו נעול — header.php/
   base.css/components.css לא נגעו בהם.
═══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  html .site-header .sa-header-tools .sa-header-tool {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  html .site-header .sa-header-tools .sa-header-tool svg {
    width: 17px;
    height: 17px;
  }
  html .site-header .sa-header-cart .sa-cart-count {
    min-width: 17px;
    height: 17px;
    font-size: .62rem;
  }
  /* מרווח גדול יותר בין צמד העיגולים לכפתור ההמבורגר (מ-var(--sp-2) ל-var(--sp-4)).
     margin-inline-start על הכלים = הצד הפונה להמבורגר ב-RTL (עמודה 1). */
  html .site-header .container.header-inner .sa-header-tools {
    margin-inline-start: var(--sp-4);
  }
}