// =================================================================
// Navigation Settings
// =================================================================

// Masthead and Brand
// -----------------------------------------------------------------

@use "sass:math";

// Masthead Border
//
// The style of border to use on the masthead.
// This shows directly below navigation or brand depending on the layout
// you've chosen for your site.
//
// Styleguide WordPress.Masthead.Border
//
// Access: Public
//
// Since: 1.0.0

$border-masthead:                          $border !default;

// Masthead Background
//
// The background color of the masthead.
// Bright colors are not recommended.
//
// Styleguide WordPress.Masthead.Background Color
//
//
// Access: Public
//
// Since: 1.0.0

$color-masthead-bg:                        $color-grayscale-f !default;

// Masthead Height
//
// The height of the masthead area.
//
// Styleguide WordPress.Masthead.Height
//
// Access: Public
//
// Since: 5.0.0

$height-masthead:                          120px !default;

// Primary Navigation
// -----------------------------------------------------------------

// Primary Navigation Border
//
// The style of border used on primary navigation.
// By default, this border shows above primary navigation on mobile only.
//
// Styleguide WordPress.Navigation.Border Width
//
// Access: Public
//
// Since: 1.0.0

$border-width-primary-nav:                   1px 0 0 0 !default;

// Primary Navigation Border
//
// The width of border used on primary navigation at desktop sizes.
//
// Styleguide WordPress.Navigation.Border Width (Desktop)
//
// Access: Public
//
// Since: 1.0.0

$border-primary-nav-desktop: 					 0 !default;

// Primary Navigation Border Color
//
// The color of border used on primary navigation.
//
// Styleguide WordPress.Navigation.Border Color
//
// Access: Public
//
// Since: 1.0.0

$color-primary-nav-border:                  $color-grayscale-3 !default;

// Primary Navigation Font Family
//
// The font used in primary navigation.
//
// Styleguide WordPress.Navigation.Font Family
//
// Access: Public
//
// Since: 1.0.0

$font-family-navigation:                    $font-family-sans-serif !default;

// Primary Navigation Link Background Color
//
// The color to use behind primary navigation.
//
// Styleguide WordPress.Navigation.Background Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-primary-nav-bg:                      $color-grayscale-0 !default;

// Primary Navigation Link Color
//
// The color of links in primary navigation.
//
// Styleguide WordPress.Navigation.Link Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-primary-nav-link:                    $color-grayscale-f !default;

// Primary Navigation Link Color Hover
//
// The color of links when you hover in primary navigation.
//
// Styleguide WordPress.Navigation.Link Color Hover
//
// Access: Public
//
// Since: 1.0.0

$color-primary-nav-link-hover:              $color-grayscale-a !default;

// Primary Navigation Current Link Color
//
// The color of an active link in primary navigation - in other words, the
// color that a link will be when you are on that link's page.
//
// Styleguide WordPress.Navigation.Link Color Current
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-primary-nav-link-current:            $color-grayscale-9 !default;

// Primary Navigation Dropdown Background Color
//
// The color to use behind dropdown menus. Only affects non-mobile devices.
// This variable is not used in the left hand navigation layout as dropdowns
// are not supported.
//
// Styleguide WordPress.Navigation.Dropdown Background Color
//
// Access: Public
//
// Since: 1.0.0

$color-primary-nav-dropdown-bg:             $color-grayscale-0 !default;

// Primary Navigation Dropdown Link Color
//
// The color of links in dropdown menus.
//
// Styleguide WordPress.Navigation.Dropdown Link Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-primary-nav-dropdown-link:           $color-primary-nav-link !default;

// Primary Navigation Dropdown Link Hover Color
//
// The color of links in dropdown menus when you hover over them.
//
// Styleguide WordPress.Navigation.Dropdown Link Color Hover
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-primary-nav-dropdown-link-hover:     $color-primary-nav-link-hover !default;

// Utility Navigation
// -----------------------------------------------------------------

// Utility Navigation Border
//
// The width and style of border used in the utility navigation.
//
// Styleguide WordPress.Navigation.Footbar Padding
//
//
// Access: Public
//
// Since: 1.0.0

$border-width-utility-nav:                   1px 0 0 0 !default;

// Utility Navigation Font Size
//
// The font size used in the utility navigation.
//
// Styleguide WordPress.Utility Navigation.Font Size
//
// Access: Public
//
// Since: 1.0.0

$font-size-utility-nav:                      14px !default;

// Utility Navigation Link Color
//
// The color of links in the utility navigation.
//
// Styleguide WordPress.Utility Navigation.Link Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-utility-nav-link:                    $color-grayscale-6 !default;

// Utility Navigation Link Color Hover
//
// The color of links when you hover in the utility navigation.
//
// Styleguide WordPress.Utility Navigation.Link Color Hover
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-utility-nav-link-hover:              $color-grayscale-0 !default;

// Utility Navigation Link Color - Mobile
//
// The color of links in the utility navigation on mobile.
// The placement of utility navigation on mobile usually means
// the utility navigation will be on a different background color,
// so it's important to double check that this is set correctly.
//
// Styleguide WordPress.Utility Navigation.Link Color Mobile
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-utility-nav-mobile-link:       			$color-grayscale-a !default;

// Utility Navigation Link Color Hover - Mobile
//
// The color of links in the utility navigation when you hover on mobile.
//
// Styleguide WordPress.Utility Navigation.Link Color Mobile Hover
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-utility-nav-mobile-link-hover: 			$color-grayscale-f !default;

// Navigation and Search Toggles
// -----------------------------------------------------------------

// Navigation and Search Toggle Color
//
// Controls the color of toggles in the navigation at mobile sizes.
// By default, this affects both the menu and search toggles.
//
// Styleguide WordPress.Navigation.Toggle Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-nav-toggle:                          $color-grayscale-f !default;

// Navigation and Search Toggle Color Hover
//
// Controls the color of toggles in the navigation at mobile sizes on hover.
//
// Styleguide WordPress.Navigation.Toggle Color Hover
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-nav-toggle-hover:                    $color-grayscale-a !default;

// Navigation and Search Toggle Color Desktop
//
// Controls the color of toggles in the navigation at desktop sizes.
// By default, this affects both the menu and search toggles.
//
// Styleguide WordPress.Navigation.Toggle Color Desktop
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-nav-toggle-alt:                      $color-grayscale-9 !default;

// Navigation and Search Toggle Color Hover
//
// Controls the color of toggles in the navigation at desktop sizes on hover.
//
// Styleguide WordPress.Navigation.Toggle Color Desktop Hover
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-nav-toggle-alt-hover:                $color-grayscale-0 !default;

// Search
// -----------------------------------------------------------------

// Search Form Border Width
//
// Controls the width of the border used on the search pane.
//
// Styleguide WordPress.Search.Search Border Width
//
// Access: Public
//
// Since: 1.0.0

$border-width-quicksearch:                  1px 0 0 0 !default;

// Search Form Border Color
//
// Controls the color of the border used on the search form.
//
// Styleguide WordPress.Search.Search Form Border
//
// Access: Public
//
// Since: 1.0.0

$color-quicksearch-border:                 $color-grayscale-d !default;

// Search Field Form Radius
//
// Controls how much rounding is applied to the search form field corners.
//
// Styleguide WordPress.Search.Search Border Radius
//
// Access: Public
//
// Since: 1.0.0

$border-radius-quicksearch-input:           20px 0 0 20px !default;

// Search Field Button Radius
//
// Controls how much rounding is applied to the search form submit button.
//
// Styleguide WordPress.Search.Search Border Button Radius
//
// Access: Public
//
// Since: 1.0.0

$border-radius-quicksearch-button:          0 20px 20px 0 !default;

// Search Field Border
//
// Controls the width of the border used on the search field.
//
// Styleguide WordPress.Search.Search Field Border
//
// Access: Public
//
// Since: 1.0.0

$border-search:                            0 !default;

// Search Field Background Color
//
// Controls the background color of the search field.
//
// Styleguide WordPress.Search.Search Field Background
//
// Access: Public
//
// Since: 1.0.0

$color-search-bg:                          $color-grayscale-f5 !default;

// Search Field Text Color
//
// Controls the color of the text in the search field.
//
// Styleguide WordPress.Search.Search Field Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-search-text:                        $color-grayscale-0 !default;

// Side Navigation Width
//
// The width of the side nav, if you are using the left hand layout.
//
// Styleguide WordPress.Navigation.Side Nav Width
//
// Access: Public
//
// Since: 1.2.0

$width-side-nav:                            240px !default;

// =================================================================
// Navigation Styles
// =================================================================

// Masthead
// -----------------------------------------------------------------

// Controls all styling related to the masthead. This includes
// navigation, branding, and search.
//
// Access: Public
//
// Since: 1.0.0

.masthead {
	@extend %clearfix;
	background: var(--masthead-background, #{$color-masthead-bg});
	border-bottom: var(--masthead-border, var(--bu-border, #{$border-masthead}));
	position: relative;
}

// A wrapper for items in the masthead. Often used to restrict the
// masthead to a certain width without interfering with the background.
//
// Access: Public
//
// Since: 1.0.0

.masthead-container {
	position: relative;
}


// =================================================================
// Navigation
// =================================================================

// Navigation Desktop Layout Breakpoint
//
// The default breakpoint to switch to the desktop view in navigation.
//
// Styleguide WordPress.Navigation.Desktop View Breakpoint
//
// Access: Public
//
// Since: 2.0.0


$nav-desktop:                    $sm !default;

nav {
	font-family: var(--nav-text-font, var(--bu-text-font, #{$font-family-navigation}));

	a {
		text-decoration: none;
	}
}

// .search-toggle appears only when header is small and above, otherwise it's hidden

.brand {
	.search-toggle {
		display: none;
	}

	.site-description {
		float: left;
		margin-left: $margin-large;
		width: auto;
	}
}

// quicksearch (use WordPress plugin class name)

#quicksearch {
	background: var(--search-background, #{$color-search-bg});
	margin: 0;
	padding: $padding $padding-small;
	position: relative;

	.js & {
		display: none;
	}

	&.is-open {
		border-bottom: var(--search-border, var(--bu-border, #{$border-search}));
		display: block;
	}

	fieldset {
		margin: 0;

		@include breakpoint( $nav-desktop ) {
			margin: 0 auto;
			max-width: $container-sm;
			padding: 0 $padding;
		}
	}

	label {
		display: inline;
	}
}

// Search Field Height
//
// The height of the search field. Affects both search and search button.
//
// Styleguide WordPress.Search.Search Field Height
//
// Access: Public
//
// Since: 1.0.0

$search-field-height:                          40px !default;

.search-field {
	@include border-radius( $border-radius-quicksearch-input );
	color: var(--search-text-color, var(--bu-text-color, #{$color-search-text}));
	height: $search-field-height;
	padding-left: $padding-small;
	padding-right: $padding-small;
	width: 75%;

	@include breakpoint( $nav-desktop ) {
		width: 80%;
	}
}

.search-submit {
	@extend %button-styles-primary;
	@include border-radius( $border-radius-quicksearch-button );
	background: var(--search-button-background, var(--bu-button-primary-background-color, #0074E0));
	color: var(--search-button-color, var(--bu-button-primary-text-color, #fff));
	float: right;
	height: $search-field-height;
	margin: 0;
	width: 25%;

	@include breakpoint( $nav-desktop ) {
		width: 20%;
	}

	&:focus,
	&:hover {
		background: var(--search-button-background--hover, var(--bu-button-primary-background-color--hover, rgb(0, 89.5892857143, 173)));
		color: var(--search-button-color--hover, var(--bu-button-primary-text-color--hover, #fff));
	}
}

// Navigation and Search Toggle Size
//
// Adjusts the size of the search and nav toggles in
// the main navigation. Also affects the top/bottom spacing
// around main navigation items in the nav bar.
//
// Styleguide WordPress.Navigation.Toggle Size
//
// Access: Public
//
// Since: 2.0.0

$nav-toggle-size: 60px !default;

// search-toggle

.search-toggle {
	@extend %icon-search;
	@include transition( color 200ms ease-in-out 0s );
	background: transparent;
	color: var(--nav-toggle-color, #{$color-nav-toggle});
	float: right;
	font-size: math.div( $nav-toggle-size, 2 );
	height: $nav-toggle-size;
	line-height: $nav-toggle-size;
	margin: 0;
	padding: 0;
	text-align: center;
	width: $nav-toggle-size;

	&:visited {
		color: var(--nav-toggle-color, #{$color-nav-toggle});
	}

	&:hover {
		color: var(--nav-toggle-color--hover, #{$color-nav-toggle-hover});
	}

	&:focus {
		outline-color: invert( $color-primary-nav-bg );
	}

	&.is-open {
		@extend %icon-close;
	}

	span {
		@extend %visually-hidden;
	}
}

// Toggle Border
//
// Adjusts the size of border on the nav toggle icon
// in the main navigation. Also affects spacing of borders
// in this icon.
//
// Styleguide WordPress.Navigation.Toggle Border
//
// Access: Public
//
// Since: 2.0.0

$nav-toggle-border: 4px !default;

.nav-toggle {
	@extend %hide-text;
	background: transparent;
	cursor: pointer;
	float: left;
	height: $nav-toggle-size;
	margin: 0;
	position: relative;
	width: $nav-toggle-size;

	@include breakpoint( $nav-desktop ) {
		display: none;
	}

	&:focus {
		outline-color: invert( $color-primary-nav-bg );
	}

	span {
		@include transition( all, 250ms, ease-in-out, 0s );
		background: var(--nav-toggle-color, #{$color-nav-toggle});
		content: "";
		cursor: pointer;
		display: block;
		height: $nav-toggle-border;
		left: math.div( $nav-toggle-size, 4 );
		position: absolute;
		text-indent: 100px;
		top: math.div( $nav-toggle-size, 2 ) - 2px;
		width: math.div( $nav-toggle-size, 2 );

		&::before,
		&::after {
			@include transition( all, 250ms, ease-in-out, 0s );
			background: var(--nav-toggle-color, #{$color-nav-toggle});
			content: "";
			cursor: pointer;
			display: block;
			height: $nav-toggle-border;
			left: math.div( $nav-toggle-size, 4 );
			position: absolute;
			top: math.div( $nav-toggle-size, 2 );
			width: math.div( $nav-toggle-size, 2 );
		}

		&::before {
			left: 0;
			top: -$nav-toggle-border * 2.5;
		}

		&::after {
			left: 0;
			top: $nav-toggle-border * 2.5;
		}
	}

	&.is-open span {
		background-color: transparent;

		&::before,
		&::after {
			top: 0;
		}

		&::before {
			@include rotate( 45 );
		}

		&::after {
			@include rotate( -45 );
		}
	}
}

// primary navigation and menu

.primary-nav {
	@extend %clearfix;
	background: var(--primary-nav-background, #{$color-primary-nav-bg});
	display: block;

	@include breakpoint( $nav-desktop ) {
		padding: 0 $padding-small;
	}

	&.is-open {
		height: auto;
		padding-bottom: $padding;

		@include breakpoint( $nav-desktop ) {
			padding-bottom: 0;
		}
	}
}

.primary-nav-menu {
	clear: left;
	margin: $nav-toggle-size $margin-small 0; // Keeps menu from overlapping nav toggle

	@media screen and ( max-width: ( $sm - 1 ) ) {
		.js & {
			display: none;
		}
	}

	@include breakpoint( $nav-desktop ) {
		border: 0;
		display: inline;
		margin: 0;
	}

	li {
		display: block;
		zoom: 1;

		@include breakpoint( $nav-desktop ) {
			border: 0;
			display: inline-block;

			.lt-ie8 & {
				display: inline;
			}
		}

		&:focus {
			outline-color: invert( $color-primary-nav-bg );
		}

		&:focus-within ul {
			left: auto;
		}

		&:hover ul,
		&:focus ul {
			left: auto;
		}

		li {
			display: block;
			padding: 0 $padding-small;

			a {
				color: var(--primary-nav-link-color, #{$color-primary-nav-dropdown-link});
				line-height: var(--line-height, #{$line-height-base});
				padding: $padding-small 0;

				&:hover,
				&:focus {
					color: var(--primary-nav-link-color--hover, #{$color-primary-nav-dropdown-link-hover});
				}
			}
		}
	}

	a {
		border: 1px solid var(--primary-nav-border-color, #{$color-primary-nav-border});
		border-width: var(--primary-nav-border-width, #{$border-width-primary-nav});
		color: var(--primary-nav-link-color, #{$color-primary-nav-link});
		display: block;
		padding: $padding-small 0;
		text-decoration: none;

		@include breakpoint( $nav-desktop ) {
			border: var(--primary-nav-desktop-border, #{$border-primary-nav-desktop});
			line-height: $nav-toggle-size;
			padding: 0 $padding-small;
		}

		&:hover,
		&:focus {
			color: var(--primary-nav-link-color--hover, #{$color-primary-nav-link-hover});
		}

		&.active,
		&.active_section {
			color: var(--primary-nav-link-color--active, #{$color-primary-nav-link-current});
		}
	}

	ul {
		display: none;

		@include breakpoint( $nav-desktop ) {
			background: var(--primary-nav-dropdown-background, #{$color-primary-nav-dropdown-bg});
			display: block;
			left: -9999px;
			position: absolute;
			width: 240px;
			z-index: $z-index-primarynav;
		}
	}
}

// when nav or search are opened

.is-open .primary-nav-menu,
.is-open .utility-nav {
	display: block;
}

// utility navigation

.utility-nav {
	border: 1px solid var(--nav-border-color, #{$color-primary-nav-border});
	border-width: var(--nav-border-width, #{$border-width-utility-nav});
	clear: left;
	color: var(--utility-nav-link-color, #{$color-utility-nav-mobile-link});
	display: none;
	font-size: $font-size-utility-nav;
	margin: 0 $padding-small;
	padding: $padding 0 0;
	text-decoration: none;

	@include breakpoint( $nav-desktop ) {
		color: var(--utility-nav-link-color, #{$color-utility-nav-link});
	}

	li {
		border: 0;
		padding: 0;
		list-style-type: none;

		@include breakpoint( $nav-desktop ) {
			border: 0;
			display: inline-block;
			padding-left: $padding-small;
		}
	}

	a {
		color: var(--utility-nav-link-color, #{$color-utility-nav-mobile-link});
		text-decoration: none;

		&:hover {
			color: var(--utility-nav-link-color--hover, #{$color-utility-nav-mobile-link-hover});

			@include breakpoint( $nav-desktop ) {
				color: var(--utility-nav-link-color--hover, #{$color-utility-nav-link-hover});
			}
		}
	}

	.masthead-container & {
		@include breakpoint( $nav-desktop ) {
			border: 0;
			display: block;
			margin: 0;
			padding: 0;
		}
	}
}

// default

.l-default {
	.utility-nav {
		@include breakpoint( $nav-desktop ) {
			line-height: 1;
			position: absolute;
			right: $padding;
			top: math.div( $height-masthead, 2 ) - math.div( $font-size-utility-nav, 2 );
		}
	}
}

// side-nav

// Side Navigation Breakpoint
//
// The breakpoint to switch to the desktop view in the left
// navigation layout.
//
// Styleguide WordPress.Navigation.Side Navigation Breakpoint
//
// Access: Public
//
// Since: 2.0.0

$left-nav-desktop:                    $nav-desktop !default;

.l-side-nav {
	.masthead::after {
		@include breakpoint( $left-nav-desktop ) {
			display: none;
		}
	}

	.wrapper {
		background: var(--primary-nav-background, #{$color-primary-nav-bg});
	}

	.primary-nav {
		@include breakpoint( $left-nav-desktop ) {
			background: none;
			float: left;
			left: 0;
			margin-left: -$width-side-nav + 60px;
			position: relative;
			top: 0;
			width: $width-side-nav;

			&.is-open {
				left: $width-side-nav - 60px;

				@include breakpoint( $lg ) {
					left: 0;
				}
			}
		}

		@include breakpoint( $lg ) {
			display: block;
			margin-left: 0;
			padding: $padding $padding-small;
			width: $width-side-nav;
		}
	}

	.nav-toggle {
		@include breakpoint( $left-nav-desktop ) {
			float: right;
			margin-right: -$padding-small;
		}
	}

	.primary-nav-menu {
		@include breakpoint( $left-nav-desktop ) {
			display: none;
			margin: 0 $margin-small;
		}

		@include breakpoint( $lg ) {
			display: block;
		}

		li {
			display: block;
			padding: 0;

			&:first-child {
				a {
					@include breakpoint( $lg ) {
						border: 0;
					}
				}
			}
		}

		a {
			border: 1px solid var(--nav-border-color, #{$color-primary-nav-border});
			border-width: var(--nav-border-width, #{$border-width-primary-nav});
			line-height: var(--nav-line-height, #{$line-height-base});
			padding: $padding-small 0;
		}

		ul {
			display: none;
		}
	}
}

.l-side-nav .search-toggle {
	//top: $height-masthead + 30px;
	color: var(--nav-toggle-color, #{$color-grayscale-f});
	position: absolute;
	right: 0;

	@include breakpoint( $left-nav-desktop ) {
		@include vertical-center-ie9;
		color: var(--nav-toggle-alt-color, #{$color-nav-toggle-alt});
		display: block;
		position: relative;
		right: $padding-small;
	}

	&:active,
	&:visited {
		color: var(--nav-toggle-color, #{$color-nav-toggle});
	}

	&:hover {
		color: var(--nav-toggle-color--hover, #{$color-nav-toggle-hover});

		@include breakpoint( $left-nav-desktop ) {
			color: var(--nav-toggle-alt-color--hover, #{$color-nav-toggle-alt-hover});
		}
	}
}

$_search-height: 115px;

.search-open.l-side-nav {
	.primary-nav,
	.bu-banner {
		@include breakpoint( $left-nav-desktop ) {
			top: $_search-height; // adds the height of the open search form
		}
	}
	.content {
		@include breakpoint( $left-nav-desktop ) {
			margin-top: $_search-height; // adds the height of the open search form
		}
	}
}

// side-nav and no-nav: quicksearch

.l-side-nav {
	#quicksearch {
		@include breakpoint( $left-nav-desktop ) {
			border: 1px solid var(--search-border-color, #{$color-quicksearch-border});
			border-width: var(--search-border-width, #{$border-width-quicksearch});
			position: absolute;
			width: 100%;
		}
	}

	.primary-nav {
		.search-toggle {
			@include breakpoint( $left-nav-desktop ) {
				display: none;
			}
		}
	}

	.nav-toggle {
		display: block;

		@include breakpoint( $lg ) {
			display: none;
		}
	}

	.masthead-container .utility-nav {
		margin: 0 $margin-small;

		@include breakpoint( $lg ) {
			display: block;
			position: relative;
			right: auto;
			top: auto;
		}
	}

	.utility-nav li {
		display: block;
		padding-left: 0;
	}

	&.nav-open {
		.bu-banner,
		.content
		{
			@include breakpoint( $left-nav-desktop ) {
				left: $width-side-nav - 60px;
			}

			@include breakpoint( $lg ) {
				left: 0;
			}
		}

		.nav-toggle {
			float: left;

			@include breakpoint( $sm ) {
				margin-left: -$margin-small;
			}
			
		}

		.primary-nav-menu,
		.utility-nav {
			display: block;
			float: none;
		}
	}
}

// top nav

// Top Navigation Breakpoint
//
// The breakpoint to switch to the desktop view in the top
// navigation layout.
//
// Styleguide WordPress.Navigation.Top Navigation Breakpoint
//
// Access: Public
//
// Since: 2.0.0

$top-nav-desktop:                    $nav-desktop !default;

.l-top-nav {
	.utility-nav {
		@include breakpoint( $top-nav-desktop ) {
			line-height: 1;
			position: absolute;
			right: $padding;
			top: ( math.div( $height-masthead, 2 ) - math.div( $font-size-utility-nav, 2 ) ) + 60;
		}
	}

	#quicksearch {
		border-bottom: 1px solid $color-grayscale-d;
	}
}

.l-top-nav.search-open .utility-nav {
	@include breakpoint( $top-nav-desktop ) {
		top: 209px;
	}
}

// no-nav

// No Navigation Desktop Layout Breakpoint
//
// The breakpoint to switch to the desktop view in the no
// navigation layout.
//
// Styleguide WordPress.Navigation.Footbar Padding
//
// Access: Public
//
// Since: 2.0.0

$no-nav-desktop:                    $nav-desktop !default;

.l-no-nav {
	.primary-nav {
		@include breakpoint( $no-nav-desktop ) {
			display: none;
		}
	}

	.brand {
		padding-right: 60px;

		.search-toggle {
			color: var(--nav-toggle-alt-color, #{$color-nav-toggle-alt});
			display: block;
			font-size: 24px;
			margin: 0 -60px 0 0;

			@include breakpoint( $no-nav-desktop ) {
				@include vertical-center-ie9;
				display: block;
				right: 10px;
			}

			&:visited {
				color: var(--nav-toggle-alt-color, #{$color-nav-toggle-alt});
			}

			&:hover {
				color: var(--nav-toggle-alt-color--hover, #{$color-nav-toggle-alt-hover});
			}
		}
	}

	#quicksearch {
		border-top: 1px solid var(--search-border-color, #{$color-grayscale-d});
	}

	.masthead-container {
		.utility-nav {
			display: none;

			@include breakpoint( $no-nav-desktop ) {
				display: block;
				position: absolute;
				right: 80px;
				top: math.div( $height-masthead, 2 ) - math.div( $font-size-utility-nav, 2 ) - 5;
			}
		}
	}


}

// Mega navigation

// Mega Navigation Background Color
//
// The background color of the mega nav menu toggle.
//
// Styleguide WordPress.Mega Navigation.Background Color
//
// Access: Public
//
// Since: 3.0.2

$color-mega-nav-toggle-bg:                     $color-button-bg !default;

// Mega Navigation Toggle Text Color
//
// Styleguide WordPress.Mega Navigation.Menu Toggle Text
//
// Access: Public
//
// Since: 3.0.2

$color-mega-nav-toggle-text:                   $color-button-text !default;

// Mega Navigation Columns
//
// The number of columns to use in the mega navigation
// menu. If there are fewer nav items than this number
// in the first row, they will stretch.
//
// Styleguide WordPress.Mega Navigation.Number of Columns
//
// Access: Public
//
// Since: 3.0.2

$mega-nav-columns:                             3 !default;

// Mega Navigation Columns - Desktop
//
// The number of columns to use in the mega navigation
// menu on desktop. If there are fewer nav items than this
// in the first row, they will stretch
//
// Styleguide WordPress.Mega Navigation.Number of Columns Desktop
//
// Access: Public
//
// Since: 3.0.2

$mega-nav-columns-desktop:                     5 !default;

// Mega Navigation Full Menu Breakpoint
//
// The point at which the mega navigation switches from
// showing the icon to the full menu and short menu combo.
// Accepts a breakpoint or pixel value.
//
// Styleguide WordPress.Mega Navigation.Full Menu Breakpoint
//
// Access: Public
//
// Since: 3.0.2

$mega-nav-show-full-menu:                      $sm !default;

// Mega Navigation Desktop Layout Breakpoint
//
// The point at which the mega navigation switches from
// mobile to desktop layout. Accepts a breakpoint or pixel
// value.
//
// Styleguide WordPress.Mega Navigation.Desktop Layout Breakpoint
//
// Access: Public
//
// Since: 3.0.2

$mega-nav-desktop-layout:                      $md !default;

// mega nav

.l-mega-nav {
	.brand {
		display: flex;
		align-items: center;
	}

	.brand-container {
		flex-grow: 1;
		top: auto;
		transform: translateY( 0 );
	}

	.site-description {
		@extend %visually-hidden;
	}

	.primary-nav {
		height: 0;
		padding: 0;

		&.is-open {
			height: auto;
		}
	}

	.is-open #quicksearch {
		display: block;
	}

	#quicksearch {
		background: transparent;
		padding: $padding;
		padding-bottom: 0;

		@include breakpoint( $mega-nav-desktop-layout ) {
			padding: $padding-large;
			padding-bottom: 0;
		}
	}

	.primary-nav-menu {
		display: flex;
		flex-wrap: wrap;
		padding: $padding;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;

		@include breakpoint( $mega-nav-desktop-layout ) {
			padding: $padding-large;
		}

		@include breakpoint( $xl ) {
			max-width: $xl;
		}

		> li {
			flex-basis: 100%;
			flex-grow: 1;
			position: relative;

			@include breakpoint( $mega-nav-show-full-menu ) {
				border-left: 1px solid currentColor;
				flex-basis: math.div( 100%, $mega-nav-columns );
				flex-grow: initial;
				margin-bottom: $margin;
			}

			@include breakpoint( $mega-nav-desktop-layout ) {
				flex-basis: math.div( 100%, $mega-nav-columns-desktop );
			}

			&::after {
				bottom: 0;
				content: "";
				display: block;
				border-bottom: 1px solid currentColor;
				position: absolute;
			}

			li a {
				font-weight: 400;
				padding: 0;
			}

			&:nth-child( -n + #{$mega-nav-columns} ) {
				flex-grow: 1;
			}
		}

		@include breakpoint( $mega-nav-desktop-layout ) {
			> li:nth-child( -n + #{$mega-nav-columns-desktop} ) {
				flex-grow: 1;
			}
		}

		ul {
			left: auto;
			position: static;
			width: auto;
		}

		a {
			line-height: 1.3;
			margin-bottom: 0.75em;
		}
	}

	.utility-nav {
		border: none;
		text-align: center;
		margin: $margin;
		margin-top: 0;

		@include breakpoint( $mega-nav-desktop-layout ) {
			margin: $margin-large;
			margin-top: 0;
		}

		a {
			color: var(--primary-nav-link-color, #{$color-primary-nav-link});
		}
	}
}

.mega-nav-toggle {
	background: var(--mega-nav-toggle-background, var(--bu-button-background-color, #{$color-mega-nav-toggle-bg}));
	border: var(--mega-nav-toggle-border, var(--bu-button-border), none);
	color: var(--mega-nav-toggle-text-color, var(--bu-button-text-color, #{$color-mega-nav-toggle-text}));
	display: block;
	height: auto;
	overflow: visible;
	width: 54px;

	@include breakpoint( $mega-nav-show-full-menu ) {
		width: auto;
	}

	&:hover,
	&:focus {
		background: var(--mega-nav-toggle-background--hover, var(--bu-button-background-color--hover, #{$color-mega-nav-toggle-bg}));
		border: var(--mega-nav-toggle-border--hover, var(--bu-button-border--hover), none);
		color: var(--mega-nav-toggle-text-color--hover, var(--bu-button-text-color--hover, #{$color-mega-nav-toggle-text}));
	}

	.nav-toggle-label-closed,
	.nav-toggle-label-open {
		overflow: hidden;
		text-align: center;
		text-indent: 0;

		&::before {
			margin-top: -3px;
		}
	}

	.nav-toggle-label-open {
		height: 0;
	}

	&.is-open .nav-toggle-label-open {
		height: auto;
	}

	&.is-open .nav-toggle-label-closed {
		height: 0;
	}

	.nav-toggle-label-closed {
		@include icon( 'menu' );

		@include breakpoint( $mega-nav-show-full-menu ) {
			@include icon( 'search' );
		}
	}

	.nav-toggle-label-open {
		@extend %icon-delete;
	}
}

.short-nav {
	align-items: center;
	display: flex;
	margin-left: auto;
	top: auto;
	transform: translateY( 0 );

	ul {
		list-style-type: none;
	}

	li {
		display: inline-block;
	}

	a {
		padding: $padding-small;
	}
}

.short-nav-menu {
	display: none;

	@include breakpoint( $mega-nav-show-full-menu ) {
		display: block;
	}

	a {
		font-weight: 700;
	}
}

// Adjusts the appearance of the skip link; Styled to match the default WordPress screen reader text

.skip-link {
	@extend %skip-link;
}