/*
 * עיצוב הכותרת והתפריט הראשי.
 *
 * נטען בכל האתר, כולל דף הבית. Hello Elementor כבר מספקת את
 * המבנה ואת כפתור ההמבורגר (.site-navigation-toggle) ואת ה-JS
 * שמפעיל אותו, ולכן כאן רק עיצוב, בלי לגעת בהתנהגות.
 *
 * דף הבית מקבל תנועה ממומנת. הכותרת נשארת רזה בכוונה
 * כדי לא לדחוף את ה-Hero מטה ולא לפגוע בהמרות.
 */

.site-header.site-header {
	background-color: #062a45;
	border-bottom: 3px solid #39c4e5;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
	padding: 0;
}

.site-header .header-inner {
	max-width: 1180px;
	margin-inline: auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* ── לוגו ─────────────────────────────────────────── */

.site-header .site-branding {
	flex: none;
	margin: 0;
}

/* Hello Elementor מסמנת את הלוגו כ-hide כשהוא לא מוגדר
   כלוגו אתר בקסטומייזר. התמונה קיימת ב-DOM, ולכן מספיק להציג. */
.site-header .site-logo.hide {
	display: block;
}

.site-header .site-logo img {
	display: block;
	width: auto;
	height: 42px;
	border-radius: 8px;
}

/* ── תפריט, מסך רחב ──────────────────────────────── */

.site-header .site-navigation {
	flex: 1;
}

.site-header .site-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .site-navigation ul.menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .site-navigation ul.menu li a {
	display: block;
	padding: 10px 13px;
	border-radius: 8px;
	font-family: "Assistant", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #dbe9f2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header .site-navigation ul.menu li a:hover,
.site-header .site-navigation ul.menu li a:focus-visible {
	background-color: rgba(57, 196, 229, 0.16);
	color: #ffffff;
}

/* העמוד הנוכחי */
.site-header .site-navigation ul.menu li.current-menu-item > a,
.site-header .site-navigation ul.menu li.current_page_item > a {
	background-color: #39c4e5;
	color: #042b3a;
}

.site-header .site-navigation ul.menu li a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ── כפתור המבורגר ───────────────────────────────── */

.site-header .site-navigation-toggle {
	display: none;
	margin-inline-start: auto;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(57, 196, 229, 0.45);
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	position: relative;
}

/* שלושת הפסים מצוירים ב-CSS, בלי תלות בגופן אייקונים */
.site-header .site-navigation-toggle::before,
.site-header .site-navigation-toggle::after,
.site-header .site-navigation-toggle span {
	content: "";
	position: absolute;
	inset-inline: 12px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header .site-navigation-toggle::before { top: 15px; }
.site-header .site-navigation-toggle span    { top: 22px; }
.site-header .site-navigation-toggle::after  { top: 29px; }

/* מצב פתוח: הפסים הופכים ל-X.
   Hello Elementor אינה מעדכנת aria-expanded על הכפתור אלא מוסיפה
   elementor-active על ההולדר, ולכן זה הסלקטור שעובד בפועל. */
.site-header .site-navigation-toggle-holder.elementor-active .site-navigation-toggle::before {
	transform: translateY(7px) rotate(45deg);
}
.site-header .site-navigation-toggle-holder.elementor-active .site-navigation-toggle span {
	opacity: 0;
}
.site-header .site-navigation-toggle-holder.elementor-active .site-navigation-toggle::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── מובייל וטאבלט ───────────────────────────────── */

@media (max-width: 1024px) {
	.site-header .site-navigation-toggle { display: block; }

	/* התפריט הרגיל מוסתר; הנפתח של הערכה תופס את מקומו */
	.site-header > .header-inner > .site-navigation { display: none; }

	.site-header .site-navigation-dropdown {
		background-color: #062a45;
		border-top: 1px solid rgba(57, 196, 229, 0.3);
	}

	/* Hello Elementor צובעת בלבן גם את ul.menu וגם כל <a> בנפרד.
	   הרקע הכהה שהוגדר על ה-nav נשאר מתחת לרשימה ואינו נראה, ולכן
	   הצבע נקבע כאן על שלוש הרמות. בלי זה מתקבל טקסט בהיר על לבן. */
	.site-header .site-navigation-dropdown ul.menu {
		display: block;
		padding: 8px 0;
		margin: 0;
		background: #062a45;
	}

	.site-header .site-navigation-dropdown ul.menu li a {
		display: block;
		padding: 14px 22px;
		border-radius: 0;
		font-size: 17px;
		background: #062a45;
		color: #eaf4fb;
		box-shadow: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}

	.site-header .site-navigation-dropdown ul.menu li:last-child a {
		border-bottom: 0;
	}

	/* העמוד הנוכחי: ברירת המחדל של הערכה היא אפור על אפור */
	.site-header .site-navigation-dropdown ul.menu li.current-menu-item > a,
	.site-header .site-navigation-dropdown ul.menu li.current_page_item > a {
		background: #39c4e5;
		color: #042b3a;
	}

	.site-header .site-navigation-dropdown ul.menu li a:hover,
	.site-header .site-navigation-dropdown ul.menu li a:focus-visible {
		background: #0a3c60;
		color: #ffffff;
	}
}

@media (max-width: 560px) {
	.site-header .header-inner { padding: 8px 16px; }
	.site-header .site-logo img { height: 36px; }
}

/* בהדפסה אין צורך בניווט */
@media print {
	.site-header { display: none; }
}