/* Reset */
#topmenu,
#topmenu *,
label.topmenuToggle {
	box-sizing: border-box;
	word-wrap: break-word;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
	-webkit-touch-callout: none;
	user-select: none;
}

/* Main menu container */
#topmenu {
	position: relative;
	display: flex;
	gap: 1px;
	width: 100%;
	z-index: 998;
}

/* Category wrapper */
#topmenu .category {
	position: relative;
}

/* Dropdown links */
#topmenu .links {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	z-index: 998;
	max-height: none;
	overflow: visible;
}

#topmenu .category:hover > .links {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Subcategories */
#topmenu .category .sub {
	position: relative;
}

/* Sub-submenu links */
#topmenu .category .sub .links {
	position: absolute;
	top: 0;
	left: 100%;
	width: max-content;
	padding: 0;
	margin: 0;
	background: inherit;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	z-index: 999;
	max-height: none;
	overflow: visible;
}

#topmenu .category .sub:hover > .links {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

#topmenu .category .sub {
	display: block;
}

#topmenu .category .sub .title {
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 1;
}

#topmenu .category .sub:hover .title,
#topmenu .category .sub:hover .links {
	z-index: 2;
}

#topmenu .category .sub:hover,
#topmenu .category .sub .links:hover {
	overflow: visible;
}

label.topmenuToggle,
input.topmenuToggle {
	display: none;
	visibility: hidden;
}

/* ===== MOBILE ===== */
@media only screen and (max-width: 768px) {
	#topmenu {
		position: absolute;
		display: block;
		visibility: hidden;
		left: 0;
		top: 0;
		transform: translateY(-100%);
		transition: transform 0.3s ease, visibility 0.3s ease;
		width: 100%;
		padding: 15px 10px;
	}

	label.topmenuToggle {
		display: flex;
		visibility: inherit;
		cursor: pointer;
		align-items: center;
		position: absolute;
		z-index: 999;
		top: 0 !important;
		left: 0 !important;
	}

	label.topmenuToggle:before {
		content: "\2261";
		z-index: 2;
		position: relative;
		padding-right: 10px;
	}

	input.topmenuToggle:checked ~ #topmenu {
		visibility: visible;
		transform: translateY(0);
	}

	input.topmenuToggle:checked ~ label:before {
		content: "\039E";
	}

	#topmenu .links,
	#topmenu .category .sub .links {
		position: static !important;
		width: 100% !important;
		max-height: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
		transform: none !important;
		transition: none !important;
	}

	#topmenu .category > .title ~ .links,
	#topmenu .category .sub {
		display: initial;
	}
}