// Navigation Styling

.nav-wrapper {
    display: none;
    @media (min-width: 64rem) {
        display: block;
    }
}

.main-navigation {
	width: auto;
	@extend %heading-font;

	a {
		color: var(--body-text);
		padding: 0.5rem 1rem;
	}
	
	@media (min-width: 62rem) {

		ul#primary-menu {
			& > li {
				margin: 0;
				float: left;

				&.menu-item-has-children > a, &.page_item_has_children > a {

					&:after {
						position: relative;
						content: "\f107";
						font-family: "FontAwesome";
						padding-left: 0.625rem;
                        line-height: 1;
					}
				}
			}
			> li:hover {
				background-color: rgba(0,0,0,0.05);
			}
			ul {
				flex-direction: column;
				opacity: 0;
				text-transform: none;
                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
				background-color: var(--accent);
				@include transform(translateY(-15px));
				@include transition(opacity 300ms $standard, transform 300ms $decelerate);
				font-weight: 400;

                a {
                    color: white;
					
                    &:hover {
                        background-color: rgba(255,255,255,0.05);
                        @include transform(none);
                    }
                }
				li {
					float: none;
					display: block;
					position: relative;
					margin: 0;
					&.menu-item-has-children  > a:after, &.page_item_has_children  > a:after {
						position: relative;
						content: "\f105";
						font-family: "FontAwesome";
						float: right;
					}
					&:hover > ul, &:focus-within > ul {
						left: 100%;
						@include transform(translateY(0px));
					}
				}
			}
			li:hover > ul, li:focus-within > ul {
				opacity: 1;
				left: auto;
				@include transform( translateY(0px) );

			}
		}
	}
	.sub-menu{
		border-radius: 4px;
	}
}

@media (max-width: 1023px) {
    .itre-cta-wrapper {
        .itre-cta:not(.cta-nav) {
            display: none;
        }
    }
}

button.mobile-nav-btn {
    padding: 0;
    border: 0;
    background-color: transparent;
    svg {
        width: 32px;
        height: 32px;
    }
    @media (min-width: 64rem) {
        display: none;
    }
}

button#close-menu {
    background-color: var(--accent);
    border: 0;
    padding: 0;
    height: 2.75rem;
    width: 2.75rem;
    margin: 1rem 0 0 1rem;
    color: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

	&:hover,
    &:focus {
        outline: none;
        box-shadow: $shadow2;
    }

}

#menu {
	position: fixed;
	top: 0;
	width: 60%;
	height: 100%;
	right: 0;
	z-index: 999;
	text-align: left;
	overflow-y: auto;
	background-color: var(--accent);
	@include transform(translateX(100%));
	@include transition(transform 300ms ease-out);

    .itre-cta {
        position: relative;
		margin: 1rem;
		background-color: var(--accent);
		filter: brightness(85%) contrast(150%);

        &:hover,
		&:focus {
            box-shadow: $shadow2;
        }
    }

	.go-to-top {
		background: none;
		float: left;
		border: 0;

		i {
			color: white;
	  	}
	}

	.go-to-bottom {
		background: none;
		float: right;
		border: 0;

		i {
			color: white;
		}
	}

	ul {
		margin-left: 0px;
		padding: 0px;
		width: 100%;

	    li {
			list-style: none;
			padding: 0;
			margin: 0;
			position: relative;

			&:before {
				display: none;
			}

		    a {
		        display: block;
		        color: white;
		        padding: 0.5rem 0.75rem;
		        width: 100%;
		        overflow: hidden;
		        white-space: nowrap;
		        text-overflow: ellipsis;
				margin-top: 0.125rem;
				margin-bottom: 0.125rem;
		    }
	    }

	    li.menu-item-has-children {
	        display: block;

	        span.dropdown-arrow {
	            position: absolute;
	            height: 44px;
	            width: 44px;
	            top: 0;
	            right: 0;
	            display: flex;
	            justify-content: center;
	            align-content: center;
	            background-color: var(--accent);
				filter: brightness(85%) contrast(150%);
                // box-shadow: $shadow1;
                border-radius: 0.25rem;
	            cursor: pointer;
	            i {
	                margin: auto;
	                color: white;
	                @extend %bold;
	                font-size: 1.25rem;
	            }
	        }

	        ul {
				display: none;
		        background: rgba(255,255,255, 0.05);
	        }
	    }
	}

	&.expanded {
		@include transform(translateX(0%));
	}

	.admin-bar & {
		margin-top: 46px;
	}
}