/* /pi-theme/assets/css/nav.css */

/* Site Header */
.site-header {
	background-color: var(--pi-color-bg);
	position: fixed;
	width: 100%;
	z-index: 10000;
}

.site-header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Site Branding */
.site-branding {
	flex-shrink: 0;
}

.site-title {
	margin: 0;
	font-size: var(--pi-h2);
	font-family: var(--pi-font-family);
}

.site-title a {
	color: var(--pi-color-text);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--pi-accent-blue);
	text-decoration: none;
}

.site-logo {
	max-height: 50px;
	width: auto;
}

/* Main Navigation - DOS Style */
.main-navigation {
	display: flex;
	align-items: center;
	position: relative;
}

.nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	background-color: var(--pi-color-bg);
}

.nav-menu li {
	position: relative;
}

.nav-menu a {
	color: var(--pi-color-text);
	text-decoration: none;
	padding: var(--pi-space-sm) var(--pi-space-md);
	font-family: var(--pi-font-family);
	font-size: 14px;
	display: block;
	background-color: var(--pi-color-bg);
	transition: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.nav-menu a:hover {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-color-bg);
	text-decoration: none;
}

.nav-menu .current-menu-item > a,
.nav-menu .current-menu-parent > a,
.sub-menu .current-menu-item > a {
	color: var(--pi-nav-active);
	text-decoration: none;
}

.nav-menu .current-menu-item > a:hover,
.nav-menu .current-menu-parent > a:hover,
.sub-menu .current-menu-item > a:hover {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-nav-active);
	text-decoration: none;
}

/* Dropdown Menu */
.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--pi-color-bg);
	border: 8px double var(--pi-nav-border);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 200px;
	z-index: 10001;
}

.nav-menu li:hover .sub-menu {
	display: block;
}

/* Keep parent highlighted when hovering over sub-menu */
.nav-menu li:hover > a {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-color-bg);
}

.nav-menu li.current-menu-item:hover > a {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-nav-active);
}

/* Maintain active color when hovering over child menu items */
.nav-menu li.current-menu-item:hover > a,
.nav-menu li.current-menu-parent:hover > a {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-nav-active);
}

.sub-menu li {
	position: relative;
}

.sub-menu a {
	padding: var(--pi-space-sm) var(--pi-space-md);
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
}

.sub-menu a:hover {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-color-bg);
	text-decoration: none;
}

/* Nested Sub-menus */
.sub-menu .sub-menu {
	top: 0;
	left: 100%;
	border: 8px double var(--pi-nav-border);
}

/* Keep parent sub-menu item highlighted when hovering over nested sub-menu */
.sub-menu li:hover > a {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-color-bg);
}

.sub-menu li.current-menu-item:hover > a {
	background-color: var(--pi-nav-highlight);
	color: var(--pi-nav-active);
}

/* Site Footer */
.site-footer {
	background-color: var(--pi-color-bg);
	padding: var(--pi-space-lg) 0;
}

.footer-branding .site-title {
	font-size: var(--pi-h3);
}

.footer-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--pi-space-md);
}

.footer-menu a {
	color: var(--pi-color-text);
	text-decoration: none;
	font-size: 0.875rem;
}

.footer-menu a:hover {
	color: var(--pi-accent-blue);
	text-decoration: none;
}

.site-info {
	text-align: center;
	font-size: 0.875rem;
	color: var(--pi-color-text);
	opacity: 0.8;
}

@media (max-width: 767px) {
	.nav-menu a {
		padding: var(--pi-space-sm) var(--pi-space-sm);
	}
	
	/* Smart sub-menu positioning to prevent overflow */
	.sub-menu {
		left: 0;
		right: auto;
	}
	
	/* Only adjust positioning when sub-menu would overflow right edge */
	.nav-menu li:last-child .sub-menu {
		left: auto;
		right: 0;
	}
	
	/* For nested sub-menus, use smart positioning */
	.sub-menu .sub-menu {
		top: 0;
		left: 100%;
		right: auto;
	}
	
	/* Adjust nested sub-menus that would overflow right edge */
	.sub-menu li:last-child .sub-menu {
		left: auto;
		right: 100%;
	}
}