/**
 * WORKS site header.
 *
 * Styles the sticky header, logo, navigation,
 * call-to-action button, and mobile menu toggle.
 */

.works-site-header {
	position: sticky;
	z-index: 30;
	top: 0;
	background: var(--works-white);
	box-shadow: 0 2px 14px rgb(11 31 59 / 8%);
}

.works-header-inner {
	display: flex;
	min-height: 82px;
	align-items: center;
	justify-content: space-between;
	gap: 1.3rem;
}

.works-brand {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.works-brand-logo {
	display: block;
	width: 205px;
	max-height: 72px;
	object-fit: contain;
	object-position: left center;
}

.works-brand .custom-logo {
	display: block;
	width: auto;
	max-width: 205px;
	max-height: 72px;
}

.works-primary-navigation ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.works-primary-navigation a {
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
}

.works-primary-navigation a:hover,
.works-primary-navigation .current-menu-item a {
	color: var(--works-blue);
}

/* Keep keyboard focus visible for navigation and menu controls. */
.works-brand:focus-visible,
.works-primary-navigation a:focus-visible,
.works-menu-toggle:focus-visible {
	outline: 3px solid var(--works-orange);
	outline-offset: 3px;
}

.works-menu-toggle {
	display: none;
}

/* Tablet header adjustments. */
@media (max-width: 950px) {
	.works-header-inner {
		gap: 0.8rem;
	}

	.works-brand-logo {
		width: 170px;
	}

	.works-brand .custom-logo {
		max-width: 170px;
	}

	.works-primary-navigation ul {
		gap: 0.9rem;
	}

	.works-header-cta {
		white-space: nowrap;
	}
}

/* Mobile navigation and menu button. */
@media (max-width: 700px) {
	.works-header-inner {
		min-height: 70px;
	}

	.works-brand-logo {
		width: 160px;
		max-height: 60px;
	}

	.works-brand .custom-logo {
		max-width: 160px;
		max-height: 60px;
	}

	.works-header-cta {
		display: none;
	}

	.works-menu-toggle {
		display: grid;
		place-content: center;
		gap: 4px;
		width: 42px;
		height: 42px;
		border: 1px solid var(--works-light-gray);
		border-radius: 50%;
		background: var(--works-white);
	}

	.works-menu-toggle > span:not(.works-screen-reader-text) {
		width: 18px;
		height: 2px;
		background: var(--works-navy);
	}

	.works-primary-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		padding: 0.6rem 1rem 1rem;
		border-bottom: 1px solid var(--works-light-gray);
		background: var(--works-white);
	}

	.works-primary-navigation.works-is-open {
		display: block;
	}

	.works-primary-navigation ul {
		display: grid;
		gap: 0;
	}

	.works-primary-navigation a {
		display: block;
		padding: 0.75rem 0.5rem;
	}
}