/**
 * התנהגות ההדר במובייל.
 *
 * המודל הוא הדר דו-שכבתי:
 *   שכבה 1 — ‏`.site-header` (לוגו, חשבון, נגישות): נגללת החוצה כרגיל,
 *            וחוזרת בהחלקה עדינה כשגוללים למעלה.
 *   שכבה 2 — ‏`.right-column` (חיפוש + תפריט בקטגוריות, תפריט בלבד
 *            בעמודי תוכן ומתכונים): נשארת מוצמדת לראש כל הזמן.
 *
 * עד כאן השכבה הראשונה הפכה ל-sticky ברגע שגללו למעלה, ולכן **קפצה פנימה
 * במכה**. עכשיו היא קבועה ומוזזת ב-transform, כך שהכניסה והיציאה חלקות.
 */

@media (max-width: 599px) {

	/* ---------- שכבה 1 ---------- */

	.site-header {
		/*
		 * 🔴 ‏z-index גבוה מהתפריט (10) — בלעדיו התפריט, שרקעו לבן, נצבע
		 * *מעל* ההדר וזה נראה כאילו ההדר שקוף.
		 */
		position: relative;
		z-index: 30;
	}

	/*
	 * מרגע שגללנו מעבר לגובה ההדר הוא יוצא מהזרימה ונעשה קבוע — מוסתר
	 * מעל המסך. ‏`--ed-header-h` מתווסף כריפוד ל-body באותו רגע, ולכן
	 * המסמך לא קופץ: מה שהוסר מהזרימה מוחזר כריפוד.
	 */
	body.ed-header-pinned .site-header {
		position: fixed;
		inset-inline: 0;
		top: 0;
		transform: translateY(-100%);
		transition: transform .3s cubic-bezier(.22, .61, .36, 1);
		box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
		will-change: transform;
	}

	body.ed-header-pinned {
		padding-block-start: var(--ed-header-h, 0px);
	}

	/* גלילה למעלה — ההדר נכנס בהחלקה. ‏scroll-top נקבע ע"י main.js. */
	body.ed-header-pinned.scroll-top .site-header {
		transform: translateY(0);
	}

	/* ---------- שכבה 2 ---------- */

	/*
	 * האזור הסטיקי יורד מתחת להדר כשהוא מוצג, וחוזר לראש כשהוא מוסתר.
	 * ⚠️ ‏main.js מציב כאן `top` בסגנון inline, ולכן צריך `!important`
	 * כדי שהערך שלנו ינצח בלי לשכתב את הקובץ הממוזער.
	 */
	body.ed-header-pinned .main-content .right-column {
		top: 0 !important;
		transition: top .3s cubic-bezier(.22, .61, .36, 1);
	}

	body.ed-header-pinned.scroll-top .main-content .right-column {
		top: var(--ed-header-h, 0px) !important;
	}

	/* השכבה הסטיקית חייבת רקע אטום, אחרת התוכן נראה מבעדה */
	.main-content .right-column {
		background: var(--main-header-bg, #fff);
	}

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

	/*
	 * 🔑 התבנית מסתירה בטלפון את כל עמודת התפריט בעמודי תוכן
	 * (`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;
	}

	/*
	 * ה-margin העליון של רשימת התפריט נועד להפריד אותה משדה החיפוש.
	 * כשהחיפוש מוסתר הוא הופך לשטח מת בראש העמוד — מבטלים אותו,
	 * ומצמצמים גם את ריפוד העמודה.
	 */
	body.deliz-compact-header .main-content .right-column {
		padding-block-start: 12px;
	}

	/* קצת אוויר מעל התפריט — גם בדף הבית, שם הוא ישב צמוד לחיפוש */
	.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;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ed-header-pinned .site-header,
	body.ed-header-pinned .main-content .right-column {
		transition: none;
	}
}