/* ========================================
   Mega Menu Styles

   Multi-column dropdowns with images,
   featured areas, and category grids.
   ======================================== */


/* -------------------------------------------------------
   TOP-LEVEL ITEM — HAS MEGA DROPDOWN
   ------------------------------------------------------- */

.menu-item--mega {
	position: static; /* allows mega dropdown to span full width */
}

.menu-item--has-mega > a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}


/* -------------------------------------------------------
   MEGA DROPDOWN PANEL
   ------------------------------------------------------- */

.menu-item--has-mega > .sub-menu,
.menu-item--has-mega > .mega-menu__columns {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--starter-color-surface, #fff);
	border: 1px solid var(--starter-color-border, #eee);
	border-radius: 0 0 var(--starter-border-radius, 8px) var(--starter-border-radius, 8px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(0, 0, 0, 0.05);
	padding: 2rem;
	max-height: 80vh;
	overflow-y: auto;
}

/* Open state */
.menu-item--has-mega.is-mega-open > .sub-menu,
.menu-item--has-mega.is-mega-open > .mega-menu__columns,
.menu-item--has-mega:hover > .sub-menu,
.menu-item--has-mega:focus-within > .sub-menu {
	display: block;
}

/* Full-width container within the mega dropdown */
.mega-menu__columns {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 4), 1fr);
	gap: 2rem;
	padding: 0;
	margin: 0;
	list-style: none;
}


/* -------------------------------------------------------
   MEGA COLUMN
   ------------------------------------------------------- */

.mega-menu__col {
	min-width: 0;
}

.mega-menu__col .sub-menu {
	position: static;
	box-shadow: none;
	border: none;
	padding: 0;
	min-width: auto;
	display: block !important; /* always visible inside mega */
	background: transparent;
}

.mega-menu__col .sub-menu li {
	list-style: none;
}


/* -------------------------------------------------------
   COLUMN HEADER (depth-1 item that's a parent)
   ------------------------------------------------------- */

.mega-menu__col > .sub-menu > li > a {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--starter-color-heading, #1a1a1a);
	padding: 0 0 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 2px solid var(--starter-color-accent, #0073aa);
}

.mega-menu__col > .sub-menu > li > a:hover {
	color: var(--starter-color-accent, #0073aa);
}


/* -------------------------------------------------------
   MENU ITEMS — DEPTH 2+ (links inside columns)
   ------------------------------------------------------- */

.mega-menu__col .sub-menu .sub-menu a,
.mega-menu__col .sub-menu > li > ul > li > a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	color: var(--starter-color-text-light, #666);
	font-size: 0.9rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	transition: color 0.15s, padding-left 0.15s;
}

.mega-menu__col .sub-menu .sub-menu a:hover,
.mega-menu__col .sub-menu > li > ul > li > a:hover {
	color: var(--starter-color-accent, #0073aa);
	padding-left: 0.25rem;
	text-decoration: none;
}


/* -------------------------------------------------------
   ITEM DESCRIPTION
   ------------------------------------------------------- */

.menu-item__desc {
	display: block;
	font-size: 0.78rem;
	color: var(--starter-color-text-light, #999);
	font-weight: 400;
	line-height: 1.4;
	margin-top: 0.15rem;
}


/* -------------------------------------------------------
   ITEM IMAGE
   ------------------------------------------------------- */

.menu-item__image {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--starter-border-radius, 6px);
	flex-shrink: 0;
}

/* Larger image in featured items */
.mega-menu__item--featured .menu-item__image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--starter-border-radius, 8px);
	margin-bottom: 0.5rem;
}


/* -------------------------------------------------------
   FEATURED ITEM (full promo block)
   ------------------------------------------------------- */

.mega-menu__item--featured {
	grid-column: span 1;
}

.mega-menu__item--featured > a {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: var(--starter-color-background, #f8f8f8);
	border-radius: var(--starter-border-radius, 8px);
	transition: background 0.2s, transform 0.2s;
}

.mega-menu__item--featured > a:hover {
	background: var(--starter-color-surface, #fff);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

.mega-menu__item--featured .menu-item__desc {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--starter-color-text-light, #666);
}


/* -------------------------------------------------------
   SPAN CLASSES — Column spanning
   ------------------------------------------------------- */

.mega-menu__item--span-2 { grid-column: span 2; }
.mega-menu__item--span-3 { grid-column: span 3; }


/* -------------------------------------------------------
   BADGE ON MENU ITEMS
   ------------------------------------------------------- */

.menu-item__badge {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	padding: 0.15rem 0.45rem;
	border-radius: 3px;
	margin-left: 0.35rem;
	vertical-align: middle;
	line-height: 1;
	letter-spacing: 0.03em;
}


/* -------------------------------------------------------
   ARROW INDICATOR
   ------------------------------------------------------- */

.menu-item__arrow {
	margin-left: 0.2rem;
	transition: transform 0.2s;
	flex-shrink: 0;
}

.menu-item--has-mega:hover > a .menu-item__arrow,
.menu-item--has-mega.is-mega-open > a .menu-item__arrow {
	transform: rotate(180deg);
}


/* -------------------------------------------------------
   MEGA CATEGORIES GRID (shortcode)
   ------------------------------------------------------- */

.mega-categories {
	display: grid;
	gap: 1rem;
}

.mega-categories--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mega-categories--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-categories--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mega-categories--cols-5 { grid-template-columns: repeat(5, 1fr); }
.mega-categories--cols-6 { grid-template-columns: repeat(6, 1fr); }

.mega-categories__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem;
	border-radius: var(--starter-border-radius, 8px);
	transition: background 0.2s, transform 0.2s;
	text-decoration: none;
	color: var(--starter-color-text, #1a1a1a);
}

.mega-categories__item:hover {
	background: var(--starter-color-background, #f5f5f5);
	transform: translateY(-2px);
	text-decoration: none;
}

.mega-categories__image {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 0.5rem;
}

.mega-categories__name {
	font-size: 0.88rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.mega-categories__count {
	font-size: 0.75rem;
	color: var(--starter-color-text-light, #999);
}


/* -------------------------------------------------------
   MEGA FEATURED PRODUCTS (inside mega dropdown)
   ------------------------------------------------------- */

.mega-featured-products {
	grid-column: span 2;
	padding: 1.5rem;
	background: var(--starter-color-background, #f8f8f8);
	border-radius: var(--starter-border-radius, 8px);
}

.mega-featured-products__title {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
	color: var(--starter-color-heading, #1a1a1a);
}

.mega-featured-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.mega-featured-products__item {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s;
}

.mega-featured-products__item:hover {
	opacity: 0.8;
	text-decoration: none;
}

.mega-featured-products__item img {
	border-radius: var(--starter-border-radius, 6px);
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 0.4rem;
}

.mega-featured-products__item-title {
	font-size: 0.82rem;
	font-weight: 500;
	display: block;
}

.mega-featured-products__item-price {
	font-size: 0.78rem;
	color: var(--starter-color-text-light, #666);
}


/* -------------------------------------------------------
   MOBILE — COLLAPSE TO ACCORDION
   ------------------------------------------------------- */

@media (max-width: 1023px) {

	/* Reset mega positioning */
	.menu-item--mega {
		position: relative;
	}

	.menu-item--has-mega > .sub-menu,
	.menu-item--has-mega > .mega-menu__columns {
		position: static;
		box-shadow: none;
		border: none;
		border-radius: 0;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		transition: max-height 0.35s ease, padding 0.35s ease;
	}

	.menu-item--has-mega.is-mega-open > .sub-menu,
	.menu-item--has-mega.is-mega-open > .mega-menu__columns {
		display: block;
		max-height: 2000px;
		padding: 0.5rem 0 1rem;
	}

	/* Stack columns vertically */
	.mega-menu__columns {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Column headers become accordions */
	.mega-menu__col {
		border-bottom: 1px solid var(--starter-color-border, #eee);
		padding: 0.5rem 0;
	}

	.mega-menu__col:last-child {
		border-bottom: none;
	}

	.mega-menu__col > .sub-menu {
		padding-left: 0.75rem;
	}

	.mega-menu__col > .sub-menu > li > a {
		font-size: 0.85rem;
		padding: 0.35rem 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	/* Reset item spanning */
	.mega-menu__item--span-2,
	.mega-menu__item--span-3 {
		grid-column: span 1;
	}

	/* Category grid stacks */
	.mega-categories {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Featured area stacks */
	.mega-featured-products {
		grid-column: span 1;
	}

	.mega-featured-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Arrow becomes toggle */
	.menu-item__arrow {
		margin-left: auto;
	}

	/* Badge in mobile */
	.menu-item__badge {
		font-size: 0.55rem;
	}
}

@media (max-width: 639px) {
	.mega-categories {
		grid-template-columns: 1fr;
	}

	.mega-featured-products__grid {
		grid-template-columns: 1fr;
	}
}