/* =========================================================
   Компонент: шапка
   Макет: «UI Kit - Header Footer» — Zustand 1 / Zustand 2
   ========================================================= */

.phm-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--phm-beige);
	border-bottom: 1px solid var(--phm-rose);
	transition:
		background-color var(--phm-dur) var(--phm-ease),
		border-color var(--phm-dur) var(--phm-ease),
		box-shadow var(--phm-dur) var(--phm-ease);
}

/* Три зони: лого зліва, меню й дії — праворуч.
   Ліва колонка забирає весь вільний простір, тож меню притискається до
   мови й кнопки з невеликим проміжком (--phm-header-gap), а не висить
   посеред порожнечі. */
.phm-header__inner {
	/* Над панеллю мобільного меню, щоб бургер лишався доступним */
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--phm-header-gap);
	height: var(--phm-header-h);
	transition: height var(--phm-dur) var(--phm-ease);

	/* Прив'язка прокрутки (scroll anchoring) компенсує зміну висоти шапки
	   й повертає scrollY назад за поріг — шапка стискається, розтискається
	   і так по колу. Саме через це вона мигтіла при скролі вгору. */
	overflow-anchor: none;
}

.phm-header__inner > .phm-logo {
	grid-column: 1;
	justify-self: start;
}

.phm-header__inner > .phm-nav {
	grid-column: 2;
	justify-self: center;
}

.phm-header__inner > .phm-header__actions {
	grid-column: 3;
	justify-self: end;
}

.phm-header__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-shrink: 0;
	transition: gap var(--phm-dur) var(--phm-ease);
}

/* ---- Zustand 2 — «gescrollt» ---- */

.phm-header.is-compact {
	background: var(--phm-white);
	border-bottom-color: transparent;
	box-shadow: var(--phm-shadow-header);
}

.phm-header.is-compact .phm-header__inner {
	height: var(--phm-header-h-compact);
}

.phm-header.is-compact .phm-header__actions {
	gap: 18px;
}

/* Лого — цільне зображення, тож у компактному стані просто меншає.
   Клейм із нього вже не сховати (у макеті він зникав), але з файлу
   замовниці знак і текст нероздільні. */
.phm-header.is-compact .phm-logo__img {
	height: 40px;
}

.phm-header.is-compact .phm-nav__list {
	gap: calc(var(--phm-nav-gap) - 4px);
}

.phm-header.is-compact .phm-nav__link {
	font-size: 14px;
}

.phm-header.is-compact .phm-header__cta {
	font-size: 13px;
	padding: 12px 26px;
}

/* Шапка не має брати участі у scroll anchoring — див. коментар вище */
.phm-layout-slot--header,
.phm-header {
	overflow-anchor: none;
}

/* Кнопка в шапці менша за дефолтну primary: у макеті 16/32 */
.phm-header__cta {
	padding: 16px 32px;
}

/* ---- Бургер ---- */

/* Іконка «закрити» показується лише коли меню відкрите */
.phm-header__burger .phm-icon--close,
.phm-header__burger[aria-expanded="true"] .phm-icon--burger {
	display: none;
}

.phm-header__burger[aria-expanded="true"] .phm-icon--close {
	display: inline-block;
}


.phm-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--phm-rose);
	border-radius: var(--phm-radius-btn);
	color: var(--phm-primary-dark);
	cursor: pointer;
	transition: border-color var(--phm-dur) var(--phm-ease), color var(--phm-dur) var(--phm-ease);
}

.phm-header__burger:hover,
.phm-header__burger:focus-visible {
	border-color: var(--phm-primary);
	color: var(--phm-primary);
}

/* ---- ≤1024px: меню згортається в бургер ---- */

@media (max-width: 1024px) {
	/* Меню сховане — лишаються дві зони: лого і дії */
	.phm-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.phm-header__inner > .phm-header__actions {
		grid-column: 2;
	}

	.phm-header__burger {
		display: inline-flex;
	}

	.phm-header__actions {
		gap: 16px;
	}

	/* Бургер відкриває меню — там і мова, і кнопка */
	.phm-header__actions .phm-lang {
		display: none;
	}

	.phm-header__cta {
		padding: 14px 24px;
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.phm-header__inner {
		height: var(--phm-header-h-compact);
	}

	/* На мобільних кнопка «Termin buchen» живе в липкій нижній панелі */
	.phm-header__cta {
		display: none;
	}
}

/* Поверх відкритого мобільного меню шапка лишається клікабельною.
   Саме fixed, а не sticky: блокування скролу (overflow: hidden на html)
   вимикає sticky, і бар із кнопкою «×» поїхав би за межі екрана. */
.phm-scroll-locked .phm-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 950;
	background: var(--phm-beige);
	box-shadow: none;
	border-bottom-color: var(--phm-rose);
}

/* Нелипкий варіант — якщо вимкнути в Elementor */
.phm-header--static {
	position: static;
}

/* =========================================================
   Шапка всередині макета Elementor
   Липкість живе на слоті, бо контейнери Elementor мають
   рівно висоту шапки й sticky в них не має ходу.
   ========================================================= */

.phm-layout-slot--header {
	position: sticky;
	top: 0;
	z-index: 500;
}

.phm-layout-slot--header .phm-header {
	position: static;
}

.phm-scroll-locked .phm-layout-slot--header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 950;
}

/* Усередині слота шапка лишається статичною і в цьому стані */
.phm-scroll-locked .phm-layout-slot--header .phm-header {
	position: static;
}