/* Site Toolkit: mega menu. Theme-neutral; tune it with the --stk-mega-* variables. */
.stk-has-mega {
	position: relative;
}

.stk-has-mega > .stk-mega__toggle.stk-mega__toggle {
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	vertical-align: middle;
	inline-size: auto;
	block-size: auto;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	margin-inline-start: var(--stk-mega-toggle-gap, 0);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

/* The button is only as wide as the arrow; the touch target is a larger invisible area around it. */
.stk-has-mega > .stk-mega__toggle.stk-mega__toggle::after {
	content: "";
	position: absolute;
	inset: -0.9em -0.7em;
}

.stk-has-mega > .stk-mega__toggle.stk-mega__toggle:hover,
.stk-has-mega > .stk-mega__toggle.stk-mega__toggle:focus,
.stk-has-mega > .stk-mega__toggle.stk-mega__toggle:active {
	background: none;
	box-shadow: none;
	color: inherit;
}

/* Chevron turned off: the button stays for keyboard users, invisible until it is focused. */
.stk-has-mega > .stk-mega__toggle--hidden.stk-mega__toggle {
	position: absolute;
	inline-size: 1px;
	min-inline-size: 0;
	block-size: 1px;
	min-block-size: 0;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.stk-has-mega > .stk-mega__toggle--hidden.stk-mega__toggle:focus-visible {
	position: static;
	inline-size: auto;
	min-inline-size: 1.75em;
	block-size: auto;
	min-block-size: 1.75em;
	margin: 0;
	margin-inline-start: var(--stk-mega-toggle-gap, 0);
	padding: 0 0.35em;
	overflow: visible;
	clip-path: none;
}

.stk-mega__toggle:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.stk-mega__chevron {
	display: block;
	inline-size: var(--stk-mega-chevron, 7px);
	block-size: var(--stk-mega-chevron, 7px);
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	rotate: 45deg;
	translate: 0 -15%;
	transition: rotate 0.15s ease;
}

.stk-mega-open > .stk-mega__toggle .stk-mega__chevron {
	rotate: -135deg;
	translate: 0 15%;
}

.stk-mega__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.stk-mega__badge {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--stk-mega-badge-bg, #d63638);
	color: var(--stk-mega-badge-color, #fff);
	font-size: 0.7em;
	line-height: 1.4;
	vertical-align: middle;
}

.stk-mega__icon {
	display: inline-block;
	margin-inline-end: 0.25em;
}

.stk-mega {
	--stk-x: 0%;
	position: absolute;
	inset-block-start: calc(100% + var(--stk-mega-offset, 0px));
	inset-inline-start: 0;
	z-index: var(--stk-mega-z, 1000);
	box-sizing: border-box;
	inline-size: var(--stk-mega-w, min(100vw, 720px));
	max-inline-size: 100vw;
	padding: var(--stk-mega-pad, 1.25rem);
	background: var(--stk-mega-bg, #fff);
	color: var(--stk-mega-color, #1d2327);
	border-radius: var(--stk-mega-radius, 0);
	box-shadow: var(--stk-mega-shadow, 0 12px 32px rgb(0 0 0 / 18%));
	text-align: start;
	opacity: 0;
	translate: var(--stk-x) 0.4rem;
	transition: opacity 0.15s ease, translate 0.15s ease;
}

.stk-mega__inner {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.stk-mega--custom {
	max-inline-size: calc(100vw - 1rem);
}

.stk-mega-hides-children > .sub-menu {
	display: none !important;
}

.stk-mega::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	block-size: var(--stk-mega-offset, 0px);
}

.stk-mega.is-loading {
	min-block-size: 6rem;
	opacity: 0.85;
}

.stk-mega__error {
	margin: 0;
}

.stk-mega[hidden] {
	display: none;
}

.stk-mega.is-open {
	opacity: 1;
	translate: var(--stk-x) 0;
}

.stk-mega--align-center {
	inset-inline-start: 50%;
	--stk-x: -50%;
}

[dir="rtl"] .stk-mega--align-center {
	--stk-x: 50%;
}

.stk-mega--align-end {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* Below the breakpoint (the script sets the class): the panel is an accordion inside the menu. */
html.stk-mega-mobile .stk-has-mega {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

html.stk-mega-mobile .stk-has-mega > a {
	flex: 1 1 auto;
}

html.stk-mega-mobile .stk-mega {
	position: static;
	flex: 1 0 100%;
	inline-size: 100%;
	max-inline-size: none;
	inset: auto;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	translate: none;
	transition: none;
}

html.stk-mega-mobile .stk-has-mega > .stk-mega__toggle--hidden.stk-mega__toggle {
	position: static;
	inline-size: auto;
	block-size: auto;
	min-inline-size: 2.5em;
	min-block-size: 2.5em;
	margin: 0;
	margin-inline-start: var(--stk-mega-toggle-gap, 0);
	padding: 0 0.35em;
	overflow: visible;
	clip-path: none;
}

html.stk-mega-mobile .stk-has-mega > .stk-mega__toggle.stk-mega__toggle {
	min-inline-size: 2.5em;
	min-block-size: 2.5em;
}

@media (prefers-reduced-motion: reduce) {
	.stk-mega,
	.stk-mega__chevron {
		transition: none;
	}
}