.navbar {
	padding: 1.25rem 0;

	*,
	*::before,
	*::after {
		color: $color-light;
	}

	&.navbar-dark-text {
		*,
		*::before,
		*::after {
			color: $color-dark;
		}
	}

	[class*="container-fluid"] {
		align-items: center;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 $gap;

		@media(min-width: $breakpoint-desktop) {
			justify-content: flex-start;
			flex-wrap: nowrap;
		}
	}

	.custom-logo-link {
    margin-right: 1rem;

    img {
      width: auto;
      height: 45px !important;
			max-width: unset;
    }
  }

	.navbar-toggler {
		display: block;
		background-color: rgba($color-black, 0.5);
		color: $color-light;
		cursor: pointer;

		i {
			height: auto;
			width: auto;
			font-size: 2.5rem;
			line-height: 1;
		}

		@media(min-width: $breakpoint-desktop) {
			display: none;
		}
	}

	.navbar-brand {
    font-size: 1.725rem;
    font-weight: 100;
    letter-spacing: 0.3rem;
    line-height: 1;
		// max-width: 320px;
    // overflow: hidden;
    // text-overflow: ellipsis;
		text-decoration: none;
		margin-right: $gap;
    text-transform: uppercase;
		white-space: nowrap;
  }

	.navbar-collapse {
		align-items: center;
		display: none;
		flex: 0 1 100%;

		@media(min-width: $breakpoint-desktop) {
			display: flex;
	
			// Override the JS slideToggle() and fix the navbar display that adds style="block/none".
			&[style*="none"],
			&[style*="block"] {
				display: flex !important;
			}
		}

		.main-nav-menu {
			display: flex;
			margin: 1rem 0 0 0;
			padding: 0;
			flex-direction: column;
			width: 100%;

			@media(min-width: $breakpoint-desktop) {
				flex-direction: row;
				margin-top: 0;
			}

			a {
				display: block;
				text-decoration: none;
				border-bottom: 1px solid rgba($color-black, 0.75);
				padding: 1rem;
				margin-bottom: 1rem;

				@media(min-width: $breakpoint-desktop) {
					display: inline-block;
					border-bottom: 0;
					margin-bottom: 0;
					padding: 0.75rem;
				}

				&:last-of-type {
					border-bottom: 0;
				}
			}

			li {
				font-size: 1rem;
				line-height: 1;
				font-weight: 700;
				list-style-type: none;
				text-transform: uppercase;
				white-space: nowrap;

				&.current-menu-item > a {
					color: rgba($color-black, 0.35) !important;
					text-decoration: underline;
				}
			}
			
			ul {
				display: none;
			}
		}

		.menu-item-has-children {
			position: relative;
			z-index: 30;
			padding-right: 0.5rem;

			&:after {
				font-family: dashicons;
				content: '\f140';
				position: absolute;
				top: 0.625rem;
				right: 0;
				color: rgab($color-white, 0.5);
			}

			.sub-menu {
				position: static;
				left: auto;
				top: auto;
				width: 100%;

				@media(min-width: $breakpoint-desktop) {
					position: absolute;
					left: 0;
					padding: 0.5rem;
					margin: 0;
					top: 3rem;
				  width: 320px;
					background-color: $color-dark;
					white-space: nowrap;
				}

				.sub-menu {
					position: static;
					left: auto;
					top: auto;
					max-width: 100%;
				}
			}
		}
	}
}