/* Header and navigation CSS. */

.site-header {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--primary-light);
	background: var(--wp--preset--color--base);
	min-block-size: var(--header-block-size);
	padding-block: var(--wp--preset--spacing--xx-small);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--x-small);
	width: min(
		calc(100% - (var(--wp--custom--layout--gutter) * 2)),
		var(--wp--style--global--wide-size)
	);
	margin-inline: auto;
}

.site-branding {
	flex: 0 0 auto;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: 5rem;
}

.site-branding__name {
	color: var(--primary-ultra-dark);
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
}

.primary-navigation__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation a {
	color: var(--primary-ultra-dark);
	font-size: var(--text-s);
	font-weight: 500;
	text-decoration: none;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
	text-decoration: underline;
}

.site-header__contact {
	flex: 0 0 auto;
	border: 1px solid var(--primary);
	border-radius: var(--radius-s);
	color: var(--primary-ultra-dark);
	font-size: var(--text-s);
	font-weight: 500;
	line-height: 1.2;
	padding: var(--space-xxs) var(--space-xs);
	text-decoration: none;
}

.site-header__contact:hover,
.site-header__contact:focus-visible {
	background: var(--primary);
	color: var(--wp--preset--color--base);
}

@media (max-width: 48rem) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	.primary-navigation {
		order: 3;
		width: 100%;
	}
}

body.page-template-template-surecart-dashboard .site-header {
	isolation: isolate;
	position: relative;
	z-index: 1;
}

body.page-template-template-surecart-dashboard .site-header a {
	color: var(--primary-ultra-dark);
	text-decoration: none;
}

body.page-template-template-surecart-dashboard .site-header a:hover,
body.page-template-template-surecart-dashboard .site-header a:focus-visible {
	color: var(--primary-dark);
	text-decoration: underline;
}

body.page-template-template-surecart-dashboard .site-header__contact:hover,
body.page-template-template-surecart-dashboard .site-header__contact:focus-visible {
	background: var(--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}