/* RideWithPete refinement layer for the existing Kadence header. */
:root {
	--rwp-header-green: #173c2c;
	--rwp-header-ink: #17241d;
	--rwp-header-accent: #d45a24;
	--rwp-header-height: 76px;
}

#masthead.site-header {
	z-index: 1000;
	width: 100%;
	font-family: "Open Sans", system-ui, sans-serif;
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
	min-height: var(--rwp-header-height);
	background: #fff;
	border-bottom: 1px solid rgb(23 36 29 / 10%);
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#masthead .site-main-header-inner-wrap {
	min-height: var(--rwp-header-height);
}

#masthead .site-branding .brand {
	display: flex;
	gap: 0;
	align-items: center;
}

#masthead .site-branding .custom-logo {
	width: auto;
	max-width: min(260px, 36vw);
	max-height: 54px;
	filter: brightness(0) saturate(100%) invert(20%) sepia(19%) saturate(1270%) hue-rotate(101deg) brightness(87%) contrast(93%);
	object-fit: contain;
	transition: filter 220ms ease;
}

#masthead .site-branding .site-title-wrap {
	display: none;
}

#masthead .header-navigation .header-menu-container > ul > li > a {
	position: relative;
	min-height: var(--rwp-header-height);
	padding-inline: 0.9rem;
	color: var(--rwp-header-ink);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 180ms ease;
}

#masthead .header-navigation .header-menu-container > ul > li > a::after {
	position: absolute;
	right: 0.9rem;
	bottom: 19px;
	left: 0.9rem;
	height: 2px;
	background: var(--rwp-header-accent);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 180ms ease;
}

#masthead .header-navigation .header-menu-container > ul > li:hover > a::after,
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a::after,
#masthead .header-navigation .header-menu-container > ul > li > a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

#masthead a:focus-visible,
#masthead button:focus-visible {
	outline: 3px solid var(--rwp-header-accent);
	outline-offset: 3px;
}

body.rwp-header-overlay #masthead {
	position: absolute;
	top: 0;
	left: 0;
}

body.rwp-header-overlay #masthead::before {
	position: absolute;
	z-index: -1;
	inset: 0 0 -32px;
	background: linear-gradient(180deg, rgb(6 17 11 / 68%), transparent);
	content: "";
	pointer-events: none;
}

body.rwp-header-overlay:not(.rwp-header-scrolled) #masthead .site-main-header-wrap .site-header-row-container-inner {
	background: transparent;
	border-color: transparent;
}

body.rwp-header-overlay:not(.rwp-header-scrolled) #masthead .site-branding .custom-logo {
	filter: none;
}

body.rwp-header-overlay:not(.rwp-header-scrolled) #masthead .header-navigation .header-menu-container > ul > li > a,
body.rwp-header-overlay:not(.rwp-header-scrolled) #masthead #mobile-toggle {
	color: #fff;
}

body.rwp-header-ready.rwp-header-overlay.rwp-header-scrolled #masthead {
	position: fixed;
	top: 0;
	left: 0;
	animation: rwp-header-enter 180ms ease-out;
}

body.rwp-header-scrolled #masthead .site-main-header-wrap .site-header-row-container-inner,
body.rwp-header-solid #masthead .site-main-header-wrap .site-header-row-container-inner {
	background: rgb(255 255 255 / 97%);
	border-color: rgb(23 36 29 / 12%);
	box-shadow: 0 8px 24px rgb(23 36 29 / 9%);
	backdrop-filter: blur(10px);
}

body.rwp-header-solid #masthead {
	position: relative;
}

body.admin-bar.rwp-header-overlay #masthead {
	top: 32px;
}

@keyframes rwp-header-enter {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@media (max-width: 1024px) {
	:root { --rwp-header-height: 68px; }

	#masthead #mobile-toggle {
		display: inline-flex;
		width: 46px;
		height: 46px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid currentColor;
		border-radius: 4px;
		color: var(--rwp-header-ink);
	}

	#mobile-drawer.popup-drawer .drawer-inner {
		background: var(--rwp-header-green);
		color: #fff;
	}

	#mobile-drawer .drawer-header .menu-toggle-close,
	#mobile-drawer .mobile-navigation a {
		color: #fff;
	}

	#mobile-drawer .mobile-navigation a {
		min-height: 52px;
		padding: 0.85rem 1.25rem;
		border-bottom: 1px solid rgb(255 255 255 / 13%);
		font-size: 1rem;
		font-weight: 700;
	}
}

@media (max-width: 782px) {
	body.admin-bar.rwp-header-overlay #masthead { top: 46px; }
}

@media (max-width: 600px) {
	body.admin-bar.rwp-header-overlay.rwp-header-scrolled #masthead { top: 0; }
	#masthead .site-branding .custom-logo { max-width: 215px; max-height: 45px; }
}

@media (prefers-reduced-motion: reduce) {
	#masthead *,
	#masthead .site-main-header-wrap .site-header-row-container-inner {
		transition: none !important;
	}
	body.rwp-header-ready.rwp-header-overlay.rwp-header-scrolled #masthead { animation: none; }
}
