/* This file only handles the dropdown functionality. Do not add styling here. */

/* Resets for better compatibility */
#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; 
} 

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

/* Wrapper for dropdown links */
#topmenu .links {
	position: absolute;
	width: 100%;
	z-index: 998; /* IMPORTANT */
}

/* Dropdown show/hide logic */
#topmenu .category { position: relative; }
#topmenu .category > .title ~ .links, #topmenu .category .sub { display: none; }
#topmenu .category:hover > .title + .links, #topmenu .category:hover > .links .sub { display: block; }
#topmenu .category:hover > .links .sub .links { left: 100%; top: 0; }
label.topmenuToggle, input.topmenuToggle { display: none; visibility: hidden; }

/* MOBILE ADJUSTMENTS */
@media only screen and (max-width: 768px) {
	#topmenu {
		position: absolute;
		display: block;
		visibility: hidden;
		left: 0;
		top: -100%; /* IMPORTANT FOR THE SLIDE-IN ANIMATION */
		width: 100%;
		padding: 15px 10px;
		transition: all 0.3s ease;
	}
	
	#topmenu > .title {
		margin-bottom: 10px;
	}

	/* Adds some space between each dropdown category */
	#topmenu .links a:last-child, 
	#topmenu > a:last-child {
		margin-bottom: 10px;
	}

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

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

	/* Slide in the sidebar when the toggle is clicked */
	input.topmenuToggle:checked ~ #topmenu { visibility: visible; top: 0; }

	/* Change toggle icon when the sidebar is visible */
	input.topmenuToggle:checked ~ label:before { content: "\039E"; }

	/* Turns the dropdown menu into a normal sidebar for mobile */
	/* DO NOT EDIT THIS */
	#topmenu .category > .title ~ .links,
	#topmenu .category .sub { display: inherit; }
	#topmenu .links, #topmenu .sub { position: static; width: 100%; }
	#topmenu .category > .title ~ .links,
	#topmenu .category .sub,
	#topmenu .category:hover > .title + .links,
	#topmenu .category:hover > .links .sub { display: contents; }
}