/**
 * MRMVR Elements — Mega Menu.
 *
 * The menu on its own. It paints no bar and carries no logo or buttons: it is
 * dropped into whatever header the theme already has and inherits the ground
 * behind it.
 *
 * Above the breakpoint it is a row of links, and a link with children drops a
 * panel beneath it. Below it, the row collapses to a hamburger and the same
 * links become a drawer with accordions.
 *
 * The switch between the two is one pair of custom properties. Everything that
 * belongs to a single layout takes its `display` from `--mrx-m-desk` or
 * `--mrx-m-mob`, and each breakpoint only has to flip that pair — Elementor
 * cannot write a media query from a control value, so the breakpoint is a class
 * on the wrapper and the four widths are four one-line blocks.
 *
 * @package MRMVR\Elements
 * @since   1.30.0
 */

.mrx-menu-wrap {
	/* Layout switch — read by everything that belongs to one layout only. */
	--mrx-m-desk: flex;
	--mrx-m-mob: none;

	/* Where the links sit inside the column the widget was dropped into. */
	--mrx-m-justify: flex-end;

	/* Top-level links */
	--mrx-m-link: var(--mrmvr-navy, #1a2142);
	--mrx-m-link-hover: var(--mrmvr-amber, #f57528);
	--mrx-m-link-active: var(--mrmvr-amber, #f57528);
	--mrx-m-rule: var(--mrmvr-amber, #f57528);
	--mrx-m-link-bg: rgba(251, 230, 221, 0.8);
	--mrx-m-link-gap: 6px;
	--mrx-m-link-pad: 14px;
	--mrx-m-link-pad-y: 10px;

	/* Panel */
	--mrx-m-panel-bg: var(--mrmvr-white, #ffffff);
	--mrx-m-panel-border: rgba(207, 161, 144, 0.32);
	--mrx-m-panel-glow: rgba(251, 230, 221, 0.55);
	--mrx-m-panel-radius: 20px;
	--mrx-m-panel-pad: 34px;
	--mrx-m-panel-offset: 10px;
	--mrx-m-panel-gap: 34px;
	--mrx-m-panel-divider: rgba(207, 161, 144, 0.28);
	--mrx-m-panel-foot: rgba(26, 33, 66, 0.62);
	--mrx-m-panel-max: 1280px;
	--mrx-m-panel-gutter: clamp(18px, 3vw, 40px);
	--mrx-m-cols: 3;

	/* The grace period, in milliseconds. Read by the script, not by any rule
	   here: it is a delay before a class is removed, which CSS cannot express
	   without also delaying the transition that follows it. */
	--mrx-m-grace: 320;

	/* Panel contents */
	--mrx-m-coltitle: var(--mrmvr-clay-deep, #c08e82);
	--mrx-m-sublink: var(--mrmvr-navy, #1a2142);
	--mrx-m-sublink-hover: var(--mrmvr-navy, #1a2142);
	--mrx-m-sublink-bg: rgba(251, 230, 221, 0.62);
	--mrx-m-subdesc: rgba(26, 33, 66, 0.56);
	--mrx-m-subicon: var(--mrmvr-clay-deep, #c08e82);
	--mrx-m-subicon-bg: rgba(251, 230, 221, 0.72);
	--mrx-m-subicon-hover: var(--mrmvr-white, #ffffff);
	--mrx-m-subicon-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-m-subicon-size: 40px;
	--mrx-m-arrow: var(--mrmvr-amber, #f57528);

	/* Hamburger and drawer */
	--mrx-m-burger: var(--mrmvr-navy, #1a2142);
	--mrx-m-burger-bg: transparent;
	--mrx-m-burger-border: rgba(26, 33, 66, 0.14);
	--mrx-m-burger-size: 46px;
	--mrx-m-burger-radius: 14px;
	--mrx-m-drawer-bg: var(--mrmvr-white, #ffffff);
	--mrx-m-drawer-w: 400px;
	--mrx-m-drawer-pad: clamp(18px, 5vw, 30px);
	--mrx-m-scrim: rgba(26, 33, 66, 0.46);
	--mrx-m-mlink: var(--mrmvr-navy, #1a2142);
	--mrx-m-mlink-hover: var(--mrmvr-amber, #f57528);
	--mrx-m-msub: rgba(26, 33, 66, 0.66);
	--mrx-m-mdivider: rgba(26, 33, 66, 0.08);

	/* Motion */
	--mrx-m-ease: var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	position: relative;
	/* Its own stacking context, so an open panel clears whatever the header
	   puts beside it without every element around needing a z-index. */
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: var(--mrx-m-justify);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * The breakpoint
 *
 * The only thing each of these has to do is swap the pair of display values.
 * Anything belonging to one layout reads them, so this is the whole switch.
 * ---------------------------------------------------------------------- */

/*
 * Forced, for a header built as two bars rather than one. Both copies of the
 * widget are on the same screen at the same moment, so a width cannot tell
 * them apart: each is told which layout it is, and Elementor's own Responsive
 * controls decide which bar is on show.
 *
 * These sit outside the media queries, and the queries below only match while
 * the mode is Automatic, so the two can never argue.
 */
.mrx-mmode-row .mrx-menu-wrap {
	--mrx-m-desk: flex;
	--mrx-m-mob: none;
}

.mrx-mmode-drawer .mrx-menu-wrap {
	--mrx-m-desk: none;
	--mrx-m-mob: flex;
}

@media (max-width: 1200px) {
	.mrx-mmode-auto.mrx-mbp-1200 .mrx-menu-wrap {
		--mrx-m-desk: none;
		--mrx-m-mob: flex;
	}
}

@media (max-width: 1024px) {
	.mrx-mmode-auto.mrx-mbp-1024 .mrx-menu-wrap {
		--mrx-m-desk: none;
		--mrx-m-mob: flex;
	}
}

@media (max-width: 767px) {
	.mrx-mmode-auto.mrx-mbp-767 .mrx-menu-wrap {
		--mrx-m-desk: none;
		--mrx-m-mob: flex;
	}
}

/* -------------------------------------------------------------------------
 * Top-level links
 * ---------------------------------------------------------------------- */

.mrx-menu__nav {
	display: var(--mrx-m-desk);
	min-width: 0;
}

.mrx-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--mrx-m-justify);
	gap: var(--mrx-m-link-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-menu__item {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * A mega panel is measured against the whole menu block, not against its own
 * link, so the item it hangs from must not be a containing block. A dropdown
 * is the opposite: it starts at its link and needs one.
 */
.mrx-menu__item--mega {
	position: static;
}

.mrx-menu__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--mrx-m-link-pad-y) var(--mrx-m-link-pad);
	color: var(--mrx-m-link);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.015em;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color 280ms var(--mrx-m-ease),
		transform 280ms var(--mrx-m-ease);
}

.mrx-menu__link-icon {
	font-size: 0.92em;
	opacity: 0.8;
}

.mrx-menu__item:hover > .mrx-menu__link,
.mrx-menu__item:focus-within > .mrx-menu__link,
.mrx-menu__item.is-open > .mrx-menu__link {
	color: var(--mrx-m-link-hover);
}

.mrx-menu__item.is-current > .mrx-menu__link {
	color: var(--mrx-m-link-active);
}

/* -------------------------------------------------------------------------
 * Hover effects
 *
 * One at a time, chosen on the wrapper. Each owns its own pseudo-element, so
 * switching between them cannot leave a rule from the last one behind.
 * ---------------------------------------------------------------------- */

.mrx-mfx-underline .mrx-menu__link::after,
.mrx-mfx-centre .mrx-menu__link::after {
	content: "";
	position: absolute;
	right: var(--mrx-m-link-pad);
	bottom: max(4px, calc(var(--mrx-m-link-pad-y) - 6px));
	left: var(--mrx-m-link-pad);
	height: 2px;
	background-color: var(--mrx-m-rule);
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform 420ms var(--mrx-m-ease);
}

.mrx-mfx-underline .mrx-menu__link::after {
	transform-origin: left center;
}

.mrx-mfx-centre .mrx-menu__link::after {
	transform-origin: center;
}

.mrx-mfx-underline .mrx-menu__item:hover > .mrx-menu__link::after,
.mrx-mfx-underline .mrx-menu__item:focus-within > .mrx-menu__link::after,
.mrx-mfx-underline .mrx-menu__item.is-open > .mrx-menu__link::after,
.mrx-mfx-underline .mrx-menu__item.is-current > .mrx-menu__link::after,
.mrx-mfx-centre .mrx-menu__item:hover > .mrx-menu__link::after,
.mrx-mfx-centre .mrx-menu__item:focus-within > .mrx-menu__link::after,
.mrx-mfx-centre .mrx-menu__item.is-open > .mrx-menu__link::after,
.mrx-mfx-centre .mrx-menu__item.is-current > .mrx-menu__link::after {
	transform: scaleX(1);
}

.mrx-mfx-pill .mrx-menu__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--mrx-m-link-bg);
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 320ms var(--mrx-m-ease),
		transform 320ms var(--mrx-m-ease);
}

.mrx-mfx-pill .mrx-menu__item:hover > .mrx-menu__link::before,
.mrx-mfx-pill .mrx-menu__item:focus-within > .mrx-menu__link::before,
.mrx-mfx-pill .mrx-menu__item.is-open > .mrx-menu__link::before,
.mrx-mfx-pill .mrx-menu__item.is-current > .mrx-menu__link::before {
	opacity: 1;
	transform: none;
}

/* A dot rather than a rule: the label rises, and the mark it leaves stays. */
.mrx-mfx-lift .mrx-menu__link::after {
	content: "";
	position: absolute;
	bottom: max(3px, calc(var(--mrx-m-link-pad-y) - 7px));
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	background-color: var(--mrx-m-rule);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity 320ms var(--mrx-m-ease),
		transform 320ms var(--mrx-m-ease);
}

.mrx-mfx-lift .mrx-menu__item:hover > .mrx-menu__link,
.mrx-mfx-lift .mrx-menu__item:focus-within > .mrx-menu__link,
.mrx-mfx-lift .mrx-menu__item.is-open > .mrx-menu__link {
	transform: translateY(-2px);
}

.mrx-mfx-lift .mrx-menu__item:hover > .mrx-menu__link::after,
.mrx-mfx-lift .mrx-menu__item:focus-within > .mrx-menu__link::after,
.mrx-mfx-lift .mrx-menu__item.is-open > .mrx-menu__link::after,
.mrx-mfx-lift .mrx-menu__item.is-current > .mrx-menu__link::after {
	opacity: 1;
	transform: none;
}

/* Two items marked out from the rest, from the menu screen. */
.mrx-menu__item--highlight > .mrx-menu__link {
	color: var(--mrx-m-link-hover);
	font-weight: 600;
}

.mrx-menu__item--button > .mrx-menu__link {
	margin-inline: 6px;
	padding: var(--mrx-m-link-pad-y) 20px;
	color: var(--mrmvr-white, #ffffff);
	background-color: var(--mrx-m-link-hover);
	border-radius: 999px;
	transition:
		color 280ms var(--mrx-m-ease),
		background-color 280ms var(--mrx-m-ease),
		transform 280ms var(--mrx-m-ease);
}

.mrx-menu__item--button > .mrx-menu__link::after,
.mrx-menu__item--button > .mrx-menu__link::before {
	content: none;
}

.mrx-menu__item--button:hover > .mrx-menu__link {
	color: var(--mrmvr-white, #ffffff);
	background-color: var(--mrx-m-link);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
 * The chevron
 *
 * A button rather than an ornament. Hover and focus already open the panel;
 * this is the way in for a finger, which has neither, and for a keyboard that
 * wants to open a parent rather than follow it.
 * ---------------------------------------------------------------------- */

.mrx-menu__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: -10px;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * Hidden, never removed. It is the only way into a panel from a touch screen,
 * so it keeps its box and its hit area and simply stops being drawn.
 */
.mrx-mcaret-hide .mrx-menu__caret {
	opacity: 0;
}

.mrx-menu__chevron {
	width: 10px;
	height: 6px;
	color: var(--mrx-m-link);
	transition:
		transform 380ms var(--mrx-m-ease),
		color 280ms var(--mrx-m-ease);
}

.mrx-menu__item:hover .mrx-menu__chevron,
.mrx-menu__item:focus-within .mrx-menu__chevron,
.mrx-menu__item.is-open .mrx-menu__chevron {
	color: var(--mrx-m-link-hover);
	transform: rotate(180deg);
}

.mrx-menu__caret:focus-visible {
	outline: 2px solid var(--mrx-m-rule);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * The panel
 *
 * The outer element carries the gap to the links as padding rather than as an
 * offset, so the space between link and panel is a bridge the pointer can
 * cross rather than a hole that closes the panel halfway down.
 * ---------------------------------------------------------------------- */

.mrx-menu__panel {
	position: absolute;
	top: 100%;
	z-index: 20;
	padding-top: var(--mrx-m-panel-offset);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 320ms var(--mrx-m-ease),
		transform 380ms var(--mrx-m-ease),
		visibility 0s linear 380ms;
}

.mrx-menu__panel--drop {
	left: 0;
	min-width: 264px;
}

/* A dropdown near the right edge of the screen would otherwise run off it. */
.mrx-menu__item--drop:nth-last-child(-n + 2) .mrx-menu__panel--drop {
	right: 0;
	left: auto;
}

.mrx-menu__panel--menu {
	right: 0;
	left: 0;
}

/*
 * Edge to edge. The menu can sit anywhere in a header — hard right, inside a
 * narrow column — so where the screen actually starts is measured by the
 * script and written to these two properties. The values below it are the
 * fallback for the moment before that runs, and they assume the menu is
 * roughly centred, which is the only guess available without measuring.
 */
.mrx-menu__panel--full {
	left: 50%;
	width: calc(100vw - var(--mrx-sbw, 0px));
	margin-left: calc((100vw - var(--mrx-sbw, 0px)) / -2);
}

.mrx-menu-wrap[data-mrx-bleed] .mrx-menu__panel--full {
	left: var(--mrx-m-bleed-l);
	width: var(--mrx-m-bleed-w);
	margin-left: 0;
}

/*
 * Opening. With the script running, hover is managed from there so a panel can
 * hold open for a moment after the pointer leaves — the grace period that lets
 * a hand travel diagonally down to a column at the far edge without the panel
 * shutting on the way. This rule is the fallback for when the script has not
 * run, where plain `:hover` is worse than the timed version but far better than
 * a panel that never opens at all.
 */
@media (hover: hover) and (pointer: fine) {
	html:not(.mrx-menu-js) .mrx-menu__item--panel:hover > .mrx-menu__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s, 0s, 0s;
	}
}

.mrx-menu__item--panel:focus-within > .mrx-menu__panel,
.mrx-menu__item--panel.is-open > .mrx-menu__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s, 0s, 0s;
}

/* Where the panel comes from. */
.mrx-mpanim-drop .mrx-menu__panel {
	transform: translateY(-10px);
}

.mrx-mpanim-rise .mrx-menu__panel {
	transform: translateY(14px);
}

.mrx-mpanim-scale .mrx-menu__panel {
	transform: translateY(-6px) scale(0.97);
	transform-origin: top center;
}

.mrx-mpanim-fade .mrx-menu__panel {
	transform: none;
}

.mrx-menu__panel-inner {
	position: relative;
	isolation: isolate;
	padding: var(--mrx-m-panel-pad);
	background-color: var(--mrx-m-panel-bg);
	border: 1px solid var(--mrx-m-panel-border);
	border-radius: var(--mrx-m-panel-radius);
	box-shadow: 0 30px 70px -30px rgba(26, 33, 66, 0.28);
}

/* A single soft light source in one corner: what stops a wide flat rectangle
   reading as a plain block of colour. */
.mrx-menu__panel-inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: radial-gradient(110% 90% at 92% 0%, var(--mrx-m-panel-glow), transparent 62%);
	border-radius: inherit;
	pointer-events: none;
}

/*
 * Edge to edge is the surface, not the content. The padding grows to whatever
 * is left over once the content has taken its measure, which centres the
 * columns on the page's own axis without a second wrapper to do it.
 */
.mrx-menu__panel--full .mrx-menu__panel-inner {
	padding-inline: max(
		var(--mrx-m-panel-gutter),
		calc((100% - var(--mrx-m-panel-max)) / 2 + var(--mrx-m-panel-gutter))
	);
	border-inline: 0;
	border-radius: 0 0 var(--mrx-m-panel-radius) var(--mrx-m-panel-radius);
}

.mrx-menu__cols {
	display: grid;
	grid-template-columns: repeat(var(--mrx-m-cols, 1), minmax(0, 1fr));
	gap: var(--mrx-m-panel-gap);
}

.mrx-menu__panel--drop .mrx-menu__cols {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Where the breakpoint is set low, a four-column panel can still be asked to
 * fit a tablet. The count cannot be clamped in `repeat()` — it takes an
 * integer, not a calculation — so the columns are let go to whatever fits and
 * the dividers stand down, having nothing straight left to divide.
 */
@media (max-width: 1080px) {
	.mrx-menu__panel--mega .mrx-menu__cols {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	}

	.mrx-menu__panel--mega .mrx-menu__col + .mrx-menu__col::before {
		content: none;
	}
}

.mrx-menu__col {
	position: relative;
	min-width: 0;
}

/* Drawn in the gutter rather than as a border, so the hairline sits midway
   between two columns instead of adding its own width to one of them. */
.mrx-menu__cols:not(.mrx-menu__cols--wrapped) .mrx-menu__col + .mrx-menu__col::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--mrx-m-panel-gap) / -2);
	width: 1px;
	background-color: var(--mrx-m-panel-divider);
}

.mrx-menu__coltitle {
	margin: 0 0 14px;
	padding-bottom: 10px;
	color: var(--mrx-m-coltitle);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--mrx-m-panel-divider);
}

.mrx-menu__coltitle-link {
	color: inherit;
	text-decoration: none;
	transition: color 240ms var(--mrx-m-ease);
}

.mrx-menu__coltitle-link:hover {
	color: var(--mrx-m-link-hover);
}

.mrx-menu__sublist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.mrx-menu__sublink {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 12px;
	color: var(--mrx-m-sublink);
	text-decoration: none;
	border-radius: 12px;
	transition: color 260ms var(--mrx-m-ease);
}

/* The wash is a pseudo-element rather than a background so it can scale in
   from slightly under size, which reads as the row lighting up rather than a
   colour being switched on. */
.mrx-menu__sublink::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--mrx-m-sublink-bg);
	border-radius: inherit;
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity 280ms var(--mrx-m-ease),
		transform 280ms var(--mrx-m-ease);
}

.mrx-menu__sublink:hover::before,
.mrx-menu__sublink:focus-visible::before,
.mrx-menu__subitem.is-current > .mrx-menu__sublink::before {
	opacity: 1;
	transform: none;
}

.mrx-menu__sublink:hover,
.mrx-menu__sublink:focus-visible {
	color: var(--mrx-m-sublink-hover);
	outline: none;
}

.mrx-menu__subicon,
.mrx-menu__subbody,
.mrx-menu__subarrow {
	position: relative;
	z-index: 1;
}

.mrx-menu__subicon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--mrx-m-subicon-size);
	height: var(--mrx-m-subicon-size);
	color: var(--mrx-m-subicon);
	font-size: calc(var(--mrx-m-subicon-size) * 0.42);
	background-color: var(--mrx-m-subicon-bg);
	border-radius: calc(var(--mrx-m-subicon-size) * 0.3);
	transition:
		color 280ms var(--mrx-m-ease),
		background-color 280ms var(--mrx-m-ease),
		transform 320ms var(--mrx-m-ease);
}

.mrx-menu__sublink:hover .mrx-menu__subicon,
.mrx-menu__sublink:focus-visible .mrx-menu__subicon {
	color: var(--mrx-m-subicon-hover);
	background-color: var(--mrx-m-subicon-bg-hover);
	transform: translateY(-1px) scale(1.04);
}

.mrx-menu__subbody {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.mrx-menu__subtitle {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.mrx-menu__subdesc {
	color: var(--mrx-m-subdesc);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
}

.mrx-menu__subarrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--mrx-m-arrow);
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 280ms var(--mrx-m-ease),
		transform 320ms var(--mrx-m-ease);
}

.mrx-menu__subarrow svg {
	width: 14px;
	height: 11px;
}

.mrx-menu__sublink:hover .mrx-menu__subarrow,
.mrx-menu__sublink:focus-visible .mrx-menu__subarrow {
	opacity: 1;
	transform: none;
}

.mrx-menu__subitem--highlight > .mrx-menu__sublink .mrx-menu__subtitle {
	color: var(--mrx-m-link-hover);
	font-weight: 600;
}

/* A fourth level has no column of its own to become, so it is set as a short
   list under its parent rather than dropped. */
.mrx-menu__subnest {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 8px;
	padding: 0 12px 0 calc(var(--mrx-m-subicon-size) + 25px);
	list-style: none;
}

.mrx-menu__nestlink {
	color: var(--mrx-m-subdesc);
	font-size: 12.5px;
	text-decoration: none;
	transition: color 240ms var(--mrx-m-ease);
}

.mrx-menu__nestlink:hover {
	color: var(--mrx-m-link-hover);
}

.mrx-menu__panel-foot {
	margin-top: 24px;
	padding-top: 18px;
	color: var(--mrx-m-panel-foot);
	font-size: 13.5px;
	border-top: 1px solid var(--mrx-m-panel-divider);
}

.mrx-menu__panel-foot p {
	margin: 0;
}

.mrx-menu__panel-foot a {
	color: var(--mrx-m-link-hover);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* -------------------------------------------------------------------------
 * Hamburger
 * ---------------------------------------------------------------------- */

.mrx-menu__burger {
	display: var(--mrx-m-mob);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--mrx-m-burger-size);
	height: var(--mrx-m-burger-size);
	padding: 0;
	background-color: var(--mrx-m-burger-bg);
	border: 1px solid var(--mrx-m-burger-border);
	border-radius: var(--mrx-m-burger-radius);
	cursor: pointer;
	transition:
		background-color 280ms var(--mrx-m-ease),
		border-color 280ms var(--mrx-m-ease);
}

.mrx-menu__burger:focus-visible {
	outline: 2px solid var(--mrx-m-rule);
	outline-offset: 3px;
}

.mrx-menu__burger-box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.mrx-menu__burger-bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--mrx-m-burger);
	border-radius: 2px;
	transition:
		transform 400ms var(--mrx-m-ease),
		width 400ms var(--mrx-m-ease),
		opacity 200ms var(--mrx-m-ease);
}

.mrx-menu__burger-bar:nth-child(1) {
	top: 0;
}

/* The short middle bar is what tells the three apart at a glance, and it is
   the one that leaves on the way to the cross. */
.mrx-menu__burger-bar:nth-child(2) {
	top: 6px;
	width: 68%;
}

.mrx-menu__burger-bar:nth-child(3) {
	top: 12px;
}

.mrx-menu__burger:hover .mrx-menu__burger-bar:nth-child(2) {
	width: 100%;
}

.mrx-menu-wrap.is-open .mrx-menu__burger-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.mrx-menu-wrap.is-open .mrx-menu__burger-bar:nth-child(2) {
	width: 68%;
	opacity: 0;
	transform: translateX(-10px);
}

.mrx-menu-wrap.is-open .mrx-menu__burger-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * Drawer
 * ---------------------------------------------------------------------- */

.mrx-menu__scrim {
	position: fixed;
	z-index: 99998;
	inset: 0;
	background-color: var(--mrx-m-scrim);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 400ms var(--mrx-m-ease),
		visibility 0s linear 400ms;
}

.mrx-menu-wrap.is-open .mrx-menu__scrim {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s;
}

.mrx-menu__drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	width: min(var(--mrx-m-drawer-w), 92vw);
	flex-direction: column;
	background-color: var(--mrx-m-drawer-bg);
	/* Hidden rather than translated out of sight alone: visibility is what
	   takes it out of the tab order and off the screen reader. */
	visibility: hidden;
	overscroll-behavior: contain;
	transition:
		transform 460ms var(--mrx-m-ease),
		visibility 0s linear 460ms;
}

.mrx-mdrawer-end .mrx-menu__drawer {
	right: 0;
	box-shadow: -30px 0 60px -30px rgba(26, 33, 66, 0.45);
	transform: translateX(100%);
}

.mrx-mdrawer-start .mrx-menu__drawer {
	left: 0;
	box-shadow: 30px 0 60px -30px rgba(26, 33, 66, 0.45);
	transform: translateX(-100%);
}

.mrx-mdrawer-top .mrx-menu__drawer {
	right: 0;
	left: 0;
	width: 100%;
	max-height: 100%;
	box-shadow: 0 30px 60px -30px rgba(26, 33, 66, 0.45);
	transform: translateY(-100%);
}

.mrx-menu-wrap.is-open .mrx-menu__drawer {
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s;
}

.mrx-menu__drawer-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--mrx-m-drawer-pad) var(--mrx-m-drawer-pad) 0;
}

.mrx-menu__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--mrx-m-mlink);
	background: none;
	border: 1px solid var(--mrx-m-mdivider);
	border-radius: 50%;
	cursor: pointer;
	transition:
		color 260ms var(--mrx-m-ease),
		border-color 260ms var(--mrx-m-ease),
		transform 320ms var(--mrx-m-ease);
}

.mrx-menu__close:hover {
	color: var(--mrx-m-mlink-hover);
	border-color: currentColor;
	transform: rotate(90deg);
}

.mrx-menu__close svg {
	width: 15px;
	height: 15px;
}

.mrx-menu__drawer-nav {
	flex: 1 1 auto;
	padding: 10px var(--mrx-m-drawer-pad) var(--mrx-m-drawer-pad);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mrx-menu__mlist,
.mrx-menu__msublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-menu__mitem--depth-0 + .mrx-menu__mitem--depth-0 {
	border-top: 1px solid var(--mrx-m-mdivider);
}

.mrx-menu__mrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mrx-menu__mlink {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	color: var(--mrx-m-mlink);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	transition:
		color 240ms var(--mrx-m-ease),
		transform 300ms var(--mrx-m-ease);
}

.mrx-menu__mlink:hover,
.mrx-menu__mitem.is-current > .mrx-menu__mrow > .mrx-menu__mlink {
	color: var(--mrx-m-mlink-hover);
}

.mrx-menu__mlink:active {
	transform: translateX(3px);
}

.mrx-menu__micon {
	width: 20px;
	color: var(--mrx-m-mlink-hover);
	font-size: 0.85em;
	text-align: center;
}

.mrx-menu__mtoggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--mrx-m-mlink);
	background: none;
	border: 1px solid var(--mrx-m-mdivider);
	border-radius: 50%;
	cursor: pointer;
	transition:
		color 240ms var(--mrx-m-ease),
		border-color 240ms var(--mrx-m-ease);
}

.mrx-menu__mtoggle:hover {
	color: var(--mrx-m-mlink-hover);
	border-color: currentColor;
}

.mrx-menu__mtoggle .mrx-menu__chevron {
	color: currentColor;
}

.mrx-menu__mitem.is-open > .mrx-menu__mrow > .mrx-menu__mtoggle .mrx-menu__chevron {
	transform: rotate(180deg);
}

/*
 * The accordion. A grid row going from nothing to its content height is the
 * one way to animate to an unknown height without measuring it in script and
 * writing a pixel value that goes stale the moment the text rewraps.
 */
.mrx-menu__msub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 420ms var(--mrx-m-ease);
}

.mrx-menu__mitem.is-open > .mrx-menu__msub {
	grid-template-rows: 1fr;
}

.mrx-menu__msublist {
	min-height: 0;
	overflow: hidden;
}

.mrx-menu__msub .mrx-menu__mlink {
	padding: 10px 0 10px 16px;
	color: var(--mrx-m-msub);
	font-size: 15px;
	font-weight: 400;
}

.mrx-menu__msub .mrx-menu__msub .mrx-menu__mlink {
	padding-left: 32px;
	font-size: 14px;
}

.mrx-menu__msub .mrx-menu__mlink:hover {
	color: var(--mrx-m-mlink-hover);
}

/* Each row arrives just after the one above it, so the list reads as opening
   rather than as appearing all at once. */
.mrx-menu__mlist > .mrx-menu__mitem {
	opacity: 0;
	transform: translateX(14px);
	transition:
		opacity 420ms var(--mrx-m-ease) var(--mrx-m-stagger, 0ms),
		transform 420ms var(--mrx-m-ease) var(--mrx-m-stagger, 0ms);
}

.mrx-menu-wrap.is-open .mrx-menu__mlist > .mrx-menu__mitem {
	opacity: 1;
	transform: none;
}

.mrx-mdrawer-start .mrx-menu__mlist > .mrx-menu__mitem {
	transform: translateX(-14px);
}

.mrx-mdrawer-top .mrx-menu__mlist > .mrx-menu__mitem {
	transform: translateY(-12px);
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(1) {
	--mrx-m-stagger: 90ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(2) {
	--mrx-m-stagger: 130ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(3) {
	--mrx-m-stagger: 170ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(4) {
	--mrx-m-stagger: 210ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(5) {
	--mrx-m-stagger: 250ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(6) {
	--mrx-m-stagger: 290ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(7) {
	--mrx-m-stagger: 330ms;
}

.mrx-menu__mlist > .mrx-menu__mitem:nth-child(n + 8) {
	--mrx-m-stagger: 370ms;
}

/* The page behind a drawer must not scroll under it. */
html.mrx-menu-locked,
html.mrx-menu-locked body {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Palettes
 *
 * Both are light. A dark header is a matter of setting the link colour, which
 * is a control, rather than switching the panel over with it: the panel is its
 * own surface sitting on the page below the header, not part of the header.
 * ---------------------------------------------------------------------- */

.mrx-mpal-cream .mrx-menu-wrap {
	--mrx-m-panel-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-m-panel-border: rgba(207, 161, 144, 0.42);
	--mrx-m-panel-glow: rgba(255, 255, 255, 0.85);
	--mrx-m-sublink-bg: rgba(255, 255, 255, 0.92);
	--mrx-m-subicon-bg: rgba(255, 255, 255, 0.95);
	--mrx-m-drawer-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-m-mdivider: rgba(207, 161, 144, 0.34);
	--mrx-m-burger-border: rgba(207, 161, 144, 0.5);
}

/* -------------------------------------------------------------------------
 * Editor placeholder
 * ---------------------------------------------------------------------- */

.mrx-menu-wrap--empty {
	display: block;
	padding: 24px 26px;
	background-color: var(--mrmvr-cream, #fdf8f5);
	border: 1px dashed rgba(207, 161, 144, 0.6);
	border-radius: 14px;
}

.mrx-menu__empty-title {
	margin: 0 0 6px;
	color: var(--mrmvr-navy, #1a2142);
	font-family: var(--mrmvr-font-display);
	font-size: 20px;
	font-weight: 600;
}

.mrx-menu__empty-text {
	margin: 0;
	max-width: 62ch;
	color: rgba(26, 33, 66, 0.7);
	font-size: 14px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */

.mrx-menu__sublink:focus-visible,
.mrx-menu__mlink:focus-visible,
.mrx-menu__link:focus-visible,
.mrx-menu__close:focus-visible,
.mrx-menu__mtoggle:focus-visible {
	outline: 2px solid var(--mrx-m-rule);
	outline-offset: 3px;
}

/* Standard WordPress helper, redeclared because a block theme may not ship it
   and the labels behind it are the only text some of these buttons have. */
.mrx-menu-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.mrx-menu-wrap *,
	.mrx-menu-wrap *::before,
	.mrx-menu-wrap *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}

	.mrx-menu__mlist > .mrx-menu__mitem {
		opacity: 1;
		transform: none;
	}
}