/* CyberBROS - Centralized Navigation Styles */

/* Custom title font */
.site-title a {
	font-family: 'IM Fell French Canon SC', serif !important;
	font-weight: 400 !important;
	font-style: italic !important;
	font-size: 24px !important;
}

.site-title a em {
	font-style: italic;
	text-transform: lowercase;
}

/* Navigation container */
#wrap-nav-header {
	display: block;
	background: #222;
	padding: 12px 0;
	margin-bottom: 25px;
}

.nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Main menu */
.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
}

.menu li {
	position: relative;
	display: inline-block;
}

.menu li a {
	color: #ccc;
	text-decoration: none;
	padding: 6px 0;
	display: block;
	transition: color 0.3s;
	font-size: 14px;
}

.menu li a:hover,
.menu li.current-menu-item a {
	color: #fff;
}

/* Menu toggle button (hidden on desktop) */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
}

.menu-toggle-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle-icon span {
	display: block;
	width: 25px;
	height: 3px;
	background: #fff;
	transition: all 0.3s;
}

/* Dropdown submenu */
.menu .sub-menu {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	background: #1a1a1a !important;
	min-width: 200px;
	padding: 8px 0;
	z-index: 999;
	box-shadow: 0 8px 16px rgba(0,0,0,0.7);
	border: 1px solid #333;
	border-radius: 4px;
	max-height: none !important;
	overflow: visible !important;
	pointer-events: none;
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children.active > .sub-menu {
	display: block !important;
	pointer-events: auto;
}

.sub-menu li {
	display: block;
	padding: 0;
	border-bottom: 1px solid #2a2a2a;
}

.sub-menu li:last-child {
	border-bottom: none;
}

.sub-menu li a {
	padding: 10px 18px !important;
	display: block !important;
	font-size: 13px !important;
	color: #999 !important;
	background: transparent !important;
	transition: all 0.2s !important;
}

.sub-menu li a:hover {
	background: #503e5c !important;
	color: #fff !important;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media (max-width: 960px) {
	/* Show hamburger menu toggle */
	.menu-toggle,
	.nav-menu .menu-toggle,
	.nav-menu.mobile-menu .menu-toggle {
		display: block !important;
		margin: 0 auto !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;
		padding: 10px !important;
	}
	
	.menu-toggle-icon,
	.nav-menu.mobile-menu .menu-toggle-icon {
		display: flex !important;
		flex-direction: column !important;
		gap: 5px !important;
	}
	
	.menu-toggle-icon span {
		display: block !important;
		width: 25px !important;
		height: 3px !important;
		background: #fff !important;
		transition: all 0.3s !important;
	}
	
	/* Hide menu by default on mobile */
	.nav-menu.mobile-menu .menu,
	#wrap-nav-header .menu {
		display: none !important;
		flex-direction: column !important;
		width: 100% !important;
		background: #1a1a1a !important;
		padding: 0 !important;
		margin: 0 !important;
		gap: 0 !important;
	}
	
	/* Show menu when toggle is active */
	.nav-menu.mobile-menu.toggled .menu {
		display: flex !important;
	}
	
	/* Mobile menu items - vertical stack */
	.nav-menu.mobile-menu .menu > li {
		display: block !important;
		width: 100% !important;
		border-right: none !important;
		border-bottom: 1px solid #2a2a2a !important;
	}
	
	.nav-menu.mobile-menu .menu > li:last-child {
		border-bottom: none !important;
	}
	
	.nav-menu.mobile-menu .menu li a {
		padding: 15px 20px !important;
		font-size: 16px !important;
		display: block !important;
		width: 100% !important;
		color: #ccc !important;
		text-align: left !important;
	}
	
	.nav-menu.mobile-menu .menu li a:hover {
		color: #fff !important;
		background: rgba(255,255,255,0.1) !important;
	}
	
	/* Mobile submenu - nested under parent */
	.nav-menu.mobile-menu .menu .sub-menu {
		position: static !important;
		transform: none !important;
		left: auto !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		background: #111 !important;
		padding: 0 !important;
	}
	
	.nav-menu.mobile-menu .menu .menu-item-has-children.active .sub-menu {
		display: block !important;
	}
	
	.nav-menu.mobile-menu .menu .sub-menu li {
		border-right: none !important;
		border-bottom: 1px solid #2a2a2a !important;
	}
	
	.nav-menu.mobile-menu .menu .sub-menu li a {
		font-size: 15px !important;
		padding: 12px 20px 12px 40px !important;
		background: #111 !important;
	}
	
	.nav-menu.mobile-menu .menu .sub-menu li a:hover {
		background: #503e5c !important;
	}
}

@media (max-width: 719px) {
	/* Extra small screens */
	.site-title a {
		font-size: 20px !important;
	}
	
	.nav-menu.mobile-menu .menu li a {
		padding: 12px 15px !important;
		font-size: 15px !important;
	}
}