/* =======================================================================
   WyoHS Regions
   Shortcode [wyohs_regions], rendered by /inc/regions-page.php

   Typography and colour come from the theme's --wyohs-* custom properties,
   so this file names no font family of its own. Sizes are px because the
   Beaver Builder theme sets html font-size to 62.5% and rem values are then
   unpredictable, which is the same reason people.css uses px.

   The card idiom follows /staff-and-board: flat colour, serif name, a
   hairline rule below rather than a bar above, condensed uppercase
   supporting copy, navy for the opened state.
   ======================================================================= */

.wyohs-regions {
	--rg-ink:    var(--wyohs-navy, #1b3a5c);
	--rg-ground: var(--wyohs-cream, #fff8e7);
	--rg-warm:   var(--wyohs-peach, #f6d7b3);
	--rg-accent: var(--wyohs-sand, #d2a56c);
	--rg-serif:  var(--wyohs-serif, Georgia, serif);
	--rg-display: var(--wyohs-display, 'Arial Narrow', sans-serif);

	/* Four muted territory colours. Saturated map primaries would fight the
	   cream ground; these sit with it the way a printed county map does. */
	--rg-northwest: #2e6e7e;
	--rg-northeast: #8c5a2b;
	--rg-southwest: #4a6b3a;
	--rg-southeast: #6b3f5b;

	margin: 0;
	color: var(--rg-ink);
}

/* ---------- county finder ---------------------------------------------- */

.wyohs-regions__find {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 16px;
	/* shares the map’s measure so the field sits over its left edge */
	max-width: 860px;
	margin: 0 auto 22px;
}

.wyohs-regions__find label {
	font-family: var(--rg-display);
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-ink);
}

/* Underlined rather than boxed, so it reads as a line of type with a list
   behind it instead of a control dropped onto the page. */
.wyohs-regions__find select {
	flex: 0 1 280px;
	min-width: 200px;
	padding: 4px 26px 6px 2px;
	border: 0;
	border-bottom: 1px solid rgba(27, 58, 92, .45);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--rg-serif);
	font-size: 19px;
	line-height: 1.2;
	color: var(--rg-ink);
	cursor: pointer;
}

.wyohs-regions__find select:focus-visible {
	outline: none;
	border-bottom-color: var(--rg-ink);
	border-bottom-width: 2px;
	padding-bottom: 5px;
}

/* the chevron, drawn rather than fetched */
.wyohs-regions__find { position: relative; }
.wyohs-regions__select {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 280px;
}
.wyohs-regions__select select { flex: 1 1 auto; }
.wyohs-regions__select::after {
	content: '';
	position: absolute;
	right: 6px;
	bottom: 12px;
	width: .42em;
	height: .42em;
	border-right: 2px solid var(--rg-ink);
	border-bottom: 2px solid var(--rg-ink);
	transform: rotate(45deg);
	pointer-events: none;
}

.wyohs-regions__found {
	flex: 1 1 100%;
	margin: 0;
	min-height: 1.4em;
	font-family: var(--rg-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(27, 58, 92, .7);
}

/* ---------- map --------------------------------------------------------- */

/* The state is wider than it is tall, so left to itself the map grows past
   a screenful before the roster ever appears. Capped, it reads at a glance. */
.wyohs-regions__map { max-width: 860px; margin: 0 auto 38px; }

.wyohs-regions__map svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.wyohs-regions__area { cursor: pointer; }
.wyohs-regions__area:focus { outline: none; }

.wyohs-regions__area path {
	fill: var(--rg-fill, #9aa7b2);
	fill-opacity: .82;
	stroke: var(--rg-ground);
	stroke-width: 2.5;
	stroke-linejoin: round;
	transition: fill-opacity .18s ease;
}

.wyohs-regions__area[data-region="northwest"] { --rg-fill: var(--rg-northwest); }
.wyohs-regions__area[data-region="northeast"] { --rg-fill: var(--rg-northeast); }
.wyohs-regions__area[data-region="southwest"] { --rg-fill: var(--rg-southwest); }
.wyohs-regions__area[data-region="southeast"] { --rg-fill: var(--rg-southeast); }

.wyohs-regions__area--unassigned path { fill: #b9b2a6; cursor: default; }

.wyohs-regions__county {
	fill: var(--rg-ground);
	fill-opacity: .78;
	font-family: var(--rg-display);
	font-size: 15px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	pointer-events: none;
	transition: fill-opacity .18s ease;
}

/* lifting the whole region, never one county */
.wyohs-regions__area:hover path,
.wyohs-regions__area:focus-visible path,
.wyohs-regions__area.is-lit path { fill-opacity: 1; }

.wyohs-regions__area:hover .wyohs-regions__county,
.wyohs-regions__area:focus-visible .wyohs-regions__county,
.wyohs-regions__area.is-lit .wyohs-regions__county { fill-opacity: 1; }

.wyohs-regions__area:focus-visible path { stroke: var(--rg-ink); stroke-width: 4; }

/* once a region is chosen the others step back */
.wyohs-regions.has-selection .wyohs-regions__area:not(.is-lit) path { fill-opacity: .28; }
.wyohs-regions.has-selection .wyohs-regions__area:not(.is-lit) .wyohs-regions__county { fill-opacity: .5; }

/* ---------- roster ------------------------------------------------------ */

.wyohs-regions__panel {
	border-bottom: 1px solid rgba(27, 58, 92, .25);
	transition: background .18s ease;
}

.wyohs-regions .wyohs-regions__head {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: 0;
}

.wyohs-regions .wyohs-regions__trigger {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 18px;
	width: 100%;
	margin: 0;
	padding: 18px 44px 16px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	appearance: none;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	color: inherit;
}

/* The row is the control, so it needs to look like one. Down for closed, up
   for open, drawn rather than fetched and matching the mega nav's chevron. */
.wyohs-regions .wyohs-regions__trigger::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	width: .42em;
	height: .42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
	font-size: 26px;
	opacity: .75;
}

.wyohs-regions .wyohs-regions__trigger:hover::after { opacity: 1; }

.wyohs-regions__panel.is-open .wyohs-regions__trigger::after {
	transform: translateY(-20%) rotate(-135deg);
	color: var(--rg-warm);
	opacity: 1;
}

.wyohs-regions .wyohs-regions__trigger:hover,
.wyohs-regions .wyohs-regions__trigger:focus {
	background: none;
	box-shadow: none;
}

.wyohs-regions__name {
	font-family: var(--rg-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rg-ink);
}

/* Always its own line, rather than sitting beside the region name until a
   long one happens to push it down. Four rows that break the same way read
   as a list; four that break differently read as an accident. */
.wyohs-regions__lead {
	flex: 0 0 100%;
	font-family: var(--rg-display);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(27, 58, 92, .72);
}

.wyohs-regions__panel.is-lit .wyohs-regions__lead { color: var(--rg-ink); }

.wyohs-regions__body { display: none; }

/* opened: the people-page detail idiom, navy with a portrait beside it */
.wyohs-regions__panel.is-open {
	background: var(--rg-ink);
	border-bottom-color: transparent;
	margin-bottom: 2px;
	padding: 0 26px 30px;
}

.wyohs-regions__panel.is-open .wyohs-regions__trigger { padding: 30px 0 6px; }
.wyohs-regions__panel.is-open .wyohs-regions__name { color: #fff; font-size: 34px; }

/* Open, the roster line is redundant: the same two facts are set out below
   under their own label, so the head keeps the region name and the address. */
.wyohs-regions__panel.is-open .wyohs-regions__lead { display: none; }

/* One column, because the order now matters: counties, then how to reach the
   region, then who holds the seat, then their face. A measure keeps the lines
   from running the full width of the panel. */
.wyohs-regions__panel.is-open .wyohs-regions__body {
	display: block;
	max-width: 640px;
	padding-top: 8px;
	border-top: 0;
}

.wyohs-regions__panel.is-open .wyohs-regions__body > * { margin: 0 0 1.1em; }
.wyohs-regions__panel.is-open .wyohs-regions__body > *:last-child { margin-bottom: 0; }

/* The counties and the region’s address outlast any one trustee, so the rule
   sits under them: everything below it is what changes when the board does. */
.wyohs-regions__panel.is-open .wyohs-regions__body > .wyohs-regions__counties { margin-bottom: .5em; }

.wyohs-regions__email {
	padding-bottom: 1em;
	border-bottom: 2px solid var(--rg-accent);
	font-family: var(--rg-display);
	font-size: 17px;
	letter-spacing: .4px;
}

.wyohs-regions__email i {
	margin-right: .55em;
	font-size: .92em;
	color: var(--rg-accent);
}

.wyohs-regions__email a,
.wyohs-regions__email a:visited {
	color: var(--rg-warm);
	text-decoration: underline;
	text-decoration-color: var(--rg-accent);
	text-underline-offset: 4px;
}

.wyohs-regions__email a:hover { color: #fff; }

.wyohs-regions__portrait {
	width: 220px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
}

.wyohs-regions__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 0;
}

.wyohs-regions__counties {
	font-family: var(--rg-display);
	font-size: 17px;
	line-height: 1.45;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-warm);
}

.wyohs-regions__blurb {
	font-size: 16px;
	line-height: 1.65;
	color: #fff;
}

.wyohs-regions__rep {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wyohs-regions__rep-label {
	font-family: var(--rg-display);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-accent);
}

.wyohs-regions__rep-name {
	font-family: var(--rg-serif);
	font-size: 26px;
	line-height: 1.15;
	color: #fff;
}


.wyohs-regions__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-family: var(--rg-display);
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.wyohs-regions__contact a,
.wyohs-regions__contact a:visited {
	color: var(--rg-warm);
	text-decoration: underline;
	text-decoration-color: var(--rg-accent);
	text-underline-offset: 4px;
}

.wyohs-regions__profile::after { content: ' >'; font-size: .78em; vertical-align: .08em; }

.wyohs-regions__contact a:hover { color: #fff; }

.wyohs-regions__note {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.wyohs-regions__also {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	font-size: 16px;
	color: #fff;
}

.wyohs-regions__also span {
	font-family: var(--rg-display);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-accent);
}

.wyohs-regions__also a,
.wyohs-regions__also a:visited {
	color: var(--rg-warm);
	text-decoration: underline;
	text-decoration-color: var(--rg-accent);
	text-underline-offset: 4px;
}

/* The other three stay in the list rather than disappearing, so the way back
   is always on screen and the map is never the only way out. */

/* ---------- two columns on desktop --------------------------------------

   The map and its chooser take the left column, the roster the right, so a
   wide screen shows the whole state and every region at once instead of
   pushing the names below the fold. Hovering a row lights its territory, and
   at this width the two are finally side by side while it happens.

   Below this the file's own layout stands: chooser, map, roster, stacked.
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
	.wyohs-regions {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 48px;
		align-items: start;
	}

	/* The centred measure was there to stop the map filling a whole screen.
	   In a column the column is the measure, so both give it up. */
	/* Spans both columns: the chooser answers a question about the whole
	   page, not just the map beneath it. */
	.wyohs-regions__find {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-content: center;
		max-width: none;
		margin: 0 0 26px;
	}

	.wyohs-regions__map {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
		margin: 0;
	}

	/* Level with the map rather than with the chooser above it, so the first
	   region name and the top of the state start on the same line. */
	.wyohs-regions__roster {
		grid-column: 2;
		grid-row: 2;
	}

	/* The first row sits flush with the top of the map rather than starting
	   with the leading a stacked list wants. */
	.wyohs-regions__roster .wyohs-regions__panel:first-child .wyohs-regions__trigger {
		padding-top: 0;
	}

	.wyohs-regions__roster .wyohs-regions__panel:first-child.is-open .wyohs-regions__trigger {
		padding-top: 24px;
	}
}

/* ---------- narrow ------------------------------------------------------ */

@media (max-width: 781px) {
	.wyohs-regions__panel.is-open { padding: 0 18px 24px; }
	.wyohs-regions__panel.is-open .wyohs-regions__name { font-size: 28px; }
	.wyohs-regions__panel.is-open .wyohs-regions__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.wyohs-regions__portrait { width: 190px; }
	.wyohs-regions__county { font-size: 19px; letter-spacing: .8px; }
	.wyohs-regions__select { flex: 1 1 100%; }
}

/* On a phone the state is about 350px across, which puts county names near
   seven pixels. Below that width the map keeps its four territories and the
   roster underneath does the naming instead. */
@media (max-width: 520px) {
	.wyohs-regions__county { display: none; }
	.wyohs-regions__area path { stroke-width: 3.5; }
}

@media (prefers-reduced-motion: reduce) {
	.wyohs-regions__area path,
	.wyohs-regions__county,
	.wyohs-regions__panel { transition: none; }
}

/* ----------------------------------------------------------------------
   The Wind River Reservation

   Drawn over the counties rather than instead of them. The reservation is
   not a set of counties, and it changes no county's region: Fremont and
   Hot Springs stay where the term meta puts them. So it cannot take a
   region fill without saying something untrue about the lines underneath.
   A dashed navy edge over a light sand wash reads as a boundary laid on
   top, which is what it is.

   It is the last group in the SVG, so it paints above the counties with
   nothing set on stacking. Same rule for the fill-opacity lift on hover
   and when the roster row lights it, but from a lower resting opacity,
   because this shape has counties showing through it.
   ---------------------------------------------------------------------- */

.wyohs-regions__area--reservation path {
	fill: var(--wyohs-sand, #d2a56c);
	fill-opacity: .3;
	stroke: var(--wyohs-navy, #1b3a5c);
	stroke-width: 2.5;
	stroke-dasharray: 9 6;
	stroke-linejoin: round;
	transition: fill-opacity .18s ease;
}

.wyohs-regions__area--reservation:hover path,
.wyohs-regions__area--reservation:focus-visible path,
.wyohs-regions__area--reservation.is-lit path {
	fill-opacity: .62;
}

/* The reservation carries its own name, in navy rather than the ground
   colour the county names take, because it is drawn over them and has to
   read as a different sort of line on the map. Two lines because "Wind
   River Reservation" set on one would run past the boundary at this
   latitude. */
.wyohs-regions__reservation {
	fill: var(--wyohs-navy, #1b3a5c);
	font-family: var(--rg-display);
	font-size: 15px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	pointer-events: none;
}