/******************************************************************
Site Name:
Author:

Stylesheet: Main Navigation

On mobile devices, this menu is known as "off-canvas".
It currently slides out from the right.

******************************************************************/

@use "sass:math";

// Remove bootstrap positioning
#masthead [class^="col"] {
	position: static;
}

//
// DEFAULTS
// all breakpoints
//

#main-navigation {
	ul {
		clear: both;
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

// reset button styles
#main-navigation button,
#mobile-menu-button {
	background: none;
	color: inherit;
	font: inherit;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	cursor: pointer;
}

//
// MOBILE ONLY
//

@include media-breakpoint-down('sm') {

	// Menu Toggle
	#mobile-menu-button {
		display: block;
		color: #FFF;
		font-size: 0.875em;
		background: $color__primary;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		line-height: 1;
		padding: 0.65em;
		margin: 0;
		overflow: hidden;
		white-space: nowrap;

		// Font Awesome Icon
		&:before {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f0c9"; // bars icon
			display: inline-block;
			margin-right: 5px;
			width: 1em;
			text-rendering: auto;
  			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	}

	// Mobile Styles
	#main-navigation {
		button.menu-button {
			border-left: 1px solid darken($color__primary, 10%);
			color: #FFF;
			font-size: 1.5em;
			display: inline-block;
			margin: 0;
			padding: 15px 0;
			text-align: center;
			width: 25%;
		}

		button.menu-back-button {
			background: lighten($color__primary, 10%);
			color: #FFF;
			display: inline-block;
			text-align: left;
			padding: 15px;
			width: 100%;
		}

		ul {
			background-color: $color__primary;
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1000;
		}

		ul.main-menu {
			display: none;
			right: -70%;
			width: 70%;
		}

		li {
			display: block;
			border-bottom: 1px solid darken($color__primary, 10%);

			a {
				color: #FFF;
				display: inline-block;
				font-size: 1.125em;
				padding: 15px;
				text-decoration: none;
				width: 75%;

				&:hover,
				&:focus {
					background-color: inherit;
				}
			}

			&.current-menu-item {}

			&.current-menu-ancestor {}

			&.menu-item-no-children {
				a {
					width: 100%;
				}
			}

			&.menu-item-has-children {}
		}

		ul.sub-menu {
			display: block;
			right: -100%;
			overflow: hidden;
			width: 100%;
			transition: right 0.25s ease-in-out;

			li {
				a {
					font-size: 1em;
				}
			}
		}

		ul.sub-menu-open {
			right: 0;
		}
	}

	// Open Menu
	body.menu-open {
		#mobile-menu-button {
			&:before {
				content: "\f00d"; // times icon
			}
		}

		#container {
			left: -70%;
		}
	}

	#container {
		position: relative;
		left: 0;
		transition: left 0.25s ease-in-out;
	}

}

//
// TABLET
//

@include media-breakpoint-up('md') {

	#mobile-menu-toggle,
	#mobile-menu-button {
		display: none !important;
	}

	#main-navigation {
		display: block;
		background-color: $color__black;
		white-space: nowrap;
		position: relative;

		button.menu-button,
		button.menu-back-button {
			display: none !important;
		}

		ul.menu {
			display: flex;
			flex-wrap: nowrap;
			margin: 0 auto;
			text-align: center;
			max-width: map-get($container-max-widths, 'xl');
			padding-right: math.div($grid-gutter-width, 2);
			padding-left: math.div($grid-gutter-width, 2);

			> li.menu-item {
				flex: 1 1 auto;
				display: inline-block;
				position: relative;
				z-index: 1000;

				&.menu-item-has-children {
					> a:after {
						content: "\f107";
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						text-rendering: auto;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						padding-left: 0.5em;
					}
				}

				a {
					font-size: 1em;
					color: #FFF;
					display: block;
					border-left: 1px solid lighten($color__black, 15%);
					padding-top: 0.5em;
					padding-bottom: 0.5em;
					padding-left: 12px;
					padding-right: 12px;
					text-align: center;
					width: auto;

					&:hover,
					&:focus {
						text-decoration: none;
					}
				}

				// maintain hover state on dropdown
				&:hover,
				&:focus {
					a {
						background-color: lighten($color__black, 15%);
					}
				}

				&:first-child {}

				&:last-child {
					> a {
						border-right: 1px solid lighten($color__black, 15%);
					}

					// Children
					ul.sub-menu {
						left: auto;
						right: 0;

						li.menu-item {
							// Grand Children
							ul.sub-menu {
								left: auto;
								right: 99.9%;
							}
						}
					}
				}

				&.menu-item-no-children {}

				&.menu-item-has-children {}
			}

		}

		// Children
		ul.sub-menu {
			background-color: lighten($color__black, 15%);
			display: none;
			min-width: 120%;
			position: absolute;
			text-align: left;
			top: 99.9%;
			bottom: auto;
			left: 0;
			width: auto;
			z-index: 1000;

			li.menu-item {
				display: block;
				margin: 0;
				white-space: nowrap;

				a {
					display: block;
					padding-top: 8px;
					padding-bottom: 8px;
					padding-left: 12px;
					padding-right: 12px;
					text-align: left;
					font-size: 0.75em;
					text-transform: none;

					&:hover,
					&:focus {
						text-decoration: underline;
					}
				}

				&:hover,
				&:focus {}

				&:first-child {}

				&:last-child {}

				&.menu-item-no-children {}

				&.menu-item-has-children {}

				// Grand Children
				ul.sub-menu {
					left: 99.9%;
					top: 0;
				}
			}
		}

		// Show the child ul
		li:hover > ul {
			display: block;
		}
	}

}

//
// DESKTOP
//

@include media-breakpoint-up('lg') {

	#main-navigation {
		ul.menu {
			li.menu-item {
				a {
					font-size: 1.125em;
					padding-top: 0.675em;
					padding-bottom: 0.675em;
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}

		// Children
		ul.sub-menu {
			li.menu-item {
				a {
					font-size: 0.95em;
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}
	}

}

//
// LARGE DESKTOP
//

@include media-breakpoint-up('xl') {

	#main-navigation {}

}
