/*
 * Розкладка головного меню в шапці (десктоп).
 *
 * Шапка зібрана в Elementor з двох колонок: «лого + меню» і «телефон +
 * перемикач мов». Обидві мають flex: 0 0 auto, тобто не тягнуться і не
 * стискаються. Перша фіксується на ~609 px, з яких меню лишається 477 px,
 * і семи пунктам цього замало — вони перекидались у другий рядок, а шапка
 * виростала вдвічі (136 px замість 64 px).
 *
 * При цьому друга колонка займає 492 px, маючи всього ~232 px вмісту:
 * близько 260 px простою поруч із меню, якому місця бракує.
 *
 * Тому: дозволяємо колонці з меню рости, колонці з телефоном — стискатися
 * до свого вмісту, і трохи ущільнюємо типографіку меню на вужчих екранах.
 *
 * Правимо стилями, а не редагуванням _elementor_data: розкладку шапки
 * власник може міняти в редакторі Elementor, і правка в базі була б
 * затерта першим же збереженням шаблону.
 */

/* Обидві колонки Elementor задає як flex: 0 0 auto — вони не тягнуться і
   не стискаються.
 *
 * Колонці з меню лишаємо min-width: auto (тобто min-content): при nowrap
 * це повна ширина меню, і flex-розкладка зобов'язана її виділити. Без
 * цього колонка росла лише до вільного місця, а пункти просто вилазили
 * за її межу поверх блоку з телефоном.
 *
 * Клас віджета саме `elementor-widget-navigation-menu` — не `...-nav-menu`.
 */
/* Колонка з меню забирає все, що лишилось після блоку з телефоном.
   Так ширина не залежить від кількості пунктів: додали пункт — меню
   отримало більше місця, а не поїхало на сусідній блок. */
#masthead .e-con-inner > .e-con > .e-con.e-child:has(.elementor-widget-navigation-menu) {
	flex: 1 1 auto;
	min-width: 0;
}

/* Колонка з телефоном звужується до власного вмісту (~290 px замість
   492 px) і віддає простій меню. Номер і перемикач мов лишаються
   видимими; max-width страхує від розповзання, якщо текст колись
   подовшає. */
#masthead .e-con-inner > .e-con > .e-con.e-child:not(:has(.elementor-widget-navigation-menu)) {
	flex: 0 0 auto;
	width: max-content;
	max-width: 36%;
}

/* Меню — один рядок. */
#masthead .hfe-nav-menu {
	flex-wrap: nowrap;
	min-width: 0;
}

/* Напис «Телефонуйте зараз!» має в дизайні Elementor жорсткий
 * margin-left: -31px і через це вилазить за ліву межу своєї колонки —
 * рівно в зону, де закінчується меню. Поки меню було вузьким, це не
 * впадало в око; щойно воно отримало належну ширину, останній пункт
 * («FAQ») опинився під цим написом.
 *
 * Прибираємо саме зсув, а не ширину колонки: напис стає в одну колонку
 * з номером телефону під ним, що й виглядає рівніше.
 */
#masthead .elementor-icon-box-title {
	margin-left: 0;
}

#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item {
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Випадне підменю («Послуги»)
 *
 * За замовчуванням це вузька біла коробка 220 px із нульовим правим
 * полем: довга назва «Вивіз будівельного сміття Миколаїв» ламалася на
 * два рядки й упиралась у край. Розширюємо, додаємо поля, заокруглення
 * і помітну тінь, щоб меню читалось як накладка над контентом.
 * ------------------------------------------------------------------ */

#masthead .hfe-nav-menu .sub-menu {
	flex-wrap: wrap;
	/* Найдовша назва — «Вивіз будівельного сміття Миколаїв»: 270 px тексту
	   при 15 px Roboto плюс 40 px полів = 310 px. Округлено вгору, щоб
	   лягала в один рядок із невеликим запасом. */
	min-width: 320px;
	padding: 8px 0;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(50, 50, 50, .16);
	overflow: hidden;
}

#masthead .hfe-nav-menu .sub-menu .menu-item > a.hfe-sub-menu-item {
	white-space: normal;
	padding: 11px 20px;
	font-size: 15px;
	line-height: 1.4;
}

/* Підсвітка рядка підменю на наведення — інакше незрозуміло, що саме
   зараз під курсором. */
#masthead .hfe-nav-menu .sub-menu .menu-item > a.hfe-sub-menu-item:hover,
#masthead .hfe-nav-menu .sub-menu .menu-item > a.hfe-sub-menu-item:focus-visible {
	background: var(--e-global-color-889ecbc, #F7F7FF);
}

/* Вужчі десктопи: ущільнюємо відступи й кегль, щоб уникнути другого рядка
   без ховання жодного пункту. */
/* Нижня межа 1025 px обов'язкова: під нею працює мобільна шапка з
   бургером, і ущільнення десктопного меню там лише шкодить (зокрема
   правило для логотипа розтягувало мобільну шапку до 116 px). */
@media (min-width: 1025px) and (max-width: 1440px) {

	#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 15px;
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {

	#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 14px;
	}

	/* Логотип трохи менший — віддає меню ще ~25 px. */
	#masthead .hfe-site-logo-img {
		max-width: 96px;
	}
}

/* Планшет і телефон: десктопна колонка прихована, працює окремий
   контейнер із бургером і власними стилями HFE. Знімаємо обмеження в один
   рядок, щоб нічого не нав'язати випадному меню. */
@media (max-width: 1024px) {

	#masthead .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		flex-wrap: wrap;
		min-width: 0;
	}

	#masthead .e-con-inner > .e-con > .e-con.e-child:has(.elementor-widget-navigation-menu) {
		flex-grow: 0;
		flex-shrink: 1;
		min-width: 0;
	}

	#masthead .hfe-nav-menu .menu-item > a.hfe-menu-item {
		white-space: normal;
		font-size: inherit;
	}
}