achille-press/sass/components/navigation/_header.scss

// PaperMod inspired header styles
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-bg-header);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border-primary);
	transition: var(--transition-default);
	
	.header-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 1rem 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		
		@media (max-width: 768px) {
			padding: 0.75rem 1rem;
		}
	}
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	
	.site-title {
		margin: 0;
		font-size: 1.5rem;
		font-weight: $font__weight-bold;
		line-height: 1.2;
		
		a {
			color: var(--color-text-primary);
			text-decoration: none;
			border: none;
			
			&:hover {
				color: var(--color-link);
				border: none;
			}
		}
	}
	
	.site-description {
		display: none;
		margin: 0;
		font-size: 0.875rem;
		color: var(--color-text-secondary);
		
		@media (min-width: 768px) {
			display: block;
		}
	}
	
	.custom-logo {
		display: block;
		max-height: 50px;
		width: auto;
	}
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

// Navigation styles
.main-navigation {
	position: relative;
	
	.menu-toggle {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem;
		border-radius: 4px;
		transition: var(--transition-fast);
		
		&:hover {
			background: var(--color-bg-secondary);
		}
		
		@media (max-width: 768px) {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
	}
	
	.hamburger-icon {
		display: flex;
		flex-direction: column;
		gap: 3px;
		
		span {
			display: block;
			width: 20px;
			height: 2px;
			background: var(--color-text-primary);
			transition: var(--transition-fast);
			border-radius: 1px;
		}
		
		.menu-toggle[aria-expanded="true"] & {
			span:nth-child(1) {
				transform: rotate(45deg) translate(5px, 5px);
			}
			
			span:nth-child(2) {
				opacity: 0;
			}
			
			span:nth-child(3) {
				transform: rotate(-45deg) translate(7px, -6px);
			}
		}
	}
	
	.primary-menu {
		display: flex;
		align-items: center;
		gap: 2rem;
		margin: 0;
		padding: 0;
		list-style: none;
		
		@media (max-width: 768px) {
			display: none;
			position: absolute;
			top: 100%;
			right: 0;
			background: var(--color-bg-card);
			box-shadow: var(--shadow-card);
			border-radius: 8px;
			padding: 1rem;
			min-width: 200px;
			flex-direction: column;
			gap: 0.5rem;
			
			&.toggled {
				display: flex;
			}
		}
		
		li {
			position: relative;
			
			a {
				display: block;
				padding: 0.5rem 0;
				color: var(--color-text-primary);
				font-weight: $font__weight-medium;
				transition: var(--transition-fast);
				border: none;
				
				@media (max-width: 768px) {
					padding: 0.75rem;
					border-radius: 4px;
				}
				
				&:hover {
					color: var(--color-link);
					border: none;
					
					@media (max-width: 768px) {
						background: var(--color-bg-secondary);
					}
				}
			}
			
			&.current_page_item > a,
			&.current-menu-item > a {
				color: var(--color-link);
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -2px;
					left: 0;
					right: 0;
					height: 2px;
					background: var(--color-link);
					border-radius: 1px;
					
					@media (max-width: 768px) {
						display: none;
					}
				}
			}
		}
		
		// Dropdown menus
		.sub-menu {
			position: absolute;
			top: 100%;
			left: 0;
			background: var(--color-bg-card);
			box-shadow: var(--shadow-card);
			border-radius: 8px;
			padding: 0.5rem;
			min-width: 200px;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: var(--transition-fast);
			z-index: 1000;
			
			@media (max-width: 768px) {
				position: static;
				opacity: 1;
				visibility: visible;
				transform: none;
				box-shadow: none;
				background: var(--color-bg-secondary);
				margin-top: 0.5rem;
			}
			
			li a {
				padding: 0.75rem;
				border-radius: 4px;
				
				&:hover {
					background: var(--color-bg-secondary);
				}
			}
		}
		
		li:hover .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}
}

// Theme toggle button
.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 50%;
	transition: var(--transition-fast);
	color: var(--color-text-primary);
	position: relative;
	
	&:hover {
		background: var(--color-bg-secondary);
		color: var(--color-link);
	}
	
	&:focus {
		outline: 2px solid var(--color-link);
		outline-offset: 2px;
	}
	
	svg {
		display: block;
		transition: var(--transition-fast);
	}
	
	.moon-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		
		[data-theme="dark"] & {
			opacity: 1;
		}
	}
	
	.sun-icon {
		opacity: 1;
		
		[data-theme="dark"] & {
			opacity: 0;
		}
	}
}

// Skip link
.skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 999999;
	padding: 0.5rem 1rem;
	background: var(--color-text-primary);
	color: var(--color-bg-primary);
	text-decoration: none;
	border-radius: 4px;
	
	&:focus {
		left: 1rem;
	}
}