@use "../utilities/media-queries";
@use "../variables/colors";

/* Main Navigation */
header {
	a[id*="dnnLOGO"] {
		display: block;
		padding: 1.125rem 0;

		img {
			height: 70px;
			max-height: 100%;
			width: auto;
		}

		@include media-queries.mq-max-width(400) {
			img {
				height: 50px;
			}
		}
	}
}

/* Desktop Styling */

#nav-desktop, #nav-footer {

	&,
	ul {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 2rem;
		ul {
			flex-direction: column;
			gap: 0.5rem;
			li {
				a {
					&:hover {
						color: colors.color('tertiary-light');
					}
				}
			}
		}
	}

	li {
		display: flex;
	}

	a {
		font-size: 0.89rem;
		color: colors.color('background-light');
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;

		&:hover {
			color: colors.color('background');
		}
	}

	// First Level
	>li {
		position: relative;

		&:hover {
			>ul {
				display: flex;
			}
		}

		>a {
			display: flex;
			align-items: flex-end;
		}

		// Below First Level
		ul {
			flex-direction: column;
		}

		li {
			&.selected>a {
				background: transparent;
				color: colors.color('background');
			}

			&:not(.selected)>a:hover {
				background: transparent;
			}
		}

		// Second Level
		>ul {
			display: none;
			position: absolute;
			flex-direction: column;
			top: 100%;
			min-width: max-content;
			max-width: 100%;
			padding-right: 2rem;
			background: colors.color('tertiary');
			box-shadow: 1px 1px 5px 1px rgba(colors.color('foreground', true), 0.2);

			// Below Second Level
			a {
				padding: 0.75rem 1.25rem;
			}

			li {
				flex-direction: column;

				&:not(:first-child) {
					// border-top: 1px solid color('foreground-light');
				}

				// Below Third Level
				>ul {

					// border-top: 1px solid color('foreground-light');
					a {
						font-size: 0.78rem;
						font-weight: 700;
						padding: .5rem .75rem .5rem 3rem;
					}
				}
			}
		}
	}
}

/* Hamburger Styling */

$nav-height: 168px;
$nav-width: 320px;

#body-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: rgba(black, .6);
}

.hamburger {
	margin-left: auto;
	color: colors.color('primary-contrast');
	cursor: pointer;
}

#menuToggle
{
  display: block;
  position: relative;
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: colors.color('background-light');
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: colors.color('tertiary-light');
  background-color: colors.color('background-dark');
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0;
  z-index: 2;
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: colors.color('primary-contrast');
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.nav-is-toggled {
	.nav-drill {
		transform: translateX(0);
	}
}

.nav {
	&-drill {
		display: flex;
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		width: $nav-width;
		max-width: 100%;
		height: calc(100vh - $nav-height);
		background-color: colors.color('tertiary-light');
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		transition: 0.45s;
		margin-top: $nav-height;
		transform: translateX(100%);
	
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}

	&-items {
		flex: 0 0 100%;
	}

	&-item {
		display: flex;
		justify-content: space-between;

		&:not(:last-child) {
			border-bottom: hidden 1px colors.color('foreground-light');
		}

		.nav-link {
			background-color: colors.color('tertiary-light');
			color: colors.color('tertiary-contrast');
		}

		&.selected {
			background-color: colors.color('primary-light');

			>.nav-link {
				background-color: transparent;
				color: colors.color('background');
			}
		}

		.nav-back-link {
			display: flex;
			align-items: center;
			background: colors.color('neutral-dark');
			color: colors.color('background');

			i {
				font-size: 1.125rem;
			}
		}
	}

	&-link {
		display: block;
		flex: 1 1 auto;
		padding: 0.875rem 1rem;
		font-size: 1rem;
		line-height: 1.5em;
		font-weight: 500;

		.link-description {
			font-size: .875rem;
			font-weight: 400;
		}
	}

	&-expand {
		&-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transform: translateX(100%);
			background-color: colors.color('tertiary-light');
			transition: 0.3s;
			visibility: hidden;
		}

		&-link {
			flex-grow: 0;
			font-size: 1.125rem;
			display: flex;
			align-items: center;
		}

		&.active {
			>.nav-expand-content {
				transform: translateX(0);
				visibility: visible;
			}
		}
	}
}