/* =========================================================
   HEADER-001
   ========================================================= */

#site-navigation {
	width: min(calc(100% - 2rem), var(--fds-site-width));
	max-width: var(--fds-site-width);
	margin-inline: auto;
	border-bottom: 1px solid var(--fds-steel-300);
	background: var(--fds-white-steel);
	box-shadow: none;
}

#site-navigation .inside-navigation {
	width: min(calc(100% - 4rem), var(--fds-header-width));
	max-width: var(--fds-header-width);
	margin-inline: auto;
	padding-inline: 0;
}

#site-navigation .site-logo {
	flex: 0 0 auto;
	margin-right: auto;
}

#site-navigation .site-logo img {
	display: block;
	width: auto;
	max-width: 245px;
	height: auto;
}

.main-navigation .main-nav {
	flex: 0 1 auto;
}

.main-navigation .main-nav > ul {
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
}

.main-navigation .main-nav > ul > li,
.main-navigation .main-nav > ul > li > a {
	white-space: nowrap;
}

.main-navigation .main-nav > ul > li > a {
	padding-inline: clamp(.45rem, .65vw, .72rem);
	color: var(--fds-coal);
	font-family: var(--fds-font-heading);
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .025em;
	background: transparent;
}

.main-navigation .main-nav > ul > li:not(.fds-nav-cta) > a:hover,
.main-navigation .main-nav > ul > li:not(.fds-nav-cta) > a:focus,
.main-navigation .main-nav > ul > li.current-menu-item:not(.fds-nav-cta) > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor:not(.fds-nav-cta) > a {
	background: transparent;
	color: var(--fds-copper);
}

.main-navigation .main-nav > ul > li.fds-nav-cta {
	margin-left: .55rem;
}

.main-navigation .main-nav > ul > li.fds-nav-cta > a {
	min-height: 44px;
	margin-block: auto;
	padding-inline: .9rem;
	border: 1px solid var(--fds-copper-dark);
	background:
		linear-gradient(
			180deg,
			rgba(255, 224, 195, .22),
			rgba(181, 106, 58, .08) 38%,
			rgba(86, 38, 16, .28)
		),
		url("../images/home/hammered-copper.webp");
	background-position: center;
	background-size: 420px auto;
	box-shadow:
		inset 0 1px 0 rgba(255, 238, 220, .35),
		inset 0 -2px 0 rgba(79, 31, 11, .35),
		0 2px 5px rgba(30, 32, 31, .14);
	color: #fff;
	line-height: 44px;
	text-shadow: 0 1px 1px rgba(30, 32, 31, .65);
}

.main-navigation .main-nav > ul > li.fds-nav-cta > a:hover,
.main-navigation .main-nav > ul > li.fds-nav-cta > a:focus {
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 245, 230, .45),
		inset 0 -2px 0 rgba(79, 31, 11, .28),
		0 7px 16px rgba(30, 32, 31, .2);
}

/* Tablet: hand off to GeneratePress mobile navigation before wrapping. */
@media (max-width: 1120px) {
	#site-navigation .inside-navigation {
		width: min(calc(100% - 2rem), var(--fds-header-width));
	}

	#site-navigation .site-logo img {
		max-width: 220px;
	}

	.main-navigation .main-nav > ul > li > a {
		padding-inline: .42rem;
		font-size: .68rem;
	}
}

/* GeneratePress mobile menu treatment. */
@media (max-width: 768px) {
	#site-navigation {
		width: 100%;
	}

	#site-navigation .inside-navigation {
		width: 100%;
		padding-inline: 1rem;
	}

	.main-navigation .main-nav > ul > li.fds-nav-cta {
		margin: 1rem 0 0;
	}

	.main-navigation.toggled .main-nav > ul > li.fds-nav-cta > a {
		display: flex;
		justify-content: center;
		min-height: 50px;
		line-height: 1;
	}
}

/* =========================================================
   HEADER ALIGNMENT REPAIR
   Approved placement: logo left, navigation group right.
   ========================================================= */

#site-navigation .inside-navigation {
	display: flex;
	align-items: center;
}

#site-navigation .site-logo,
#site-navigation .navigation-branding {
	flex: 0 0 auto;
	margin-right: 0;
}

#site-navigation .main-nav {
	flex: 0 1 auto;
	margin-left: auto;
}

#site-navigation .menu-bar-items {
	flex: 0 0 auto;
	margin-left: 1.25rem;
}

#site-navigation .main-nav > ul {
	justify-content: flex-end;
}