/*
 * db-mega-menu.css v1.4.5
 *
 * The mega menu's main look still comes from the site's css/mega-menu-v2.css.
 * This file holds the component's own fixes on top of it. Every rule is scoped
 * to .db-mega-menu (the component's wrapper) so it wins without !important.
 */

/* -- Focus ring on flyout links and images --
 * Site red ring (black in high contrast) instead of the browser's blue one. */
.db-mega-menu .mega-menu-v2-flyout-wrapper a:focus {
	outline: none;
}

.db-mega-menu .mega-menu-v2-flyout-wrapper a:focus-visible {
	outline: 2px solid var(--color-focus, #c32b2a);
	outline-offset: 2px;
}

/* -- Keyboard toggle buttons (added by db-mega-menu.js) --
 * Hidden until someone tabs to it, then it shows as a small caret just after
 * the label. It is absolutely positioned so it never changes the bar's layout. */
.db-mega-menu .db-mega-menu__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	border-radius: 2px;
	white-space: nowrap;
	background: transparent;
	color: var(--color-header-link, #fefffc);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.db-mega-menu .db-mega-menu__toggle:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 0 0 1px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	vertical-align: middle;
	outline: 2px solid var(--color-header-link, #fefffc);
	outline-offset: -2px;
}

/* At 1300px and below the labels are only 15px apart, so the caret is narrower
 * there (still 24px tall) and does not cover the next label. */
@media all and (max-width: 1300px) {
	.db-mega-menu .db-mega-menu__toggle:focus {
		width: 14px;
		margin-left: 0;
	}
}

.db-mega-menu .db-mega-menu__toggle svg {
	display: block;
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}

.db-mega-menu .mega-menu-v2-li-has-flyout.hover-state-active > .db-mega-menu__toggle svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.db-mega-menu .db-mega-menu__toggle svg {
		transition: none;
	}
}