/*
 * Desktop megamenu in the header bottom row: .wa-megamenu, .wa-megamenu__list, .wa-megamenu-item,
 * .wa-megamenu__link(--plain), __link-text, __icon, .wa-megamenu__panel(.is-open), __panel-container, __panel-content,
 * .wa-megamenu-list, .wa-megamenu-list__list. Behaviour: vendored accessible-megamenu via assets/js/megamenu.js.
 * Ported from Oxygen template 38 + snippet 695025 (stays active and also matches .wa-megamenu-item / .wa-megamenu-list).
 */

/* megamenu.js only initialises the plugin while this is "hidden" (i.e. while the menu is visible on desktop). */
.wa-megamenu {
	width: 100%;
	backface-visibility: hidden;
}

.wa-megamenu__list {
	display: flex;
	justify-content: space-between;
	gap: var(--space-m);
	z-index: 15;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Static so the panel spans the whole header (snippet 695025 sets this with !important). */
.wa-megamenu-item {
	position: static;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Top-level link ---- */
.wa-megamenu__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: var(--space-m) 0;
	outline: none;
	color: var(--white);
	font-size: calc(var(--text-m) * 1.15);
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}

/* Category bar as tall as the benefits strip below it (58px; header variant A, see header.css). */
@media (min-width: 1024px) {
	.wa-megamenu__link {
		padding-block: var(--nd-sp-18);
		font-size: var(--nd-fs-16);
		font-weight: var(--nd-fw-medium);
	}
}

.wa-megamenu__link:hover,
.wa-megamenu__link[aria-expanded="true"] {
	color: var(--white);
}

.wa-megamenu__link-text {
	position: relative;
	white-space: nowrap;
}

.wa-megamenu__link-text::after {
	content: "";
	position: absolute;
	top: calc(100% + 0.1rem);
	left: 0;
	display: block;
	width: 100%;
	border-bottom: 0.2rem solid var(--white);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.6s var(--ease-underline);
}

.wa-megamenu__link:hover .wa-megamenu__link-text::after,
.wa-megamenu__link[aria-expanded="true"] .wa-megamenu__link-text::after {
	transform: scale(1);
	transform-origin: left center;
}

.wa-megamenu__icon {
	display: flex;
	margin-left: 0.5rem;
	font-size: 2.2rem;
}

/* ---- Dropdown panel ---- */
.wa-megamenu__panel {
	position: absolute;
	left: 50%;
	z-index: 1000;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	box-shadow: var(--shadow-megamenu-panel);
	transform: translateX(-50%);
	transition: all 0.5s ease;
}

.wa-megamenu__panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* The huge shadow darkens the page below the open panel. */
.wa-megamenu__panel-container {
	background-color: var(--white);
	box-shadow: var(--shadow-megamenu-overlay);
}

/* Phones and accessories show a category picture in the bottom right corner. */
.wa-megamenu-item:nth-of-type(1) .wa-megamenu__panel-container,
.wa-megamenu-item:nth-of-type(2) .wa-megamenu__panel-container {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: min(35rem, 25%);
}

.wa-megamenu-item:nth-of-type(1) .wa-megamenu__panel-container {
	background-image: url(/wp-content/uploads/2023/03/mobilne-telefony_menu-bg.png);
}

.wa-megamenu-item:nth-of-type(2) .wa-megamenu__panel-container {
	background-image: url(/wp-content/uploads/2023/03/prislusenstvo_menu-bg.png);
}

.wa-megamenu__panel-content {
	display: flex;
	flex-wrap: wrap;
	width: auto;
	max-width: var(--content-width);
	height: auto;
	margin-inline: auto;
	padding-inline: var(--section-padding-x);
}

/* ---- Menu inside a panel: three columns of category + sub-category links ---- */
.wa-megamenu-list {
	flex: 1;
	width: 100%;
	padding-block: var(--space-l);
}

.wa-megamenu-item:nth-of-type(1) .wa-megamenu-list,
.wa-megamenu-item:nth-of-type(2) .wa-megamenu-list {
	max-width: min(var(--content-width), calc(100vw - min(37rem, 28%) - max(((100vw - var(--content-width)) / 2), 0rem)));
}

.wa-megamenu-list__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl);
	margin: 0;
	padding: 0;
}

.wa-megamenu-list .sub-menu {
	display: block;
	margin: var(--space-s) 0 0;
	padding: 0;
	list-style: none;
}

.wa-megamenu-list .menu-item {
	display: list-item;
	white-space: nowrap;
	list-style: none;
	break-inside: avoid;
}

.wa-megamenu-list .menu-item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--base);
	text-decoration: none;
	transition: 0.2s all ease-in-out;
}

.wa-megamenu-list .menu-item a:hover {
	color: var(--primary);
}

.wa-megamenu-list__list > .menu-item > a {
	font-size: var(--text-l);
	font-weight: 700;
}

.wa-megamenu-list .sub-menu a {
	justify-content: flex-start;
	gap: 0.8rem;
	padding: calc(var(--space-xs) * 0.2) 0;
	color: var(--base-medium);
	font-size: calc(var(--text-m) * 1.15);
	font-weight: 400;
}

.wa-megamenu-list .sub-menu a::before {
	content: "";
	display: inline-block;
	width: 1.3rem;
	min-width: 1.3rem;
	height: 1.3rem;
	background-color: var(--primary);
	-webkit-mask: url(/wp-content/uploads/2025/11/arrow.svg) no-repeat center / contain;
	mask: url(/wp-content/uploads/2025/11/arrow.svg) no-repeat center / contain;
	transform: scale(1);
	transition: 0.2s all ease-in-out;
}

.wa-megamenu-list .sub-menu a:hover {
	color: var(--base-semi-light);
}

.wa-megamenu-list .sub-menu a:hover::before {
	transform: scale(1.2);
}