/**
 * Mega Menu Styles
 *
 * @package Plastpro_Mega_Menu
 * @since 1.0.0
 */

/* Mega Menu Base Styles */
.header-main-nav {
	position: relative;
	overflow: visible; /* Allow mega menu to overflow below */
}

.header-content {
	position: relative;
	overflow: visible; /* Allow mega menu to overflow */
}

.main-navigation li.has-mega-menu {
	position: static;
}

/* Parent menu link hover and active states */
.main-navigation li.has-mega-menu > a:hover,
.main-navigation li.has-mega-menu > a:focus {
	color: var(--plastpro-gray, #7C878E);
}

.mega-menu-wrapper {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	pointer-events: none;
	z-index: 1001; /* Higher than sticky header z-index: 1000 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	overflow: visible;
}

/* Invisible bridge area to prevent hover loss when moving from nav to panel */
.mega-menu-wrapper::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	pointer-events: auto;
	background: transparent;
	z-index: 1;
}

.mega-menu-wrapper.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mega-menu-panel {
	background-color: #F5F5F5;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.15);
	padding: 20px 17px 20px 40px;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.5s ease-in-out;
}

.mega-menu-wrapper.active .mega-menu-panel {
	max-height: 600px;
}

/* Hide mega menu content when it's inline in the menu structure */
.main-navigation li .mega-menu-content,
.primary-menu li .mega-menu-content {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Only show content when it's in the panel */
.mega-menu-panel .mega-menu-content {
	display: block !important;
	visibility: visible !important;
	position: static !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.mega-menu-title {
	font-size: 24px;
	font-weight: 700;
	color: #1D252D;
	margin: 0 0 30px 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #DDE1E6;
}

/* Products menu title styling */
.mega-menu-products .mega-menu-title {
	color: #000;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	margin: 0 0 30px 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #DDE1E6;
}

.mega-menu-columns {
	display: grid;
	column-gap: 70px;
}

/* Products Menu - 2 columns */
.mega-menu-products .mega-menu-columns {
	grid-template-columns: 4fr 6fr;
	align-items: start;
}

/* Products menu columns - ensure last column respects panel padding */
.mega-menu-products .mega-menu-column:last-child {
	padding-right: 0;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}

.mega-menu-products .mega-menu-column {
	margin-top: 0;
	padding-top: 0;
}

/* Title inside first column */
.mega-menu-products .mega-menu-column:first-child .mega-menu-title {
	margin-bottom: 30px;
}

/* Align Featured title with Browse by Product title */
.mega-menu-products .mega-menu-featured-section-title {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 30px;
}

/* Resources Menu - 3 columns */
.mega-menu-resources .mega-menu-columns {
	grid-template-columns: 4fr 2fr 2fr;
	gap: 40px 20px;
}

.mega-menu-resources .mega-menu-column:first-child {
	margin-right: 45px;
}

.mega-menu-resources .mega-menu-column:first-child .mega-menu-item:first-child {
	margin-top: 10px;
}

.mega-menu-products .mega-menu-column:first-child .mega-menu-item:first-child,
.mega-menu-layout3 .mega-menu-column:first-child .mega-menu-item:first-child {
	margin-top: 10px;
}

/* Education Menu - 3 columns */
.mega-menu-education .mega-menu-columns {
	grid-template-columns: 4fr 3fr 3fr;
	gap: 40px 20px;
}

/* About Menu - 3 columns */
.mega-menu-about .mega-menu-columns {
	grid-template-columns: 4fr 3fr 3fr;
	gap: 40px 20px;
}

/* Layout 3 Menu - 3 columns (2 regular + 1 featured) */
.mega-menu-layout3 .mega-menu-columns {
	grid-template-columns: 3fr 3fr 3fr;
	gap: 40px 20px;
}

.mega-menu-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 35px;
}

.mega-menu-item:last-child {
	margin-bottom: 0;
}

.mega-menu-icon {
	width: 30px;
	height: 65px;
	flex-shrink: 0;
	background-color: transparent;
	border: none;
	border-radius: 4px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
}

.mega-menu-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top;
}

.mega-menu-link {
	display: block;
	text-decoration: none;
	color: #1D252D;
	flex: 1;
}

.mega-menu-item-title {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: #1D252D;
	margin: 0 0 8px 0;
}

/* Layout 2 (Resources/Education/About): 24px title in columns 2 and 3, no uppercase */
.mega-menu-resources .mega-menu-column:nth-child(2) .mega-menu-item-title,
.mega-menu-resources .mega-menu-column:nth-child(3) .mega-menu-item-title {
	font-size: 24px;
	text-transform: none;
}

/* Layout 3: 24px title in column 3, no uppercase */
.mega-menu-layout3 .mega-menu-column:nth-child(3) .mega-menu-item-title {
	font-size: 24px;
	text-transform: none;
}

/* Layout 2: featured image padding and background */
.mega-menu-resources .mega-menu-featured-item .mega-menu-featured-image {
	padding: 15px 25px 0;
	background: #D9E1E2;
}

.mega-menu-link:hover .mega-menu-item-title {
	color: var(--plastpro-gray, #7C878E);
}

.mega-menu-item-description {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #7C878E;
	margin: 0;
}

.mega-menu-featured-item {
	width: 310px;
	height: 310px;
	max-width: 310px;
	box-sizing: border-box;
	overflow: hidden;
	margin-bottom: 24px;
}

.mega-menu-featured-item .mega-menu-featured-link {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.mega-menu-featured-item .mega-menu-featured-image {
	flex: 1;
	min-height: 0;
	height: auto;
}

.mega-menu-featured-item:last-child {
	margin-bottom: 0;
}

/* Products menu - featured cards side by side */
.mega-menu-products .mega-menu-featured-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"title title"
		"item1 item2";
	row-gap: 10px;
	column-gap: 30px; /* Gap to separate cards */
	width: calc(100% - 17px); /* Account for margin-right */
	max-width: calc(100% - 17px);
	box-sizing: border-box;
	margin-right: 17px; /* Spacing from right edge of panel */
}

.mega-menu-products .mega-menu-featured-section-title {
	grid-area: title;
	color: #000;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	margin: 0 0 10px 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #DDE1E6;
}

.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item {
	width: 310px;
	height: 310px;
	max-width: 310px;
	box-sizing: border-box;
	margin: 0; /* Remove all margins - grid handles spacing */
	overflow: hidden; /* Prevent overflow */
}

.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item:first-of-type {
	grid-area: item1;
}

.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item:last-of-type {
	grid-area: item2;
}

/* Ensure both featured links are properly sized */
.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item .mega-menu-featured-link {
	width: 100%;
	height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* Prevent overflow */
}

/* Products menu featured cards - full image with overlaid text */
.mega-menu-products .mega-menu-featured-link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	background-color: transparent;
	border: none;
	padding: 0;
	overflow: hidden;
}

.mega-menu-products .mega-menu-featured-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #F0EEED;
}

.mega-menu-products .mega-menu-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mega-menu-products .mega-menu-featured-link .mega-menu-item-title,
.mega-menu-products .mega-menu-featured-link .mega-menu-item-description {
	position: relative;
	z-index: 2;
	color: #FFFFFF;
	padding: 0 20px;
}

.mega-menu-products .mega-menu-featured-link .mega-menu-item-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
	margin-top: 60px;
	padding-left: 20px;
	padding-right: 20px;
}

.mega-menu-products .mega-menu-featured-link .mega-menu-item-description {
	margin-top: 0;
}

.mega-menu-products .mega-menu-featured-link .mega-menu-item-description {
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	padding-left: 20px;
	padding-right: 20px;
	font-family: "Gilda Display";
}

.mega-menu-products .mega-menu-featured-link .mega-menu-featured-cta {
	display: none;
}

.mega-menu-featured-link {
	display: block;
	text-decoration: none;
	background-color: #D9E1E2;
	border: 1px solid #DDE1E6;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mega-menu-featured-link:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mega-menu-featured-image {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	background-color: #F0EEED;
	position: relative;
	overflow: hidden;
}

.mega-menu-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mega-menu-featured-image img[src=""],
.mega-menu-featured-image img:not([src]) {
	display: none;
}

.mega-menu-featured-link .mega-menu-item-title {
	padding: 24px 16px 0px; /* Reduced bottom padding to bring description closer */
}

.mega-menu-featured-link .mega-menu-item-description {
	padding: 0 16px 8px; /* Reduced bottom padding to bring CTA closer */
}

.mega-menu-featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--plastpro-orange, #E87722);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 16px 16px; /* Keep bottom padding for card spacing */
}

.mega-menu-featured-cta-arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-menu-featured-cta-arrow svg {
	display: block;
}

/* ============================================
   Mobile Mega Menu Styles (Accordion)
   ============================================ */

@media screen and (max-width: 768px) {
	/* Hide desktop mega menu on mobile */
	.mega-menu-wrapper {
		display: none;
	}
	
	/* Override desktop hiding rules for mobile menu structure - but keep it hidden by default */
	.mobile-primary-menu li .mega-menu-content {
		position: static !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		/* Keep hidden by default - will be shown when cloned and moved */
		display: none !important;
		visibility: hidden !important;
	}
	
	/* Show mega menu content when it's cloned and moved outside with mobile class */
	.mobile-mega-menu-content {
		display: block !important;
		visibility: visible !important;
		background-color: #F5F5F5;
		padding: 20px;
		margin: 0;
		border-top: 1px solid #E5E5E5;
	}
	
	/* Stack all columns vertically on mobile */
	.mobile-mega-menu-content .mega-menu-columns {
		display: block;
		gap: 0;
	}
	
	.mobile-mega-menu-content .mega-menu-column {
		width: 100%;
		margin-bottom: 30px;
	}
	
	.mobile-mega-menu-content .mega-menu-column:last-child {
		margin-bottom: 0;
	}
	
	/* Stack featured items vertically - 350px height so Learn More is not cut off */
	.mobile-mega-menu-content .mega-menu-featured-item {
		margin-bottom: 20px;
		width: 100%;
		max-width: 100%; /* Override desktop 310px so cards are full width */
		height: 350px;
	}
	
	/* Keep spacing for Products menu featured items on mobile */
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-item {
		margin-bottom: 20px !important;
	}
	
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-item:last-child {
		margin-bottom: 20px !important; /* Keep margin for Products menu */
	}
	
	.mobile-mega-menu-content .mega-menu-featured-item:last-child {
		margin-bottom: 0;
	}
	
	/* Adjust featured cards for mobile - Layout 2 cards; match item height so Learn More is visible */
	.mobile-mega-menu-content .mega-menu-featured-item .mega-menu-featured-link {
		height: 100%;
		min-height: 350px;
	}
	
	.mobile-mega-menu-content .mega-menu-featured-image {
		min-height: 200px;
		height: 150px; /* Layout 2 card image height */
	}
	
	.mobile-mega-menu-content .mega-menu-featured-image img {
		min-height: 200px;
		height: 150px; /* Layout 2 card image height */
	}
	
	/* Products menu featured cards - match total height of Layout 2 cards on mobile */
	/* Layout 2 cards: 150px image + ~24px title top + ~16px title bottom + text + ~16px description bottom = ~250-280px total */
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-link {
		height: 350px !important; /* Increased height to match Layout 2 cards better */
		min-height: 350px !important;
	}
	
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-image {
		height: 100% !important; /* Fill entire card - image takes full height */
		min-height: 100% !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
	}
	
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-image img {
		height: 100% !important; /* Fill entire card */
		min-height: 100% !important;
		object-fit: cover !important;
	}
	
	/* Stack Products menu featured cards */
	.mobile-mega-menu-content .mega-menu-featured-section {
		display: block;
		gap: 20px;
	}
	
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-section {
		display: block !important; /* Override grid for mobile */
		gap: 20px;
	}
	
	/* Ensure Products featured items have spacing and full width on mobile (override desktop 310px) */
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 20px !important;
		display: block !important;
	}
	
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-section .mega-menu-featured-item:last-child {
		margin-bottom: 20px !important; /* Keep spacing even for last item */
	}
	
	/* Adjust text positioning for mobile */
	.mobile-mega-menu-content.mega-menu-products .mega-menu-featured-link .mega-menu-item-title {
		margin-top: 30px;
	}
	
	/* Ensure all content is visible and properly spaced */
	.mobile-mega-menu-content .mega-menu-item {
		margin-bottom: 20px;
	}
	.mobile-mega-menu-content .mega-menu-column .mega-menu-item:first-child {
		margin-top: 10px; /* Match desktop first-item spacing */
	}
	
	.mobile-mega-menu-content .mega-menu-title,
	.mobile-mega-menu-content .mega-menu-featured-section-title {
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	/* Style label-only mega menu items like links (padding, flex) so they match and are tappable */
	.mobile-primary-menu .menu-item.has-mega-menu > .menu-item-label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		color: #1D252D;
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 22px;
		text-transform: uppercase;
		transition: color 0.3s ease;
		cursor: pointer;
		width: 100%;
		box-sizing: border-box;
	}
	.mobile-primary-menu .menu-item.has-mega-menu > .menu-item-label:hover {
		color: #7C878E;
	}

	/* Add orange down arrow to menu items with mega menu (link and label) */
	.mobile-primary-menu .menu-item.has-mega-menu > a::after,
	.mobile-primary-menu .menu-item.has-mega-menu > .menu-item-label::after {
		content: '';
		width: 9.754px;
		height: 5.69px;
		background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23E87722' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		display: inline-block !important;
		flex-shrink: 0;
		margin-left: 10px;
		transform: none; /* Down arrow, no rotation */
		transition: transform 0.3s ease;
	}
	
	/* Rotate arrow up when menu item is expanded */
	.mobile-primary-menu .menu-item.has-mega-menu.mega-menu-expanded > a::after,
	.mobile-primary-menu .menu-item.has-mega-menu.mega-menu-expanded > .menu-item-label::after {
		transform: rotate(180deg); /* Rotate to point up */
	}
}