/* Beats mu-plugin style#pgri-design-system pills by specificity, not print order.
   Current ::after must retarget mask-image: DS sets that on the current selectors. */

html body .pgri-subnav {
	--pgri-subnav-green: var(--pg-green, #266041);
	--pgri-subnav-deep: var(--pg-deep, #1c4730);
	--pgri-subnav-cream: #f4f1e8;
	--pgri-subnav-radius: 6px;
	--pgri-subnav-square: 1.5rem;
	--pgri-subnav-gap: 0.25rem;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	color: var(--pgri-subnav-cream);
	max-width: none;
	width: 100%;
}

html body .pgri-subnav .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	max-width: none;
	width: 100%;
	margin: 0;
}

html body .pgri-subnav .wp-block-navigation-item {
	margin: 0;
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content),
html body .pgri-subnav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	--pgri-subnav-arrow: url("subnav-icons/PMRWebIcon-RightArrowV0.svg");
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-PowderhornLogoIconV0.svg");
	--pgri-subnav-square-fill: #fff;
	display: inline-flex;
	align-items: center;
	gap: var(--pgri-subnav-gap);
	padding: 0.45rem 0.65rem;
	border-radius: var(--pgri-subnav-radius);
	background: var(--pgri-subnav-green);
	color: var(--pgri-subnav-cream);
	-webkit-text-fill-color: var(--pgri-subnav-cream);
	font: 700 0.8125rem/1 "mr-eaves-xl-modern", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: 1.5px solid var(--pgri-subnav-green);
	box-shadow: none;
	transform: none;
	transition: background 0.16s var(--pg-ease, ease), border-color 0.16s, color 0.16s;
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)::before,
html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)::after {
	content: "";
	flex: 0 0 var(--pgri-subnav-square);
	width: var(--pgri-subnav-square);
	height: var(--pgri-subnav-square);
	border-radius: 0;
	background-color: var(--pgri-subnav-square-fill);
	background-image: none;
	-webkit-mask: var(--pgri-subnav-arrow) center / contain no-repeat;
	mask: var(--pgri-subnav-arrow) center / contain no-repeat;
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)::before {
	order: -2;
	-webkit-mask-image: var(--pgri-subnav-arrow);
	mask-image: var(--pgri-subnav-arrow);
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)::after {
	order: -1;
	-webkit-mask: var(--pgri-subnav-icon) center / contain no-repeat;
	mask: var(--pgri-subnav-icon) center / contain no-repeat;
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/season-passes/"],
html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/tickets-4-packs/"],
html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="bike-park-tickets"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-TicketsV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/daily-lessons"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-SkiInstructV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/ski-snowboard-rentals/"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-RentBoardSkisV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/tiny-homes"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-LodgingTinyHomeV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/mesa-colorado/"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-BedV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/dining/"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-DineV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/grand-junction"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-CarSUVV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/bike-lessons/"],
html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/bike-rentals/"],
html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/bike-trail"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-PowderhornLogoIconV0.svg");
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content)[href*="/hours"] {
	--pgri-subnav-icon: url("subnav-icons/PMRWebIcon-HoursClockV0.svg");
}

html body .pgri-subnav :is(p a:hover, .wp-block-navigation-item__content:hover),
html body .pgri-subnav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--pgri-subnav-deep);
	border-color: var(--pgri-subnav-deep);
	color: var(--pgri-subnav-cream);
	-webkit-text-fill-color: var(--pgri-subnav-cream);
	transform: none;
}

html body .pgri-subnav :is(p a.is-current, .wp-block-navigation-item__content[aria-current="page"]),
html body .pgri-subnav .current-menu-item > :is(a, .wp-block-navigation-item__content),
html body .pgri-subnav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	--pgri-subnav-arrow: url("subnav-icons/PMRWebIcon-DownArrowV0.svg");
	--pgri-subnav-square-fill: var(--pgri-subnav-green);
	background: #fff;
	color: var(--pgri-subnav-green);
	-webkit-text-fill-color: var(--pgri-subnav-green);
	border-color: var(--pgri-subnav-green);
}

html body .pgri-subnav :is(p a.is-current, .wp-block-navigation-item__content[aria-current="page"])::after,
html body .pgri-subnav .current-menu-item > :is(a, .wp-block-navigation-item__content)::after {
	-webkit-mask: var(--pgri-subnav-icon) center / contain no-repeat;
	mask: var(--pgri-subnav-icon) center / contain no-repeat;
}

html body .pgri-subnav :is(p a.is-current, .wp-block-navigation-item__content[aria-current="page"]):hover,
html body .pgri-subnav .current-menu-item > :is(a, .wp-block-navigation-item__content):hover,
html body .pgri-subnav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"]:hover {
	background: #fff;
	color: var(--pgri-subnav-deep);
	-webkit-text-fill-color: var(--pgri-subnav-deep);
	border-color: var(--pgri-subnav-deep);
	--pgri-subnav-square-fill: var(--pgri-subnav-deep);
	transform: none;
}

html body .pgri-subnav :is(p a, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--pg-lime, #91c848);
	outline-offset: 2px;
}

html body .pgri-subnav .wp-block-navigation-item__label {
	color: var(--pgri-subnav-cream);
	-webkit-text-fill-color: var(--pgri-subnav-cream);
}

html body .pgri-subnav .current-menu-item .wp-block-navigation-item__label,
html body .pgri-subnav [aria-current="page"] .wp-block-navigation-item__label {
	color: var(--pgri-subnav-green);
	-webkit-text-fill-color: var(--pgri-subnav-green);
}

html body .pgri-subnav a:hover .wp-block-navigation-item__label {
	color: var(--pgri-subnav-cream);
	-webkit-text-fill-color: var(--pgri-subnav-cream);
}

html body .pgri-subnav .current-menu-item a:hover .wp-block-navigation-item__label,
html body .pgri-subnav [aria-current="page"]:hover .wp-block-navigation-item__label {
	color: var(--pgri-subnav-deep);
	-webkit-text-fill-color: var(--pgri-subnav-deep);
}

html body nav.pgri-subnav {
	margin-block-start: 0;
	padding-block-start: 1rem;
	margin-bottom: 2rem;
}

html body .wp-block-spacer:has(+ nav.pgri-subnav) {
	display: none;
}

html body .pgri-hero:has(+ nav.pgri-subnav),
html body .pgri-hero:has(+ .wp-block-spacer + nav.pgri-subnav),
html body .pgri-hero:has(+ .wp-block-group > nav.pgri-subnav) {
	margin-bottom: 0 !important;
}

html body .wp-block-group:has(> nav.pgri-subnav) {
	margin-block-start: 0;
	padding-block-start: 0;
}

@media (max-width: 1100px) {
	html body .pgri-subnav,
	html body .pgri-subnav .wp-block-navigation__container {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	html body .pgri-subnav,
	html body .pgri-subnav .wp-block-navigation__container {
		gap: 0.4rem;
	}

	html body .pgri-subnav :is(p a, .wp-block-navigation-item__content),
	html body .pgri-subnav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding: 0.4rem 0.6rem;
		font-size: 0.75rem;
		--pgri-subnav-square: 1.25rem;
	}
}