.header {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.header__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	padding: 1rem 10%;
	align-items: center;
}

.header__bottom {
	display: flex;
	align-items: flex-end;
	padding-bottom: 50px;
	padding: 1rem 10%;
}

.page-title {
	margin: 0;
}

/* Logo */
.site-branding {
	flex: 0 0 auto;
}

.custom-logo-link {
	display: inline-block;
	border-radius: var(--header-logo-border-radius);
	overflow: hidden;
}

.custom-logo {
	max-height: 100px;
	width: auto;
	display: block;
	border-radius: var(--header-logo-border-radius);
}

/* Navigation */
.menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 28px;
	height: 3px;
	margin: 5px 0;
	background: #fff;
}

.main-navigation {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
}

@media (min-width: 769px) {
	.primary-menu li {
		position: relative;
		margin: 0;
		padding: 0;
	}

	.primary-menu a {
		text-decoration: none;
		display: block;
		padding: 0.5rem 0;
		color: var(--header-menu-colour);
		font-size: var(--header-menu-font-size);
		font-weight: var(--header-menu-font-weight);
	}
	.primary-menu a:hover,
	.primary-menu a:focus,
	.primary-menu .current-menu-item > a,
	.primary-menu .current-menu-ancestor > a {
		color: var(--header-menu-hover-colour);
	}
	
	.primary-menu .menu-item-has-children > a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}
	
	.primary-menu .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0.4rem;
		height: 0.4rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -0.15rem;
	}
	
	.primary-menu .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-45deg);
		margin-top: 0;
		margin-left: 10px;
	}

	.primary-menu .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0.75rem 0;
		min-width: 220px;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		display: none;
		background: var(--header-menu-dropdown-background-colour);
	}

	.primary-menu .sub-menu li {
		width: 100%;
	}

	.primary-menu .sub-menu a {
		display: block;
		padding: 0.75rem 1rem;
		white-space: nowrap;
		color: var(--header-menu-colour);
		font-size: var(--header-menu-font-size);
		font-weight: var(--header-menu-font-weight);
	}

	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		display: block;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus {
		color: var(--header-menu-hover-colour);
	}

	.primary-menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}
}


@media (max-width: 768px) {
	.header__top {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	
	.header__bottom {
		justify-content: center;
	}

	.main-navigation {
		display: block;
	}

	.menu-toggle {
		display: inline-block;
		align-self: flex-end;
	}

	.primary-menu {
		display: none;
		flex-direction: column;
		gap: 0;
		margin-top: 1rem;
	}

	.main-navigation.is-open .primary-menu {
		display: flex;
	}

	.primary-menu a {
		padding: 0.75rem 0;
	}
}