/**
 * Mega Menu Styles for Scratchers Dropdown
 * Multi-column layout with brand colors
 * 
 * Brand Colors:
 * - Blue: #004986 (PANTONE 2186 C)
 * - Green: #319B42 (PANTONE 7739C)
 * - Gray: #5B6770 (PANTONE 431 C)
 */

/* Target the Scratchers menu item and its dropdown */
.main-header-menu .menu-item-has-children.scratchers-menu {
	position: relative;
}

/* Create invisible hover bridge to prevent menu from closing */
.main-header-menu .menu-item-has-children.scratchers-menu::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 20px; /* Bridge height - gives space to move cursor */
	background: transparent;
	z-index: 9998;
	display: none;
}

.main-header-menu .menu-item-has-children.scratchers-menu:hover::after {
	display: block;
}

/* Hide default dropdown behavior */
.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	background: #004986; /* Blue background */
	padding: 30px 40px;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	min-width: 900px;
	max-width: 1200px;
	margin-top: 10px;
}

/* Show dropdown on hover */
.main-header-menu .menu-item-has-children.scratchers-menu:hover .sub-menu {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px 30px;
	animation: fadeInDown 0.3s ease-in-out;
}

/* Add arrow pointer at top - aligned toward right where menu item is */
.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -10px;
	right: 40px;
	left: auto;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #004986;
}

/* Style individual state links */
.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 4px;
	transition: all 0.2s ease;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.15); /* Subtle vertical separator */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle horizontal separator */
}

/* Remove right border from last column items */
.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(5n) a {
	border-right: none;
}

/* Hover effect - Green highlight */
.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li a:hover {
	background: #319B42; /* Green */
	color: #ffffff;
	transform: translateX(5px);
}

/* Animation - anchored to right instead of center */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu {
		grid-template-columns: repeat(3, 1fr);
		min-width: 600px;
		max-width: 700px;
	}
	
	/* Adjust border removal for 3 columns */
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(5n) a {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(3n) a {
		border-right: none;
	}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu {
		position: static;
		transform: none;
		grid-template-columns: repeat(2, 1fr);
		min-width: auto;
		max-width: 100%;
		width: 100%;
		padding: 20px;
		margin-top: 0;
	}
	
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu::before {
		display: none;
	}
	
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li a {
		font-size: 14px;
		padding: 8px 10px;
	}
	
	/* Adjust border removal for 2 columns */
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(5n) a,
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(3n) a {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(2n) a {
		border-right: none;
	}
}

@media (max-width: 480px) {
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu {
		grid-template-columns: 1fr;
	}
	
	/* Remove all right borders for single column */
	.main-header-menu .menu-item-has-children.scratchers-menu .sub-menu li a {
		border-right: none;
	}
}

/* ============================================================================
 * Astra Theme Desktop Menu Overrides
 * ============================================================================ */

/* Create invisible hover bridge for Astra menus */
#primary-menu .menu-item-has-children.scratchers-menu::after,
.ast-desktop-menu .menu-item-has-children.scratchers-menu::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 20px;
	background: transparent;
	z-index: 9998;
	display: none;
}

#primary-menu .menu-item-has-children.scratchers-menu:hover::after,
.ast-desktop-menu .menu-item-has-children.scratchers-menu:hover::after {
	display: block;
}

#primary-menu .menu-item-has-children.scratchers-menu .sub-menu,
.ast-desktop-menu .menu-item-has-children.scratchers-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	background: #004986;
	padding: 30px 40px;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	min-width: 900px;
	max-width: 1200px;
	margin-top: 10px;
}

#primary-menu .menu-item-has-children.scratchers-menu:hover .sub-menu,
.ast-desktop-menu .menu-item-has-children.scratchers-menu:hover .sub-menu {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px 30px;
}

/* Arrow aligned to right for right-aligned menu */
#primary-menu .menu-item-has-children.scratchers-menu .sub-menu::before,
.ast-desktop-menu .menu-item-has-children.scratchers-menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -10px;
	right: 40px;
	left: auto;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #004986;
}

#primary-menu .menu-item-has-children.scratchers-menu .sub-menu li a,
.ast-desktop-menu .menu-item-has-children.scratchers-menu .sub-menu li a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 4px;
	transition: all 0.2s ease;
	font-size: 15px;
	font-weight: 500;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Remove right border from last column items */
#primary-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(5n) a,
.ast-desktop-menu .menu-item-has-children.scratchers-menu .sub-menu li:nth-child(5n) a {
	border-right: none;
}

#primary-menu .menu-item-has-children.scratchers-menu .sub-menu li a:hover,
.ast-desktop-menu .menu-item-has-children.scratchers-menu .sub-menu li a:hover {
	background: #319B42;
	color: #ffffff;
	transform: translateX(5px);
}

/* ============================================================================
 * Astra Mobile Menu - Background Color Fix
 * 
 * Astra's mobile drawer/popup has multiple layers with white backgrounds
 * that override our blue. We need to target all of them with !important
 * to ensure the brand blue shows through consistently.
 * ============================================================================ */

/* Astra mobile popup drawer - the outermost mobile menu container */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	background-color: #004986 !important;
	background: #004986 !important;
}

/* Astra mobile header wrapper and content areas */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu,
.ast-mobile-header-content {
	background-color: #004986 !important;
	background: #004986 !important;
}

/* The mobile menu container itself */
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .ast-nav-menu,
.ast-mobile-popup-content .main-header-menu,
.ast-mobile-popup-content .ast-nav-menu {
	background-color: #004986 !important;
	background: #004986 !important;
}

/* Individual menu items in mobile - remove any white background */
.ast-mobile-popup-drawer .menu-item,
.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-drawer .ast-menu-toggle,
.ast-mobile-popup-content .menu-item,
.ast-mobile-popup-content .menu-item > a {
	background-color: transparent !important;
	background: transparent !important;
	color: #ffffff !important;
}

/* Sub-menu in mobile drawer */
.ast-mobile-popup-drawer .sub-menu,
.ast-mobile-popup-drawer .menu-item-has-children .sub-menu,
.ast-mobile-popup-content .sub-menu,
.ast-mobile-popup-content .menu-item-has-children .sub-menu {
	background-color: #004986 !important;
	background: #004986 !important;
}

/* Sub-menu links in mobile */
.ast-mobile-popup-drawer .sub-menu li a,
.ast-mobile-popup-content .sub-menu li a {
	color: #ffffff !important;
	background-color: transparent !important;
}

/* Hover/active state in mobile menu */
.ast-mobile-popup-drawer .menu-item > a:hover,
.ast-mobile-popup-drawer .menu-item > a:focus,
.ast-mobile-popup-drawer .sub-menu li a:hover,
.ast-mobile-popup-drawer .sub-menu li a:focus,
.ast-mobile-popup-content .menu-item > a:hover,
.ast-mobile-popup-content .sub-menu li a:hover {
	background-color: #319B42 !important;
	color: #ffffff !important;
}

/* Astra's toggle/arrow buttons for expanding sub-menus on mobile */
.ast-mobile-popup-drawer .ast-menu-toggle,
.ast-mobile-popup-drawer .dropdown-caret,
.ast-mobile-popup-drawer .ast-menu-toggle .ast-svg-arrow,
.ast-mobile-popup-content .ast-menu-toggle {
	color: #ffffff !important;
	fill: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Close button in mobile drawer */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-popup-close {
	color: #ffffff !important;
}

/* Astra off-canvas / slide-in menu (alternate mobile layout) */
.ast-off-canvas-active .ast-off-canvas-sidebar,
.ast-mobile-menu-buttons .ast-mobile-menu-trigger-fill {
	background-color: #004986 !important;
}

/* Separator lines between mobile menu items */
.ast-mobile-popup-drawer .main-header-menu > .menu-item,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > a,
.ast-mobile-popup-content .main-header-menu > .menu-item {
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Astra Header Builder mobile menu (newer Astra versions) */
.ast-builder-menu-mobile .main-header-menu,
.ast-builder-menu-mobile .main-header-menu .menu-item > a,
.ast-hfb-header .ast-mobile-popup-drawer .ast-builder-menu-mobile {
	background-color: #004986 !important;
	color: #ffffff !important;
}

.ast-builder-menu-mobile .main-header-menu .sub-menu {
	background-color: rgba(0, 55, 100, 0.95) !important;
}

.ast-builder-menu-mobile .main-header-menu .sub-menu li a {
	color: #ffffff !important;
}