/* ‎tickets — ערכת העיצוב. **מקור אחד לחלון הראווה ולפאנל.**
 *
 * מודרני שקט: משפחה אחת, פלטה מצומצמת, ומבטא אחד שמופיע מעט.
 * מה שאין כאן בכוונה — ספירה לאחור, חלונות קופצים, אנימציות. הם
 * מוסיפים משקל ומורידים אמון.
 *
 * ⚠️ **אסור לכתוב צבע, מידה או פונט מחוץ לקובץ הזה.** ערך שנכתב ישירות
 *    בקומפוננטה הוא הערך שיישכח כשמשנים את הערכה, והוא זה שייראה שבור.
 *
 * ⚠️ **אין כאן ולא יהיה כאן דומיין חיצוני.** חוק ברזל 10 — הקהל מאחורי
 *    נטפרי, רימון וטכלוק, ובקשה ל-CDN שם נחסמת. יש טסט שסורק את הקובץ.
 */

/* ═══ פונטים — מקומיים, וריאביליים ══════════════════════════════════
 *
 * ‎Heebo נבחר, ולא בגלל טעם:
 *
 * **הספרות שלו רוחב-אחיד מלידה** — נמדד ב-fontTools, כל ספרה 1151/2048
 * יחידות. הדרישה ל-tabular מתקיימת מבנית ואינה תלויה בפיצ'ר OpenType.
 * ‎Rubik דווקא **פרופורציונלי** (9 רוחבים שונים) ותלוי ב-`tnum` שקיים
 * רק בתת-הקבוצה הלטינית — פיצ'ר שנעדר נכשל **בשקט**, ומחירים היו
 * מתחילים לרקוד בטבלה בלי שאיש ישים לב.
 *
 * קובץ אחד לכל תת-קבוצה מכסה את **כל** המשקלים (variable, 100–900),
 * ולכן ארבעת המשקלים עולים 12KB ולא ארבעה קבצים.
 *
 * מה ש-Heebo לא נותן: kerning בעברית (2 פיצ'רים בלבד בתת-הקבוצה
 * העברית). בכתב עברי אין צמדים אלכסוניים כמו AV, ולכן ההשפעה מזערית.
 */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-hebrew.de80852899c5.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-latin.480b1d24f2aa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ═══ צבע ═════════════════════════════════════════════════════════
   * כל צירוף טקסט נמדד מול WCAG. המספרים בהערות הם היחס בפועל.
   */
  --ink:          #0E1F1D;   /* על רקע 15.50 · על משטח 17.04 */
  --bg:           #F1F5F4;
  --surface:      #FFFFFF;
  --line:         #E2E8E7;   /* מפריד דקורטיבי בלבד — 1.24 על לבן */
  --muted:        #5F6E6B;   /* על רקע 4.86 · על משטח 5.34 */
  --accent:       #0F5F58;   /* על משטח 7.51 · לבן עליו 7.51 */
  --accent-soft:  #E1EFEC;   /* מבטא עליו 6.35 */

  /* ⚠️ אזהרה — **למלאי נמוך בלבד.** כשהיא מופיעה בכל מקום היא מפסיקה
   * להיות סימן, וקונה מפסיק להאמין לה. */
  --warn:         #9A5B10;   /* על רקע-אזהרה 4.84 · על משטח 5.42 */
  --warn-bg:      #FBF1E0;

  /* ★ גבול של רכיב אינטראקטיבי — **לא ‎--line.**
   *
   * ‎WCAG 1.4.11 דורש 3:1 לגבול שמזהה רכיב. ‎--line נותן 1.24 על לבן:
   * מספיק למפריד, ו**נכשל** כגבול של שדה קלט. ‎#888E8D עובר 3:1 גם על
   * לבן (3.33) וגם על הרקע (3.03).
   *
   * שדה קלט עם ‎--line הוא שדה שמשתמש בעל ראייה חלשה לא מוצא. */
  --line-field:   #888E8D;

  --focus:        var(--accent);   /* 7.51 על לבן — עובר בנוחות */

  /* ═══ טיפוגרפיה ═══════════════════════════════════════════════════ */
  --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ארבעה משקלים, ולא יותר. חמישי אינו מוסיף מדרג — הוא מטשטש אותו. */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

  /* סולם קרוב ל-1.2. שקט פירושו הבדלים קטנים, לא קפיצות. */
  --t-xs:    0.8125rem;   /* 13px — הערות שוליים */
  --t-sm:    0.9375rem;   /* 15px — מטא, תאריכים */
  --t-base:  1.0625rem;   /* 17px — גוף */
  --t-md:    1.25rem;     /* 20px — כותרת כרטיסייה */
  --t-lg:    1.5rem;      /* 24px — כותרת מסך */
  --t-xl:    1.875rem;    /* 30px — שם אירוע בדף אירוע */

  --lh-tight:  1.25;
  --lh-body:   1.7;       /* עברית צפופה נקראת רע — 1.7 ולא 1.5 */

  /* ═══ מרווח — סולם של 4 ═══════════════════════════════════════════ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;

  /* ═══ צורה ════════════════════════════════════════════════════════ */
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  12px;
  --r-pill: 999px;

  /* ★ 44px — מינימום מטרת מגע. הקהל קונה בטלפון, לעיתים קרובות
   * במכשיר ישן ובלי משקפיים. כפתור קטן יותר הוא כפתור שמפספסים. */
  --touch: 44px;

  /* ═══ הגבהה — עדינה. שקט אינו צל כבד ══════════════════════════════ */
  --shadow-card:  0 1px 2px rgba(14, 31, 29, 0.04),
                  0 1px 3px rgba(14, 31, 29, 0.06);
  --shadow-stuck: 0 -1px 3px rgba(14, 31, 29, 0.08);

  /* ═══ פוסטר — 3:4 לאורך ═══════════════════════════════════════════
   * במגזר הזה מעצבים מודעות בפורמט מודפס, וכל המידע כתוב **בתוך**
   * התמונה. חיתוך לרוחב קוצץ את הטקסט ומוחק את המידע.
   * תמונה שהגיעה לרוחב מוצגת מלאה, בלי חיתוך — ראה ‎--poster-fit. */
  --poster-ratio: 3 / 4;
  --poster-fit:   contain;
  --poster-bg:    var(--accent-soft);
}

/* ═══ בסיס ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  /* ‎Heebo כבר רוחב-אחיד; ההצהרה כאן היא רשת ביטחון ליום שבו מישהו
   * יחליף משפחה. היא **אינה** מה שמחזיק את היישור — ראה הערת הפונט. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-2);
  line-height: var(--lh-tight);
  font-weight: var(--w-semibold);
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

a { color: var(--accent); text-underline-offset: 0.2em; }

/* ★ מיקוד גלוי בכל מקום. ‎:focus-visible ולא ‎:focus — טבעת שמופיעה על
 * לחיצת עכבר נראית כמו תקלה, ואז מישהו מכבה אותה לגמרי ושוברת ניווט
 * במקלדת. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ★ מספרים, מחירים, טלפונים וקודי הזמנה — תמיד LTR, גם בתוך פסקה
 * עברית. בלי הבידוד '972501234567' מוצג בסדר שנראה נכון ומועתק שגוי. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* מי שביקש פחות תנועה — מקבל. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}