/* =======================================================================
   WyoHS Committees
   The page is a stock Beaver Builder Accordion module carrying the class
   .wyohs-committees, so the Society writes and edits the committee copy in
   the builder. This file only dresses that module as a row list in the
   site's idiom, and styles the roster the shortcodes print inside it.

   Typography comes through the --wyohs-* custom properties; sizes are px
   because the theme sets html font-size to 62.5%.
   ======================================================================= */

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

	/* The desktop block is built from these three, so the accordion is exactly
	   as wide as the two columns it holds and never wider. */
	--cm-measure: 700px;
	--cm-rail:    320px;
	--cm-gutter:  80px;
}

/* ---------- the rows ---------------------------------------------------- */

.wyohs-committees .fl-accordion-item {
	margin: 0;
	border: 0;
	border-bottom: 1px solid rgba(27, 58, 92, .25);
	background: transparent;
}

.wyohs-committees .fl-accordion-button {
	padding: 20px 44px 18px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.wyohs-committees .fl-accordion-button-label {
	margin: 0;
	padding: 0;
	font-family: var(--cm-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cm-ink);
}

.wyohs-committees .fl-accordion-item:hover .fl-accordion-button-label,
.wyohs-committees .fl-accordion-item-active .fl-accordion-button-label {
	color: var(--cm-ink);
}

/* The module ships a Font Awesome caret. A drawn chevron matches the ones on
   the Regions rows and the mega nav, and turns rather than swaps.

   Note the extra .fl-accordion-button in the selector. Beaver Builder strips
   the icon button with

       .fl-accordion-button button        { all: unset }
       .fl-accordion-button button:hover  { all: unset }
       .fl-accordion-button button:focus  { all: unset }

   all: unset wipes every property, display included, and an inline box cannot
   take a transform. The unstyled rule is two classes and a type and loses to
   two classes, but the :hover and :focus copies are two classes, a type and a
   pseudo-class and win, so the chevron collapsed to a bare corner the moment
   the pointer touched it and stayed collapsed while the button held focus.
   Three classes clears all three. */
.wyohs-committees .fl-accordion-button .fl-accordion-button-icon {
	position: absolute;
	right: 8px;
	top: 50%;
	width: .42em;
	height: .42em;
	margin: 0;
	padding: 0;
	border: 0;
	border-right: 2px solid var(--cm-ink);
	border-bottom: 2px solid var(--cm-ink);
	background: none;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
	font-size: 26px;
	opacity: .75;
}

.wyohs-committees .fl-accordion-button-icon::before,
.wyohs-committees .fl-accordion-button-icon i,
.wyohs-committees .fl-accordion-button-icon svg { display: none; }

.wyohs-committees .fl-accordion-item:hover .fl-accordion-button-icon { opacity: 1; }

.wyohs-committees .fl-accordion-item-active .fl-accordion-button-icon {
	transform: translateY(-20%) rotate(-135deg);
	opacity: 1;
}

.wyohs-committees .fl-accordion-button { position: relative; }

/* Focus. Two things are wrong with a ring here and both were on show: the icon
   is rotated 45 degrees, so an outline drawn on it turns with its box and reads
   as a blue diamond, and a ring on the row is a box around the whole width, so
   it puts a line above the committee name. Neither belongs in a page made of
   hairlines. The browser default is turned off and focus is shown the way the
   rest of the site shows a link: a sand underline, on the label, only for
   keyboard users. */
.wyohs-committees .fl-accordion-button .fl-accordion-button-icon,
.wyohs-committees .fl-accordion-button .fl-accordion-button-icon:hover,
.wyohs-committees .fl-accordion-button .fl-accordion-button-icon:focus,
.wyohs-committees .fl-accordion-button .fl-accordion-button-icon:focus-visible {
	outline: none;
}

.wyohs-committees .fl-accordion-button:has(.fl-accordion-button-icon:focus-visible) .fl-accordion-button-label {
	text-decoration: underline;
	text-decoration-color: var(--cm-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

.wyohs-committees .fl-accordion-button .fl-accordion-button-icon:focus-visible { opacity: 1; }

/* Beaver Builder writes its own colour and spacing for this module at
   .fl-node-<id> scope, which out-ranks a single class. These carry one extra
   class so the module defaults do not paint white boxes over the cream, and
   so the whole row is the click target rather than just the words. */
.wyohs-committees .fl-accordion-item .fl-accordion-button {
	display: block;
	width: 100%;
	padding: 20px 44px 18px 0;
	background: transparent;
	background-color: transparent;
}

.wyohs-committees .fl-accordion-item .fl-accordion-content {
	padding: 4px 0 30px;
	background: transparent;
	background-color: transparent;
}

/* ---------- the opened writeup ------------------------------------------ */

.wyohs-committees .fl-accordion-content {
	padding: 4px 0 30px;
	background: transparent;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-committees .fl-accordion-content > *:first-child { margin-top: 0; }
.wyohs-committees .fl-accordion-content > *:last-child { margin-bottom: 0; }

.wyohs-committees .fl-accordion-content p,
.wyohs-committees .fl-accordion-content li {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.65;
}

.wyohs-committees .fl-accordion-content ol,
.wyohs-committees .fl-accordion-content ul { padding-left: 1.3em; }
.wyohs-committees .fl-accordion-content li { margin: 0 0 .6em; }
.wyohs-committees .fl-accordion-content li::marker { color: var(--cm-accent); }

.wyohs-committees .fl-accordion-content a {
	color: var(--cm-ink);
	text-decoration: underline;
	text-decoration-color: var(--cm-accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* =======================================================================
   The roster, printed by [wyohs_committee_roster] and [wyohs_region_counties]
   ======================================================================= */

.wyohs-roster {
	display: grid;
	grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
	gap: 10px 26px;
	max-width: 68ch;
	margin: 1.6em 0 0;
	padding-top: 1.2em;
	border-top: 2px solid var(--wyohs-sand, #d2a56c);
}

.wyohs-roster dt {
	margin: 0;
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-navy, #1b3a5c);
	opacity: .72;
}

.wyohs-roster dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wyohs-ink, #1a1a1a);
}

/* Counties are a label list rather than prose, so they take the label voice. */
.wyohs-roster--regions dd {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wyohs-navy, #1b3a5c);
}

/* A name with a profile carries a badge through to its card on Staff and
   Board; a name without one is plain text and looks it. */
.wyohs-roster__person,
.wyohs-roster__person:visited {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	white-space: nowrap;
}

.wyohs-roster__person:hover { color: var(--wyohs-green, #4e9553); }

.wyohs-roster__person i {
	margin-left: .4em;
	font-size: .82em;
	color: var(--wyohs-sand, #d2a56c);
}

.wyohs-roster__plain { white-space: nowrap; }

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

@media (max-width: 781px) {
	.wyohs-committees .fl-accordion-button-label { font-size: 22px; }
	.wyohs-roster {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px 0;
	}
	.wyohs-roster dd { margin-bottom: 1em; }
}

@media (prefers-reduced-motion: reduce) {
	.wyohs-committees .fl-accordion-button-icon { transition: none; }
}

/* =======================================================================
   Panel headings, and the roster rail on desktop

   Current Members is printed by the shortcode and comes first in the markup,
   so on a phone it reads before the writeup. On desktop it floats into the
   space to the right of the prose, which is what was sitting empty.

   A float rather than a grid on .fl-accordion-content, deliberately: the
   accordion opens and closes by writing display straight onto that element,
   so any display we set in the stylesheet is either ignored or jams every
   panel open. Floating one child leaves the toggle alone.
   ======================================================================= */

.wyohs-committees .fl-accordion-content h4,
.wyohs-committees .fl-accordion-content .wyohs-panel__heading {
	margin: 0 0 16px;
	padding: 0 0 11px;
	border-bottom: 2px solid var(--cm-accent);
	font-family: var(--cm-display);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--cm-ink);
}

.wyohs-members { margin: 0 0 30px; }

/* The rule over the roster belongs to the heading now. */
.wyohs-members .wyohs-roster {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	max-width: none;
}

/* Every link in a panel takes the gold that already marks its underline and
   its badge, so a name and an address read as one kind of thing. */
.wyohs-committees .fl-accordion-content a,
.wyohs-committees .fl-accordion-content a:visited,
.wyohs-members .wyohs-roster__person,
.wyohs-members .wyohs-roster__person:visited {
	color: var(--cm-accent);
	text-decoration-color: var(--cm-accent);
}

/* An inline anchor is only as tall as its type: 20.5px on a 25.6px line at 16px.
   The gold underline is drawn 4px under the baseline, which puts it a hair below
   that box, so a click aimed at the underline (which is the part the eye goes to)
   lands on the list and does nothing. Vertical padding on an inline box grows the
   hit area without moving a single line of type; it is weighted downward so the
   underline falls inside the link and the box still stops short of the next line. */
.wyohs-members .wyohs-roster__person,
.wyohs-committees .fl-accordion-content a { padding: 3px 0 5px; }

.wyohs-committees .fl-accordion-content a:hover,
.wyohs-members .wyohs-roster__person:hover {
	color: var(--wyohs-green, #4e9553);
	text-decoration-color: var(--wyohs-green, #4e9553);
}

/* wpautop wraps a standalone shortcode in a paragraph, and a block element
   inside it splits that paragraph into two empty halves. */
.wyohs-committees .fl-accordion-content p:empty { display: none; }

.wyohs-committees .fl-accordion-content::after {
	content: "";
	display: block;
	clear: both;
}

@media (min-width: 992px) {
	/* The cap goes on .fl-accordion, not on the module: the intro column this
	   module sits in zeroes .fl-module margins with !important, so auto margins
	   never take there. */
	.wyohs-committees .fl-accordion {
		max-width: calc(var(--cm-measure) + var(--cm-gutter) + var(--cm-rail));
		margin-left: auto;
		margin-right: auto;
	}

	.wyohs-committees .fl-accordion-content { max-width: none; }

	.wyohs-committees .fl-accordion-content .wyohs-members {
		float: right;
		width: var(--cm-rail);
		margin: 0 0 30px var(--cm-gutter);
	}

	.wyohs-committees .fl-accordion-content p,
	.wyohs-committees .fl-accordion-content li { max-width: var(--cm-measure); }

	/* In a rail the label reads better over the names than beside them. */
	.wyohs-members .wyohs-roster {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px 0;
	}
	.wyohs-members .wyohs-roster dd { margin-bottom: 15px; }
	.wyohs-members .wyohs-roster dd:last-of-type { margin-bottom: 0; }
}