/**
 * Mega Menu
 *
 * Every colour and size is a custom property on .mm, so the module's options
 * (written inline on the element) and a template's own stylesheet can both
 * restyle it without fighting selector weight.
 *
 * Desktop is the default. The script adds .mm--mobile below the module's
 * breakpoint, which is per module and so cannot be a media query here.
 */

/* ---------------------------------------------------------------- themes */

.mm {
	--mm-bar-bg: #ffffff;
	--mm-bar-color: #1f2937;
	--mm-hover-bg: #f3f4f6;
	--mm-hover-color: #111827;
	--mm-panel-bg: #ffffff;
	--mm-panel-color: #374151;
	--mm-heading-color: #111827;
	--mm-accent: #2563eb;
	--mm-border: rgba(17, 24, 39, 0.09);
	--mm-shadow: 0 18px 40px -12px rgba(17, 24, 39, 0.28), 0 2px 6px rgba(17, 24, 39, 0.06);
	--mm-backdrop: rgba(17, 24, 39, 0.5);
	--mm-radius: 8px;
	--mm-font-size: 1rem;
	--mm-item-padding: 0.9rem 1.1rem;
	--mm-col-width: 220px;
	--mm-dropdown-width: 240px;
	--mm-speed: 200ms;
	--mm-offcanvas-width: min(360px, 88vw);
	--mm-sticky-top: 0px;
}

.mm--theme-dark {
	--mm-bar-bg: #111827;
	--mm-bar-color: #e5e7eb;
	--mm-hover-bg: #1f2937;
	--mm-hover-color: #ffffff;
	--mm-panel-bg: #1f2937;
	--mm-panel-color: #d1d5db;
	--mm-heading-color: #ffffff;
	--mm-accent: #60a5fa;
	--mm-border: rgba(255, 255, 255, 0.1);
}

.mm--theme-brand {
	--mm-accent: #1d4ed8;
	--mm-bar-bg: var(--mm-accent);
	--mm-bar-color: #ffffff;
	--mm-hover-bg: rgba(255, 255, 255, 0.14);
	--mm-hover-color: #ffffff;
}

.mm--theme-transparent {
	--mm-bar-bg: transparent;
	--mm-bar-color: inherit;
	--mm-hover-bg: rgba(127, 127, 127, 0.12);
	--mm-hover-color: inherit;
}

/* ------------------------------------------------------------------ base */

.mm {
	position: relative;
	font-size: var(--mm-font-size);
	line-height: 1.3;
	color: var(--mm-bar-color);
	background: var(--mm-bar-bg);
}

.mm *,
.mm *::before,
.mm *::after {
	box-sizing: border-box;
}

.mm .visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.mm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	cursor: pointer;
}

.mm-toggler,
.mm-backdrop,
.mm-panel__head {
	display: none;
}

.mm-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.mm--justify-center .mm-nav { justify-content: center; }
.mm--justify-end .mm-nav { justify-content: flex-end; }
.mm--justify-stretch .mm-nav > .mm-item { flex: 1 1 auto; }
.mm--justify-stretch .mm-nav > .mm-item > .mm-link,
.mm--justify-stretch .mm-nav > .mm-item > .mm-row { justify-content: center; }

.mm--vertical .mm-nav {
	flex-direction: column;
}

.mm-item {
	position: relative;
}

.mm-row {
	display: flex;
	align-items: stretch;
}

.mm-row > .mm-link {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------------- links */

.mm-link {
	display: flex;
	align-items: center;
	gap: 0.55em;
	width: 100%;
	padding: var(--mm-item-padding);
	color: inherit;
	text-align: start;
	text-decoration: none;
	transition: background-color var(--mm-speed), color var(--mm-speed);
}

.mm-link:hover,
.mm-link:focus {
	text-decoration: none;
}

.mm-link:focus-visible,
.mm-sub-toggle:focus-visible,
.mm-toggler:focus-visible,
.mm-close:focus-visible {
	outline: 2px solid var(--mm-accent);
	outline-offset: -2px;
}

.mm--uppercase .mm-nav > .mm-item > .mm-link .mm-title,
.mm--uppercase .mm-nav > .mm-item > .mm-row .mm-title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.92em;
}

.mm-nav > .mm-item > .mm-link,
.mm-nav > .mm-item > .mm-row {
	color: var(--mm-bar-color);
	font-weight: 500;
}

.mm-nav > .mm-item:hover > .mm-link,
.mm-nav > .mm-item:hover > .mm-row,
.mm-nav > .mm-item.is-open > .mm-row,
.mm-nav > .mm-item > .mm-link:focus-visible {
	color: var(--mm-hover-color);
	background: var(--mm-hover-bg);
}

.mm-nav > .mm-item.is-active > .mm-link,
.mm-nav > .mm-item.is-active > .mm-row {
	box-shadow: inset 0 -3px 0 var(--mm-accent);
}

.mm--theme-brand .mm-nav > .mm-item.is-active > .mm-link,
.mm--theme-brand .mm-nav > .mm-item.is-active > .mm-row {
	box-shadow: inset 0 -3px 0 currentColor;
}

.mm--vertical .mm-nav > .mm-item.is-active > .mm-link,
.mm--vertical .mm-nav > .mm-item.is-active > .mm-row {
	box-shadow: inset 3px 0 0 var(--mm-accent);
}

.mm-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mm-subtitle {
	display: block;
	margin-top: 0.15em;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.72;
	text-transform: none;
	letter-spacing: 0;
}

.mm-icon {
	flex: 0 0 auto;
	width: 1.25em;
	text-align: center;
	opacity: 0.9;
}

.mm-image {
	flex: 0 0 auto;
	max-height: 1.6em;
	width: auto;
}

.mm-badge {
	display: inline-block;
	margin-inline-start: 0.35em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	font-size: 0.68em;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: 0.15em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: var(--mm-accent);
}

.mm-badge--success { background: #15803d; }
.mm-badge--danger { background: #b91c1c; }
.mm-badge--warning { background: #b45309; }
.mm-badge--neutral { background: #4b5563; }

.mm-link--button {
	cursor: pointer;
}

/* ------------------------------------------------------- submenu toggles */

.mm-sub-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 1.9em;
	padding: 0;
}

.mm-row > .mm-link:has(+ .mm-sub-toggle) {
	padding-inline-end: 0.1em;
}

.mm-sub-toggle::before,
.mm-link--button::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--mm-speed);
	opacity: 0.75;
}

.mm-link--button::after {
	margin-inline-start: auto;
	flex: 0 0 auto;
}

.mm-nav > .mm-item > .mm-row > .mm-link--button::after {
	margin-inline-start: 0.2em;
}

.mm-nav > .mm-item.is-open > .mm-row .mm-sub-toggle::before,
.mm-nav > .mm-item.is-open > .mm-row .mm-link--button::after {
	transform: translateY(15%) rotate(225deg);
}

/* Fly-outs point sideways. */
.mm-dropdown .mm-sub-toggle::before,
.mm-dropdown .mm-link--button::after,
.mm--vertical .mm-nav > .mm-item > .mm-row .mm-sub-toggle::before,
.mm--vertical .mm-nav > .mm-item > .mm-row .mm-link--button::after {
	transform: rotate(-45deg);
}

[dir="rtl"] .mm-dropdown .mm-sub-toggle::before,
[dir="rtl"] .mm-dropdown .mm-link--button::after {
	transform: rotate(135deg);
}

/* Without arrows the toggle stays for keyboard users, out of sight until focused. */
.mm:not(.mm--arrows):not(.mm--mobile) .mm-sub-toggle:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.mm:not(.mm--arrows):not(.mm--mobile) .mm-link--button::after {
	display: none;
}

/* ------------------------------------------------------------- dropdowns */

.mm-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 1000;
	color: var(--mm-panel-color);
	background: var(--mm-panel-bg);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	box-shadow: var(--mm-shadow);
	text-align: start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--mm-speed) ease, transform var(--mm-speed) ease, visibility 0s linear var(--mm-speed);
}

.mm-item.is-open > .mm-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* Before the script runs, or if it never does, hover and focus still open. */
.mm:not(.mm--ready) .mm-item:hover > .mm-dropdown,
.mm:not(.mm--ready) .mm-item:focus-within > .mm-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.mm--anim-slide .mm-dropdown { transform: translateY(10px); }
.mm--anim-zoom .mm-dropdown { transform: scale(0.97); transform-origin: top center; }
.mm--anim-none .mm-dropdown { transition: none; }

.mm-nav > .mm-item > .mm-dropdown.mm-align-end {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.mm-nav > .mm-item > .mm-dropdown.mm-align-center {
	inset-inline-start: 50%;
	translate: -50% 0;
}

[dir="rtl"] .mm-nav > .mm-item > .mm-dropdown.mm-align-center {
	translate: 50% 0;
}

.mm-nav > .mm-item.mm-item--full {
	position: static;
}

.mm-nav > .mm-item > .mm-dropdown.mm-align-full {
	inset-inline: 0;
	width: auto !important;
}

/* The script nudges a panel back on screen by this much. */
.mm-dropdown {
	margin-inline-start: var(--mm-shift, 0px);
}

.mm--vertical .mm-nav > .mm-item > .mm-dropdown {
	top: 0;
	inset-inline-start: 100%;
	inset-inline-end: auto;
	translate: none;
}

.mm--vertical .mm-nav > .mm-item.mm-item--full {
	position: relative;
}

/* Plain list */

.mm-dropdown--list,
.mm-dropdown--flyout {
	width: var(--mm-dropdown-width);
	padding: 0.4rem 0;
}

.mm-dropdown--list .mm-link,
.mm-dropdown--flyout .mm-link {
	padding: 0.55rem 1rem;
}

.mm-dropdown--list .mm-sub-toggle,
.mm-dropdown--flyout .mm-sub-toggle {
	width: 2.4em;
}

.mm-dropdown--flyout {
	top: -0.45rem;
	inset-inline-start: 100%;
}

.mm-item.mm-flip > .mm-dropdown--flyout {
	inset-inline-start: auto;
	inset-inline-end: 100%;
}

.mm-dropdown .mm-item:hover > .mm-link,
.mm-dropdown .mm-item:hover > .mm-row,
.mm-dropdown .mm-item.is-open > .mm-row,
.mm-dropdown .mm-link:focus-visible {
	color: var(--mm-accent);
	background: color-mix(in srgb, var(--mm-accent) 8%, transparent);
}

.mm-dropdown .mm-item.is-current > .mm-link,
.mm-dropdown .mm-item.is-current > .mm-row > .mm-link {
	color: var(--mm-accent);
	font-weight: 600;
}

/* Mega panel */

.mm-dropdown--mega {
	width: calc(var(--mm-cols) * var(--mm-col-width) + (var(--mm-cols) - 1) * 1.5rem + 3rem);
	max-width: calc(100vw - 2rem);
}

.mm-dropdown__inner {
	display: grid;
	grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	padding: 1.5rem;
}

.mm-col + .mm-col {
	position: relative;
}

.mm-col + .mm-col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: -0.75rem;
	border-inline-start: 1px solid var(--mm-border);
}

.mm-sub--mega > .mm-item + .mm-item {
	margin-top: 0.15rem;
}

.mm-sub--mega > .mm-item--group + .mm-item,
.mm-sub--mega > .mm-item + .mm-item--group {
	margin-top: 1rem;
}

.mm-sub--mega .mm-link {
	padding: 0.4rem 0.6rem;
	border-radius: calc(var(--mm-radius) - 2px);
}

.mm-sub--mega > .mm-item--group > .mm-link {
	color: var(--mm-heading-color);
	font-weight: 600;
	padding-bottom: 0.55rem;
	margin-bottom: 0.3rem;
	border-bottom: 1px solid var(--mm-border);
	border-radius: 0;
}

.mm-sub--mega > .mm-item--group > a.mm-link:hover {
	color: var(--mm-accent);
	background: transparent;
}

.mm-sub--nested .mm-sub--nested {
	padding-inline-start: 0.9rem;
}

.mm-sub--nested .mm-link {
	font-size: 0.94em;
}

.mm-modules {
	padding: 0.5rem 0.6rem;
	font-size: 0.94em;
}

.mm-modules > * + * {
	margin-top: 1rem;
}

.mm-modules .moduletable > h3,
.mm-modules h3 {
	margin: 0 0 0.6rem;
	font-size: 1em;
	color: var(--mm-heading-color);
}

.mm-modules img {
	max-width: 100%;
	height: auto;
	border-radius: calc(var(--mm-radius) - 2px);
}

.mm-col--modules .mm-modules {
	padding: 0;
}

/* ----------------------------------------------------------------- sticky */

.mm.is-stuck {
	position: fixed;
	top: var(--mm-sticky-top);
	inset-inline: 0;
	z-index: 1030;
	box-shadow: 0 4px 18px rgba(17, 24, 39, 0.14);
}

.mm-sticky-placeholder {
	display: none;
}

.mm-sticky-placeholder.is-active {
	display: block;
}

/* ------------------------------------------------------------ visibility */

.mm:not(.mm--mobile) .mm-hide-desktop,
.mm--mobile .mm-hide-mobile {
	display: none !important;
}

/* ----------------------------------------------------------------- mobile */

.mm--mobile {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mm--mobile.mm--toggler-start { justify-content: flex-start; }
.mm--mobile.mm--toggler-center { justify-content: center; }

.mm--mobile .mm-toggler,
.mm-toggler {
	align-items: center;
	gap: 0.6em;
	padding: 0.75rem 1rem;
	color: var(--mm-bar-color);
	font-weight: 600;
}

.mm--mobile .mm-toggler {
	display: inline-flex;
}

.mm-toggler__icon {
	position: relative;
	display: inline-block;
	width: 1.3em;
	height: 0.95em;
}

.mm-toggler__icon::before,
.mm-toggler__icon::after,
.mm-toggler__icon > span {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--mm-speed), opacity var(--mm-speed), top var(--mm-speed);
}

.mm-toggler__icon::before { top: 0; }
.mm-toggler__icon > span { top: calc(50% - 1px); }
.mm-toggler__icon::after { top: calc(100% - 2px); }

.mm--mobile.is-open .mm-toggler__icon::before { top: calc(50% - 1px); transform: rotate(45deg); }
.mm--mobile.is-open .mm-toggler__icon > span { opacity: 0; }
.mm--mobile.is-open .mm-toggler__icon::after { top: calc(50% - 1px); transform: rotate(-45deg); }

.mm--mobile .mm-panel {
	width: 100%;
	color: var(--mm-panel-color);
	background: var(--mm-panel-bg);
}

.mm--mobile .mm-nav {
	display: block;
}

.mm--mobile .mm-nav > .mm-item {
	border-bottom: 1px solid var(--mm-border);
}

.mm--mobile .mm-nav > .mm-item > .mm-link,
.mm--mobile .mm-nav > .mm-item > .mm-row {
	color: var(--mm-panel-color);
	background: transparent;
	box-shadow: none;
}

.mm--mobile .mm-nav > .mm-item.is-active > .mm-link,
.mm--mobile .mm-nav > .mm-item.is-active > .mm-row {
	color: var(--mm-accent);
	box-shadow: inset 3px 0 0 var(--mm-accent);
}

.mm--mobile .mm-row > .mm-link:has(+ .mm-sub-toggle) {
	padding-inline-end: 0.5rem;
}

.mm--mobile .mm-sub-toggle {
	width: 3.25rem;
	border-inline-start: 1px solid var(--mm-border);
}

.mm--mobile .mm-sub-toggle::before,
.mm--mobile .mm-link--button::after,
.mm--mobile .mm-dropdown .mm-sub-toggle::before,
.mm--mobile .mm-dropdown .mm-link--button::after {
	transform: translateY(-25%) rotate(45deg);
}

.mm--mobile .mm-item.is-open > .mm-row .mm-sub-toggle::before,
.mm--mobile .mm-item.is-open > .mm-row .mm-link--button::after {
	transform: translateY(15%) rotate(225deg);
}

.mm--mobile .mm-dropdown,
.mm--mobile .mm-nav > .mm-item > .mm-dropdown {
	position: static;
	display: none;
	width: auto !important;
	max-width: none;
	margin: 0;
	padding: 0 0 0.5rem;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	translate: none;
	transition: none;
}

.mm--mobile .mm-item.is-open > .mm-dropdown {
	display: block;
}

.mm--mobile .mm-dropdown__inner {
	display: block;
	padding: 0;
}

.mm--mobile .mm-col + .mm-col::before {
	display: none;
}

.mm--mobile .mm-dropdown .mm-link {
	padding: 0.6rem 1rem 0.6rem 1.75rem;
}

.mm--mobile .mm-dropdown .mm-dropdown .mm-link,
.mm--mobile .mm-sub--nested .mm-link {
	padding-inline-start: 2.6rem;
}

.mm--mobile .mm-sub--nested .mm-sub--nested .mm-link {
	padding-inline-start: 3.4rem;
}

.mm--mobile .mm-sub--mega > .mm-item--group > .mm-link {
	margin: 0;
	border: 0;
}

.mm--mobile .mm-sub--mega > .mm-item--group + .mm-item,
.mm--mobile .mm-sub--mega > .mm-item + .mm-item--group {
	margin-top: 0.25rem;
}

.mm--mobile .mm-modules {
	padding: 0.5rem 1rem 0.75rem 1.75rem;
}

.mm--mobile.mm--no-mobile-modules .mm-modules,
.mm--mobile.mm--no-mobile-modules .mm-col--modules {
	display: none;
}

/* Collapse: the panel opens in place below the toggle. */

.mm--mobile.mm--mobile-collapse .mm-panel {
	display: none;
}

.mm--mobile.mm--mobile-collapse.is-open .mm-panel {
	display: block;
	border-top: 1px solid var(--mm-border);
}

/* Off-canvas: the panel slides in from the side over the page. */

.mm--mobile.mm--mobile-offcanvas .mm-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	z-index: 1060;
	width: var(--mm-offcanvas-width);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--mm-speed) ease, visibility 0s linear var(--mm-speed);
	box-shadow: var(--mm-shadow);
}

.mm--mobile.mm--mobile-offcanvas.mm--side-start .mm-panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
	transform: translateX(-100%);
}

[dir="rtl"] .mm--mobile.mm--mobile-offcanvas .mm-panel { transform: translateX(-100%); }
[dir="rtl"] .mm--mobile.mm--mobile-offcanvas.mm--side-start .mm-panel { transform: translateX(100%); }

.mm--mobile.mm--mobile-offcanvas.is-open .mm-panel {
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.mm--mobile.mm--mobile-offcanvas .mm-panel__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	font-weight: 600;
	color: var(--mm-heading-color);
	background: var(--mm-panel-bg);
	border-bottom: 1px solid var(--mm-border);
}

.mm-close {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.6rem;
	line-height: 1;
	border-radius: var(--mm-radius);
}

.mm-close:hover {
	background: var(--mm-hover-bg);
}

.mm--mobile.mm--mobile-offcanvas .mm-backdrop:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 1055;
	display: block;
	background: var(--mm-backdrop);
}

html.mm-lock,
html.mm-lock body {
	overflow: hidden;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.mm *,
	.mm *::before,
	.mm *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}