/**
 * Modern Mega Menu for GoMedWear
 * Multi-column dropdowns, icons, smooth animations
 * Applies on desktop (769px+). Mobile uses the stacked drawer.
 */

@media (min-width: 769px) {

	/* Never clip the mega menu */
	.site-header,
	.site-header__container,
	.main-nav,
	.main-nav__list {
		overflow: visible !important;
	}

	/* Anchor full-width mega panels to the header container */
	.site-header__container {
		position: relative;
	}

	.main-nav__list {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.main-nav__list > li {
		position: static; /* static so dropdown can span full width */
	}

	/* But keep simple (small) dropdowns anchored to their item */
	.main-nav__list > li.has-simple-dropdown {
		position: relative;
	}

	.main-nav__list > li > a {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 14px 14px;
		font-weight: 600;
		font-size: 0.8rem;
		color: var(--ink, #14241f);
		border-radius: 8px;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.main-nav__list > li:hover > a {
		background: rgba(12, 90, 80, 0.08);
		color: #0c5a50;
	}

	/* Parent caret */
	.main-nav__list > li.menu-item-has-children > a::after {
		content: '';
		width: 0; height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		margin-left: 2px;
		transition: transform 0.25s ease;
		opacity: 0.7;
	}
	.main-nav__list > li.menu-item-has-children:hover > a::after {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* ===== The dropdown / mega panel ===== */
	.main-nav__list > li > ul,
	.main-nav__list > li > .sub-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0 auto;
		max-width: 1180px;
		width: calc(100% - 48px);

		background: #ffffff;
		border: 1px solid #eef1f0;
		border-radius: 16px;
		box-shadow: 0 24px 60px -16px rgba(8, 40, 33, 0.28);
		padding: 22px;

		/* multi-column flow */
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px 14px;
		list-style: none;

		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		pointer-events: none;
		z-index: 9999;
	}

	/* Invisible bridge: fills the gap between menu item and panel so hover
	   never breaks when the mouse travels down to the dropdown. */
	.main-nav__list > li.menu-item-has-children::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 16px;
		background: transparent;
		display: none;
	}

	.main-nav__list > li.menu-item-has-children:hover::after {
		display: block;
	}

	/* Push the panel down by the bridge height using translate, not margin,
	   so there's no real gap to lose hover in. */
	.main-nav__list > li > ul,
	.main-nav__list > li > .sub-menu {
		top: calc(100% + 14px);
	}

	/* Smaller simple dropdowns (few items) stay narrow and left-aligned */
	.main-nav__list > li.has-simple-dropdown > ul,
	.main-nav__list > li.has-simple-dropdown > .sub-menu {
		left: 0;
		right: auto;
		width: 260px;
		max-width: 260px;
		margin-left: 0;
		display: block !important;
		grid-template-columns: none !important;
	}

	.main-nav__list > li:hover > ul,
	.main-nav__list > li:hover > .sub-menu,
	.main-nav__list > li:focus-within > ul,
	.main-nav__list > li:focus-within > .sub-menu,
	.main-nav__list > li.is-hovered > ul,
	.main-nav__list > li.is-hovered > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	/* Mega panel links */
	.main-nav__list > li > ul > li > a,
	.main-nav__list > li > .sub-menu > li > a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 11px 12px;
		border-radius: 10px;
		font-size: 0.84rem;
		font-weight: 500;
		color: #2a3a35;
		text-decoration: none;
		white-space: nowrap;
		transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
	}

	.main-nav__list > li > ul > li > a:hover,
	.main-nav__list > li > .sub-menu > li > a:hover {
		background: #f2f8f6;
		color: #0c5a50;
		transform: translateX(2px);
	}

	/* Icon dot/swatch before each item */
	.main-nav__list > li > ul > li > a::before,
	.main-nav__list > li > .sub-menu > li > a::before {
		content: '';
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		border-radius: 6px;
		background: #e8f2ef;
		display: inline-block;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 13px;
	}

	/* Simple (narrow) dropdown items: lighter, no big icon padding */
	.main-nav__list > li.has-simple-dropdown > ul > li > a::before,
	.main-nav__list > li.has-simple-dropdown > .sub-menu > li > a::before {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #0c5a50;
		opacity: 0.5;
	}

	/* ===== COLOR SWATCHES for the "Scrubs by Color" mega menu ===== */
	li[data-mega="color"] > ul > li > a::before,
	li[data-mega="color"] > .sub-menu > li > a::before {
		border-radius: 50%;
		border: 1px solid rgba(0,0,0,0.12);
		background-size: cover;
	}
	li[data-mega="color"] a[href*="purple"]::before   { background:#7c4dff !important; }
	li[data-mega="color"] a[href*="red"]::before      { background:#e53935 !important; }
	li[data-mega="color"] a[href*="white"]::before    { background:#ffffff !important; border-color:#ccc; }
	li[data-mega="color"] a[href*="navy"]::before     { background:#1a237e !important; }
	li[data-mega="color"] a[href*="royal"]::before    { background:#2747a6 !important; }
	li[data-mega="color"] a[href*="surgical"]::before { background:#0c5a50 !important; }
	li[data-mega="color"] a[href*="lime"]::before     { background:#a5d610 !important; }
	li[data-mega="color"] a[href*="mint"]::before     { background:#aedcc4 !important; }
	li[data-mega="color"] a[href*="forest"]::before   { background:#2f5d3a !important; }
	li[data-mega="color"] a[href*="seafoam"]::before  { background:#7fd1bd !important; }
	li[data-mega="color"] a[href*="dark-green"]::before { background:#1b3a2b !important; }
	li[data-mega="color"] a[href*="sage"]::before     { background:#9cae93 !important; }
	li[data-mega="color"] a[href*="hunter"]::before   { background:#2f5d3a !important; }
	li[data-mega="color"] a[href*="black"]::before    { background:#1a1a1a !important; }

	/* Hide nested third-level submenus inside mega (flatten) */
	.main-nav__list > li > ul ul {
		position: static;
		display: contents;
	}
}

@media (min-width: 769px) {
	/* ===== SVG ICONS for Products / Services / Solutions / Fabrics items ===== */
	/* Generic product icon */
	li[data-mega="products"] > ul > li > a::before,
	li[data-mega="products"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
	}
	/* Services icon (gear) */
	li[data-mega="services"] > ul > li > a::before,
	li[data-mega="services"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
	}
	/* Solutions icon (sparkle) */
	li[data-mega="solutions"] > ul > li > a::before,
	li[data-mega="solutions"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3m0 12v3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M3 12h3m12 0h3M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1'/%3E%3C/svg%3E");
	}
	/* Fabrics icon (layers) */
	li[data-mega="fabrics"] > ul > li > a::before,
	li[data-mega="fabrics"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
	}
	/* Medical Scrubs icon (shirt) */
	li[data-mega="medical"] > ul > li > a::before,
	li[data-mega="medical"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
	}
	/* Seasonal icon (snowflake/gift) */
	li[data-mega="seasonal"] > ul > li > a::before,
	li[data-mega="seasonal"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
	}
	/* Company icon (building) */
	li[data-mega="company"] > ul > li > a::before,
	li[data-mega="company"] > .sub-menu > li > a::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='9' y1='9' x2='9' y2='9.01'/%3E%3Cline x1='15' y1='9' x2='15' y2='9.01'/%3E%3Cline x1='9' y1='13' x2='9' y2='13.01'/%3E%3Cline x1='15' y1='13' x2='15' y2='13.01'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");
	}

	/* ===== Column counts per mega menu (forced) ===== */
	/* Products: many items -> 4 columns */
	li[data-mega="products"] > ul,
	li[data-mega="products"] > .sub-menu {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	/* Color: 14 items -> 4 columns */
	li[data-mega="color"] > ul,
	li[data-mega="color"] > .sub-menu {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	/* Medical Scrubs -> 3 columns */
	li[data-mega="medical"] > ul,
	li[data-mega="medical"] > .sub-menu {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	/* Fabrics -> 3 columns */
	li[data-mega="fabrics"] > ul,
	li[data-mega="fabrics"] > .sub-menu {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	/* Services -> 3 columns */
	li[data-mega="services"] > ul,
	li[data-mega="services"] > .sub-menu {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* ===== Header layout: prevent nav/button overlap (desktop) ===== */
@media (min-width: 769px) {
	.site-header__container {
		gap: 1.5rem;
	}
	.main-nav {
		flex: 1 1 auto;
		justify-content: center;
	}
	.main-nav__list {
		flex-wrap: nowrap;
	}
	.main-nav__list > li > a {
		font-size: 0.78rem;
		padding: 12px 10px;
	}
	.site-header__actions {
		flex: 0 0 auto;
	}
}

/* On smaller desktops/laptops, tighten further so nothing collides */
@media (min-width: 769px) and (max-width: 1200px) {
	.main-nav__list > li > a {
		font-size: 0.72rem;
		padding: 10px 7px;
		gap: 3px;
	}
	.site-header__container {
		gap: 0.8rem;
	}
}