/**
 * ההדר במובייל (עד 599px).
 *
 * שתי שכבות:
 *   שכבה 1 — `.site-header` (לוגו, חשבון, נגישות): נגללת החוצה כרגיל. אחרי
 *            שיצאה כולה מהמסך היא הופכת ל-sticky ומוסתרת מעל המסך, חוזרת
 *            בהחלקה בגלילה למעלה, ובחזרה לראש העמוד שבה לזרימה — בלי קפיצה.
 *   שכבה 2 — `.right-column` (חיפוש + תפריט; בעמודי תוכן ומתכונים תפריט
 *            בלבד): מוצמדת לראש המסך, ויושבת מתחת להדר כשהוא מוצג.
 *
 * 🔑 בעל בית אחד. ‏mobile-header.js קובע את המצב במחלקות על body:
 *   ed-hdr-sticky — ההדר sticky (התוכן שלו מוזז ב-translateY(-100%)).
 *   ed-hdr-shown  — ההדר מוצג (גלילה למעלה); התפריט ב-top = גובה ההדר.
 *   ed-hdr-anim   — מעברים מונפשים; נדלקת רק *אחרי* ההצמדה, כדי שהכניסה
 *                   למצב המוסתר לא תצויר — זה היה ה"פלאש" של ההדר.
 *
 * 🔑 קליפה ותוכן: האלמנט ה-sticky (הקליפה) לעולם אינו מונפש — מונפש רק
 * התוכן שבתוכו (`.container` בהדר, `.ed-col-inner` בתפריט, עטיפה שה-JS
 * יוצר). ב-WebKit (אייפון) transform מונפש על אלמנט sticky בזמן גלילה קופץ
 * במקום להחליק — המיקום ה-sticky והאנימציה נלחמים על אותה שכבה. הרקע
 * והריפוד עוברים לתוכן, כדי שהוא יזוז כיחידה אחת ובלי פסים.
 *
 * 🔴 למה sticky ולא fixed (גרסה 1): ריפוד ל-body + הזזת התפריט ב-transform
 * פתחו רווח לבן ליד ראש העמוד שנסגר בקפיצה, והגובה המעוגל השאיר חצי
 * פיקסל. עם sticky אין שינוי פריסה: ההדר תופס את מקומו גם כשהוא מוסתר,
 * התפריט מוצמד ב-`top` (ערך פריסה מדויק), והחזרה לראש העמוד רציפה.
 *
 * 🔴 הכללים המקוריים של התבנית ל-body.scroll-top (sticky ב-z-index 2,
 * ותפריט ב-top:49px) מנוטרלים כאן — הדר ב-z-index 2 נצבע *מתחת* לתוכן
 * עם z-index 3 (מונה הלייקים על כרטיס מתכון): ה"שקיפות".
 */

@media (max-width: 599px) {

	/* ---------- שכבה 1: ההדר ---------- */

	/* בזרימה — ובלי צל ובלי המיקום ש-scroll-top של התבנית מנסה לתת */
	.site-header,
	body.scroll-top .site-header {
		position: relative;
		top: auto;
		z-index: 30;
		box-shadow: none;
	}

	/* הקליפה: נדבקת לראש המסך; שקופה ובלי ריפוד — הכול עובר לתוכן */
	body.ed-hdr-sticky .site-header {
		position: sticky;
		top: 0;
		padding: 0 !important;
		background: transparent !important;
		border: 0;
		box-shadow: none;
	}

	/* מוסתר — הקליפה השקופה לא חוסמת את התפריט שמתחתיה */
	body.ed-hdr-sticky:not(.ed-hdr-shown) .site-header {
		pointer-events: none;
	}

	/* התוכן: הרקע והריפוד המקוריים (נמדדים ב-JS), והוא זה שמחליק */
	body.ed-hdr-sticky .site-header > .container {
		background-color: var(--ed-hdr-bg, var(--mobile-main-header-bg, var(--main-header-bg, #fff)));
		padding-block: var(--ed-hdr-pt, 8px) var(--ed-hdr-pb, 8px);
		transform: translateY(-100%);
	}

	body.ed-hdr-sticky.ed-hdr-shown .site-header > .container {
		transform: none;
	}

	body.ed-hdr-sticky.ed-hdr-anim .site-header > .container {
		transition: transform .28s cubic-bezier(.22, .61, .36, 1);
	}

	/* ---------- שכבה 2: התפריט ---------- */

	/*
	 * ‏main.js כותב `top` בסגנון inline כשגוללים למעלה — לכן !important.
	 * הרקע אטום ובצבע ההדר, אחרת התוכן נראה מבעדו.
	 *
	 * 🔴 הריפוד מאופס כאן, ב-CSS, ולא רק אחרי שה-JS עוטף את העמודה. התבנית
	 * נותנת לעמודה ריפוד (15px למעלה, 10px בצדדים); כשהאיפוס חיכה למחלקה
	 * שה-JS מוסיף, הציור הראשון באייפון היה עם הריפוד, ורגע אחר כך התפריט
	 * "קפץ" 15px למעלה ו-10px ימינה — הקפיצה בכניסה לכל עמוד (הקלטה 23/09).
	 * הכלל: מה שרואים לפני שה-JS רץ חייב להיות זהה למה שרואים אחריו.
	 */
	.main-content .right-column,
	body.scroll-top .main-content .right-column {
		top: 0 !important;
		background: var(--main-header-bg, #fff);
		padding: 0 !important;
	}

	/* אחרי שה-JS עטף את התוכן: הרקע עובר לעטיפה, הקליפה שקופה */
	.main-content .right-column.ed-hdr-wrapped {
		background: transparent !important;
	}

	.ed-col-inner {
		background: var(--main-header-bg, #fff);
		display: flow-root; /* השוליים של החיפוש נשארים בתוך העטיפה — הרקע מכסה אותם */
	}

	/*
	 * החיפוש ברוחב המוצרים: רשת המוצרים מרופדת 10px מכל צד, והחיפוש נגע
	 * בשני קצוות המסך (ג'ורג', 23/09). התבנית נותנת לו width:100% — מחליפים
	 * ב-auto עם שוליים זהים לריפוד הרשת.
	 */
	.main-content .right-column .ed-ajax-search {
		width: auto;
		margin-inline: 10px;
	}

	/*
	 * כשההדר מוצמד התפריט תמיד ב-top = גובה ההדר (מדויק, לא מעוגל — עיגול
	 * השאיר חצי פיקסל). כשההדר מוסתר התוכן מוזז למעלה בדיוק בגובה הזה —
	 * ויזואלית בראש המסך; כשההדר מוצג — מתחתיו. אותו מעבר, אותו תזמון.
	 */
	body.ed-hdr-sticky .main-content .right-column {
		top: var(--ed-header-h, 0px) !important;
	}

	body.ed-hdr-sticky .ed-col-inner {
		transform: translateY(calc(-1 * var(--ed-header-h, 0px)));
	}

	body.ed-hdr-sticky.ed-hdr-shown .ed-col-inner {
		transform: none;
	}

	body.ed-hdr-sticky.ed-hdr-anim .ed-col-inner {
		transition: transform .28s cubic-bezier(.22, .61, .36, 1);
	}

	/*
	 * בעמודי תוכן, מוצר ומתכון `.site-content` מרופד בצדדים, והתפריט ישב
	 * "בתוך" רווח לבן. פורשים אותו לקצוות — כמו בקטגוריה ובעמוד המתכונים,
	 * שבהם אין ריפוד: רוחב 100vw, והזזה החוצה ב-`50% - 50vw` = חצי רוחב
	 * המכל פחות חצי המסך = בדיוק ריפוד הצד של המכל, יהיה אשר יהיה.
	 * טהור-CSS בכוונה: בלי מדידה ב-JS אין פער בין הציור הראשון לסופי.
	 * (חישוב `100% + ריפוד` הזיז את העמודה במקום להרחיב אותה.)
	 */
	body:not(.home):not(.archive) .site-content .main-content .right-column {
		width: 100vw;
		max-width: 100vw;
		margin-inline-start: calc(50% - 50vw);
		box-sizing: border-box;
	}

	/*
	 * הרווח הקטן של הפריט הראשון מהקצה (כמו בקטגוריה / meatbrain) מגיע
	 * מה-`padding-inline-start` של הרשימה — אבל הוא "נבלע" כשהרשימה גולשת
	 * מעט מעבר לרוחב העמודה. כופים border-box ורוחב מלא על שרשרת התפריט
	 * כדי שהריפוד יופיע בפועל.
	 */
	.main-content .right-column .menu-block,
	.main-content .right-column .ed-mp-sidebar,
	.main-content ul.ed-mp__menu {
		max-width: 100%;
		box-sizing: border-box;
	}

	/*
	 * 🔴 התבנית נותנת ל-.ed-mp-sidebar ‏margin-inline-start:-15px — שריד מהזמן
	 * שלעמודה היה ריפוד 15px. היום לעמודה אין ריפוד, ולכן הרשימה חורגת 15px
	 * מעבר לקצה הימני: הריפוד של הפריט הראשון נדחף אל מחוץ למסך (הפריט
	 * "צמוד לקצה"), הרקע הלבן מתחיל 15px מהקצה השמאלי, ויש גלישה אופקית
	 * שאייפון נותן לגלול אליה. מאפסים — הרשימה ממלאת את העמודה בדיוק,
	 * והפריט הראשון מתחיל ב-15px מהקצה (ה-padding שלה). זהה בכל העמודים.
	 */
	.main-content .menu-block .ed-mp-sidebar {
		margin-inline-start: 0;
	}

	/* ---------- עמודי תוכן ומתכונים: תפריט בלי חיפוש ---------- */

	/*
	 * 🔑 התבנית מסתירה בטלפון את כל עמודת התפריט בעמודי תוכן
	 * (`body.page:not(.home) … .right-column { display:none }`). הדרישה היא
	 * שהתפריט יישאר מוצמד גם שם — לכן מציגים אותה, ומסתירים בתוכה רק את
	 * החיפוש. הסלקטור ארוך בכוונה: הוא חייב לנצח את זה של התבנית.
	 */
	body.page:not(.home).deliz-compact-header .site-content .main-content .right-column {
		display: block;
	}

	/*
	 * 🔑 הכלל יושב כאן ולא ב-recipes.css: הקובץ ההוא נטען רק בעמודי מתכון,
	 * ולכן בעמוד תוכן החיפוש נשאר גלוי. הקובץ הזה נטען בכל עמוד.
	 */
	body.deliz-compact-header .search.ed-ajax-search {
		display: none;
	}

	/*
	 * בלי ריפוד מעל התפריט כשאין חיפוש — הריפוד צויר כפס בצבע ההדר מעל
	 * הקטגוריות. האוויר הקטן מעל הפריטים (6px) הוא בתוך הרשימה הלבנה.
	 */
	.main-content .menu-block ul.ed-mp__menu {
		padding-block-start: 6px;
	}

	body.deliz-compact-header .main-content .menu-block ul.ed-mp__menu {
		margin-block-start: 0;
	}

	/*
	 * עמוד מתכון: התבנית נותנת לעמודי תוכן 25px מעל התוכן (`body .site-content`),
	 * ובמובייל זה נראה כרצועה לבנה בין ההדר לתפריט. לעמוד המתכונים אין אותה.
	 */
	body.single-deliz_recipe .site-content {
		margin-block-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ed-hdr-sticky .site-header > .container,
	body.ed-hdr-sticky .ed-col-inner {
		transition: none !important;
	}
}