/* -----------------------------------------------------------------------
   WyoHS Contact page

   The page itself is stock Beaver Builder: Heading modules, Text Editor
   modules, one Accordion and one HTML module holding the form placeholder.
   This file only dresses them, so the Society edits the copy in the
   builder and never in the theme.

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

.wyohs-contact-block,
.wyohs-contact-accordion,
.wyohs-contact-form {
	--ct-ink:     var(--wyohs-navy, #1b3a5c);
	--ct-body:    var(--wyohs-ink, #1a1a1a);
	--ct-accent:  var(--wyohs-sand, #d2a56c);
	--ct-warm:    var(--wyohs-peach, #f6d7b3);
	--ct-serif:   var(--wyohs-serif, Georgia, serif);
	--ct-display: var(--wyohs-display, 'Arial Narrow', sans-serif);
	--ct-measure: 68ch;
}

/* ---------- address blocks ---------------------------------------------
   Authored as ordinary paragraphs in a Text Editor module. The label at
   the head of a line is a <strong>, which is what the builder's Bold
   button produces, so nobody has to remember a class to add a line.
   ----------------------------------------------------------------------- */

.wyohs-contact-block p {
	max-width: var(--ct-measure);
	margin: 0 0 .55em;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ct-body);
}

.wyohs-contact-block p:last-child { margin-bottom: 0; }

.wyohs-contact-block strong {
	display: inline-block;
	min-width: 8.5em;
	font-family: var(--ct-display);
	font-weight: 400;
	font-size: 14px;
	line-height: inherit;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-ink);
	opacity: .85;
}

.wyohs-contact-block a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* A block that should read as an aside rather than the main address. */
.wyohs-contact-block--aside p {
	font-size: 15px;
	opacity: .9;
}

/* ---------- the message form --------------------------------------------
   Forminator form 1460, rendered by the shortcode in HTML module
   0xslp3ajbuqt. Forminator ships its own look; everything below pulls it
   onto the site's type and colour without fighting the plugin's layout.
   The topic control is a select2 whose dropdown is appended to the body,
   so those two rules sit outside the component block on purpose.
   ----------------------------------------------------------------------- */

.wyohs-contact-form {
	max-width: 720px;
	margin: 0;
}

.wyohs-contact-form .forminator-row {
	margin-bottom: 22px;
}

.wyohs-contact-form .forminator-label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--ct-display);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.wyohs-contact-form .forminator-required {
	color: var(--ct-accent);
}

.wyohs-contact-form .forminator-description {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ct-body);
	opacity: .8;
}

.wyohs-contact-form .forminator-input,
.wyohs-contact-form .forminator-textarea,
.wyohs-contact-form .forminator-select .select2-selection {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(26, 26, 26, .3);
	border-radius: 0;
	background: #fffdf7;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ct-body);
	box-shadow: none;
}

.wyohs-contact-form .forminator-textarea {
	min-height: 170px;
	resize: vertical;
}

.wyohs-contact-form .forminator-input:focus,
.wyohs-contact-form .forminator-textarea:focus,
.wyohs-contact-form .select2-container--focus .select2-selection {
	border-color: var(--ct-ink);
	outline: 2px solid var(--ct-accent);
	outline-offset: 1px;
}

.wyohs-contact-form .forminator-select .select2-selection {
	display: flex;
	align-items: center;
	height: auto;
}

.wyohs-contact-form .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--ct-body);
}

.wyohs-contact-form .select2-selection__placeholder {
	color: rgba(26, 26, 26, .55);
}

.wyohs-contact-form .select2-selection__arrow {
	color: var(--ct-ink);
}

.wyohs-contact-form .forminator-button-submit {
	margin-top: 4px;
	padding: 14px 34px;
	border: 0;
	border-radius: 0;
	background: var(--ct-ink);
	font-family: var(--ct-display);
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-cream, #fff8e7);
	cursor: pointer;
	transition: background .18s ease;
}

.wyohs-contact-form .forminator-button-submit:hover,
.wyohs-contact-form .forminator-button-submit:focus {
	background: var(--ct-accent);
	color: var(--ct-body);
}

.wyohs-contact-form .forminator-response-message {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-left: 4px solid var(--ct-accent);
	background: rgba(246, 215, 179, .35);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ct-body);
}

.wyohs-contact-form .forminator-error-message {
	margin-top: 6px;
	font-size: 14px;
	color: #a4331f;
}

/* The topic dropdown is appended to the body, so it cannot be nested. */
.select2-container .select2-results__option {
	font-size: 16px;
	line-height: 1.45;
	color: #1a1a1a;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
	background: var(--wyohs-navy, #1b3a5c);
	color: var(--wyohs-cream, #fff8e7);
}

@media (max-width: 600px) {
	.wyohs-contact-form .forminator-input,
	.wyohs-contact-form .forminator-textarea,
	.wyohs-contact-form .forminator-select .select2-selection {
		font-size: 16px;
	}
}

/* ---------- who handles what -------------------------------------------
   A stock Accordion module carrying .wyohs-contact-accordion. The values
   below match /assets/committees.css so the two pages read as one site;
   if that file changes, change this with it.
   ----------------------------------------------------------------------- */

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

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

.wyohs-contact-accordion .fl-accordion-item .fl-accordion-button {
	display: block;
	width: 100%;
	padding: 18px 44px 16px 0;
	border: 0;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
}

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

/* The module ships a Font Awesome caret; a drawn chevron matches the rows
   on Committees and Regions, and turns rather than swaps. */
.wyohs-contact-accordion .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(--ct-ink);
	border-bottom: 2px solid var(--ct-ink);
	background: none;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
	font-size: 22px;
	opacity: .75;
}

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

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

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

.wyohs-contact-accordion .fl-accordion-item .fl-accordion-content {
	padding: 2px 0 26px;
	background: transparent;
	background-color: transparent;
	color: var(--ct-body);
}

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

.wyohs-contact-accordion .fl-accordion-content p,
.wyohs-contact-accordion .fl-accordion-content li {
	max-width: var(--ct-measure);
	font-size: 16px;
	line-height: 1.65;
}

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

.wyohs-contact-accordion .fl-accordion-content p:empty { display: none; }

/* ---------- people, printed by [wyohs_contact_people] -------------------- */

.wyohs-contact-people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px 40px;
	max-width: 900px;
	margin: 22px 0 0;
	padding: 22px 0 0;
	border-top: 2px solid var(--wyohs-sand, #d2a56c);
	list-style: none;
}

.wyohs-contact-people__item {
	margin: 0;
	padding: 0;
}

.wyohs-contact-people__name {
	display: block;
	font-family: var(--wyohs-serif, Georgia, serif);
	font-size: 21px;
	line-height: 1.25;
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: none;
}

.wyohs-contact-people__item:hover .wyohs-contact-people__name {
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.wyohs-contact-people__role {
	display: block;
	margin: 4px 0 6px;
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wyohs-navy, #1b3a5c);
	opacity: .8;
}

.wyohs-contact-people__email {
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wyohs-ink, #1a1a1a);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	word-break: break-word;
}

.wyohs-contact-people__empty {
	max-width: var(--ct-measure, 68ch);
	font-size: 16px;
}

/* ---------- section headings -------------------------------------------
   Stock Heading modules carrying .wyohs-contact__head. The values match the
   section heads on History of the Society so the two pages read alike.

   Spacing is padding, not margin: the column these modules sit in zeroes
   .fl-module margins with !important, so a margin here would never take.
   ----------------------------------------------------------------------- */

.wyohs-contact__head {
	padding: 58px 0 16px;
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-contact__head--first { padding-top: 34px; }

@media (max-width: 600px) {
	.wyohs-contact__head { padding-top: 44px; font-size: 28px; }
}