/*! Header */
.header {
	background-color: var(--go-header--color--background);
	z-index: 99;

	& .u-informational {
		display: inline-block;
		padding: 0.3rem 0.5rem;
	}

	.social-icons-container {
		display: none;

		@include media(large) {
			display: flex;
		}
	}

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

	.social-icons svg {
		height: calc(var(--go-social--size) / 1.45);
	}

	.social-icons a {
		padding: 0.25rem;
	}
}

body.has-sticky-header {
	.site-header {
		position: sticky;
		top: 0;

		&:not(.has-background) {
			background: var(--go--color--background, 0, 0, 100%);
		}
	}

	&.admin-bar {
		// In 5.9 we could have used calc(-1 * var(--wp-admin--admin-bar--height));
		margin-top: -32px;

		@media (max-width: 782px) {
			margin-top: -46px;
		}

		#wpadminbar {
			position: sticky;
			top: 0;
		}

		.site-header {
			top: 32px;

			@media (max-width: 782px) {
				top: 46px;
			}
		}
	}
}

.header__inner {
	padding: 2vw var(--go-header--padding--x, var(--go-block--padding--x));

	@include media(medium) {
		padding-bottom: var(--go-header--padding--y, var(--go-block--padding--x));
		padding-top: var(--go-header--padding--y, var(--go-block--padding--x));
	}
}

.header__title-nav {
	flex: 1 0 75%;
	order: 2;
}

.header__extras {
	align-items: center;
	display: inline-flex;
	flex: 0 0 12.5%;
	justify-content: flex-start;
	margin-left: -0.75rem;
	order: 1;
	z-index: 9999;

	@include media(large) {
		flex: inherit;
		flex-grow: 0;
		flex-shrink: 1;
		margin-left: var(--go-navigation--padding--x, 2.25vw);
		margin-right: -0.75rem;
		order: 3;
	}
}

.header-1 .header__extras {
	@include media(large) {
		justify-content: flex-end;
	}
}
