/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	top: 0;
	position: sticky;
	width: 100%;
	height: var(--header-height-mobile);
	color: var(--color-white);
	background-color: var(--color-secondary-dark);
	z-index: 20;

	@media (--sm) {
		height: var(--header-height);
	}

	& div,
	& button {
		color: currentColor;
	}

	&.header-alt {
		position: fixed;
		background-color: transparent;
		color: var(--color-secondary-dark);

		& .icon-bar {
			background-color: var(--color-secondary-dark);
		}
	}
}

.custom-logo-link {
	display: block;
	margin: 0 auto;
	width: 200px;
}

.custom-logo {
	height: 30px;

	@media (--sm) {
		height: 50px;
	}
}

.site-branding {
	text-align: center;
}

.ui-menu-toggle {
	position: relative;
	display: block;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid transparent;
	outline: 0;
	font-size: 1.25rem;

	@media (--sm) {
		display: none;
	}

	& .icon-bar {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 3px;
		transform: none;
		background-color: currentColor;
		transition: all 0.5s ease-in-out;

		@media (--sm) {
			width: 40px;
		}

		& + .icon-bar {
			margin-top: 8px;
		}

		&:first-child {
			width: 30px;
		}

		&:last-child {
			width: 25px;
		}
	}

	&.is_open .icon-bar {

		&:first-child {
			width: 14px;
		}

		&:last-child {
			width: 10px;
		}

		@media (--sm) {

			&:first-child {
				width: 28px;
			}

			&:last-child {
				width: 15px;
			}
		}
	}
}