/** @format */

#header ul.menu,
#header ul.sub-menu {
	list-style: none;
	margin: 0;
}

#header li.menu-item {
	margin: 0;
}

#header_menu--main ul.menu {
	display: inline-block;
	padding: 0;
}

#header_menu--sub ul.menu {
	display: block;
	padding: 0;
	width: 100%;
}

#header_menu--main ul.menu > li.menu-item {
	display: inline-block;
	position: relative;
	color: var(--color-blue);
}

#header_menu--main ul.menu > li.menu-item {
	padding: 1rem 0;
}

#header_menu--sub li {
	display: block;
	width: 100%;
}

#header_menu--sub ul.menu {
	display: flex;
	gap: calc(var(--universal-gap) / 2);
}

#header_menu--main .menu > .current_page_item > a {
	background-color: var(--color-light-grey);
}

#header_menu--main .menu > li > a {
	padding: calc(var(--universal-gap) / 3) calc(var(--universal-gap) / 2);
}

#header_menu--main .menu > li > a::before {
	content: '';
	position: absolute;
	top: 50%;
	top: calc(var(--header-height) / 2 + 50%);
	transform: translateY(-50%);
	left: 0;
	display: inline-block;
	width: 100%;
	border-bottom: 2px solid var(--color-blue);
	opacity: 0;
}

#header_menu--main .menu > .menu-item-has-children > a::after {
	content: ' +';
}

#header_menu--main .menu > li > a:hover {
	text-decoration: none;
}

#header_menu--main .menu > li:hover > a::before {
	opacity: 1;
}

#header_menu--main > .menu-item {
	height: 100%;
	padding: var(--universal-gap) 0;
}

#header_menu--main .menu > li.menu-item::before {
	display: block;
	content: '';
	height: var(--header-height);
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

#header_menu--main .menu > li.menu-item a {
	position: relative;
	z-index: 2;
}

#header_menu--main .menu > li.menu-item:hover::after {
	content: '';
	width: 300%;
	height: calc(var(--header-height) + 2px);
	position: absolute;
	top: 50%;
	left: -100%;
	display: block;
	transform: translateY(-50%);
	clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	z-index: 1;
}

/*---Sub Menu Lv2---*/
#header .menu-item.menu-item-has-children > .sub-menu.level--2 {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: var(--header-height);
	left: 0;
	width: 100%;
	height: max-content;
	background-color: var(--color-white);
	padding: var(--universal-gap) var(--wrapper-padding);
	column-count: 3;
	border-top: 1px solid var(--color-light-grey);
	transition: all 200ms linear;
	transition-delay: 300ms;
}

#header_menu--main .menu-item.menu-item-has-children:hover > .sub-menu,
#header_menu--main .menu-item.menu-item-has-children:active > .sub-menu,
#header_menu--main .menu-item.menu-item-has-children:focus > .sub-menu {
	visibility: visible;
	opacity: 1;
	transition-delay: 0ms;
}

.sub-menu.level--2 > li.menu-item {
	color: var(--color-placeholder);
	/* pointer-events: none; */
	break-inside: avoid;
	font-size: var(--fs-4);
}

.sub-menu.level--2 > li.menu-item.wrapper_button {
	text-transform: none;
	margin-top: 6px;
}

#header_menu--main .sub-menu.level--2 li.menu-item.menu-item-has-children {
	display: grid;
	position: relative;
	padding: 0;
	margin-bottom: var(--universal-gap);
	align-content: start;
	height: fit-content;
}

#header_menu--main .sub-menu.level--2 li.menu-item.menu-item-has-children > a {
	margin-bottom: 0.7rem;
}

#header_menu--main .sub-menu.level--2 li.menu-item:not(.menu_item_is_button) > a {
	color: var(--color-blue);
}

#header_menu--main .sub-menu.level--2 li.menu-item.menu-item-has-children .sub-menu.level--3 > .menu-item {
	display: grid;
	position: relative;
	color: var(--color-blue);
	pointer-events: visible;
	margin-bottom: 0.5rem;
}

#header_menu--main .sub-menu.level--2 li.menu-item.menu-item-has-children .sub-menu > .menu-item a {
	font-weight: var(--fw-normal) !important;
}

ul.sub-menu.level--3 {
	padding-inline-start: 0;
}

.sub-menu.level--3 > li.menu-item {
	font-size: var(--fs-4);
}

.menu__special_buttons {
	display: grid;
	row-gap: calc(var(--universal-gap) / 2);
}
