aside {
	display: flex;
	flex-direction: column;
	justify-content: start;
	
	position: fixed;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	background-color: #f6f8fa;

	box-shadow: 1px 0 3px rgba(0,0,0,0.1);

	scrollbar-width: thin;
	scroll-behavior: smooth;
	overflow-y: auto;

	/* use GPU-accelerated transform for smooth sliding */
	transform: translateX(0);
	transition: transform 0.3s ease-in-out;
	will-change: transform;
	z-index: 1000;
}

aside img {
	object-fit: cover;
	border: 3px solid #fbfbfb;
	border-radius: 50%;
	transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
aside img:hover {
	border-color: #3b3b3b;
	cursor: pointer;
	transform: scale(1.1);
}

.profile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 20px;

}

aside h1 {
	text-align: start;
	padding: 20px;
	font-size: 1.5em;
	color: #717171;
	transition: color 0.3s ease-in-out;
	
}

aside h1:hover{
	color: #000000;
	cursor: pointer;
}

aside p {
	font-size: 1em;
	padding: 0 10px;
	text-align: center;
	font-style: italic;
}

aside nav {
	padding: 20px;
}

aside nav ul {
	list-style: none;
}

aside nav li {
	
	padding: 10px 15px;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
}

/* fix invalid nested selector from SCSS; use plain CSS */
aside nav li:hover {
	background-color: #e9eff5;
	cursor: pointer;
}

aside nav a {
	
	text-decoration: none;
	color: #3b3b3b;
	font-size: 1em;
	transition: color 0.3s ease;

	padding: 0 20px;

}

aside nav ul i {
	color: #717171;
}

.social-links {
	
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 20px;
	gap: 30px;

	margin-bottom: 0;
	flex-direction: row;
	flex-grow: 2;

}

.social-links a {
	color: #717171;
	font-size: 1em;

}.social-links a:hover {
	color: #3b3b3b;
	cursor: pointer;
}

/* Mode toggle button styles */
.social-links .mode-toggle {
	background: transparent;
	border: none;
	color: #717171;
	font-size: 1em;
	cursor: pointer;
	padding: 0;
	transition: color 0.3s ease-in-out;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.social-links .mode-toggle:hover {
	color: #3b3b3b;
}


/* Toggle button styles */
.sidebar-toggle {
	z-index: 1100; /* above sidebar */
	background: #ffffffcc;
	border: 1px solid #e1e4e8;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: #3b3b3b;
	backdrop-filter: blur(4px);;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.sidebar-toggle:hover {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* Overlay styles */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none; /* hidden by default */
	z-index: 900; /* below sidebar and toggle */

	/* fade-in effect */
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

#overlay.show {
	display: block;
	opacity: 1;
}

/* Hide toggle on wider screens (desktop) */
@media (min-width: 851px) {
	.sidebar-toggle {
		display: none;
	}
}

/* Mobile Responsiveness */
@media (max-width: 850px) {
	aside {
		/* hide sidebar off-canvas to the left by default on mobile */
		transform: translateX(-100%);
	}

	/* when open, slide it into view */
	aside.open {
		transform: translateX(0);
		box-shadow: 2px 0 8px rgba(0,0,0,0.15);
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	aside,
	aside img,
	.sidebar-toggle {
		transition: none !important;
	}
}

/* Dark mode styles for sidebar */
body.dark-mode aside {
	background-color: #161b22;
	box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

body.dark-mode aside img {
	border-color: #30363d;
}

body.dark-mode aside img:hover {
	border-color: #58a6ff;
}

body.dark-mode aside h1 {
	color: #e6edf3;
}

body.dark-mode aside h1:hover {
	color: #58a6ff;
}

body.dark-mode aside p {
	color: #8b949e;
}

body.dark-mode aside nav li:hover {
	background-color: #21262d;
}

body.dark-mode aside nav a {
	color: #e6edf3;
}

body.dark-mode aside nav a:hover {
	color: #58a6ff;
}

body.dark-mode aside nav ul i {
	color: #8b949e;
}

body.dark-mode .social-links a {
	color: #8b949e;
}

body.dark-mode .social-links a:hover {
	color: #58a6ff;
}

body.dark-mode .social-links .mode-toggle {
	color: #8b949e;
}

body.dark-mode .social-links .mode-toggle:hover {
	color: #58a6ff;
}

body.dark-mode .sidebar-toggle {
	background: rgba(22, 27, 34, 0.8);
	border-color: #30363d;
	color: #e6edf3;
	backdrop-filter: blur(4px);
}

body.dark-mode .sidebar-toggle:hover {
	background: #21262d;
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
	border-color: #58a6ff;
}