/**
 * #Mega menu
 */

.p-megamenu {
	position: fixed;
	inset: 0;
	z-index: 40;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #000;
	background-image: url("/wp-content/themes/edance-parent/assets/img/megamenu-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--prolab-text, #f5f5f5);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease;

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

	&[hidden] {
		display: none;
	}

	.p-megamenu__watermark {
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
		font-family: var(--ff-en);
		font-size: clamp(80px, 20vw, 389px);
		font-weight: 900;
		letter-spacing: -0.04em;
		line-height: 0.6;
		color: rgba(29, 29, 29, 0.8);
		pointer-events: none;
		white-space: nowrap;
		@media (max-width: 768px) {
			display: none;
		}
	}

	.p-megamenu__close {
		position: fixed;
		top: 20px;
		right: 30px;
		z-index: 41;
		width: 66px;
		height: 66px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background-color: var(--color-accent);
		cursor: pointer;

		span {
			position: absolute;
			left: 50%;
			top: 50%;
			display: block;
			width: 30px;
			height: 3px;
			background: var(--white);

			&:first-child { transform: translate(-50%, -50%) rotate(45deg); }
			&:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
		}

		@media (max-width: 768px) {
			top: 10px;
			right: 10px;
			width: 48px;
			height: 48px;

			span {
				width: 22.7px;
				height: 2.3px;
			}
		}
	}

	.p-megamenu__inner {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 520px 1fr;
		gap: 80px;
		padding: 47px 80px 80px;
		min-height: 100%;

		@media (max-width: 1024px) {
			grid-template-columns: 1fr;
			padding: 80px 20px 40px;
			gap: 20px;
		}
	}

	.p-megamenu__header-logo {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 41;
		align-items: center;
		justify-content: center;
		width: var(--header-logo-w);
		height: var(--header-logo-h);
		background-color: var(--color-accent);
		border-radius: var(--header-logo-rd);
		transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease;

		img {
			width: var(--header-logo-img-w);
			height: var(--header-logo-img-h);
			object-fit: contain;
			transition: width 0.35s ease, height 0.35s ease;
		}

		@media (max-width: 1024px) {
			display: flex;
		}
	}

	.p-megamenu__logo {
		display: block;
		width: 200px;

		img {
			width: 100%;
			height: auto;
		}

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

	.p-megamenu__catch {
		margin: 32px 0 0;
		font-size: 38px;
		font-weight: 700;
		line-height: 1.3;
		.p-brand__catch-en {
			display: block;
			font-family: var(--ff-en);
			font-size: 52px;
		}
		.p-brand__catch-ja {
			display: block;
			font-size: 28px;
		}

		@media (max-width: 1024px) {
			margin-top: 0;
			margin-inline: auto;
			width: fit-content;
			font-size: 24px;
			.p-brand__catch-en {
				font-size: 32px;
			}
			.p-brand__catch-ja {
				font-size: 20px;
			}
		}
	}

	.p-megamenu__note {
		margin: 16px 0 32px;
		font-size: 14px;
		line-height: 1.6;
		@media (max-width: 1024px) {
			text-align: center;
		}
	}

	.p-megamenu__utils {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 20px;
		margin: 24px 0 0;
		padding: 0;
		list-style: none;

		a {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			color: var(--prolab-text, #f5f5f5);
			font-size: 12px;
			text-decoration: none;
		}
		@media (max-width: 1024px) {
			justify-content: center;
		}
	}

	.p-megamenu__nav {
		overflow: hidden;
		@media (max-width: 1024px) {
			order: -1;
		}
	}

	.p-megamenu__item {
		border-top: 1px solid var(--prolab-border, #2e2e2e);
		opacity: 0;
		transform: translateX(48px);

		&:last-child {
			border-bottom: 1px solid var(--prolab-border, #2e2e2e);
		}
	}

	&.is-open .p-megamenu__item {
		animation: megamenu-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--stagger, 0) * 70ms);
	}

	&.is-closing .p-megamenu__item {
		opacity: 1;
		transform: translateX(0);
	}

	.p-megamenu__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 24px 0;
		color: inherit;
		text-decoration: none;
		background: none;
		border: 0;

		img {
			flex-shrink: 0;
			margin-right: 6px;
			width: 16px;
			height: 16px;
		}
	}

	.p-megamenu__titles {
		display: flex;
		flex-direction: column;
		gap: 2px;
		color: inherit;
		text-decoration: none;
		text-align: left;
	}

	.p-megamenu__en {
		font-family: var(--ff-en);
		font-size: 36px;
		font-weight: 700;
		color: var(--nav-en, var(--color-accent));
		line-height: 1.1;

		@media (max-width: 768px) {
			font-size: 28px;
		}
	}

	.p-megamenu__ja {
		font-size: 11px;
		color: var(--prolab-text-muted, #a3a3a3);
	}

	.p-megamenu__toggle {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 1px solid var(--white);
		border-radius: 999px;
		background: transparent;
		color: var(--white);
		cursor: pointer;
		appearance: none;
	}

	.p-megamenu__plus {
		position: relative;
		display: block;
		width: 12px;
		height: 12px;
		margin: 0;

		&::before,
		&::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			background: var(--white);
			transform: translate(-50%, -50%);
		}

		&::before {
			width: 12px;
			height: 2px;
		}

		&::after {
			width: 2px;
			height: 12px;
			transition: transform 0.3s ease;
		}
	}

	.p-megamenu__item.is-open .p-megamenu__plus::after {
		transform: translate(-50%, -50%) scaleY(0);
	}

	.p-megamenu__sub {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.35s ease;
	}

	.p-megamenu__item.is-open .p-megamenu__sub {
		grid-template-rows: 1fr;
	}

	.p-megamenu__sub-list {
		overflow: hidden;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0 0 0 8px;
		list-style: none;
		transition: padding-bottom 0.35s ease;

		a {
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--prolab-text, #f5f5f5);
			font-size: 14px;
			text-decoration: none;
		}
	}

	.p-megamenu__item.is-open .p-megamenu__sub-list {
		padding-bottom: 24px;
	}

	.p-megamenu__caret {
		color: var(--color-accent);
		font-weight: 700;
	}

	.p-cta-grid {
		max-width: none;

		@media (max-width: 768px) {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;

		.p-megamenu__item {
			opacity: 1;
			transform: none;
			animation: none;
		}

		.p-megamenu__sub,
		.p-megamenu__sub-list,
		.p-megamenu__plus::after {
			transition: none;
		}
	}
}

@keyframes megamenu-item-in {
	from {
		opacity: 0;
		transform: translateX(48px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.p-megamenu__brand {
	min-width: 0;
}

.p-megamenu__banners {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 32px;
	width: 320px;
	max-width: 100%;

	@media (max-width: 1024px) {
		margin-inline: auto;
	}
}

.p-megamenu-banner {
	--banner-color: #e8c547;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 104px;
	padding: 17.931px;
	overflow: hidden;
	border-radius: 11.2px;
	background: var(--banner-color);
	color: var(--white);
	text-decoration: none;
	font-weight: 700;

}
.p-megamenu-banner--open-class {
	--banner-color: #a8479e;
}
.p-megamenu-banner--hub {
	background-image: linear-gradient(69.34deg, #00f5ff 5.385%, #bf00ff 49.927%);
}

.p-megamenu-banner__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	font-family: var(--ff-en);
	line-height: 1.2;
	white-space: nowrap;
}

.p-megamenu-banner__academy { font-size: 16px; }
.p-megamenu-banner__title { font-size: 20px; }
.p-megamenu-banner__description {
	margin-top: 4.8px;
	font-family: var(--ff-sans);
	font-size: 12px;
	line-height: 1.5;
}
.p-megamenu-banner--hub .p-megamenu-banner__title {
	margin-top: 4.8px;
	font-family: var(--ff-sans);
	font-size: 18px;
	line-height: 1.5;
}

.p-megamenu-banner__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 142.253px;
	height: 104px;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20142.253%20104%22%3E%3Cpath%20d%3D%22M0%200H131.053C137.238%200%20142.253%205.01441%20142.253%2011.2V92.8C142.253%2098.9856%20137.238%20104%20131.053%20104H28.5614L0%200Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
	transform: scaleY(-1);

	img {
		position: absolute;
		left: -31.081px;
		transform: scaleY(-1);
		bottom: 0;
		width: 179.31px;
		height: 167.356px;
		max-width: none;
		object-fit: cover;
	}
}
.p-megamenu-banner--pro-lab .p-megamenu-banner__photo img:not(.p-megamenu-banner__photo-base) {
	left: -8.116px;
	bottom: -23.816px;
	width: 158px;
	height: 237.3605px;
}
.p-megamenu-banner--hub .p-megamenu-banner__photo img {
	left: -232.39px;
	bottom: -93.795px;
	width: 455.594px;
	height: 304.055px;
}

.p-megamenu-banner__arrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--banner-color);
}
.p-megamenu-banner--hub .p-megamenu-banner__arrow {
	background-image: var(--neon-grd);
}

.p-megamenu-banner:hover .p-megamenu-banner__arrow img {
	animation: arrow-hover 0.6s cubic-bezier(0.18, 0.89, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.p-megamenu-banner:hover .p-megamenu-banner__arrow img {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.theme-edance-pro-lab .p-megamenu__inner,
	.theme-edance-open-class .p-megamenu__inner {
		padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
	}
}