/* ==================================================
   Wide desktop header
   ================================================== */

@media (min-width: 1281px) {

	/* Remove the old 1240px header width restriction */
	.hj-header {
		width: 100%;
		max-width: none;
		padding-left: clamp(20px, 2.2vw, 44px);
		padding-right: clamp(20px, 2.2vw, 44px);
	}

	/* Make the utility bar as wide as the header/footer */
	.hj-utility-bar > div {
		width: 100%;
		max-width: none;
		padding-left: clamp(20px, 2.2vw, 44px);
		padding-right: clamp(20px, 2.2vw, 44px);
	}

	/* Keep the logo from being compressed */
	.hj-header .hj-brand {
		flex: 0 0 auto;
		margin-right: clamp(18px, 2vw, 36px);
	}

	/* Let navigation use all remaining width */
	.hj-header nav {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(10px, 1.2vw, 20px);
	}

	.hj-header nav .hj-wp-menu {
		display: flex;
		flex: 0 1 auto;
		min-width: 0;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(10px, 1.1vw, 20px);
	}

	.hj-header nav .hj-wp-menu li {
		flex: 0 0 auto;
	}

	/* Prevent translated menu labels from breaking into two lines */
	.hj-header nav a,
	.hj-header .hj-nav-cta {
		white-space: nowrap;
	}

	.hj-header .hj-nav-cta {
		flex: 0 0 auto;
	}
}


/* ==================================================
   Slightly compact layout for common desktop screens
   ================================================== */

@media (min-width: 1281px) and (max-width: 1500px) {

	.hj-header {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hj-header nav {
		gap: 11px;
	}

	.hj-header nav .hj-wp-menu {
		gap: 10px;
	}

	.hj-header nav .hj-wp-menu a {
		font-size: 14px;
	}

	.hj-header .hj-nav-cta {
		padding: 12px 14px !important;
		font-size: 14px;
	}

	/* Hide the secondary logo slogan to save horizontal space */
	.hj-header .hj-brand small {
		display: none;
	}
}


/* ==================================================
   Switch to hamburger navigation before labels collide
   ================================================== */

@media (max-width: 1280px) {

	.hj-header nav {
		display: none;
		position: absolute;
		top: 82px;
		left: 0;
		right: 0;
		z-index: 100;
		max-height: calc(100vh - 82px);
		overflow-y: auto;
		padding: 25px;
		background: #fbfcf8;
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
	}

	.hj-header nav.open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hj-header nav.open .hj-wp-menu {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hj-header nav.open .hj-wp-menu li {
		width: 100%;
	}

	.hj-header nav.open .hj-wp-menu a {
		display: block;
		width: 100%;
		padding: 13px 4px;
		font-size: 17px;
		line-height: 1.4;
		white-space: normal;
	}

	.hj-header nav.open .hj-nav-cta {
		display: block;
		width: 100%;
		margin-top: 12px;
		text-align: center;
		white-space: normal;
	}

	.hj-menu {
		display: block;
		flex: 0 0 auto;
	}
}


/* Match the existing mobile header height */
@media (max-width: 650px) {

	.hj-header nav,
	.hj-header nav.open,
	.hj-utility-bar + .hj-header nav.open {
		top: 72px;
	}
}