/****************************************
 * GENERIC UI BUTTON
 ****************************************/
button.map-ui-close-button,
button.map-ui-back-button {
	top: .8333rem;
	right: .8333rem;
	left: auto;
	display: inline-block;
	width: auto;
	height: 1.333rem;
	transition: .25s transform linear;

	/* centering */
	display: flex;
	align-items: center;
}

button.map-ui-back-button {
	font-size: .9333rem;
	text-transform: uppercase;
}

@media (min-width: 900px) {

	button.map-ui-close-button,
	button.map-ui-back-button {
		top: .8rem;
	}

}

	button.map-ui-close-button:hover,
	button.map-ui-close-button:focus,
	button.map-ui-close-button:active,
	button.map-ui-back-button:hover,
	button.map-ui-back-button:focus,
	button.map-ui-back-button:active {
		background: none;
		background-color: transparent;
		color: inherit;
	}

button.map-ui-close-button::before,
button.map-ui-back-button::after {
	display: inline-block;
	content: '';
	width: 1.333rem;
	height: 1.333rem;
	margin-right: .5rem;
	background: url("/++theme++plonetheme.wta/images/svg/close-x.svg") center no-repeat;
	background-size: 100% auto;
}

	button.map-ui-back-button::after {
		height: 1em;
		background-image: url("/++theme++plonetheme.wta/images/svg/black-arrow-left.svg");
		background-size: auto 100%;
		transform: rotate(180deg); /* points right */
		margin-left: .125em;
		margin-right: 0;
	}


	button.map-ui-close-button:hover::before,
	button.map-ui-close-button:focus::before,
	button.map-ui-close-button:active::before {
		background: transparent url("/++theme++plonetheme.wta/images/svg/close-x.svg") center no-repeat;
		background-size: 100% auto;
	}

	button.map-ui-back-button:hover::before,
	button.map-ui-back-button:focus::before,
	button.map-ui-back-button:active::before {
		background: transparent url("/++theme++plonetheme.wta/images/svg/blue-arrow-left.svg") center no-repeat;
		background-size: auto 100%;
	}

	button.map-ui-close-button:hover,
	button.map-ui-close-button:focus,
	button.map-ui-close-button:active {
		transform: scale(1.2);
	}

	button.map-ui-back-button:hover,
	button.map-ui-back-button:focus,
	button.map-ui-back-button:active {
		transform: translateX(.25rem);
	}


/****************************************
 * LOADING STATE
 ****************************************/
/* "Disable" Filters */
#hike-finder-app-container:not(.is-loaded-map) .map-filters {
	position: relative;
}
	#hike-finder-app-container:not(.is-loaded-map) .map-filters::after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		background-color: rgba(255,255,255,.8);
	}

/* Pulsing Map */
#hike-finder-app-container:not(.is-loaded-map) {
	position: relative;
}
	#hike-finder-app-container:not(.is-loaded-map)::after {
		display: block;
		content: 'Loading...';
		position: absolute;
		top: 5rem;
		left: 50%;
		margin-left: -50px;
		width: 100px;
		height: 100px;
		padding-top: 110px;
		background-image: url("/++theme++plonetheme.wta/images/svg/map-dark-green.svg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-size: contain;
		color: var(--wta-green);
		text-align: center;
		font-weight: bold;
		font-size: 1rem;

		-webkit-animation: pulse;
		animation: pulse;
		-webkit-animation-duration: 2.5s;
		animation-duration: 2.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

@media (min-width: 900px) {
	#hike-finder-app-container:not(.is-loaded-map)::after {
		top: 10rem;
	}
}

@media screen and (prefers-reduced-motion: reduce) {
	#hike-finder-app-container:not(.is-loaded-map)::after {
		-webkit-animation: none;
		animation: none;
	}
}

/* Fake Map  */
#hike-finder-app-container:not(.is-loaded-map) #map {
	background-image: linear-gradient( 81deg,
		#B5E2F7 10%,
		#E5E5E1 20%,
		#E5E5E1 35%,
		#B7DCA2 50%,
		#B7DCA2 51%,
		#F0F0F0 65%,
		#F0F0F0 85%,
		#ACCA9A
	);
}
	#hike-finder-app-container:not(.is-loaded-map) #map::before,
	#hike-finder-app-container:not(.is-loaded-map) #map::after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	/* Olympic National Park */
	#hike-finder-app-container:not(.is-loaded-map) #map::before {
		background-image: radial-gradient(
			circle at 27% 35%,
			#B7DCA2 3%,
			transparent 16%
		);
	}
	/* Colville National Forest, etc. */
	#hike-finder-app-container:not(.is-loaded-map) #map::after {
		background-image: radial-gradient(
			ellipse at 85% 6%,
			#BAE2A8,
			transparent 20%
		);
	}


/****************************************
 * FILTERS
 ****************************************/

.formHelp a:hover {
	color: #00557B;
}

.mobile-map-open-buttons {
	display: none;

	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	align-content: center;
	background-color: var(--wta-green);
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(15,15,15,.5);
	z-index: 96; /* 99 = global submenu */
}

@media (max-width: 899px) {
	.is-loaded-map .mobile-map-open-buttons {
		display: block;
		display: flex;
	}
}

	.mobile-map-open-buttons::before {
		display: block;
		content: '';
		flex: 0 0 2px;
		order: 2;
		width: 2px;
		margin: .4em 0;
		background: #FFF;
		opacity: .75;
		border-radius: 1px;
	}

.mobile-map-open-buttons button {
	flex: 1 1 auto;
	padding: .5rem 1rem;
	background-color: var(--wta-green);
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.mobile-map-open-buttons .map-gallery-open {
	order: 1;
	border-radius: 5px 0 0 5px;
}
.mobile-map-open-buttons .map-filters-open {
	order: 3;
	border-radius: 0 5px 5px 0;
}

	.mobile-map-open-buttons button:hover,
	.mobile-map-open-buttons button:active {
		background: #003029;
	}

@media (min-width: 900px) {

	.mobile-map-open-buttons {
		display: none;
	}

}

.map-filters,
.map-filters-close {
	display: none;
}

@media (max-width: 899px) {

	.map-filters.is-open {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		z-index: 100;

		display: flex;
		flex-flow: column nowrap;

		padding: 3.5rem 1rem 0; /* padding-top creates space for heading bar */

		background: #f3f3f3;
	}

		/* fake bottom padding that Firefox won't collapse when filters are scrollable */
		.map-filters.is-open::after {
			display: table;
			height: 1rem;
			content: '';
		}

	.map-filters-submit-master {
		width: 40%;
		flex: 0 0 auto;
		margin: auto auto 0; /* margin-top: auto; forces button to bottom of flex container! */
	}

	.map-filters-heading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 3rem;
		background: #f3f3f3;
		box-shadow: 0 1px 3px #acacac;
		text-align: center;
		text-transform: uppercase;
		line-height: 3rem;
		font-size: 17px;
		letter-spacing: 1px;
		font-family: 'Oswald', 'Trebuchet MS', sans-serif;
		z-index: 1;
	}

	.map-filters-close {
		position: fixed;
		z-index: 1;
	}

}

@media (min-width: 36em) and (max-width: 66.25em) {

	.map-filters {
	    padding: 0 1.66rem;
	}

}

@media (min-width: 900px) {

	.map-filters {
		/* match container sizing to allow left-alignment */
		width: 100%;
		max-width: 66.66rem;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1.5rem;

		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.map-filters-heading {
		position: absolute;
		width: 1px;
		height: 1px;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		margin: -1px;
		padding: 0;
		overflow: hidden;
	}

	/* don't allow this button to *ever* appear on large screens */
	.map-filters-close {
		display: none !important;
	}

}


/**
 * Filter Heading Button & Dropdown styles
 */
#portal-column-content .map-filter-group-toggle {
	margin-top: 0;
}

.map-filter-group-toggle button {
	display: flex;
	align-items: center;
	width: 100%;
	border-style: solid;
	border-color: transparent;
	padding: 1.25rem .5rem;
	border-bottom: solid #acacac;
	border-width: 1px 0;
	font-family: inherit;
	font-size: 17px;
	text-align: left;
}

.map-filter-group-toggle button:hover,
.map-filter-group-toggle button:active {
	background: transparent;
	color: inherit;
	border-bottom-color: #aaa;
	filter: none;
	outline: 0;
}

.map-filter-group-toggle button[aria-expanded="true"] {
	border-bottom-color: transparent;
}

.map-filter-group-toggle button::after {
	display: inline-block;
	float: right;
	content: '';
	width: 19px;
	height: 13px;
	margin-left: auto;
	background: url("/++theme++plonetheme.wta/images/svg/blue-arrow-down.svg") no-repeat;
	background-size: 100% auto;
	transition: .25s transform linear;
}
	.map-filter-group-toggle button[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

@media (min-width: 900px) {

	.map-filter-group-toggle button {
		padding: 2px 0;
		font-size: 15px;
		letter-spacing: 0;
		border-bottom-color: transparent;
	}

	.map-filter-group-toggle button::after {
		float: none;
		width: 14px;
		height: 9px;
		margin-left: .5em;
	}

	.map-filter-group-toggle button[aria-expanded="true"] {
		margin-bottom: 0;
	}

}

.map-filter-group-count {
	display: none;

	position: relative;
	width: 1rem;
	height: 1rem;
	font-size: 10px;
	line-height: 1rem;
	text-align: center;
	margin-left: .5em;
	color: #fff;
	border-radius: 1rem;
	background: #00547D;
}
	.map-filter-group-container.has-selections .map-filter-group-count {
		display: inline-block;
	}

.map-filter-group:not(#map-filter-group-hike-name-search) {
	display: none;
}
	.map-filter-group.is-open:not(#map-filter-group-hike-name-search) {
		display: block;
	}

/* Small Screen Styles */
@media (max-width: 899px) {

	.map-filter-group:not(#map-filter-group-hike-name-search) {
		max-height: none !important; /* overrides inline styles set by JS for wide screens */
		padding: 0 .5rem 1.5rem;
		border-bottom: 1px solid #aaa;
	}

}

@media (min-width: 900px) {

	.map-filter-group-container {
		position: relative;
		margin-right: 1.5rem;
		flex: 0 0 auto;
	}

	/*
		"arrow" attached to map filter group
		left outside of .map-filter-group so it's not hidden by overflow: auto;
	*/
	.map-filter-group-toggle button[aria-expanded="true"]::before {
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -15px;
		display: block;
		width: 0;
		height: 0;
		content: '';
		border: solid transparent;
		border-width: 0 15px 15px;
		border-bottom: 15px solid #F3F3F3;
	}

	.map-filter-group:not(#map-filter-group-hike-name-search) {
		position: absolute;
		top: 100%;
		margin-top: 15px; /* additional space for arrow */
		/*
		Old values, from when centered:
		left: 50%;
		margin-left: -172px;
		*/
		left: 0;
		width: 324px;
		padding: 1.75rem 1.75rem 0; /* apply button has bottom margin. avoids Firefox bug with overflow:auto, max-height, and padding */
		background-color: #F3F3F3;
		box-shadow: 0 2px 3px 0 rgba(72,72,72,0.5);
		overflow: auto;
		z-index: 98; /* 99 = global submenu */
	}

}


/**
 * Fieldsets & Filter Spacing
 */
.map-filters fieldset {
	position: relative; /* useful for hiding checkbox/radio button inputs */
	padding: 0;
	margin: 0;
	border: 0;
	line-height: inherit;
}

.map-filters fieldset::before,
.map-filters fieldset::after {
	display: none;
}

.map-filter + .map-filter {
	margin-top: 1rem;
}


/**
 * Legends & .map-filter Labels
 */
.map-filters legend,
.map-filter-rating > label,
.map-filter-mileage > label,
.map-filter-elevation-gain > label,
.map-filter-highpoint > label {
	display: block;
	color: var(--wta-green);
	text-transform: uppercase;
	font-family: 'Oswald', 'Trebuchet MS', sans-serif;
	letter-spacing: 1px;
	font-size: 1rem;
	font-weight: normal;
	margin-bottom: .5rem;
	padding-left: 0;
}

/**
 * Ratings Filter
 */
.map-filter-rating select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding: .33rem 3.33rem .33rem .66rem;
	line-height: 2;
	background: white url("/++theme++plonetheme.wta/images/svg/select-back.svg") right center no-repeat;
    border: 1px solid rgba(151, 151, 151, .5);
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
	.map-filter-rating select::-ms-expand {
		display: none;
	}


/**
 * Mileage & Elevation
 */
.noUi-horizontal .noUi-handle:hover {
	cursor: ew-resize;
}

.noUi-connect {
	border-radius: 0;
}

.noUi-horizontal {
	box-shadow: 1px 1px 1px #999 inset;
}

/*
 * Change design of handles to communicate lower/upper bounds visually a la Google Flights
 * Align inner edge with respective limit
 */
.noUi-horizontal .noUi-handle {
	width: 16px;
	border-width: 5px;
}

.noUi-horizontal .noUi-handle:focus,
.noUi-horizontal .noUi-handle:hover {
	background-color: #4A7628;
}

.noUi-horizontal .noUi-handle:focus {
	box-shadow: 0 0 1px 1px #999;
}

.noUi-horizontal .noUi-handle:active {
	background-color: var(--wta-green);
}

.noUi-horizontal .noUi-handle-lower {
	left: -16px;
	border-radius: 14px 0 0 14px;
}

.noUi-horizontal .noUi-handle-upper {
	left: 0;
	border-radius: 0 14px 14px 0;
}

/* Label the Handles */
.noUi-horizontal.pat-slider {
	margin-bottom: 2.5em;
}

.noUi-horizontal .noUi-handle-lower::before,
.noUi-horizontal .noUi-handle-upper::before {
	display: block;
	position: absolute;
	top: 100%;
	width: auto; /* make sure element contains text */
	margin-top: 8px; /* account for border of parent element */
	/* transform: translateX(-50%); */
	background: transparent;
	text-transform: uppercase;
	text-align: center;
	font-size: .8125rem;
	color: #444;
}

	.noUi-horizontal .noUi-handle-lower::before {
		content: 'Min';
		left: -8px;	/* not 100% sure why this number is what it is. 50% handle width? */
	}
	.noUi-horizontal .noUi-handle-upper::before {
		content: 'Max';
		left: -4px;
	}

.noUi-horizontal .noUi-handle-lower:focus::before,
.noUi-horizontal .noUi-handle-upper:focus::before {
	font-weight: bold;
	color: #000;
}

/* Bigger Slider Handles for small screens */
@media (max-width: 899px) {
	.pat-slider {
		width: 85%;
		margin: 55px auto 25px;
	}

	.noUi-horizontal .noUi-handle {
		width: 22px;
		height: 40px;
		top: -17px;
	}

	.noUi-horizontal .noUi-handle-lower {
		left: -22px;
		border-radius: 20px 0 0 20px;
	}

	.noUi-horizontal .noUi-handle-upper {
		border-radius: 0 20px 20px 0;
	}
}


/**
 * Sort Order
 */

/* Temporarily Hide this for v1 */
#map-filter-group-sort {
	display: none !important;
}

#map-filter-group-sort input[type="radio"] {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
	background-color: transparent;
	border: 0;
	outline: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	z-index: -999px;
}

#map-filter-group-sort input[type="radio"] + label {
	display: block;
	min-height: 1.25rem;
	padding: .25rem 1.5rem .25rem 2.5rem;
	margin-bottom: 0;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.75;
	cursor: pointer;
}

	#map-filter-group-sort input[type="radio"]:checked + label:before {
		display: inline;
		content: '✓';
		position: absolute;
		left: 1rem;
		font-weight: bold;
	}

@media (min-width: 900px) {

	#map-filter-group-sort .map-filter-group {
		width: 250px;
		margin-left: -125px;
		padding: 1rem 0 0;
	}

}


/**
 * Search Filter
 */
.map-filter-hike-name-search {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	display: flex;
}

.map-filter-hike-name-search input[type="search"] {
	box-sizing: border-box;
	width: 96%;
	line-height: 2;
	padding: .25rem .75rem;
	margin: 0 2%;
	border-radius: 5px;
	border: 0.5px solid rgba(151, 151, 151, .5);
	box-shadow: 0 2px 4px 0 rgba(182,182,182,0.5);
}
	/* apparently these only work when the selectors are split up */
	.map-filter-hike-name-search input[type="search"]:-moz-placeholder {
		color: #5f5f5f;
		font-style: italic;
	}
	.map-filter-hike-name-search input[type="search"]::-moz-placeholder {
		color: #5f5f5f;
		font-style: italic;
	}
	.map-filter-hike-name-search input[type="search"]::-webkit-input-placeholder {
		color: #5f5f5f;
		font-style: italic;
	}
	.map-filter-hike-name-search input[type="search"]::-ms-input-placeholder {
		color: #5f5f5f;
		font-style: italic;
	}
	.map-filter-hike-name-search input[type="search"]::placeholder {
		color: #5f5f5f;
		font-style: italic;
	}

.map-filter-hike-name-search button.map-filter-group-submit {
	display: none;
	width: auto;
	margin-top: 0;
	background: #4A7628;
	background-image: linear-gradient(180deg, #4A7628 0%, #003029 100%);
	border-radius: 5px;
	padding: .5rem 1rem;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: 1.25px;
	line-height: 2;
	color: #fff;
}

.map-filter-hike-name-search button.map-filter-group-submit:hover,
.map-filter-hike-name-search button.map-filter-group-submit:focus {
	background-image: linear-gradient(180deg, #003029 0%, #4A7628 100%);
}

@media (min-width: 900px) {

	.map-filter-hike-name-search {
		margin-top: 0;
		margin-bottom: 0;
	}

	.map-filter-hike-name-search input[type="search"] {
		width: auto;
		margin: 0 .35rem 0;
	}

	.map-filter-hike-name-search button.map-filter-group-submit {
		display: inline-block;
	}

}


/**
 * Submit Buttons
 *
 * Using button element selector for specificity
 */
button.map-filter-group-submit,
button.map-filters-submit-master {
	background-image: linear-gradient(-180deg, #006796 0%, #254663 100%);
	border-radius: 5px;
	text-transform: uppercase;
	line-height: 1.46rem;
	color: white;
	border-bottom: none;
	letter-spacing: 1.5px;
	padding: .66rem 1.33rem;
}

button.map-filter-group-submit:hover,
button.map-filters-submit-master:hover,
button.map-filter-group-submit:focus,
button.map-filters-submit-master:focus {
	background-image: linear-gradient(-180deg, #254663 0%, #006796 100%);
}

button.map-filter-group-submit {
	display: none;
}
@media (min-width: 900px) {

	button.map-filter-group-submit {
		display: block;
		width: 8em;
		margin: 1.5rem auto 1.75rem; /* mimic padding of container element. fixes Firefox bug */
	}

	.map-filter-hike-name-search .map-filter-group-submit {
		margin-bottom: 0;
	}

	button.map-filters-submit-master {
		display: none;
	}

}


/**
 * Map Filters Reset
 */
.map-filters-reset {
	display: none;
	margin-top: 1.5rem;
}

.map-filters.has-selections .map-filters-reset {
	display: inline-block;
	padding: .25rem .5rem;
	font-family: 'Trebuchet MS', sans-serif;
	font-weight: normal;
	line-height: 2;
	color: #00547D;
}
	.map-filters-reset::before {
		position: relative;
		top: .175rem;
		display: inline-block;
		content: '';
		width: 1rem;
		height: 1rem;
		margin-right: .125rem;
		border-radius: 1rem;
		background: #00547D url("/++theme++plonetheme.wta/images/svg/close.svg") center no-repeat;
		background-size: 60%; /* this seems to result in a good size in both Chrome & Firefox */
	}
	.map-filters-reset:hover,
	.map-filters-reset:focus,
	.map-filters-reset:active {
		background: transparent;
		border-radius: 3px;
	}

@media (min-width: 900px) {

	.map-filters-reset {
		margin-top: 0;
		margin-left: 1rem;
	}

}


/****************************************
 * "MAP RESULTS" (Map, sidebar, & hike details)
 ****************************************/
.map-results {
	position: relative;
	overflow: hidden;
}

#map {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#hike-finder-app-container:not(.is-loaded-map) .mapboxgl-canvas {
	z-index: -1;
}



/****************************************
 * HIKE DETAILS & RESULTS SHARED STYLES
 ****************************************/
.map-hike-details,
.map-hike-gallery {
	display: none;

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	padding: 1.66rem 1.66rem 0;
	background-color: #F3F3F3;
	overflow: auto;
	z-index: 97; /* below filter group dropdowns */
}

	.map-hike-details.is-open,
	.map-hike-gallery.is-open {
		display: block;
	}

.map-hike-details article {
	padding-bottom: 1.66rem; /* on child to avoid Firefox overflow bug */
}

.map-hike-details,
.map-hike-gallery {
	padding-top: 4.66rem;
}

.map-hike-details::before,
.map-hike-gallery::before {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	content: '';
	height: 3rem;
	background: #f3f3f3;
	box-shadow: 0 1px 3px #acacac;
	z-index: 2;
}

.map-hike-details-back,
.map-hike-details-close,
.map-hike-gallery-close {
	position: fixed;
	top: 0;
	left: 1.66rem;
	height: 3rem;
	z-index: 2;
}

@media (min-width: 900px) {

	.map-hike-details,
	.map-hike-gallery {
		position: absolute;
	}

	.map-hike-details {
		padding-top: 4.66rem;
	}

	.map-hike-details::before {
		position: absolute;
		height: 3rem;
		margin-left: .75rem;
		margin-right: .75rem;
		border-bottom: 1px solid #acacac;
		box-shadow: none;
	}

	.map-hike-gallery {
		padding-top: 1.66rem;
	}
	.map-hike-gallery::before {
		display: none;
	}

	.map-hike-details-back,
	.map-hike-details-close {
		position: absolute;
	}
	button.map-hike-gallery-close {
		display: none;
	}

}


/****************************************
 * HIKE DETAILS
 ****************************************/
button.map-hike-details-back {
	display: none;
}

	.map-hike-gallery.is-open + .map-hike-details button.map-hike-details-back {
		display: inline-block;
		display: flex;
	}
	.map-hike-gallery.is-open + .map-hike-details button.map-hike-details-close {
		display: none;
	}

@media (min-width: 900px) {

	button.map-hike-details-close {
		display: none;
	}

	button.map-hike-details-back {
		display: inline-block;
		display: flex;
	}

}

.map-hike-details-title-link {
	font-family: 'EgyptienneURWNar-Med', serif;
	font-size: 2.13rem;
	line-height: 2.13rem;
	color: #00557B;
	letter-spacing: 0;
	text-decoration: underline;
	text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

.map-hike-details-title-link:hover {
	text-decoration: none;
	color: #00557B;
}

.map-hike-details-region {
	margin: .5rem 0 .75rem;
	font-family: 'Oswald', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #999;
}

/* Hike Meta in Hike Details Panel */
.map-hike-details .hike-meta span {
	margin-bottom: .1em;
}

.map-hike-details .hike-meta,
.map-hike-details-reports-count {
	font-weight: bold;
	color: #000;
	line-height: 1.33rem;
}

.map-hike-details-reports-count,
.map-hike-details .hike-gain,
.map-hike-details .hike-peak {
	display: inline-block;
}

.map-hike-details .hike-rating {
	display: flex;
	align-items: center;
}

.map-hike-details .hike-rating .Rating {
	position: relative;
	width: 99px;
	margin-left: .25rem;
	margin-right: .5rem;
	min-height: 14px;
	flex: 0 0 auto;
}

.map-hike-details .hike-rating .star-rating,
.map-hike-details .hike-rating .current-rating {
	background: transparent;
	min-height: 14px;
	margin-left: 0;
}

.map-hike-details .star-rating::before,
.map-hike-details .current-rating::before {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -7px; /* vertical centering */
	bottom: 0;
	width: 100%;
	height: 14px;
	background: transparent url("/++theme++plonetheme.wta/images/svg/trail-icons/stars.svg") repeat-x;
	background-size: 20px 34px;
}

.map-hike-details .current-rating::before {
	background-position: 0 -20px;
}

.map-hike-details .rating-count {
	color: #666;
	font-weight: normal;
	font-size: 13px;
}

.map-hike-details-description,
.map-hike-details-warnings,
.map-hike-details-reports {
	margin: 1rem 0;
	font-size: 13px;
	line-height: 1.5;
}

.map-hike-details a {
	text-decoration: underline;
}

.map-hike-details a:focus,
.map-hike-details a:hover {
	text-decoration: none;
}


@media (min-width: 900px) {

	.map-hike-details .hike-meta {
		font-size: .9375rem;
	}

}

.map-hike-details-warnings h3,
.map-hike-details-reports h3 {
	color: var(--wta-green);
	font-family: 'Oswald', 'Arial', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
}

.map-hike-details-reports-summary,
.map-hike-details-reports-count {
	color: #666;
}

.map-hike-details-warnings {

}

.map-hike-details-warnings ul {
	margin-top: 1em;
}

.map-hike-details-warnings ul li {
	display: block;
	position: relative;
	padding-left: 1.5em;
	margin-bottom: .25em;
}

.map-hike-details-warnings ul li::before {
	display: block;
	content: '';
	position: absolute;
	top: .2em;
	left: 0;
	width: 1em;
	height: 1em;
	background-size: 90% auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.map-hike-details-warnings ul li.warning-orange::before {
	background-image: url("/++theme++plonetheme.wta/images/svg/trail-icons/alert_orange.svg");
}
.map-hike-details-warnings ul li.warning-red::before {
	background-image: url("/++theme++plonetheme.wta/images/svg/trail-icons/alert_red.svg");
}

.map-hike-details-reports .warning-label {
	font-weight: bold;
}

.map-hike-details-reports {

}

.map-hike-details-reports ul {
	margin-top: 1em;
	margin-left: 1.5em;
}

.map-hike-details-reports ul li {
	display: list-item;
	margin-bottom: .25em;
}


/****************************************
 * HIKE GALLERY
 ****************************************/
/* Fallback two-columns */
@media screen and (min-width:375px) {
	.map-hike-gallery-list {
		overflow: hidden;
	}
	.map-hike-gallery-item {
		float: left;
		width: 48%;
		margin-bottom: 15px;
	}
	.map-hike-gallery-item:nth-child(odd) {
		clear: left;
		margin-right: 4%;
	}
}

/* Grid Two Columns */
@media screen and (min-width: 450px) {
	@supports (display:grid) {
		.map-hike-gallery-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 1.66em;
		}
		/* resets now that it's a grid child */
		.map-hike-gallery-list .map-hike-gallery-item {
			width: auto;
			float: none; /* Resolves Chrome bug. *Should* be ignored. */
			margin: 0;
		}
	}
}

/* THE CHECKBOX */
.map-move-update-container {
	/*
	Important note:
	 	This element is positioned relative to the SIDE PANEL (not the body)
	 	because the side panel has a `transform` rule.
	 	@see: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
	 */
	/* position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1; */

	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 .75rem .75rem;
	margin-top: -.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #bbb;
	/* background-color: #F3F3F3;
	border-top: 1px solid #979797;
	box-shadow: 0 -1px 3px rgba(118,118,118,0.3); */
}

.map-move-update-container > * {
	flex: 0 0 auto;
}

.map-move-update-label {
	margin-left: .25em;
	font-weight: normal;
	font-size: 14px;
	cursor: pointer;
}

/* PAGINATION */
.map-hike-gallery-paging {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
	padding-bottom: 1rem; /* use padding to avoid bug in Firefox */
}

.map-hike-gallery-paging-list {
	margin: 0;
	padding: 0;
}

.map-hike-gallery-paging-list li {
    display: inline-block;
}

.map-hike-gallery-paging-list a {
	padding: .5em;
}

.map-hike-gallery-paging-list a:hover,
.map-hike-gallery-paging-list a:focus {
	text-decoration: none;
}

.map-hike-gallery-paging-list a[aria-current="true"] {
	color: #444;
	font-weight: bold;
}

/* The ellipsis */
.map-hike-gallery-paging i {
	color: #777;
}

.map-hike-gallery-paging-previous,
.map-hike-gallery-paging-next {
	position: relative; /* allow 100% height of pseudo elements */
	display: flex;
	align-items: center;
}

.map-hike-gallery-paging-previous::before,
.map-hike-gallery-paging-next::after {
	display: inline-block;
	content: '';
	width: .5em;
	height: 100%;
	margin-right: .125em;
	background-image: url("/++theme++plonetheme.wta/images/svg/blue-arrow-left.svg");
	background-size: auto 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left;
}

.map-hike-gallery-paging-next::after {
	margin-left: .125em;
	margin-right: 0;
	background-image: url("/++theme++plonetheme.wta/images/svg/blue-arrow-right.svg");
	background-position: center right;
}

/* Hide Previous/Next buttons on First/Last page, respectively */
.showing-first-page .map-hike-gallery-paging-previous,
.showing-last-page .map-hike-gallery-paging-next {
	display: none;
}


/****************************************
 * SIDEBAR
 ****************************************/

@media screen and (min-width: 900px) {

	.map-side-panel {
		position: absolute;
		top: 0;
		height: 100%;
		left: 100%;
		width: 40%;
		min-width: 300px;
		max-width: 500px;
		transform: translateX(0%);
		transition: .5s transform ease-out;
		background-color: #F3F3F3;
		overflow: visible;
		z-index: 3; /* below filter group dropdowns */
		box-shadow: -3px 1px 4px 0 rgba(118,118,118,0.5);
	}
		.map-side-panel.is-open {
			transform: translateX(-100%);
		}

	button.map-side-panel-toggle {
		display: none;

		position: absolute;
		top: 0;
		right: calc( 100% - .5rem );
		width: 9rem;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.5rem 1rem 1rem;
		background: #4A7628;
		font-size: 1.25rem;
		color: #fff;
		box-shadow: -2px 2px 3px 0 rgba(118,118,118,0.4);
		transition: transform .125s;
	}
		button.map-side-panel-toggle:hover,
		button.map-side-panel-toggle:focus {
			background: #4A7628;
			transform: translateX(-.5em);
		}
		/* the arrow */
		button.map-side-panel-toggle::before {
			display: block;
			content: '';
			width: 14px;
			height: 22px;
			background: transparent no-repeat url("/++theme++plonetheme.wta/images/svg/white-arrow-left.svg") center / 100% auto;
			transition: transform .5s;
		}
		.map-side-panel.is-open button.map-side-panel-toggle::before {
			transform: rotate(180deg);
		}

	.is-loaded-map button.map-side-panel-toggle {
		display: flex;
	}

}


/****************************************
 * INFOBOX
 ****************************************/
#portal-column-content .hike-finder-infobox .hike-title a {
	color: inherit;
	text-decoration: none;
}

	#portal-column-content .hike-finder-infobox .hike-title a:hover,
	#portal-column-content .hike-finder-infobox .hike-title a:focus {
		text-decoration: underline;
		color: inherit;
	}


/****************************************
 * SHAMEFUL HACKY MOBILE DETECTION
 * aka AT LEAST IT'S NOT A MAGIC NUMBER OR window.addEventListener('resize')...
 ****************************************/
/*
	1. 	Append <span id="map-size-detector" class="screen-reader-text" aria-hidden="true"></span>
		to end of #hike-finder-app-container
	2.	Need to know the fake "state" of the app, read "content" CSS property of this

	Ex:
	>	$('#map-size-detector').css('content');
	>	'"mobile"'
	Note: weird quotes included at least in jQuery
 */
#map-size-detector {
	content: 'mobile';
}
@media (min-width: 900px) {
	#map-size-detector {
		content: 'desktop';
	}
}


/****************************************
 * ANIMATIONS
 ****************************************/

/**
 * Pulse c/o animate.css: https://github.com/daneden/animate.css/blob/3b3cfc1ba0875425ee24b0979fa883f9343b2051/animate.css#L129
 * MIT License: https://github.com/daneden/animate.css/blob/5bde475149fbd345fc665508a17f66a97fcfe94c/LICENSE;
 * Copyright (c) 2018 Daniel Eden
 */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

/* Mobile-only hike details panel animation */
@media (max-width: 899px) {
	/* slide up animation for hike details IF results aren't showing */
	.map-hike-gallery:not(.is-open) + .map-hike-details {
		display: block;
		top: 100%;
		transition: top .5s ease-out;
	}

	.map-hike-gallery:not(.is-open) + .map-hike-details.is-open {
		top: 0;
	}

	/* fade in close buttons after the slide up animation */
	.map-hike-gallery:not(.is-open) + .map-hike-details .map-hike-details-close,
	.map-hike-gallery:not(.is-open) + .map-hike-details .map-hike-details-back,
	.map-hike-gallery:not(.is-open) + .map-hike-details::before {
		opacity: 0;
		transition: opacity .25s .5s ease-out;
	}

	.map-hike-gallery:not(.is-open) + .map-hike-details.is-open .map-hike-details-close,
	.map-hike-gallery:not(.is-open) + .map-hike-details.is-open .map-hike-details-back,
	.map-hike-gallery:not(.is-open) + .map-hike-details.is-open::before {
		opacity: 1;
	}
}