/**
 * CalmFlow Savoy UX Kit — модуль «Меню шапки».
 *
 * Значення приходять CSS-змінними (інлайн-блок на самому меню), тому цей файл
 * статичний і кешується. Нуль JS.
 *
 * Скоуп навмисно вузький: `#header [id^="header-menu"]` — це шапка й лише її меню
 * (префікс покриває і header-menu-1, і майбутній -2, але не меню підвалу).
 *
 * ВАЖЛИВО про каскад: CSS теми підключається ПІЗНІШЕ за наш, тож там, де тема
 * оголошує ту саму властивість, ми беремо специфічністю (id + атрибут + клас),
 * а не `!important`. Там, де тема ставить фізичні властивості (left/right/width),
 * ми теж ставимо фізичні — логічні вона б перебила.
 *
 * Правила діють лише на ширинах, де тема показує десктопне меню.
 */

@media ( min-width: 1000px ) {

	/* ---------------------------------------------------------- верхній рядок */

	#header [id^="header-menu"] > ul > li > .ct-menu-link {
		font-family: var( --cfhm-top-font, inherit );
		font-size: var( --cfhm-top-size, 15px );
		font-weight: var( --cfhm-top-weight, 500 );
		text-transform: var( --cfhm-top-transform, uppercase );
		letter-spacing: var( --cfhm-top-ls, 0.08em );
		padding-left: var( --cfhm-top-pad, 20px );
		padding-right: var( --cfhm-top-pad, 20px );
		color: var( --cfhm-top-color, #06070E );
		transition: color 0.2s ease;

		/* Тема ставить на body `-webkit-font-smoothing: antialiased`; на Windows це
		   робить темний текст на світлому тоншим і зернистішим. Для меню повертаємо
		   типове згладжування системи. ⚠️ Працює лише у Chrome/Edge/Safari:
		   Firefox цю властивість ІГНОРУЄ (у нього своє растрування через DirectWrite,
		   і жодного CSS-перемикача для нього не існує). `text-rendering` навмисно НЕ
		   чіпаємо: у Firefox він не згладжує, лише вмикає кернінг/лігатури й може
		   зробити відстані нерівними. */
		-webkit-font-smoothing: var( --cfhm-smoothing, auto );
		-moz-osx-font-smoothing: var( --cfhm-smoothing-moz, auto );
	}

	/* Тема фарбує пункти через власні змінні, які скоупить на КОЖЕН `.ct-menu-link`
	   (перевірено: на контейнері значення інше). Тому перевизначаємо їх на тому ж
	   рівні — так колір іде рідним механізмом теми, без боротьби правил. */
	#header [id^="header-menu"] > ul > li > .ct-menu-link {
		--theme-link-initial-color: var( --cfhm-top-color, #06070E );
		--theme-link-hover-color: var( --cfhm-top-hover, #3996AD );
	}

	#header [id^="header-menu"] > ul > li > .ct-menu-link:hover,
	#header [id^="header-menu"] > ul > li > .ct-menu-link:focus-visible,
	#header [id^="header-menu"] > ul > li.ct-active > .ct-menu-link {
		color: var( --cfhm-top-hover, #3996AD );
	}

	#header [id^="header-menu"] > ul > li.current-menu-item > .ct-menu-link,
	#header [id^="header-menu"] > ul > li.current-menu-ancestor > .ct-menu-link,
	#header [id^="header-menu"] > ul > li.current-menu-parent > .ct-menu-link {
		color: var( --cfhm-top-current, #3996AD );
	}

	#header [id^="header-menu"] .ct-menu-link:focus-visible {
		outline: 2px solid var( --cfhm-top-hover, #3996AD );
		outline-offset: 3px;
	}

	/* Лінія під пунктом — це індикатор САМОЇ теми: у режимі «Тип 2» Blocksy малює
	   `a::after` і керує ним через власні змінні (показ/приховування на hover і в
	   поточному розділі тема бере на себе). Тому ми не малюємо свій псевдоелемент,
	   а лише задаємо змінні — так само, як з розміром іконки вішліста.
	   Товщина 0 = лінії немає (налаштування «Лінія під пунктом» вимкнено).
	   Ширина — по тексту: повна ширина пункта мінус його бічні відступи. */
	#header [id^="header-menu"] {
		--menu-indicator-hover-color: var( --cfhm-line-color, #3996AD );
		--menu-indicator-active-color: var( --cfhm-line-color, #3996AD );
		--menu-indicator-height: var( --cfhm-line-h, 1px );
		--menu-indicator-width: calc( 100% - 2 * var( --cfhm-top-pad, 20px ) );
		--menu-indicator-margin: 0 auto;
	}

	/* ------------------------------------------------------------ шеврон */

	#header [id^="header-menu"] .ct-toggle-dropdown-desktop svg {
		transition: transform var( --cfhm-ms, 170ms ) var( --cfhm-ease, ease );
	}

	#header [id^="header-menu"] li[class*="animated-submenu"].ct-active > .ct-menu-link .ct-toggle-dropdown-desktop svg,
	#header [id^="header-menu"] li[class*="animated-submenu"]:has( :focus-visible ) > .ct-menu-link .ct-toggle-dropdown-desktop svg {
		transform: rotate( 180deg );
	}

	/* -------------------------------------------------------- панель випадайки */

	#header [id^="header-menu"] .sub-menu {
		min-width: var( --cfhm-drop-minw, 220px );
		padding-top: 6px;
		padding-bottom: 6px;
		background: var( --cfhm-drop-bg, #fff );
		border: var( --cfhm-drop-border-w, 1px ) solid var( --cfhm-drop-border, rgba( 57, 150, 173, 0.22 ) );
		border-radius: var( --cfhm-drop-radius, 12px );
		box-shadow: var( --cfhm-drop-shadow, 0 16px 36px rgba( 8, 12, 16, 0.1 ) );
	}

	#header [id^="header-menu"] .sub-menu .ct-menu-link {
		font-family: var( --cfhm-drop-font, inherit );
		font-size: var( --cfhm-drop-size, 14px );
		font-weight: var( --cfhm-drop-weight, 400 );
		text-transform: var( --cfhm-drop-transform, none );
		letter-spacing: normal;
		padding: var( --cfhm-drop-pad-y, 10px ) var( --cfhm-drop-pad-x, 18px );
		color: var( --cfhm-drop-color, #06070E );
		border-radius: 8px;
		-webkit-font-smoothing: var( --cfhm-smoothing, auto );
		-moz-osx-font-smoothing: var( --cfhm-smoothing-moz, auto );
		transition: color 0.18s ease, background-color 0.18s ease;
	}

	/* Підсвітка пункту не торкається країв панелі — звідси відступ у 6px. */
	#header [id^="header-menu"] .sub-menu > li {
		margin-left: 6px;
		margin-right: 6px;
	}

	#header [id^="header-menu"] .sub-menu .ct-menu-link:hover,
	#header [id^="header-menu"] .sub-menu .ct-menu-link:focus-visible,
	#header [id^="header-menu"] .sub-menu > li.current-menu-item > .ct-menu-link {
		color: var( --cfhm-drop-hover, #3996AD );
		background-color: var( --cfhm-drop-item-bg, rgba( 57, 150, 173, 0.1 ) );
	}

	/* ------------------------------------------------------------- поява */

	/* Тема анімує ще й `height` та `margin` — саме через них випадайка сіпається.
	   Лишаємо тільки прозорість і зсув. `visibility` не анімуємо, а ЗАТРИМУЄМО:
	   інакше панель зникала б миттєво, обрізавши згасання. */
	#header [id^="header-menu"] li[class*="animated-submenu"] > .sub-menu {
		transform: translateY( calc( -1 * var( --cfhm-offset, 6px ) ) );
		transition:
			opacity var( --cfhm-ms, 170ms ) var( --cfhm-ease, ease ),
			transform var( --cfhm-ms, 170ms ) var( --cfhm-ease, ease ),
			visibility 0s linear var( --cfhm-ms, 170ms );
	}

	/* Тема відкриває випадайку класом `.ct-active` (не CSS-hover'ом), тож головний
	   стан чіпляємо до нього. Другий селектор — наш, для КЛАВІАТУРИ.
	   ВАЖЛИВО: саме `:has(:focus-visible)`, а не `:focus-within`. Клік мишею теж
	   ставить фокус на посилання, тож із `:focus-within` панель залипала відкритою
	   до кліку десь поза меню — виглядало так, ніби випадайка відкривається кліком
	   і не закривається. `:focus-visible` спрацьовує лише на клавіатурний фокус. */
	#header [id^="header-menu"] li[class*="animated-submenu"].ct-active > .sub-menu,
	#header [id^="header-menu"] li[class*="animated-submenu"]:has( :focus-visible ) > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition:
			opacity var( --cfhm-ms, 170ms ) var( --cfhm-ease, ease ),
			transform var( --cfhm-ms, 170ms ) var( --cfhm-ease, ease ),
			visibility 0s;
	}

	@media ( prefers-reduced-motion: reduce ) {

		#header [id^="header-menu"] li[class*="animated-submenu"] > .sub-menu {
			transform: none;
			transition: opacity 0.01ms linear, visibility 0s linear 0.01ms;
		}

		#header [id^="header-menu"] li[class*="animated-submenu"].ct-active > .sub-menu,
		#header [id^="header-menu"] li[class*="animated-submenu"]:has( :focus-visible ) > .sub-menu {
			transition: opacity 0.01ms linear, visibility 0s;
		}

		#header [id^="header-menu"] .ct-toggle-dropdown-desktop svg,
		#header [id^="header-menu"] .sub-menu .ct-menu-link,
		#header [id^="header-menu"] > ul > li > .ct-menu-link {
			transition: none;
		}
	}
}