/*
 * מה שוורדפרס ואלמנטור מוסיפים, והאתר המקורי לא.
 *
 * האתר הכתוב בקוד לא מאפס box-sizing גלובלית: הרוחב של מכל הוא רוחב התוכן,
 * והריפוד נוסף מחוצה לו. גם תבנית Hello וגם אלמנטור מגדירים border-box על הכול,
 * ואז כל מכל מרופד יוצא צר ב-80 פיקסלים — ארבע עמודות של פוסטרים מאבדות
 * 20 פיקסלים כל אחת, וכל מה שמתחת זז. הכלל הזה מחזיר את מודל הקופסה למה
 * שהעיצוב מצייר, ורק בתוך הסקשנים של האתר עצמו.
 *
 * הקובץ נטען לפני site.css, והכללים שחלים על צאצאים עטופים ב-:where() כדי
 * שמשקלם יישאר (0,1,0): כלל של העיצוב עצמו שוקל בדיוק כך, וכיוון ש-htash.css
 * נטען אחרי — הוא גובר, ואילו כלל של התבנית שמכוון לתגית שוקל פחות ומפסיד.
 * בלי זה .r-qbtn איבד את ה-border-box שהוא מבקש וכפתורי הגיבור בטלפון גבהו
 * ב-18 פיקסלים כל אחד, ו-.r-herotitle איבד את גובה השורה 1.1 שלו ושם ההצגה
 * בהירו ירד בכמה פיקסלים. שורשי הסקשנים נשארים במשקל המלא: אותם רק התבנית
 * מנסה לסגנן.
 */

[data-screen-label]:not(.htash-native),
[data-screen-label]:not(.htash-native) *,
.r-week:not(.htash-native),
.r-week:not(.htash-native) *,
:where(.htash) .elementor-widget:not(.htash-native) .elementor-widget-container,
:where(.htash) .elementor-widget:not(.htash-native) .elementor-widget-container * {
	box-sizing: content-box;
}

/*
 * חוץ מפקדי טופס, שהם שני תיקונים בכלל אחד.
 *
 * box-sizing: הדפדפן עצמו נותן ל-select, input, textarea ו-button מודל
 * border-box, והאתר המקורי לא נוגע בזה. הכלל שמעל דרס גם אותם.
 *
 * width: תבנית Hello מותחת כל פקד לרוחב מלא. בתוך מכל flex זה מבטל את
 * הכיווץ שהעיצוב מסתמך עליו, והשוליים שהפקד מגדיר בעצמו נדחפים אל מחוץ
 * למכל. ביחד השניים הרחיבו את תיבת "קפיצה למופע" בחוברת ב-28 פיקסלים,
 * וגם עטיפת הווידג'ט עצמה נמנית כאן: אלמנטור מוותר עליה כשהמארקאפ מקוצר,
 * והעמוד כולו גלש הצידה ב-31 פיקסלים בטלפון. רוחב שהעיצוב קובע inline
 * גובר על הכלל הזה, ולכן הוא מחזיר את ברירת המחדל בלבד.
 */
:where(.htash) :is([data-screen-label], .r-week, .elementor-widget-container, .elementor-widget-html) :is(select, input, textarea, button) {
	box-sizing: border-box;
	width: auto;
	/*
	 * ועוד אחד: התבנית נותנת לפקדים גובה שורה של 1.5, והדפדפן נותן normal —
	 * מה שהעיצוב מסתמך עליו. תיבת "בחרו מופע" יצאה 25.5 במקום 19, והכרטיס
	 * כולו גבה ב-7 פיקסלים.
	 */
	line-height: normal;
}

/*
 * אלמנטור עוטף כל ווידג'ט. העטיפות אמורות להיות שקופות לחלוטין: העיצוב
 * מגדיר את הרוחב והריפוד שלו בעצמו, וכל פיקסל שהעטיפה מוסיפה הוא פיקסל
 * שהאתר המקורי לא מצייר.
 *
 * מלבד סקשן שנבנה מחדש מווידג'טים של אלמנטור: שם המכלים והעטיפות הם הפריסה
 * עצמה, והריפוד, הרוחב והיישור מגיעים מהפאנל. הם נושאים את המחלקה
 * htash-native, וכל הכללים כאן מדלגים עליהם.
 */
.htash .elementor-widget:not(.htash-native) > .elementor-widget-container,
.htash .elementor-widget:not(.htash-native),
.htash .e-con:not(.htash-native) > .e-con-inner,
.htash .e-con:not(.htash-native) {
	margin: 0;
	padding: 0;
	max-width: none;
	width: auto;
}

/*
 * ובנוסף: מכל של אלמנטור הוא flex, והעיצוב לא מצפה לזה.
 *
 * הסקשנים כאן מסודרים זה מתחת לזה בלבד — PageBuilder נותן לכל מכל רוחב מלא,
 * בלי מרווח ובלי ריפוד — ולכן block עושה בדיוק את אותו סידור. flex לעומת זאת
 * מודד את הגובה של הפריט לפי התוכן ברוחב max-content, וכל שורה שנשברת בפועל
 * לא נספרת: בטלפון שלושת הכפתורים מתחת לגיבור נשברים לשלוש שורות, המכל מדד
 * אותם כשורה אחת, והסקשן הבא עלה עליהם ב-132 פיקסלים.
 */
.htash .e-con:not(.htash-native) {
	display: block;
}

/*
 * גובה השורה. האתר המקורי לא מגדיר אותו על body, ולכן הוא normal — כ-1.2 —
 * וכל טקסט שאין לו גובה שורה משלו נשען עליו. תבנית Hello מגדירה 1.5, וזה
 * מוסיף שלושה עד ארבעה פיקסלים לכל שורה: הפוטר לבדו גבה 14.5 פיקסלים.
 * הכלל חל על שורש הסקשן בלבד ולא על צאצאיו: גובה שורה עובר בירושה, וקביעה
 * מפורשת על כל צאצא הייתה דורסת גם ירושה שהעיצוב עצמו קובע — תיבת התאריך על
 * הפוסטר קובעת inline גובה שורה 1, ושלוש השורות שבתוכה גבהו 12.5 פיקסלים
 * כשהכלל הזה תפס גם אותן.
 */
.htash [data-screen-label]:not(.htash-native),
.htash .r-week,
.htash .elementor-widget:not(.htash-native) > .elementor-widget-container {
	line-height: normal;
}

/*
 * ומכאן והלאה בירושה. `inherit` על הצאצאים גובר על כל כלל של התבנית שמכוון
 * לאלמנט מסוים, ובו בזמן מכבד גובה שורה שהעיצוב קובע inline באמצע העץ —
 * תיבת התאריך על הפוסטר קובעת 1, ושלוש השורות שבתוכה גבהו 12.5 פיקסלים
 * כשכל צאצא קיבל normal במקום לרשת.
 */
:where(.htash) [data-screen-label]:not(.htash-native) *,
:where(.htash) .r-week *,
:where(.htash) .elementor-widget:not(.htash-native) .elementor-widget-container * {
	line-height: inherit;
}

/*
 * קישור בתוך ווידג'ט של סקשן שנבנה מחדש לוקח את הצבע של הווידג'ט.
 *
 * העיצוב קובע `a{color:#141414}`, וזה כלל — ולכן הוא גובר על צבע שעובר
 * בירושה מהכותרת שהפאנל צבע. במקור הצבע יושב inline על הקישור עצמו ומנצח.
 * הכלל חל רק על קישור בלי מחלקה, כדי שכפתור ואייקון רשת, שצובעים את עצמם,
 * יישארו כפי שהפאנל קבע.
 */
:where(.htash .htash-native) a:not([class]) {
	color: inherit;
}

/*
 * תמונה ואייקון בסקשן שנבנה מחדש.
 *
 * אלמנטור משאיר אותם inline, ולכן יושבים בתוך שורת טקסט שמוסיפה מתחתיהם את
 * המרווח של האות היורדת: הלוגו בפוטר גבה חמישה פיקסלים מהתמונה עצמה, ושורת
 * האייקונים אחד-עשר. המקור מצייר אותם כבלוקים, וזה מה שהכלל הזה מחזיר. הוא
 * לא נוגע בשום דבר שהפאנל קובע.
 */
.htash .htash-native.elementor-widget-image img,
.htash .htash-native.elementor-widget-image a {
	display: block;
}

/*
 * ועוד אחד לתמונה: אלמנטור נותנת לכל תמונה max-width:100%, והמקור לא. רוחב
 * מרבי באחוזים מאפס את הרוחב המינימלי של התמונה בעיני פריט flex, ולכן בשורה
 * צפופה — כותרת החוברת באנגלית, בטלפון — הלוגו התכווץ ל-45 פיקסלים במקום
 * להישאר 57 כמו במקור, ועמודת הכותרת קיבלה את ההפרש. רוחב שהעיצוב קובע
 * בעצמו כתוב על התמונה וגובר.
 */
.htash .htash-native.elementor-widget-image img {
	max-width: none;
}

/*
 * ורצועת האומנות בכרטיסי ההטבות נמדדת כמו במקור: שם אין border-box, ולכן
 * המסגרת של פיקסל יושבת מחוץ ליחס 2.9 ולא בתוכו — שני פיקסלים לכל כרטיס,
 * שישה בעמודה.
 */
.htash .htash-native.r-promoart {
	box-sizing: content-box;
}

/*
 * מספר הסקשן. המונה מצויר ב-::before על הווידג'ט עצמו, ושם הטיפוגרפיה של
 * הפאנל לא מגיעה — היא חלה על הכותרת שבתוכו. המספר אינו תוכן אלא סימון
 * אוטומטי, ולכן גודלו וצבעו נקבעים כאן, כמו במקור.
 */
.htash .htash-native.r-num {
	font-size: 13.5px;
	line-height: 18px;
	font-weight: 600;
	color: #5FB3B0;
	display: block;
}

/*
 * והמספר עצמו. אלמנטור הופך את ה-::before של כל מכל לשכבת רקע — absolute,
 * inset:0 — ולכן הספרות ציירו בלי לתפוס גובה, ובלוק הכותרת של לוח המופעים
 * יצא נמוך ב-15 פיקסלים. כאן הוא חוזר להיות מה שהוא במקור: טקסט בשורה.
 */
.htash .htash-native.r-num::before {
	position: static;
	display: inline;
	width: auto;
	height: auto;
}

.htash .htash-native .elementor-social-icons-wrapper {
	line-height: 0;
}

/*
 * שדה טופס או ציור בתוך ווידג'ט HTML: אלמנטור עוטף אותם ב-div, והם נשארים
 * inline בתוך שורת טקסט שמוסיפה להם מרווח מלמעלה ומלמטה. במקור הם פריטים
 * בתוך מכל flex, כלומר בלוקים. שדות הטופס בעמוד המידע גבהו 73 במקום 45.
 */
.htash .htash-native.elementor-widget-html > .elementor-widget-container {
	line-height: 0;
}

.htash .htash-native.elementor-widget-html :is(input, select, textarea, svg, iframe) {
	display: block;
}

/*
 * ורוחב מינימלי: אלמנטור נותנת לכל מכל ולכל ווידג'ט min-width:0, והדפדפן
 * נותן auto — פריט flex לא מתכווץ מתחת לתוכן שלו. העיצוב סומך על ברירת
 * המחדל: בכותרת החוברת באנגלית, בטלפון, הקישור "חזרה לעמוד הבית" כתוב
 * בשורה אחת והלוגו ברוחב התמונה, ולכן רק עמודת הכותרת מתכווצת. אצלנו
 * שלושתם התכווצו יחד, הקישור נחתך והעמוד גלש הצידה. מה שהעיצוב קובע
 * בעצמו — `min-width:0` על שדה החיפוש — כתוב ב-CSS של האלמנט וגובר.
 */
.htash .htash-native.e-con,
.htash .htash-native.elementor-widget {
	min-width: auto;
}

/*
 * ושדה טופס — עוד צעד: העטיפה שלו שקופה לגמרי.
 *
 * במקור השדה עצמו הוא הפריט במכל ה-flex של העיצוב: בעמודה הוא נמתח לרוחב
 * המכל פחות השוליים שלו, ובשורה `flex:1` שכתוב עליו הוא שמרחיב אותו. כאן
 * הפריט הוא העטיפה, והשדה שבתוכה בלוק ברוחב הטבעי שלו — קווי הטופס בעמוד
 * המידע יצאו 237 פיקסלים במקום 607, ותיבת הקפיצה למופע בחוברת, ברוסית,
 * רחבה יותר מהעמודה שלה וגלשה מהמסך בטלפון. עם display:contents העטיפה
 * איננה, והשדה חוזר להיות הפריט. בעורך של אלמנטור העטיפה נשארת, כי בלי
 * תיבה אין מה ללחוץ עליו.
 */
.htash:not(.elementor-editor-active) .htash-native.elementor-widget-html:has(> :is(input, select, textarea)),
.htash:not(.elementor-editor-active) .htash-native.elementor-widget-html:has(> .elementor-widget-container > :is(input, select, textarea)),
.htash:not(.elementor-editor-active) .htash-native.elementor-widget-html:has(> .elementor-widget-container > :is(input, select, textarea)) > .elementor-widget-container {
	display: contents;
}

/*
 * ועוד תיקון משקל אחד: אלמנטור נותן לאייקון ברירת מחדל של 50 פיקסלים
 * (`.elementor-icon`), ואותו קובץ נטען אחרי הקובץ של אייקוני הרשתות — שם
 * הגודל אמור לבוא מהפאנל דרך --icon-size. שני הכללים באותו משקל, ולכן ניצח
 * האחרון והעיגולים יצאו 52 במקום 46. הכלל הזה מחזיר את מה שהפאנל קובע.
 */
.htash .htash-native .elementor-social-icon {
	font-size: var(--icon-size, 25px);
}

/*
 * ובסקשן שנבנה מחדש: אותו גובה שורה, פעם אחת בשורש.
 *
 * שם הטיפוגרפיה מגיעה מהפאנל, ולכן היא נקבעת על הווידג'ט עצמו ולא על העטיפה
 * שלו — כלל שמכוון לעטיפה היה דורס אותה. הכלל הזה יושב על שורש הסקשן בלבד
 * (e-parent), כל מה שבפנים יורש ממנו, וכל ווידג'ט שיש לו גובה שורה משלו גובר.
 * כשהוא חל גם על מכלים פנימיים הוא דרס גובה שורה שהעיצוב מוריש מאב לבנים —
 * בעמוד הכנסים זה קיצר בלוק אחד ב-113 פיקסלים.
 */
.htash .e-con.htash-native.e-parent {
	line-height: normal;
}

/*
 * מכל שהעיצוב פורש לרוחב (display:flex בלי כיוון) — באלמנטור מכל הוא עמודה
 * כברירת מחדל, ולכן הכיוון נאמר כאן. הוא נאמר כמשתנה ולא כתכונה, כדי שכלל
 * אמיתי בשאילתת מדיה — למשל .b-stage שהופך לעמודה בטלפון — עדיין יגבר עליו.
 */
.htash .e-con.htash-row {
	--flex-direction: row;
}

/*
 * לוח המופעים: כרטיס אחד מצויר לכל המופעים, והמונחים של כל מופע הם שקובעים
 * מה נראה בו. הפס הכתום, הפס האדום וכפתור הטריילר קיימים בכל כרטיס ומוסתרים
 * כברירת מחדל; המונח (last / soldout / trailer) יושב על עטיפת הפריט בלולאה,
 * ש-post_class כותב, ומחזיר את מה ששייך למופע הזה.
 */
.htash .e-loop-item .htash-band-last,
.htash .e-loop-item .htash-band-sold,
.htash .e-loop-item .htash-trailer {
	display: none;
}

.htash .e-loop-item.htash_state-last .htash-band-last,
.htash .e-loop-item.htash_state-soldout .htash-band-sold,
.htash .e-loop-item.htash_state-trailer .htash-trailer {
	display: flex;
}

/*
 * כרטיס ממלא את גובה השורה שלו, כמו במקור: שם הכרטיס עצמו הוא תא ברשת ולכן
 * נמתח, וכאן התא הוא עטיפת הפריט של הלולאה והכרטיס יושב בתוכה.
 */
.htash .htash-board .e-loop-item > .e-con {
	height: 100%;
}

/*
 * תווית הקטגוריה על הפוסטר: מופע בלי קטגוריה לא מקבל תווית ריקה. בכרטיס של
 * הלולאה התווית היא כותרת שהשדה שלה ריק.
 */
.htash .r-cattag:has(.elementor-heading-title:empty),
.htash .r-wcat:has(.elementor-heading-title:empty),
.htash .e-con.r-cattag:not(:has(.elementor-widget)),
.htash .e-con.r-wcat:not(:has(.elementor-widget)) {
	display: none;
}

/*
 * התוכנייה בעמוד האירועים: כל שורה היא פריט בלולאה על המועדים. המספר שלה
 * הוא מונה של הגיליון — שורה שהסינון מסתיר לא נספרת, בדיוק כמו במקור —
 * והצבע של הזמינות בא מהמונח שעל המועד (last / soldout).
 */
.htash .htash-events {
	counter-reset: prog;
}

.htash .htash-events .e-loop-item {
	counter-increment: prog;
}

/* The number's heading holds "00" in the template; what shows is the counter. */
.htash .htash-events .r-prognum .elementor-heading-title {
	font-size: 0 !important;
}

.htash .htash-events .r-prognum .elementor-heading-title::before {
	content: counter(prog, decimal-leading-zero);
	font-size: 11px;
}

.htash .htash-events .e-loop-item.htash_state-last .r-progstatus,
.htash .htash-events .e-loop-item.htash_state-last .r-progstatus .elementor-heading-title {
	color: #E58D33;
}

.htash .htash-events .e-loop-item.htash_state-soldout .r-progstatus,
.htash .htash-events .e-loop-item.htash_state-soldout .r-progstatus .elementor-heading-title {
	color: #EE7B6F;
}

/* The month headings the script puts between the rows span the grid. */
.htash .htash-events .htash-month {
	grid-column: 1 / -1;
}

/*
 * החוברת בעורך של אלמנטור.
 *
 * באתר עצמו רשימת העמודים מוסתרת, והסקריפט המשותף בונה ממנה ספר. בעורך הספר
 * לא נבנה — שם צריך על מה ללחוץ — ולכן העמודים מוצגים כרשת של ארבעה בשורה,
 * וכל אזור לחיץ מסומן, כדי שיהיה ברור איזו הצגה מובילה לאן. בוחרים עמוד כדי
 * להחליף את התמונה שלו, ואזור כדי לשנות את הקישור או את המיקום.
 */
.elementor-editor-active #bookbox {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.elementor-editor-active #bookbox .bk-pages {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 14px;
}

.elementor-editor-active #bookbox .bk-spot {
	background: rgba(229, 141, 51, .2);
	box-shadow: inset 0 0 0 2px #E58D33;
}

.elementor-editor-active #bookbox [data-book-loading] {
	display: none !important;
}

/*
 * סרט או מסגרת שמוצמדים למסגרת שלהם.
 *
 * הסרטונים בהירו ונגן הטריילר כתובים position:absolute; inset:0 — הם ממלאים
 * את השקופית או את חלון הנגן. אלמנטור עוטף כל ווידג'ט HTML בתיבה עם
 * position:relative, וכך התיבה הזאת, שגובהה אפס (כל מה שבתוכה מוצמד), הפכה
 * למסגרת שהסרט ממלא: הסרטונים נטענו וצוירו בגובה אפס, וההירו נשאר שחור.
 * כאן התיבה מפסיקה להיות מסגרת, והסרט ממלא את מה שהעיצוב התכוון אליו.
 */
.htash .htash-native.elementor-widget-html:has(> :is(video, iframe)[style*="position:absolute"]),
.htash .htash-native.elementor-widget-html:has(> .elementor-widget-container > :is(video, iframe)[style*="position:absolute"]),
.htash .htash-native.elementor-widget-html:has(> .elementor-widget-container > :is(video, iframe)[style*="position:absolute"]) > .elementor-widget-container {
	position: static;
}

/*
 * כותרת שהיא h1–h6 באמת (בשביל מנועי החיפוש וקוראי המסך) נראית בדיוק כמו
 * ה-div שהייתה: הגודל, המשקל, הגופן והשוליים באים מהעיצוב ולא מהתגית. תבנית
 * Hello נותנת ל-h2 גודל 2rem, משקל 500 ושוליים, והכותרות היו מתכווצות.
 * הגדרה שאלמנטור כותב לווידג'ט עצמו שוקלת יותר וגוברת, כמו קודם.
 */
.htash :is(h1, h2, h3, h4, h5, h6).elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
	break-after: auto;
}
