/**
 * Compact mobile header + drawer motion.
 * Loaded after Max Mega Menu so its 120px hamburger bar cannot stretch the header.
 */

@media (max-width: 1031px) {
	:root {
		--header-height: 48px;
	}

	.navbar.navbar-default.navbar-fixed-top,
	#navigation_menu,
	#navigation_menu .navbar-header,
	#masthead .navbar-brand,
	#masthead #mega-menu-wrap-primary,
	#navigation_menu .navbar-collapse {
		height: var(--header-height) !important;
		min-height: var(--header-height) !important;
		max-height: var(--header-height) !important;
	}

	#navigation_menu {
		align-items: center !important;
		gap: 8px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		overflow: hidden;
	}

	.navbar-brand img {
		height: 20px !important;
		max-height: 20px !important;
		max-width: 120px !important;
	}

	#masthead #mega-menu-wrap-primary {
		overflow: visible !important;
		flex: 0 0 auto !important;
		width: auto !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle,
	#masthead #mega-menu-wrap-primary .mega-menu-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: var(--header-height) !important;
		min-height: 0 !important;
		max-height: var(--header-height) !important;
		line-height: var(--header-height) !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		background: transparent !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block,
	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 {
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
	}

	#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
		transform: scale(0.62);
	}

	body.blog #spacer,
	body.single-post #spacer,
	body.single-teamlid #spacer,
	#spacer {
		height: var(--header-height) !important;
	}

	/* Dimmed overlay behind the drawer. */
	#masthead #mega-menu-wrap-primary::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(6, 40, 64, 0.28);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 10041;
		transition: opacity 320ms ease, visibility 320ms ease;
	}

	#masthead #mega-menu-wrap-primary:has(.mega-menu-toggle.mega-menu-open)::before,
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary::before {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Keep the panel in the layout so slide in/out can animate. */
	#masthead #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary,
	#masthead #mega-menu-wrap-primary #mega-menu-primary {
		display: flex !important;
		flex-direction: column;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		width: min(360px, 88vw) !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		padding: calc(var(--header-height) + 16px) 20px 32px !important;
		background: #fff !important;
		border-left: 1px solid rgba(6, 40, 64, 0.1);
		box-shadow: -16px 0 40px rgba(6, 40, 64, 0.12) !important;
		transform: translateX(104%);
		visibility: visible !important;
		pointer-events: none;
		z-index: 10042 !important;
		transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
		will-change: transform;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary,
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary {
		transform: translateX(0);
		pointer-events: auto;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		height: auto !important;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 320ms ease, transform 320ms ease;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item,
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
		opacity: 1;
		transform: none;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(1),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(1) {
		transition-delay: 60ms;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(2),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(2) {
		transition-delay: 100ms;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(3),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(3) {
		transition-delay: 140ms;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(4),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(4) {
		transition-delay: 180ms;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(5),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(5) {
		transition-delay: 220ms;
	}

	#masthead #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary > li.mega-menu-item:nth-child(n+6),
	html.mega-menu-primary-off-canvas-open #masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-child(n+6) {
		transition-delay: 260ms;
	}

	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		height: auto !important;
		min-height: 48px !important;
		line-height: 1.25 !important;
	}

	#masthead #mega-menu-wrap-primary .mega-sub-menu,
	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
		display: block !important;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transform: none !important;
		transition: max-height 320ms ease, opacity 240ms ease;
	}

	#masthead #mega-menu-wrap-primary li.mega-toggle-on > .mega-sub-menu,
	#masthead #mega-menu-wrap-primary li.mega-toggle-on > ul.mega-sub-menu {
		max-height: 480px;
		opacity: 1;
	}

	#masthead #mega-menu-wrap-primary .mega-indicator {
		transition: transform 220ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	#masthead #mega-menu-wrap-primary::before,
	#masthead #mega-menu-wrap-primary #mega-menu-primary,
	#masthead #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
	#masthead #mega-menu-wrap-primary .mega-sub-menu,
	#masthead #mega-menu-wrap-primary .mega-indicator {
		transition: none !important;
	}
}