/* menu.css */

/* Container for the entire page layout */
.container {
	display: flex;
	/* min-height: 100vh; */
}

/* Left side - Application content */
.content {
	flex: 1;
	/* Remove the background-color or make it transparent */
	background-color: transparent !important; /* Fix */
	/* padding: 10px; */
}

#content {
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center; /* Centers vertically */
	/* height: 100%; */ /* Ensure it takes up full screen height */
	margin-right: 200px; /* This is to offset the width of the menu on the left */
	width: calc(100% - 200px); /* Adjust the width to account for the menu */
	padding: 20px; /* Adjust padding as needed */
	/* height: 100vh; */ /* Full viewport height */
	background-color: transparent !important; /* Ensure transparency here */
}

.inner-content {
	/* Additional styling for inner content if needed */
	background-color: transparent !important; /* Ensure this is transparent */
}

/* Right side - Navigation menu */
.menu-container {
	width: 200px;
	background-color: #333;
	padding: 10px;
	position: fixed; /* Make it fixed to the top and right */
	top: 0;
	right: 0;
	bottom: 0;
	overflow: visible; /* Ensure sub-menus can expand beyond this div */
	z-index: 1000; /* Ensure it's on top of the content */
}

.main-nav {
	padding: 0;
}

.nav-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
}

.nav-item {
	position: relative;
}

.nav-item > a {
	color: white;
	text-decoration: none; /* Remove underline */
	padding: 6px 20px;
	display: block;
	/* height: 10px; */ /* Set a consistent height */
	line-height: 1.2; /* Center text vertically */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Recommended font stack */
	font-size: 16px; /* Adjust size as needed */
}

.nav-item > a:hover {
	background-color: #555;
	text-decoration: none; /* Remove underline on hover */
}

/* Submenus (second and third levels) */
.nav-sublist {
	display: none;
	position: absolute;
	background-color: #444;
	color: white;
	top: 0;
	right: 100%; /* Align sub-menus directly next to the parent menu, to the left */
	z-index: 1001;
	width: 225px;
	/* min-width: 150px; */
}

.nav-subitem {
	position: relative;
}

.nav-subitem > a {
	color: white;
	padding: 6px 20px;
	display: block;
	/* height: 10px; */ /* Ensure same height as main items */
	line-height: 1.2; /* Center text vertically */
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Recommended font stack */
	font-size: 16px; /* Adjust size as needed */
}

.nav-subitem > a:hover {
	background-color: #555;
	text-decoration: none;
}

/* Make this one subitem wider */
.wide-subitem > a {
	display: inline-block;   /* shrink-wrap to text */
	padding: 10px 20px;      /* keep padding consistent */
	white-space: nowrap;     /* prevent breaking into 2 lines */
}

.nav-item:hover > .nav-sublist,
.nav-subitem:hover > .nav-sublist {
	display: block;
}

/* Third level sublist positioning */
.nav-subitem .nav-sublist {
	right: 100%;
	top: 0;
	width: 260px;
	/* min-width: 150px; */
}

.nav-subitem > .nav-sublist .nav-subitem > a {
	padding-left: 10px;
}

/* Hamburger menu - hidden by default */
.hamburger {
	display: none;
	font-size: 24px;
	cursor: pointer;
	color: white;
}

/* Media Query for responsive design */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
	}

	.menu-container {
		width: 100%;
		position: relative;
	}

	.nav-list {
		display: none;
		flex-direction: column;
	}

	.nav-item {
		width: 100%;
	}

	.nav-item > a {
		padding: 10px;
		border-bottom: 1px solid #444;
	}

	/* Display the hamburger menu */
	.hamburger {
		display: block;
	}

	/* Show the nav list when the hamburger is clicked */
	.nav-list.active {
		display: flex;
	}

	.nav-sublist {
		position: relative;
		left: 0;
		top: 0;
	}

	.nav-subitem .nav-sublist {
		left: 0;
	}
}

/* Optional: Style the caret down icon */
.logo {
	display:block;
	margin-left:auto;
	margin-right:auto;
}