/*
 * db-mega-menu.css v1.4.1
 *
 * 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.
 *
 * Text size modes do not change the menu: styles.css pins the font size tokens
 * to their normal values inside the header (.background-header-wrapper), so
 * --font-size-md below is always 16px here.
 */

/* -- Flyout layout --
 * mega-menu-v2.css gives the link area a fixed height of 370px. Longer columns
 * ran past it and pushed the bottom images down. The area now grows to fit its
 * columns (370px is still the minimum, so short flyouts look the same).
 * The Designers flyout keeps its own sizing. */
.db-mega-menu .mega-menu-v2-flyout-container .mega-menu-v2-flyout-links-wrapper:not(.designers) {
	height: auto;
	min-height: 370px;
	display: flow-root;
}

.db-mega-menu .mega-menu-v2-flyout-container .mega-menu-v2-flyout-bottom-creative-wrapper {
	clear: both;
}

/* -- Flyout link size --
 * 16px on desktop (was 15px). At 1220px and below mega-menu-v2.css's 14px
 * step-down still applies. Section headers (18px) and the Designers list (12px)
 * are unchanged. */
@media all and (min-width: 1221px) {
	.db-mega-menu .mega-menu-v2-flyout-links-list:not(.designers) li:not(.mega-menu-v2-flyout-links-header) a {
		font-size: var(--font-size-md, 16px);
	}
}

/* -- Bolder text mode --
 * styles.css keeps the whole header at normal weights in every mode. Flyout
 * links and section headers are the exception: they step up one weight.
 * The top bar labels stay at their normal weight so the bar does not get wider. */
html[data-weight="bold"] .db-mega-menu .mega-menu-v2-flyout-links-list li a {
	font-weight: 700;
}

html[data-weight="bold"] .db-mega-menu .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header,
html[data-weight="bold"] .db-mega-menu .mega-menu-v2-flyout-links-list li.mega-menu-v2-flyout-links-header a {
	font-weight: 900;
}

/* -- 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;
	}
}