Untitled

.site-header__menu {
	font-size: 100%;
	list-style: none;
	margin: 0;
	padding: 0;

	@media (--bp-large) {
		align-items: center;
		display: flex;
		justify-content: flex-end;
	}

	/* Remove focus ring and add super subtle focus background color */
	& a:focus {
		background-color: var(--c-grey-100);
		outline: none;

		@media (--bp-large) {
			background-color: transparent;
			outline-color: var(--c-focus-ring);
			outline-offset: 3px;
			outline-style: solid;
			outline-width: 2px;
		}
	}

	& .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0 15px 30px;

		&[aria-hidden="true"] {
			display: none;
		}

		@nest .js & {
			display: none;
		}

		&:target,
		&[aria-hidden="false"] {
			display: block;

			@media (--bp-large) {
				background-color: var(--c-header-alt-bg);
				display: flex;
			}

			& .sub-menu {
				display: block;
			}
		}

		@media (--bp-large) {
			box-shadow: var(--header-shadow);
			flex-flow: row wrap;
			left: 0;
			padding-bottom: 40px;
			padding-left: 0;
			padding-right: 0;
			padding-top: 30px;
			position: absolute;
			right: 0;
			top: 100%;
			z-index: 1;

			& > .menu-item {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		@media (--bp-xlarge) {
			padding-left: var(--pad-container-md);
			padding-right: var(--pad-container-md);

			& > .menu-item {
				padding-left: 0;
				padding-right: 0;
			}
		}

		@media (--bp-xxlarge) {
			padding-left: var(--pad-container-lg);
			padding-right: var(--pad-container-lg);
		}

		& .sub-menu {
			box-shadow: none;
			padding: 0;
			position: relative;
			top: 0;
		}

		& li {
			padding: 12.5px 0;
		}

		& li.menu-item--column {
			flex-grow: 1;
			padding: 0;

			&:last-of-type {
				padding-bottom: 15px;

				& > .sub-menu {
					margin-bottom: 0;
				}
			}

			@media (--bp-large) {
				flex: 1 0;
				max-width: none;
				padding-right: 30px;
				width: auto;

				&:last-of-type {
					padding-bottom: 0;
					padding-right: 0;
				}

				&.menu-item--column--auto {
					flex: 1 0 auto;
					max-width: none;
					padding-right: 0;
					width: auto;
				}

				& > .sub-menu {

					& li.menu-item--column {
						float: left;
						max-width: 100%;
						min-width: 50%;
						vertical-align: top;
					}
				}
			}

			@media (--bp-xlarge) {
				padding-right: 50px;
			}

			&.menu-item--column--separator {

				@media (--bp-large) {
					border-left: 1px solid var(--c-grey-200);
					padding-left: 30px;
					position: relative;
				}

				@media (--bp-xlarge) {
					padding-left: 50px;
				}
			}

			&.menu-item--column-lg {

				@media (--bp-large) and (max-width: 98.9em) {
					flex-basis: 35%;
					flex-shrink: 0;
				}
			}
		}

		& > li:not(.menu-item--column) {
			width: 100%;
		}

		& > li.menu-item--title {
			padding-bottom: 10px;
			padding-top: 25px;
			width: 100%;

			@media (--bp-large ) {
				padding-top: 10px;
			}
		}

		& li[class*="menu-item-object-"] + li.menu-item--title {

			@media (--bp-large) {
				padding-top: 25px;
			}
		}

		& li.menu-item--cta {
			background-color: var(--c-grey-300);
			margin-bottom: -30px;
			margin-left: -15px;
			margin-right: -15px;
			margin-top: 15px;
			padding-bottom: 15px;
			padding-top: 15px;
			text-align: center;
			width: 100vw;

			@media (--bp-medium ) {
				margin-left: -15%;
				margin-right: -15%;
				width: calc(100vw + 15%);
			}

			@media (--bp-large) {
				margin-bottom: -40px;
				margin-top: 30px;
			}
		}

		& a.is-style-cta {
			display: inline;
		}
	}