/* Header Layout: Classic.
--------------------------------------------- */
.cm-layout-2 {

	.cm-header-1 {
		.cm-row {
			flex-direction: column;
		}
	}

	.cm-header-2 {
		.cm-row {
			flex-direction: row;
			-ms-flex-direction: row;
		}
	}

	.cm-row {
		justify-content: center;

		.cm-header-col-2 {
			display: none;
		}

		.cm-header-col-1 {
			display: unset;
			float: none;
			text-align: center;
		}
	}

	.cm-top-bar {
		.cm-row {
			padding: 0;
		}
	}

	#cm-primary-nav {
		background-color: transparent;

		&.headroom--pinned {
			background: inherit;
		}

		.cm-row {
			background-color: transparent;
			justify-content: flex-start;
		}

		.fa {
			color: #3F3F46;

			&:hover {
				background: transparent;
				color: $color__primary;
			}

		}

		.cm-home-icon {

			&.front_page_on {
				background-color: transparent;
			}
		}
	}

	.cm-primary-nav {

		a {
			color: #3F3F46;
			background-color: transparent;

			&::after {
				color: inherit;
			}

			&:hover {
				background-color: transparent;
			}
		}

		li {
			background-color: transparent;
		}

		ul {
			justify-content: center;

			li {

				&.current-menu-item,
				&.current_page_item,
				&:hover,
				&.focus {
					color: $color__primary;
					background-color: transparent;
				}

				&.current-menu-item ul li a,
				ul li.current-menu-item a,
				&.current_page_ancestor ul li a,
				&.current-menu-ancestor ul li a,
				&.current_page_item ul li a {
					color: $color__menu-link;
				}
			}

			>li {
				vertical-align: top;

				>a {
					border-bottom: 2px solid transparent;
					transition: border 0.5s ease;
					color: #3F3F46;
				}

				&:hover,
				&.current-menu-item,
				&.current-menu-ancestor {

					>a {
						background-color: transparent;
						border-bottom: 2px solid $color__primary;
					}

				}
			}

			ul.sub-menu {
				background-color: $color__white;
				transition: all 0.3s ease;
				display: block;
				opacity: 0;
				visibility: hidden;
				border: 1px solid #F4F4F5;
				text-align: left;

				li {
					border-bottom: 1px solid #F4F4F5;
					display: flex;

					a {
						width: auto;
						transition: all 0.5s ease;
						border-color: transparent;
					}

					&:hover,
					&.current-menu-ancestor,
					&.current-menu-item,
					&.focus {
						border-color: $color__primary;
						background-color: $color__primary;

						>a {
							color: $color__white;
						}
					}

					&:last-child {
						border-bottom: none transparent;
					}

					ul {
						top: 0;
						transition: none;
					}
				}
			}


			li.menu-item-has-children {

				&:hover {

					>ul.sub-menu {
						opacity: 1;
						visibility: visible;
					}
				}

				a {

					&::after {
						color: #343a40;
					}
				}
			}

			li.focus {

				>a {
					border-color: $color__primary;
				}

				>ul.sub-menu {
					opacity: 1;
					visibility: visible;
				}
			}
		}

		.cm-random-post {

			a {
				&:hover {
					background: transparent;

					.fa-random {
						color: $color__primary;
					}
				}

				.fa-random {
					color: #3F3F46;
				}
			}
		}

		.cm-submenu-toggle {

			.cm-icon {
				fill: $color__gray-700
			}
		}

		.cm-menu-toggle,
		.cm-home-icon,
		.cm-random-post {

			svg {
				fill: #3F3F46;
			}
		}
	}

	.cm-mobile-nav {

		.nav-menu {
			padding-top: 0;
			position: absolute;
			top: 100%;
			width: 100%;
			box-shadow: 0 1px 11px rgba(0, 0, 0, 0.2);
		}

		.cm-random-post {

			a {

				&:hover {
					background: transparent;

					.fa-random {
						color: $color__primary;
					}
				}

				.fa-random {
					color: $color__menu-link;
				}
			}
		}

		li {
			background-color: $color__white;
			border-color: #E4E4E7;

			a {
				color: #3F3F46;
			}

			&:hover,
			&.current-page-ancestor,
			&.current-menu-ancestor,
			&.current-page-item,
			&.current-menu-item {
				>.cm-submenu-toggle {
					i {
						color: $color__white;
					}
				}
			}
		}

		.cm-submenu-toggle,
		.cm-home-icon,
		.cm-menu-toggle {

			svg {
				fill: $color__gray-700
			}
		}

		.cm-random-post {

			a {
				svg {
					fill: $color__gray-700
				}
			}
		}
	}

	.is-sticky {

		#cm-primary-nav {
			background-color: $color__white;
			box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
		}
	}

	.cm-menu-primary-container {
		flex-grow: 1;
	}
}

@include breakpoint("mdm") {

	.cm-layout-2 {

		.cm-layout-2-style-1 {

			#cm-primary-nav {
				border-top: 4px solid #207daf;
			}
		}
	}
}