/* Fixed site header, primary navigation and mobile menu. */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 40px;
	height: var(--header-height);
	padding: 0 var(--page-gutter);
	border-bottom: 1px solid rgb(196 151 42 / 30%);
	background: var(--navy-nav);

	body.admin-bar & {
		top: 32px;
	}

	@media (max-width: 1279.98px) {
		gap: 24px;
		padding-inline: 32px;
	}

	@media (max-width: 1023.98px) {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	@media (max-width: 767.98px) {
		gap: 9px;
		padding-inline: 16px;

		body.admin-bar & {
			top: 46px;
		}
	}
}

.site-logo {
	justify-self: start;
}

.primary-navigation {
	justify-self: center;

	ul {
		display: flex;
		gap: 36px;
		margin: 0;
		padding: 0;
		list-style: none;

		@media (max-width: 1279.98px) {
			gap: 20px;
		}
	}

	a {
		color: rgb(255 255 255 / 75%);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-decoration: none;
		text-transform: uppercase;
		transition: color 0.2s ease;

		&:hover,
		&:focus-visible {
			color: var(--gold-light);
		}

		&:active {
			color: var(--white);
		}
	}

	@media (max-width: 1023.98px) {
		position: fixed;
		inset: var(--header-height) 0 0;
		justify-self: stretch;
		padding: 40px 16px;
		overflow-y: auto;
		background: var(--navy-nav);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;

		.site-header.is-menu-open & {
			visibility: visible;
			opacity: 1;
			transform: none;
			transition: opacity 0.25s ease, transform 0.25s ease;
		}

		body.admin-bar & {
			top: calc(var(--header-height) + 32px);
		}

		ul {
			display: grid;
			gap: 36px;
		}

		a {
			display: block;
		}
	}

	@media (max-width: 767.98px) {
		body.admin-bar & {
			top: calc(var(--header-height) + 46px);
		}
	}
}

.header-cta {
	padding: 10px 22px;
	border: 1px solid var(--gold-mid);
	color: var(--gold-mid);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 0.2s ease, color 0.2s ease;

	&:hover,
	&:focus-visible {
		border-color: var(--gold-light);
		color: var(--gold-light);
	}

	&:active {
		border-color: var(--gold);
		color: var(--gold);
	}

	@media (max-width: 1023.98px) {
		grid-column: 2;
	}

	/* Mobile keeps the CTA in the hero instead of the crowded bar. */
	@media (max-width: 767.98px) {
		display: none;
	}
}

/* Bordered square icon button, bars morph into a cross when open. */
.menu-toggle {
	display: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--gold-mid);
	background: transparent;
	cursor: pointer;

	span {
		display: block;
		width: 14px;
		height: 1.5px;
		margin: 3px auto;
		background: var(--gold-mid);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.site-header.is-menu-open & {
		span:nth-child(1) {
			transform: translateY(4.5px) rotate(45deg);
		}

		span:nth-child(2) {
			opacity: 0;
		}

		span:nth-child(3) {
			transform: translateY(-4.5px) rotate(-45deg);
		}
	}

	@media (max-width: 1023.98px) {
		display: block;
		grid-column: 3;
	}
}