/*! Header: Header 5 */
.has-header-5 {

	&::before {
		content: "has-search-toggle has-offscreen-nav";
		display: none;

		@include media(large) {
			content: "has-full-nav has-search-toggle has-offscreen-nav";
		}
	}

	.header__nav-toggle {
		flex: 1 1 25%;
		order: 1;
		text-align: left;

		.nav-toggle {
			display: inline-flex;
			margin-right: unset;
			padding: 0.75em 0;
		}
	}

	&.has-no-primary-menu .header__nav-toggle {
		display: none;
	}

	.header__title-nav {
		order: 2;

		@include media(large) {
			flex: 1 0 50%;
		}
	}

	.header__extras {
		direction: rtl;
		justify-content: flex-start;
		order: 5;
		width: 25%;
	}

	.site-header {

		.social-icons-container {
			margin: 0 1rem 0 0;
			order: 4;
			padding-left: 0;
			position: relative;

			&::after {
				background-color: #000;
				content: "";
				display: block;
				height: 15px;
				opacity: 0.5;
				position: absolute;
				right: -10px;
				top: 8px;
				width: 1px;
			}

			.social-icons {
				margin: 0;
			}
		}
	}

	.header .header__titles {
		flex: 1 0 100%;
		flex-direction: column;
		justify-content: center;
		text-align: center;

		.site-description {
			margin-left: 0;
			margin-right: 0;
			margin-top: var(--go-site-description--margin-top, 0.25rem);
		}

		.custom-logo-link {
			.custom-logo {
				margin: 0;
			}

			~ a .site-title {
				margin: 0;
			}
		}
	}

	.header__navigation {
		@include media(large) {
			align-items: normal;
			position: fixed !important;
		}
	}

	.header__navigation li {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	&:not(.menu-is-open) .header__navigation {
		@include media(large) {
			display: none;
		}
	}

	/*! Header: Header 4: Offscreen Navigation */
	&.menu-is-open {
		overflow: hidden;

		.header__navigation {
			background-color: var(--go-header--color--background, var(--go--color--background));
			font-size: 1.5rem;
			opacity: 1;
			padding-bottom: var(--go-header--padding--y, 3vw);
			padding-left: var(--go-block--padding--x);
			padding-right: var(--go-block--padding--x);
			padding-top: 70px; /* This needs to be auto-generated based on the header height */
			pointer-events: auto;
			text-align: center;
			visibility: visible;

			a {
				display: block;
				font-size: 3vmin;
				padding: 0.25rem;

				@include media(small-only) {
					font-size: 1rem;
				}

				&::after {
					display: none;
				}
			}
		}

		.header__navigation-inner {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			flex-shrink: 1;
			position: relative;
		}

		.header__navigation-inner > div {
			display: block;
			height: 100%;
			left: 0;
			overflow-x: hidden;
			overflow-y: scroll;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.primary-menu {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			left: 0;
			min-height: min-content;
			overflow: auto;
			position: absolute;
			top: 0;
			width: 100%;

			.sub-menu {
				margin-bottom: 1rem;

				&::before {
					display: none;
				}

				li {

					&:first-child {
						padding-top: 0.75rem;
					}

					&:last-child {
						padding-bottom: 0.75rem;
					}
				}
			}

			.sub-menu li a {
				font-size: 2.25vmin;

				@include media(small-only) {
					font-size: 0.85rem;
				}
			}

			.menu-item-has-children svg {
				height: 2.25rem;
				margin-left: 0.5rem;
				padding: 0.75rem;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 2.25rem;

				&:hover {
					opacity: 0.25;
				}
			}

			.submenu-is-open svg {
				transform: translateY(-50%) rotate(180deg);
			}
		}
	}
}
