/* -----------------------------------------------------------------------
   WyoHS Search

   Two surfaces share this file: the /search/ landing page, which is a
   Beaver Builder layout carrying [wyohs_search_form], and the results at
   /?s=, which are rendered by search.php.

   search.php writes its own markup rather than sitting inside a BB row, so
   the gutters and the measure are set here instead of by layout.css.

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

.wyohs-search,
.wyohs-search-form {
	--se-ink:     var(--wyohs-navy, #1b3a5c);
	--se-body:    var(--wyohs-ink, #1a1a1a);
	--se-accent:  var(--wyohs-sand, #d2a56c);
	--se-cream:   var(--wyohs-cream, #fff8e7);
	--se-serif:   var(--wyohs-serif, Georgia, serif);
	--se-display: var(--wyohs-display, 'Arial Narrow', sans-serif);
	--se-measure: 780px;
	--se-gutter:  20px;
}

/* ---------- the hero -----------------------------------------------------
   The site header is absolutely positioned and 207px tall, so every page
   needs its own clearance. This band supplies it.
   ----------------------------------------------------------------------- */

.wyohs-search__hero {
	background: var(--se-ink);
	padding: 232px var(--se-gutter) 58px;
	text-align: center;
}

.wyohs-search__hero-inner {
	max-width: var(--se-measure);
	margin: 0 auto;
}

.wyohs-search__eyebrow {
	margin: 0 0 14px;
	font-family: var(--se-display);
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--se-accent);
}

.wyohs-search__heading {
	margin: 0 0 30px;
	font-family: var(--se-serif);
	font-weight: 400;
	font-size: 54px;
	line-height: 1.1;
	color: #fff;
	overflow-wrap: break-word;
}

.wyohs-search__count {
	margin: 18px 0 0;
	font-family: var(--se-display);
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-peach, #f6d7b3);
}

/* ---------- the form, used in the hero and on the landing page ---------- */

.wyohs-search-form {
	display: flex;
	gap: 0;
	max-width: 560px;
	margin: 0 auto;
}

.wyohs-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 14px 18px;
	border: 2px solid var(--se-accent);
	border-right: 0;
	border-radius: 0;
	background: #fff;
	font-family: var(--se-serif);
	font-size: 18px;
	line-height: 1.3;
	color: var(--se-body);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.wyohs-search-form__field::placeholder {
	color: rgba(26, 26, 26, .5);
}

.wyohs-search-form__field:focus {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}

.wyohs-search-form__submit {
	flex: 0 0 auto;
	margin: 0;
	padding: 14px 26px;
	border: 2px solid var(--se-accent);
	border-radius: 0;
	background: var(--se-accent);
	font-family: var(--se-display);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--se-ink);
	cursor: pointer;
}

.wyohs-search-form__submit:hover,
.wyohs-search-form__submit:focus {
	background: var(--se-ink);
	border-color: var(--se-ink);
	color: var(--se-cream);
}

/* On the landing page the form sits on cream and reads left. */
.wyohs-search-page .wyohs-search-form { margin: 0; }

/* ---------- the results body -------------------------------------------- */

.wyohs-search__body {
	max-width: var(--se-measure);
	margin: 0 auto;
	padding: 46px var(--se-gutter) 90px;
}

/* Jump row: it names every section and how much is in it, which is also
   the answer to "why is the calendar first". */
.wyohs-search__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 44px;
}

.wyohs-search__jump-link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(27, 58, 92, .3);
	font-family: var(--se-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--se-ink);
	text-decoration: none;
}

.wyohs-search__jump-link:hover,
.wyohs-search__jump-link:focus {
	border-color: var(--se-ink);
	background: rgba(210, 165, 108, .22);
	color: var(--se-ink);
}

.wyohs-search__jump-count {
	font-size: 13px;
	opacity: .7;
}

.wyohs-search__section { margin: 0 0 52px; scroll-margin-top: 120px; }
.wyohs-search__section:last-child { margin-bottom: 0; }

.wyohs-search__section-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--se-accent);
	font-family: var(--se-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
	color: var(--se-ink);
}

.wyohs-search__section-count {
	font-family: var(--se-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	color: var(--se-ink);
	opacity: .65;
}

.wyohs-search__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wyohs-search__result {
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid rgba(27, 58, 92, .2);
}

.wyohs-search__result:last-child { border-bottom: 0; }

.wyohs-search__result-title {
	display: inline-block;
	font-family: var(--se-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.25;
	color: var(--se-ink);
	text-decoration: underline;
	text-decoration-color: var(--se-accent);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.wyohs-search__result-title:hover,
.wyohs-search__result-title:focus {
	color: var(--se-ink);
	text-decoration-color: var(--se-ink);
}

.wyohs-search__result-meta {
	margin: 6px 0 0;
	font-family: var(--se-display);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--se-ink);
	opacity: .75;
}

.wyohs-search__result-snippet {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--se-body);
}

.wyohs-search__result-snippet p { margin: 0; }

/* Relevanssi wraps hits in <mark>. */
.wyohs-search__result-snippet mark {
	background: rgba(210, 165, 108, .45);
	color: inherit;
	padding: 0 2px;
}

/* ---------- nothing found ------------------------------------------------ */

.wyohs-search__empty p {
	max-width: 62ch;
	margin: 0 0 1em;
	font-size: 17px;
	line-height: 1.65;
	color: var(--se-body);
}

.wyohs-search__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 22px 0 0;
	padding: 22px 0 0;
	border-top: 2px solid var(--se-accent);
	list-style: none;
}

.wyohs-search__suggestions a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(27, 58, 92, .3);
	font-family: var(--se-display);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--se-ink);
	text-decoration: none;
}

.wyohs-search__suggestions a:hover,
.wyohs-search__suggestions a:focus {
	border-color: var(--se-ink);
	background: rgba(210, 165, 108, .22);
}

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

@media (max-width: 782px) {
	.wyohs-search__hero { padding-top: 150px; padding-bottom: 44px; }
	.wyohs-search__heading { font-size: 38px; }
}

@media (max-width: 520px) {
	.wyohs-search__heading { font-size: 32px; }
	.wyohs-search-form { flex-wrap: wrap; gap: 10px; }
	.wyohs-search-form__field { flex: 1 1 100%; border-right: 2px solid var(--se-accent); }
	.wyohs-search-form__submit { flex: 1 1 100%; }
	.wyohs-search__section-head { font-size: 22px; }
}

/* ---------- the /search/ landing page ------------------------------------
   The form and this block sit in the intro column, whose .fl-module margins
   are zeroed with !important, so spacing here is padding.
   ----------------------------------------------------------------------- */

/* The module element itself is a .fl-module, and this column zeroes those
   margins with !important, so the measure is centred on the paragraph. */
.wyohs-search-browse {
	padding: 34px 0 0;
	text-align: center;
}

.wyohs-search-browse p {
	max-width: 640px;
	margin: 0 auto .5em;
	font-size: 16px;
	line-height: 1.8;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-search-browse p:last-child { margin-bottom: 0; }

.wyohs-search-browse strong {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-navy, #1b3a5c);
	opacity: .85;
}

.wyohs-search-browse a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* The same box row on the landing page, centred and held to the measure.
   Both places print it from [wyohs_search_browse]. */
.wyohs-search-browse .wyohs-search__suggestions {
	justify-content: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- prose links in the empty state and the 404 page ------------- */

.wyohs-search__empty p a {
	color: var(--se-ink);
	text-decoration: underline;
	text-decoration-color: var(--se-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wyohs-search__empty p a:hover,
.wyohs-search__empty p a:focus {
	text-decoration-color: var(--se-ink);
}