/**
 * Menu Plus: interactive layer for the Delaware College menu (v1.9.0)
 * Mega panels, staggered reveals, scrim, progress bar, search overlay, animated drawer.
 * Everything is scoped to body.dwc-mx, so removing that class restores the previous menu.
 */

:root {
	--mx-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
	--mx-navy: var(--dwc-primary-deep, #0f2340);
	--mx-accent: var(--dwc-primary, #1e3a6e);
	--mx-gold: #c9a24b;
}

/* ---------- Scroll progress bar ---------- */
.dwc-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 100001;
	pointer-events: none;
	background: transparent;
}
.dwc-progress i {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--mx-accent), var(--mx-gold));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.12s linear;
}

/* ---------- Scrim behind open menus ---------- */
.dwc-scrim {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(9, 18, 36, 0.42);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.dwc-scrim.is-on {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ---------- Desktop: staggered items and mega panels ---------- */
@media (min-width: 1200px) {
	body.dwc-mx .main-nav ul ul {
		border-radius: 10px;
		box-shadow: 0 24px 60px -18px rgba(9, 18, 36, 0.45), 0 2px 0 var(--mx-gold) inset;
		overflow: visible;
	}

	body.dwc-mx .main-nav li > ul > li {
		opacity: 0;
		transform: translateY(8px);
	}
	body.dwc-mx .main-nav li:hover > ul > li,
	body.dwc-mx .main-nav li:focus-within > ul > li,
	body.dwc-mx .main-nav li.dwc-open > ul > li {
		opacity: 1;
		transform: none;
		transition: opacity 0.35s var(--mx-ease) calc(var(--i, 0) * 45ms + 60ms),
			transform 0.35s var(--mx-ease) calc(var(--i, 0) * 45ms + 60ms);
	}

	/* A nudge to the right on hover */
	body.dwc-mx .main-nav ul ul li > a {
		transition: padding-left 0.25s var(--mx-ease), color 0.2s ease, background-color 0.2s ease;
	}
	body.dwc-mx .main-nav ul ul li:hover > a {
		padding-left: 8px;
	}

	/* Mega panel: any top-level item with 7+ children, or the CSS class "mega" in the menu editor */
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul {
		display: grid;
		grid-template-columns: repeat(var(--mx-cols, 3), minmax(200px, 1fr));
		column-gap: 8px;
		min-width: calc(var(--mx-cols, 3) * 230px);
		padding: 22px 22px 18px;
	}
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul > li {
		border: 0;
	}
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul > li > a {
		border-radius: 6px;
		padding: 9px 10px;
	}
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul > li > a:hover {
		background: rgba(30, 58, 110, 0.07);
		padding-left: 16px;
	}
	/* Sub-lists inside a mega panel flow inline as grouped links */
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul > li > ul {
		position: static;
		opacity: 1;
		transform: none;
		box-shadow: none;
		background: none;
		padding: 0 0 0 10px;
		min-width: 0;
		width: auto;
	}
	body.dwc-mx .main-nav .menu > li.dwc-mega > ul > li.menu-item-has-children > a:after {
		display: none;
	}
}

/* ---------- Search overlay ---------- */
.dwc-search {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 14vh 24px 40px;
	background: rgba(9, 18, 36, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.dwc-search.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.dwc-search__close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.3s var(--mx-ease), background-color 0.2s ease;
}
.dwc-search__close:hover,
.dwc-search__close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	transform: rotate(90deg);
}
.dwc-search__form {
	width: min(760px, 100%);
	position: relative;
	transform: translateY(16px);
	transition: transform 0.45s var(--mx-ease);
}
.dwc-search.is-open .dwc-search__form {
	transform: none;
}
.dwc-search__label {
	display: block;
	margin-bottom: 12px;
	color: var(--mx-gold);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.dwc-search__input {
	width: 100%;
	padding: 10px 0 16px;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: clamp(28px, 5vw, 52px);
	font-family: inherit;
	outline: none;
	box-shadow: none;
	transition: border-color 0.25s ease;
}
.dwc-search__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}
.dwc-search__input:focus {
	border-bottom-color: var(--mx-gold);
}
.dwc-search__hint {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
}
.dwc-search__hint kbd {
	padding: 1px 7px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	font: inherit;
}
.dwc-search__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: min(760px, 100%);
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}
.dwc-search__links li {
	opacity: 0;
	transform: translateY(10px);
}
.dwc-search.is-open .dwc-search__links li {
	opacity: 1;
	transform: none;
	transition: opacity 0.4s var(--mx-ease) calc(var(--i, 0) * 50ms + 180ms),
		transform 0.4s var(--mx-ease) calc(var(--i, 0) * 50ms + 180ms);
}
.dwc-search__links a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dwc-search__links a:hover,
.dwc-search__links a:focus-visible {
	border-color: var(--mx-gold);
	background: var(--mx-gold);
	color: var(--mx-navy);
}
body.dwc-search-open {
	overflow: hidden;
}

/* ---------- Mobile drawer: staggered entrance and smooth submenus ---------- */
body.dwc-mx #menu-sidebar-panel ul.menu > li {
	opacity: 0;
	transform: translateX(22px);
}
body.dwc-mx #menu-sidebar-panel.open ul.menu > li {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s var(--mx-ease) calc(var(--i, 0) * 55ms + 160ms),
		transform 0.45s var(--mx-ease) calc(var(--i, 0) * 55ms + 160ms);
}
body.dwc-mx.dwc-drawer-left #menu-sidebar-panel ul.menu > li {
	transform: translateX(-22px);
}
body.dwc-mx.dwc-drawer-left #menu-sidebar-panel.open ul.menu > li {
	transform: none;
}
body.dwc-mx #menu-sidebar-panel ul.menu ul.sub-menu {
	overflow: hidden;
}
body.dwc-mx #menu-sidebar-panel .dwc-drawer-cta {
	opacity: 0;
	transform: translateY(14px);
}
body.dwc-mx #menu-sidebar-panel.open .dwc-drawer-cta {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--mx-ease) 0.5s, transform 0.5s var(--mx-ease) 0.5s;
}

/* Press feedback on touch */
body.dwc-mx #menu-sidebar-panel ul.menu li a:active,
body.dwc-mx .dwc-drawer-btn:active {
	transform: scale(0.98);
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	body.dwc-mx .main-nav li > ul > li,
	body.dwc-mx #menu-sidebar-panel ul.menu > li,
	body.dwc-mx #menu-sidebar-panel .dwc-drawer-cta,
	.dwc-search__links li,
	.dwc-search__form {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.dwc-search,
	.dwc-scrim {
		transition: none;
	}
	.dwc-progress i {
		transition: none;
	}
}