/* Clean Modern Navigation */
#nav {
	background: #fff !important;
	margin: -8em -4em 0 -4em !important;
	padding: 1em 0 !important;
	position: relative !important;
}

/* Hamburger menu button styles */
#menu-toggle {
	display: none !important;
	position: absolute !important;
	top: 50% !important;
	right: 1em !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0.5em !important;
	z-index: 1000 !important;
}

#menu-toggle i {
	font-size: 1.5em !important;
	color: #787878 !important;
}

#nav-menu {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 1em 0 !important;
	gap: 3em !important;
}

/* Remove line between navbar and first section */
#main > section:first-child,
#main section:first-child,
section#about,
#about,
section#publications,
#publications,
section#services,
#services {
	border-top: none !important;
	border: none !important;
	margin-top: 0 !important;
	padding-top: 2em !important;
}

/* Custom Navigation Styles */
.content-section {
	display: none;
}
.content-section.active {
	display: block;
}

/* Remove underlines from navbar links except active state */
#nav a,
#nav a:link,
#nav a:visited,
#nav a:hover,
#nav a:focus,
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:hover,
.nav-link:focus {
	text-decoration: none !important;
	text-decoration-line: none !important;
	text-decoration-style: none !important;
	border-bottom: none !important;
	outline: none !important;
}

/* Mobile responsiveness */
@media screen and (max-width: 980px) {
	#header {
		width: 30% !important;
	}
	
	#main {
		margin-left: 30% !important;
		width: calc(100% - 30%) !important;
		padding: 6em 3em 3em 3em !important;
	}
	
	#nav {
		margin: -6em -3em 0 -3em !important;
	}
	#nav-menu {
		gap: 1.5em !important;
	}
	#nav-menu a {
		font-size: 1em !important;
	}
}

@media screen and (max-width: 736px) {
	/* Mobile layout - header at top, content below */
	#header {
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		padding: 2.25em 1.5em !important;
	}
	
	#main {
		margin-left: 0 !important;
		width: 100% !important;
		padding: 2.25em 1.5em 4em 1.5em !important;
	}
	
	#nav {
		margin: -2.25em -1.5em 0 -1.5em !important;
		padding: 1em 0 !important;
	}
	
	/* Hide desktop navbar and show hamburger */
	#nav-menu {
		display: none !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: #fff !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 2em !important;
		padding: 2em !important;
		z-index: 9999 !important;
		width: 100vw !important;
		height: 100vh !important;
	}
	
	/* Show menu when active */
	#nav-menu.active {
		display: flex !important;
	}
	
	#nav-menu li {
		margin: 0 !important;
	}
	
	#nav-menu a {
		font-size: 2em !important;
		padding: 1em 2em !important;
		display: block !important;
		text-align: center !important;
		min-width: 200px !important;
		transition: color 0.2s ease !important;
		color: #666 !important;
		font-weight: 400 !important;
		white-space: nowrap !important;
	}
	
	#nav-menu a:hover {
		color: #000 !important;
	}
	
	#nav-menu a.active {
		color: #000 !important;
		font-weight: 500 !important;
	}
	
	#menu-toggle {
		display: block !important;
		position: fixed !important;
		top: 1.5em !important;
		right: 1.5em !important;
		z-index: 10000 !important;
		background: rgba(255, 255, 255, 0.9) !important;
		border-radius: 8px !important;
		backdrop-filter: blur(10px) !important;
		padding: 0.8em !important;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
		transform: none !important;
	}
	
	#menu-toggle i {
		font-size: 1.2em !important;
		color: #787878 !important;
	}
	
	/* Add bottom spacing for narrow views */
	.content-section {
		margin-bottom: 3em !important;
	}
}

/* Fixed layout to prevent shifting between pages - DESKTOP ONLY */
@media screen and (min-width: 737px) {
	#header {
		width: 35% !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		height: 100vh !important;
		overflow-y: auto !important;
	}

	#main {
		margin-left: 35% !important;
		width: calc(100% - 35%) !important;
		min-height: 100vh !important;
		box-sizing: border-box !important;
		padding: 8em 4em 4em 4em !important;
	}
}

/* Ensure consistent content container */
body {
	overflow-x: hidden !important;
}

html, body {
	width: 100% !important;
	max-width: 100% !important;
}

/* Subtle About page improvements */
#about {
	line-height: 1.6 !important;
}

#about h4 {
	text-align: justify !important;
}

/* Better mobile readability */
@media screen and (max-width: 736px) {
	#about {
		line-height: 1.5 !important;
	}
	
	#about h4 {
		text-align: left !important;
	}
}



/* Navigation styles for multi-page setup */
.nav-link {
	text-decoration: none;
	color: #444;
	font-weight: 600;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s ease;
	padding: 0.5em 1em;
	border-radius: 6px;
	position: relative;
}

.nav-link:hover {
	text-decoration: none !important;
	color: #000;
	background-color: transparent !important;
	font-weight: 600;
}

#nav a.nav-link.active,
.nav-link.active {
	color: #000 !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
	background-color: transparent !important;
	border-bottom: none !important;
}