/* =========================================================
   Компонент: головне меню (desktop)
   Макет: «UI Kit - Header Footer», Zustand 1 і Zustand 3
   ========================================================= */

.phm-nav {
	display: flex;
	align-items: center;
}

.phm-nav__list {
	display: flex;
	align-items: center;
	gap: var(--phm-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.phm-nav__item {
	position: relative;
}

.phm-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--phm-primary-dark);
	white-space: nowrap;
	padding-block: 6px;
}

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

/* Тонке підкреслення активного пункту — делікатний акцент рожевим */
.phm-nav__link.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--phm-rose);
}

/* ---- Випадаюче меню ---- */

.phm-nav__dropdown {
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: 340px;
	background: var(--phm-white);
	border-radius: var(--phm-radius);
	box-shadow: var(--phm-shadow-card-strong);
	padding: 16px 0;
	list-style: none;
	margin: 0;
	z-index: 20;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--phm-dur) var(--phm-ease),
		transform var(--phm-dur) var(--phm-ease),
		visibility var(--phm-dur) var(--phm-ease);
}

/* Невидимий місток, щоб курсор не «провалювався» дорогою до списку */
.phm-nav__item--has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 20px;
}

.phm-nav__item--has-children:hover .phm-nav__dropdown,
.phm-nav__item--has-children:focus-within .phm-nav__dropdown,
.phm-nav__item--has-children.is-open .phm-nav__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.phm-nav__item--has-children:hover .phm-nav__chevron,
.phm-nav__item--has-children:focus-within .phm-nav__chevron,
.phm-nav__item--has-children.is-open .phm-nav__chevron {
	transform: rotate(180deg);
}

.phm-nav__item--has-children:hover > .phm-nav__link,
.phm-nav__item--has-children.is-open > .phm-nav__link {
	color: var(--phm-primary);
}

.phm-nav__sublink {
	display: block;
	padding: 13px 32px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--phm-text);
	transition: background-color var(--phm-dur) var(--phm-ease), color var(--phm-dur) var(--phm-ease);
}

.phm-nav__sublink:hover,
.phm-nav__sublink:focus-visible {
	background: var(--phm-mint);
	color: var(--phm-primary-dark);
}

/* Перший пункт — «Alle Leistungen», під ним розділювач як у макеті */
.phm-nav__subitem:first-child .phm-nav__sublink {
	font-weight: 500;
	color: var(--phm-primary-dark);
}

.phm-nav__subitem:first-child::after {
	content: "";
	display: block;
	height: 1px;
	background: var(--phm-rose);
	margin: 8px 32px;
}

/* ---- Нижче 1024px замість меню — бургер ---- */

@media (max-width: 1024px) {
	.phm-nav {
		display: none;
	}
}