:root {
	--site-color-white: white;
	--site-color-black: black;
	--site-color-burnt-orange: #D83F22;
	--site-color-bright-orange: #ff3300;
	--site-color-sunset-orange: #FF9A07;
	--site-color-slate-grey: #585757;
	--site-color-leaf-green: #76BB5F;
	/* --site-foodflows-gradient: linear-gradient(212.05deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%); */
	--site-foodflows-gradient: linear-gradient(188deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%);
	--site-font: 'Poppins', sans-serif;
	--site-text-color-primary: white;
	--site-text-color-secondary: var(--site-color-slate-grey);
	--site-background-color-light: white;
	--site-background-color-dark: var(--site-color-burnt-orange);
}

* {
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

body {
	margin: 0;
	padding: 0;
	background: var(--site-background-color-light);
	font-family: var(--site-font);
	font-weight: normal;
	font-size: 1.4rem;
	color: var(--site-text-color-primary);
}

#page-wrapper {
	display: grid;
	grid-template-rows: 60px auto;
	grid-template-columns: auto;
	grid-template-areas:
		"header"
		"main";
	grid-gap: 0;
	gap: 0;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	#page-wrapper {
		grid-template-rows: 80px auto;
	}
}

/* h1 { font-size: 4.8rem; margin: 1rem 0; font-weight: bold; }
h2 { font-size: 3.2rem; margin: 1rem 0; font-weight: bold; }
h3 { font-size: 2.4rem; margin: 1rem 0; font-weight: bold; }
h4 { font-size: 1.8rem; margin: 1rem 0; font-weight: bold; }
h5 { font-size: 1.6rem; margin: 1rem 0; font-weight: bold; }
h6 { font-size: 1.5rem; margin: 1rem 0; font-weight: bold; } */

h1 { font-size: 3.2rem; margin: 0 0 1.5rem 0; font-weight: bold; }
h2 { font-size: 2.4rem; margin: 0 0 1.5rem 0; font-weight: bold; }
h3 { font-size: 1.8rem; margin: 0 0 1.5rem 0; font-weight: bold; }
h4 { font-size: 1.7rem; margin: 0 0 1.5rem 0; font-weight: bold; }
h5 { font-size: 1.6rem; margin: 0 0 1.5rem 0; font-weight: bold; }
h6 { font-size: 1.5rem; margin: 0 0 1.5rem 0; font-weight: bold; }

p {
	/* margin: 2rem 0; */
	margin: 0.5rem 0 2rem 0;
}

p:last-child {
	margin-bottom: 0.5rem;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute!important;
	width: 1px!important;
	height: 1px!important;
	padding: 0!important;
	margin: -1px!important;
	overflow: hidden!important;
	clip: rect(0,0,0,0)!important;
	white-space: nowrap!important;
	border: 0!important;
}

.hidden {
	/* display: none; */
	opacity: 0!important;
	transition: all 0.3s linear;
}

.hidden[aria-hidden="true"] {
	display: none!important;
}

label {
	display: block;
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

select {
	border: 1px solid var(--site-color-burnt-orange);
	border-radius: 10px;
	background: var(--site-background-color-light);
	padding: 0.75rem 1.25rem;
	margin: 0;
	font-weight: bold;
	font-size: 1.5rem;
	color: var(--site-color-slate-grey);
}

select:hover,
select:focus {
	box-shadow: inset 0 1px 3px rgb(0 0 0 / 10%), 0 0 6px 5px rgb(255 255 255 / 50%)
}

select option {
	color: var(--site-color-black);
	background-color: var(--site-background-color-light);
}

.special-scrollbars {
	scrollbar-width: thin;
	scrollbar-color: var(--site-color-white) transparent;
}

.special-scrollbars::-webkit-scrollbar {
	width: 11px;
}

.special-scrollbars::-webkit-scrollbar-track {
	/* background: transparent; */
	background: rgba(255,255,255,0.15);
	border-radius: 10px;
}

.special-scrollbars::-webkit-scrollbar-thumb {
	background-color: var(--site-color-white);
	border-radius: 10px;
	border: 3px solid transparent;
}


a:not(.btn),
a:not(.btn):link,
a:not(.btn):visited {
	color: var(--site-text-color-primary);
	font-weight: bold;
	text-decoration: underline;
}

a:not(.btn):hover,
a:not(.btn):focus,
a:not(.btn):active {
	color: var(--site-text-color-primary);
	text-decoration: none;
}

button,
.btn {
	/* display: inline-block; */
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/* width: max-content; */
	/* flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start; */
	width: auto;
	max-width: calc(100% - 6px);
	/* text-align: left; */


	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.3;
	text-align: center;
	/* text-transform: uppercase; */
	text-decoration: none;
	vertical-align: middle;
	background-color: var(--site-background-color-light);
	color: var(--site-text-color-secondary);
	min-height: 2rem;
	padding: 1rem 2rem;
	/* border: 1px solid var(--site-foodflows-gradient); */
	/* border-radius: 50px; */

	/* position: relative;
	box-sizing: border-box;
	background-clip: padding-box; */
	/* Important! */
	/* border: solid 5px transparent; */
	
	border: 1px solid transparent;
	border-radius: 15px;
	text-align: center;
	position: relative;
	margin: 3px;

	/* box-sizing: border-box;
	margin: 1rem auto 2rem;
	padding: 0.25rem 0.75rem;
	background: linear-gradient(#fff, #fff), 
				linear-gradient(212.05deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%);
	border: 2px solid transparent;
	background-repeat: no-repeat;
	background-origin: padding-box, border-box;

	border-radius: 12px;
	border-width: 8px;
	position: relative; */
}

button:before,
.btn:before {
	/* content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: -5px; */
	/* Important! */
	/* border-radius: inherit; */
	/* Important! */
	/* background: var(--site-foodflows-gradient); */
	/* background: linear-gradient(212.05deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%); */

	content: "";
	/* background: linear-gradient(212.05deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%); */
	background: linear-gradient(188deg,#D83F22 11.28%, #FF3300 48.88%, #FF9A07 88.13%);
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px;
	z-index: -1;
	border-radius: 17px;

	/* content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	border: 6px solid white;
	border-radius: 11px; */
}

button:not(:disabled):not(.disabled),
.btn:not(:disabled):not(.disabled) {
	cursor: pointer;
}

button.disabled,
button:disabled,
.btn.disabled,
.btn:disabled {
	cursor: not-allowed;
	color: var(--site-text-color-primary);
	background-color: var(--site-color-slate-grey);
	opacity: 1;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus {
	color: var(--site-text-color-primary);
	/* background-color: var(--site-color-burnt-orange); */
	background-color: var(--site-color-bright-orange);
}

button:hover:before,
button:focus:before,
.btn:hover:before,
.btn:focus:before {
	/* background: var(--site-color-burnt-orange); */
	background: var(--site-color-white);
}

.btn-secondary,
.selected > .btn {
	color: var(--site-text-color-primary);
	background-color: var(--site-color-burnt-orange);
}

.btn-secondary:before,
.selected > .btn:before {
	background: var(--site-color-burnt-orange);
}

.btn-secondary:hover,
.btn-secondary:focus,
.selected > .btn:hover,
.selected > .btn:focus {
	color: var(--site-text-color-primary);
	background-color: var(--site-color-bright-orange);
}

.btn-secondary:hover:before,
.btn-secondary:focus:before,
.selected > .btn:hover:before,
.selected > .btn:focus:before {
	background: var(--site-color-bright-orange);
}

button svg,
.btn svg {
	vertical-align: inherit;
	margin-right: 1rem;
}

button svg use,
button svg path,
button svg polygon,
button svg rect,
button svg circle,
.btn svg use,
.btn svg path,
.btn svg polygon,
.btn svg rect,
.btn svg circle {
	fill: var(--site-text-color-secondary);
}

button:hover svg use,
button:focus svg use,
button:hover svg path,
button:focus svg path,
button:hover svg polygon,
button:focus svg polygon,
button:hover svg rect,
button:focus svg rect,
button:hover svg circle,
button:focus svg circle,
.btn:hover svg use,
.btn:focus svg use,
.btn:hover svg path,
.btn:focus svg path,
.btn:hover svg polygon,
.btn:focus svg polygon,
.btn:hover svg rect,
.btn:focus svg rect,
.btn:hover svg circle,
.btn:focus svg circle {
	fill: var(--site-text-color-primary);
}

.btn img,
button img {
	max-width: 33%;
}

.btn img:last-child,
button img:last-child {
	margin-left: 2rem;
}

.btn img:first-child,
button img:first-child {
	margin-right: 2rem;
}

.btn-back {
	background-image: url('../images/arrow-back.svg');
	background-position: 1.5rem center;
	background-repeat: no-repeat;
	text-align: left;
	padding-left: 4rem;
}

.btn-sm {
	font-size: 1.2rem;
	line-height: 1;
	border-radius: 8px;
	padding: 0.2em 0.6em;
}

.btn-sm:before {
	border-radius: 11px;
}

.btn-large {
	font-size: 1.8rem;
	border-radius: 50px;
	padding: 1.5rem 2rem;
}

.btn-large:before {
	border-radius: 51px;
}

.btn-multiline {
	border-radius: 30px;
	padding: 1.5rem 2.5rem;
}

.btn-multiline:before {
	border-radius: 31px;
}

/* .btn-multiline {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: auto;
	max-width: 100%;
	text-align: left;
} */

.btn-fullwidth {
	width: calc(100% - 6px);
}

.btn-fullwidth.text-left {
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.btn-fullwidth.text-right {
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

table {
	border-collapse: collapse;
}

th, td {
	margin: 0;
	padding: 0.5em 1em;
}

table thead tr th {
	border-bottom: 2px solid var(--site-color-white);
}


dl {
	margin: 2rem 0;
}

dt {
	margin-top: 1.5rem;
	font-weight: bold;
}

dd {
	margin-top: 0rem;
	margin-inline-start: 0;
}


.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.text-smaller { /* font-size: 1.2rem; */ font-size: 0.75em; }
.text-small { /* font-size: 1.3rem; */ font-size: 0.875em; }
.text-large { /* font-size: 1.6rem; */ font-size: 1.125em; }
.text-larger { /* font-size: 1.8rem; */ font-size: 1.25em; }

.highlight { color: var(--site-color-burnt-orange); }
.highlight-secondary { color: var(--site-color-bright-orange); }

button:focus .highlight,
button:hover .highlight,
.btn:focus .highlight,
.btn:hover .highlight {
	color: var(--site-color-white);
}

.loader {
	align-items: center;
	background: rgb(23, 22, 22,0.7);
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	transition: opacity 0.3s linear;
	width: 100%;
	z-index: 9999;
}

/* General svg styles */

/* Prevent SVG definitions and symbols from appearing on page */
.svg-defs {
	display: block;
	width: 0;
	height: 0;
}

/* Cross Shadow DOM for single-color images */
.svg-symbol path {
	fill: inherit;
}


/* General disclosure styles */
.disclosure-region {
	display: none;
}

header {
	grid-area: header;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: var(--site-background-color-light);
	height: 100%;
}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {
	
}

header .site-logo {
	height: 100%;
}

header .site-logo svg {
	height: 100%;
}

header nav {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Non-mobile menu styles */
header nav ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	list-style-type: none;
	margin: 0 1rem 0 0;
	padding: 0;

	display: none;
}

@media (min-width: 768px) {
	header nav ul {
		display: flex;
	}
}

header nav ul li {
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
}


main {
	grid-area: main;
	position: relative;
	background-color: var(--site-color-slate-grey);
	overflow: hidden;
	z-index: 0;
}

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: -1;
}

.map-overlay {
	background-color: var(--site-color-burnt-orange);
	/* width: -moz-fit-content;
	width: fit-content; */
	width: 90vw;
	margin: 2rem auto 0 auto;
	border-radius: 20px;
	z-index: 0;
	opacity: 1;
	transition: all 0.3s linear;
}

.map-overlay button h1 {
	margin: 0;
	white-space: nowrap;
	text-align: left;
}

.map-overlay button h2 {
	margin: 0;
	white-space: nowrap;
	text-align: left;
}

.map-overlay.map-overlay-secondary button h1,
.map-overlay.map-overlay-secondary button h2 {
	white-space: initial;
}

.map-overlay .map-overlay-contents {
	max-height: 75vh;
	overflow-x: hidden;
	overflow-y: auto;
}

@media (min-width: 768px) {
	.map-overlay {
		position: absolute;
		width: 35vw;
		max-width: max-content;
		margin: 0;
	}
	
	#main-info.map-overlay {
		top: 2rem;
		left: 2rem;
	}
	
	#map-options.map-overlay {
		top: 2rem;
		right: 2rem;
	}
	
	#map-legend.map-overlay {
		bottom: 2rem;
		right: 2rem;
		width: 60vw;
	}
}

@media (min-width: 1024px) {
	.map-overlay {
		width: 30vw;
	}

	/* .map-overlay.map-overlay-secondary {
		width: 40vw;
	} */
	
	/* #map-legend.map-overlay {
		width: 30vw;
	} */
}

@media (min-width: 1364px) {
	.map-overlay {
		width: 400px;
	}
}


.map-overlay .disclosure-button {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 7px);
	border-radius: 19px;
}

.map-overlay .disclosure-button:before {
	border-radius: 20px;
}

.map-overlay .disclosure-button .svg-wrapper {
	margin: 0 0 0 1rem;
}

.map-overlay .disclosure-button svg {
	transform: rotate(0deg);
	transition: transform 0.4s ease-in-out;
	margin: 0;
}

.map-overlay .disclosure-button[aria-expanded="true"] svg {
	transform: rotate(180deg);
	transition: transform 0.4s ease-in-out;
}

.map-overlay .disclosure-button svg path,
.map-overlay .disclosure-button svg use {
	fill: url('#foodflows-gradient');
}


.map-overlay .disclosure-button:hover svg path,
.map-overlay .disclosure-button:focus svg path,
.map-overlay .disclosure-button:hover use,
.map-overlay .disclosure-button:focus use {
	fill: var(--site-color-white);
}

.map-overlay .disclosure-button h1 + div svg {
	width: 31px;
	height: 30px;
}

.map-overlay .disclosure-button h2 + div svg {
	width: 26px;
	height: 25px;
}

.map-overlay.map-overlay-secondary .disclosure-button {
	color: var(--site-color-white);
	background-color: var(--site-color-burnt-orange);
}

.map-overlay.map-overlay-secondary .disclosure-button:before {
	background: var(--site-color-burnt-orange);
}

.map-overlay.map-overlay-secondary .disclosure-button:hover,
.map-overlay.map-overlay-secondary .disclosure-button:focus {
	background-color: var(--site-color-bright-orange);
}

.map-overlay.map-overlay-secondary .disclosure-button:hover:before,
.map-overlay.map-overlay-secondary .disclosure-button:focus:before {
	background: var(--site-color-bright-orange);
}

.map-overlay.map-overlay-secondary > .disclosure-button[aria-expanded="true"] {
	border-radius: 20px 20px 0 0;
}

.map-overlay.map-overlay-secondary > .disclosure-button[aria-expanded="true"]:before {
	border-radius: 19px 19px 0 0;
}

.map-overlay.map-overlay-secondary .disclosure-button svg path,
.map-overlay.map-overlay-secondary .disclosure-button use {
	fill: var(--site-color-white);
}

.map-overlay > .disclosure-region {
	padding: 0 0 1.5rem 0;
}

/* .map-overlay > .disclosure-region:last-child {
	border-radius: 0 0 19px 19px
} */

/* .map-overlay .disclosure-region > h1,
.map-overlay .disclosure-region > h2,
.map-overlay .disclosure-region > h3,
.map-overlay .disclosure-region > h4,
.map-overlay .disclosure-region > h5,
.map-overlay .disclosure-region > h6,
.map-overlay .disclosure-region > p,
.map-overlay .disclosure-region > table,
.map-overlay .disclosure-region > ul,
.map-overlay .disclosure-region > ol,
.map-overlay .disclosure-region > .content-section { */
/* .map-overlay .disclosure-region > *:not(.disclosure-button) { */
.map-overlay .disclosure-region > .content-section,
.map-overlay .map-overlay-contents > .content-section {
	/* margin: 2rem; */
	padding: 1rem 2rem;
}

.map-overlay .disclosure-region > p:last-child,
.map-overlay .disclosure-region > .content-section:last-child {
	/* Already have 1rem padding at bottom of .disclosure-region */
	margin-bottom: 1rem;
}

.map-overlay .disclosure-region.disclosure-expanded {
	display: block;
}

/* .map-overlay.map-overlay-secondary .disclosure-region {
	border-top: 1px solid var(--site-color-white);
} */

.map-overlay .disclosure-region .disclosure-button {
	justify-content: flex-start;
	border-radius: 0;
}

.map-overlay.map-overlay-secondary .disclosure-region .disclosure-button:before,
.map-overlay.map-overlay-secondary .disclosure-region .disclosure-button + .disclosure-region,
.map-overlay.map-overlay-secondary .disclosure-region:first-of-type,
.map-overlay.map-overlay-secondary .content-section + .content-section {
	border-top: 1px solid var(--site-color-white);
}

.map-overlay .disclosure-region .disclosure-button,
.map-overlay .disclosure-region .disclosure-button:hover,
.map-overlay .disclosure-region .disclosure-button:focus,
.map-overlay .disclosure-region .disclosure-button:before,
.map-overlay .disclosure-region .disclosure-button:hover:before,
.map-overlay .disclosure-region .disclosure-button:focus:before {
	border-radius: 0;
}

.map-overlay .disclosure-region .disclosure-button svg {
	margin-right: 1rem;
	margin-left: 0;
}


/* Explore County page */

.map-overlay .map-overlay-contents .content-section.link-back {
	padding: 0;
}

.map-overlay .map-overlay-contents .content-section.link-back .btn {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	color: var(--site-text-color-primary);
	background-color: var(--site-color-burnt-orange);
	border-radius: 0;
}

.map-overlay .map-overlay-contents .content-section.link-back .btn:before {
	background: var(--site-color-burnt-orange);
	border-radius: 0;
}

.map-overlay .map-overlay-contents .content-section.link-back .btn:hover,
.map-overlay .map-overlay-contents .content-section.link-back .btn:focus {
	background-color: var(--site-color-bright-orange);
}

.map-overlay .map-overlay-contents .content-section.link-back .btn:hover:before,
.map-overlay .map-overlay-contents .content-section.link-back .btn:focus:before {
	background-color: var(--site-color-bright-orange);
}

.map-overlay .map-overlay-contents .content-section.link-back svg {
	color: var(--site-text-color-primary);
	margin-right: 1rem;
}

.map-overlay .map-overlay-contents .content-section.link-back svg use {
	fill: var(--site-text-color-primary);
}

#explore-county-download {
	margin-top: 3rem;
}

.select-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	grid-gap: 1rem 2rem;
	gap: 1rem 2rem;
}

.legend-container {
	/* display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start; */
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 1fr auto;
	grid-gap: 0.25rem 2rem;
	gap: 0.25rem 2rem;
	grid-auto-flow: column;
}

.legend-container h3 {
	margin: 0;
	font-size: 1.5rem;
}

.legend-container ul {
	list-style: none;
	list-style-type: none;
	margin: 0.25rem 0;
	padding: 0;
}

.legend-container ul li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.legend-label {
	font-size: 1.2rem;
	line-height: 1.1;
}

.legend-color-wrapper {
	display: block;
	flex: none;
	margin: 0;
	padding: 0;
}

.legend-color {
	display: block;
	flex: none;
	border-radius: 3px;
	height: 12px;
	width: 12px;
	margin-right: 5px;
	border: 1px solid var(--site-color-slate-grey);
}

#legend-inflow-1 .legend-color { background-color: #C3DFFF; }
#legend-inflow-2 .legend-color { background-color: #6FB1FF; }
#legend-inflow-3 .legend-color { background-color: #0075FF; }
#legend-inflow-4 .legend-color { background-color: #0040E5; }
#legend-inflow-5 .legend-color { background-color: #002583; }

#legend-outflow-1 .legend-color { background-color: #FFEB83; }
#legend-outflow-2 .legend-color { background-color: #FFC700; }
#legend-outflow-3 .legend-color { background-color: #FF9A07; }
#legend-outflow-4 .legend-color { background-color: #CA7800; }
#legend-outflow-5 .legend-color { background-color: #8B5300; }

#legend-bothflow-1 .legend-color { background-color: #B7E0A9; }
#legend-bothflow-2 .legend-color { background-color: #76BB5F; }
#legend-bothflow-3 .legend-color { background-color: #2EA806; }
#legend-bothflow-4 .legend-color { background-color: #1C7200; }
#legend-bothflow-5 .legend-color { background-color: #0E3800; }


.mapboxgl-popup-content {
	color: var(--site-text-color-secondary);
}