/**
 * Mega menu panels.
 *
 * Loaded only when a menu location that can hold a mega menu is assigned.
 */

/*
 * The panel spans the container, so it must position against the header rather
 * than its own list item. This needs to out-specify `.aris-nav li` in main.css,
 * which sets position: relative for ordinary dropdowns — a bare .aris-has-mega
 * loses that fight and the panel ends up hanging off the menu item.
 */
.aris-nav li.aris-has-mega,
.aris-has-mega { position: static; }

.aris-mega__panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	z-index: 75;
	width: var(--aris-mega-width);
	max-width: calc(100vw - 32px);
	background: var(--aris-mega-bg);
	border: 1px solid var(--aris-border);
	border-top: 2px solid var(--aris-primary);
	border-radius: 0 0 var(--aris-radius-card) var(--aris-radius-card);
	box-shadow: var(--aris-shadow-hover);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.aris-mega__panel--full { width: 100vw; max-width: 100vw; border-radius: 0; }

.aris-has-mega:hover > .aris-mega__panel,
.aris-has-mega:focus-within > .aris-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.aris-mega__inner {
	display: flex;
	gap: 28px;
	max-width: var(--aris-container);
	margin-inline: auto;
	padding: 28px var(--aris-gutter);
}

.aris-mega__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 28px;
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aris-mega-cols-2 .aris-mega__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aris-mega-cols-3 .aris-mega__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aris-mega-cols-5 .aris-mega__columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.aris-mega__column > .aris-menu__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--aris-border);
	color: var(--aris-mega-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.aris-mega__column > .aris-menu__link:hover { color: var(--aris-mega-link-hover); }
.aris-mega__column > .aris-menu__link .aris-menu__arrow { display: none; }

.aris-mega__links { margin: 0; padding: 0; list-style: none; }

.aris-mega__links .aris-menu__link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
	color: var(--aris-mega-link);
	font-size: 14px;
	font-weight: 400;
	white-space: normal;
}
.aris-mega__links .aris-menu__link:hover { color: var(--aris-mega-link-hover); }
.aris-mega__links .aris-menu__thumb img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }

/* Panels never nest a third level visually. */
.aris-mega__panel .aris-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; background: none; min-width: 0; }

/* Featured blocks */
.aris-mega__featured,
.aris-mega__products,
.aris-mega__html,
.aris-mega__template { flex: 0 0 240px; }

.aris-mega__featured a,
.aris-mega__featured > div { display: block; color: var(--aris-heading); }
.aris-mega__featured img { width: 100%; border-radius: var(--aris-radius); margin-bottom: 10px; }
.aris-mega__featured-title { display: block; font-size: 15px; font-weight: 600; }
.aris-mega__featured-text { display: block; color: var(--aris-muted); font-size: 13px; }

.aris-mega__heading {
	display: block;
	margin-bottom: 10px;
	color: var(--aris-mega-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.aris-mega__products ul { margin: 0; padding: 0; list-style: none; }
.aris-mega__products li + li { margin-top: 10px; }
.aris-mega__products a { display: flex; align-items: center; gap: 10px; color: var(--aris-mega-link); }
.aris-mega__product-thumb img { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; }
.aris-mega__product-title { font-size: 13px; }

/* Animations */
.aris-mega__panel { transition-property: opacity, transform, visibility; }

body:not(.aris-mega-anim-none) .aris-mega__panel { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
	.aris-mega__panel,
	.aris-submenu { transition: none; }
}

@media (max-width: 991px) {
	.aris-mega__panel { display: none; }
}