// Header on all pages
> header.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	gap: 1.625rem 1rem;
	margin-block-end: 1rem;

	box-sizing: content-box; // Easier full width
	width: 100%;
	margin-inline: -20px; // Offset parent to be full width;
	padding-block: 2.5rem;
	padding-inline: 20px; // To support screen options button
	background-color: #0B2146;
	background-image: url(../img/header-background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	.title {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center; // Center when on small screens

		color: var(--color-light);
		font-weight: 500;
		font-size: 1.5rem;
		margin-block: 0;

		.separator {
			font-weight: 100;
		}
	}
	ul, li {
		margin: 0;
	}

	.nav-links {
		display: flex;
		gap: 1rem;
		list-style: '';

		.btn {
			display: flex;
			min-width: unset;
			min-height: unset;
			white-space: nowrap;

			background-color: var(--color-light);
			color: var(--color-secondary);
			border-color: var(--color-secondary);
			outline-color: var(--color-focus-ring);
			font-size: .9375rem;
			font-weight: 600;
			transition: box-shadow .2s;

			&:where(:hover,:focus-visible) {
				box-shadow: 0 .5rem 1rem rgba(0,0,0, .25);
				outline-offset: 2px;
				outline-width: 2px;
			}
		}
	}

	@media ( max-width: 991px ) {
		justify-content: center;

		.nav-links {
			flex-wrap: wrap;
		}
	}

	@media ( max-width: 480px ) {
		.nav-links {
			flex-direction: column;
		}
	}
}

// Sub navigation after header
.header-nav {
	margin-block-end: 2rem;
}