/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: header.css
Description: Styling for the main site header and top navigation.
*/

/* * -------------------------------------------------------------------------
 * Header Layout
 * -------------------------------------------------------------------------
 */

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center; /* Added for vertical centering of logo vs nav */
	
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-m);
	
	/* Removed universal transition on * for performance */
	transition: padding var(--motion-fast); 

	--header-primary: var(--color-accent);
	--header-primary-dark: var(--color-accent-dark);
}

/* * Breakpoints
 * Values match variables.css
 */

/* --breakpoint-m */
@media (min-width: 700px) {
	header {
		padding: var(--space-m) var(--space-lg);
	}
}

/* --container-max-with-gutter */
@media (min-width: 940px) {
	header {
		padding: var(--space-m) 0;
	}
}

/* * -------------------------------------------------------------------------
 * Logo
 * -------------------------------------------------------------------------
 */

header .logo,
header .lockup {
	fill: var(--header-primary-dark);
	transition: opacity var(--motion-fast);
}

header .logo {
	flex-grow: 1;
	max-width: 200px;
	display: flex;
	align-items: center;
}

header .logo a {
	display: flex;
	text-decoration: none; /* Ensure no underline on logo */
}

/* Hover Effect (except on homepage) */
body:not(.home) header a:hover .logo,
body:not(.home) header a:hover .lockup {
	opacity: 0.7;
}

/* Mobile vs Desktop Logo Switching */
header .lockup {
	display: none;
}

header .logomark {
	display: block;
	width: 50px;
	height: 50px;
}

@media (min-width: 700px) {
	header .lockup {
		display: block;
		width: 100%;
		max-height: 50px;
	}
	
	header .logomark {
		display: none;
	}
}

/* * -------------------------------------------------------------------------
 * Navigation
 * -------------------------------------------------------------------------
 */

header nav {
	font-family: var(--header-fonts);
	font-size: var(--font-size-l);
	text-align: center;
}

header nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
}

header nav li {
	display: flex;
	margin: 0;
	/* Replaced hardcoded 15px with space-s/m hybrid */
	padding-left: var(--space-s); 
}

/* Link Styles */
header nav li a {
	display: block;
	padding: var(--space-s);
	
	color: var(--header-primary-dark);
	font-weight: bold;
	white-space: nowrap;
	text-decoration: none;
	
	/* Layout Stability: Pre-set border to transparent so it doesn't jump */
	border-radius: var(--radius-s); /* Formerly 3px */
	border: 3px solid transparent; 
	
	transition: all var(--motion-fast) ease;
}

/* Hover State */
header nav li a:hover {
	color: var(--header-primary-dark) !important;
	border-color: var(--header-primary-dark);
	text-decoration: none;
}

/* Active/Press State */
header nav li a:not(.current-menu-item):active {
	transform: scale(0.95);
}

/* Current Page State */
header nav li.current-menu-item a,
.nav-lab header nav .menu-item-1783 a, /* Context override: Lab */
.nav-ux header nav .menu-item-1784 a { /* Context override: UX */
	border-color: var(--header-primary);
	background: var(--header-primary) !important;
	color: var(--color-bg) !important;
	text-decoration: none !important;
}

/* * -------------------------------------------------------------------------
 * Icons in Nav
 * -------------------------------------------------------------------------
 */

header nav svg,
footer nav svg {
	display: inline-block;
	vertical-align: middle;
	
	/* Adjust positioning to align with text baseline */
	position: relative;
	top: -1px; 
	
	width: var(--icon-size-m);
	height: var(--icon-size-m);
	
	fill: var(--header-primary-dark);
	
	transition: fill var(--motion-fast);
}

header nav li.current-menu-item svg {
	fill: var(--color-bg);
}

/* * -------------------------------------------------------------------------
 * Action Items (e.g. Search, Utility Links)
 * -------------------------------------------------------------------------
 */

.menu-item.action a {
	font-weight: normal;
	opacity: 0.5;
	border-radius: var(--radius-s);
	
	/* Underline Style */
	text-decoration: underline;
	text-decoration-color: var(--color-gray-300);
	text-decoration-thickness: 2px;
}

.menu-item.action a:hover {
	opacity: 1;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--header-primary);
	border-color: transparent; 
}