/**
 * Clean Dropdown Menu Styles
 * Aligned with site design
 * 
 * @package Blog Content
 */

/* Ensure header and navigation are always on top */
.site-header,
.theme-main-header {
	position: relative;
	z-index: 100000 !important;
}

.main-navigation {
	position: relative;
	z-index: 100001 !important;
}

/* Ensure content is below navigation */
.site-content,
.site-main,
.primary-site-content {
	position: relative;
	z-index: 1;
}

/* ========================================
   Desktop Dropdown Menu
   ======================================== */
@media (min-width: 992px) {
	/* Dropdown container */
	.main-navigation ul ul {
		min-width: 200px;
		width: max-content;
		max-width: 600px;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(0);
		opacity: 0;
		visibility: hidden;
		margin: 0;
		padding: 8px;
		background: #ffffff;
		border: 1px solid rgba(0, 123, 255, 0.15);
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
					0 8px 24px rgba(0, 123, 255, 0.12);
		z-index: 999999 !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* Two columns for 7+ items */
	.main-navigation ul ul.menu-cols-2 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
		min-width: 420px !important;
		gap: 4px 8px !important;
	}
	
	/* Three columns for 13+ items */
	.main-navigation ul ul.menu-cols-3 {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
		min-width: 580px !important;
		gap: 4px 8px !important;
	}

	/* Show dropdown on hover */
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	/* Dropdown items */
	.main-navigation ul ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
	}

	.main-navigation ul ul li:not(:last-child) {
		margin-bottom: 0;
	}

	.main-navigation ul ul a {
		display: block;
		padding: 10px 16px;
		color: #2c3e50;
		font-size: 0.938rem;
		font-weight: 500;
		line-height: 1.5;
		text-decoration: none;
		text-transform: none;
		white-space: nowrap;
		border-radius: 6px;
		transition: all 0.2s ease;
		position: relative;
	}

	/* Remove all ::after elements in dropdown */
	.main-navigation ul ul a::after {
		display: none !important;
	}

	/* Hover state */
	.main-navigation ul ul a:hover,
	.main-navigation ul ul a:focus {
		background: rgba(0, 123, 255, 0.08);
		color: #007bff;
		padding-left: 20px;
		text-decoration: none;
	}

	/* Current page highlight */
	.main-navigation ul ul .current-menu-item > a,
	.main-navigation ul ul .current_page_item > a {
		background: rgba(0, 123, 255, 0.12);
		color: #007bff;
		font-weight: 600;
	}

	/* Submenu arrow indicator */
	.main-navigation ul ul li.menu-item-has-children > a::after {
		content: "\f105" !important;
		font-family: Font Awesome\ 5 Free !important;
		font-weight: 900 !important;
		display: inline-block !important;
		position: absolute !important;
		right: 12px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		color: #007bff !important;
		font-size: 0.8em !important;
		opacity: 0.7 !important;
		transition: all 0.2s ease !important;
	}

	.main-navigation ul ul li.menu-item-has-children > a:hover::after {
		opacity: 1 !important;
		transform: translateY(-50%) translateX(2px) !important;
	}

	/* Nested submenu */
	.main-navigation ul ul ul {
		top: -6px;
		left: 100%;
		margin-left: 8px;
		transform: translateX(-8px);
		display: block !important;
		grid-template-columns: none !important;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	/* Animation for items - only for single column menus */
	.main-navigation ul ul:not(.menu-cols-2):not(.menu-cols-3) li {
		opacity: 0;
		transform: translateX(-8px);
		transition: all 0.25s ease;
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li,
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li {
		opacity: 1;
		transform: translateX(0);
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(1),
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(1) {
		transition-delay: 0.03s;
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(2),
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(2) {
		transition-delay: 0.06s;
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(3),
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(3) {
		transition-delay: 0.09s;
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(4),
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(4) {
		transition-delay: 0.12s;
	}

	.main-navigation ul li:hover > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(n+5),
	.main-navigation ul li:focus-within > ul:not(.menu-cols-2):not(.menu-cols-3) li:nth-child(n+5) {
		transition-delay: 0.15s;
	}
}

/* Mobile styles in mobile-menu.css */