/**
 * Primary desktop submenu: size to content (no fixed height).
 * Stock main.min.css uses height: 294px + absolute columns.
 */

@media screen and (min-width: 1081px) {
	.sub-menu__wrapper,
	.menu-list__item--sub > .sub-menu__wrapper {
		height: auto;
		width: max-content;
		max-width: min(680px, calc(100vw - 40px));
		min-height: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		align-content: flex-start;
		gap: 0;
		padding: 8px 0;
		box-sizing: border-box;
	}

	/* Columns flow in the flex wrapper instead of absolute + translate. */
	.sub-menu__wrapper .sub-menu,
	.sub-menu__wrapper .sub-menu.second,
	.navigation .menu-list__item--sub .sub-menu,
	.navigation .menu-list__item--sub .sub-menu.second,
	.navigation .menu-list__item--sub .sub-menu.second {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		width: 320px;
		max-width: 320px;
		flex: 0 0 320px;
		padding: 10px 0;
		z-index: auto;
	}

	/* Visibility of the panel is controlled by the wrapper, not each column. */
	.navigation .menu-list__item--sub:hover .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}