/* ==========================================================================
   WyoHS series introduction (rendered by [wyohs_category_intro])

   The lede sits centred at a readable measure under the page hero, the same
   idiom the Find a Speaker intro uses, with a single navy control under it.
   The full piece then opens either in a lightbox or in place — see
   /assets/category.js for which happens where.

   Body copy is plain Special Gothic (the wide cut), matching the rest of the
   site. The BB theme renders term descriptions at 16.8px in grey #757575;
   this pulls it back to the site's ink.

   Sizes are px on purpose: the BB theme sets html font-size to 62.5%.
   ========================================================================== */

.wyohs-catintro {
	--catintro-serif: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	--catintro-display: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	--catintro-sans: 'Special Gothic', 'Helvetica Neue', Arial, sans-serif;
	--catintro-navy: var(--wyohs-navy, #1b3a5c);
	--catintro-ink: var(--wyohs-ink, #1a1a1a);
	--catintro-cream: var(--wyohs-cream, #fff8e7);
	--catintro-measure: 860px;

	margin: 0 0 56px;
}

/* ---------- the lede ----------------------------------------------------- */

.wyohs-catintro__preview {
	max-width: var(--catintro-measure);
	margin: 0 auto;
	text-align: center;
}

.wyohs-catintro__preview p,
.wyohs-catintro__rest p,
.wyohs-catintro__dialog-body p {
	font-family: var(--catintro-sans);
	font-size: 16px;
	line-height: 1.62;
	color: var(--catintro-ink);
	margin: 0 0 1em;
}

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

/* ---------- the control -------------------------------------------------- */

.wyohs-catintro__actions {
	margin: 26px 0 0;
	text-align: center;
}

.wyohs-catintro .wyohs-catintro__toggle {
	display: inline-block;
	margin: 0;
	padding: 13px 30px 11px;
	border: 2px solid var(--catintro-navy);
	border-radius: 0;
	background: transparent;
	color: var(--catintro-navy);
	font-family: var(--catintro-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.wyohs-catintro .wyohs-catintro__toggle:hover,
.wyohs-catintro .wyohs-catintro__toggle:focus-visible {
	background: var(--catintro-navy);
	color: var(--wyohs-peach, #f6d7b3);
}

/* ---------- inline accordion (phones and tablets) ------------------------ */

/* When the rest is expanded in place it keeps the lede's measure but drops to
   the left, because centred text is fine for two paragraphs and hard work for
   eleven. */
.wyohs-catintro__rest {
	max-width: var(--catintro-measure);
	margin: 1em auto 0;
	text-align: left;
}

.wyohs-catintro__rest[hidden] { display: none; }

.wyohs-catintro__rest h2,
.wyohs-catintro__rest h3,
.wyohs-catintro__dialog-body h2,
.wyohs-catintro__dialog-body h3 {
	font-family: var(--catintro-serif);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--catintro-navy);
}

.wyohs-catintro__rest h2,
.wyohs-catintro__dialog-body h2 { font-size: 26px; line-height: 1.2; margin: 1.4em 0 .5em; }

.wyohs-catintro__rest h3,
.wyohs-catintro__dialog-body h3 { font-size: 21px; line-height: 1.25; margin: 1.3em 0 .5em; }

.wyohs-catintro__rest a,
.wyohs-catintro__dialog-body a {
	color: var(--catintro-navy);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.wyohs-catintro__rest img,
.wyohs-catintro__dialog-body img { max-width: 100%; height: auto; }

.wyohs-catintro__rest ul,
.wyohs-catintro__rest ol,
.wyohs-catintro__dialog-body ul,
.wyohs-catintro__dialog-body ol {
	font-family: var(--catintro-sans);
	font-size: 16px;
	line-height: 1.62;
	color: var(--catintro-ink);
	margin: 0 0 1em 1.3em;
}

/* ---------- lightbox (desktop) ------------------------------------------- */

.wyohs-catintro__dialog {
	width: min(760px, calc(100vw - 48px));
	max-height: min(84vh, 900px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.wyohs-catintro__dialog::backdrop {
	background: rgba(27, 58, 92, .72);
}

.wyohs-catintro__panel {
	position: relative;
	max-height: min(84vh, 900px);
	overflow-y: auto;
	padding: 52px 56px 48px;
	background: var(--catintro-cream);
	box-shadow: 0 24px 60px rgba(26, 26, 26, .35);
	text-align: left;
}

.wyohs-catintro .wyohs-catintro__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid var(--catintro-navy);
	border-radius: 0;
	background: transparent;
	color: var(--catintro-navy);
	font-family: var(--catintro-sans);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color .15s ease, color .15s ease;
}

.wyohs-catintro .wyohs-catintro__close:hover,
.wyohs-catintro .wyohs-catintro__close:focus-visible {
	background: var(--catintro-navy);
	color: var(--catintro-cream);
}

.wyohs-catintro .wyohs-catintro__dialog-title {
	margin: 0 0 .7em;
	padding: 0 44px 0 0;
	border: 0;
	font-family: var(--catintro-serif) !important;
	font-weight: 400 !important;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--catintro-navy) !important;
}

/* Inside the lightbox the copy reads left-aligned from the first line, so the
   repeated lede has to drop the centring it has on the page. */
.wyohs-catintro__dialog-body,
.wyohs-catintro__dialog-lede,
.wyohs-catintro__dialog-body .wyohs-catintro__rest {
	max-width: none;
	margin: 0;
	text-align: left;
}

.wyohs-catintro__dialog-lede p:last-child { margin-bottom: 1em; }

/* ---------- breakpoints -------------------------------------------------- */

@media (max-width: 992px) {
	.wyohs-catintro { margin-bottom: 44px; }
	.wyohs-catintro__preview { text-align: left; }
}

@media (max-width: 600px) {
	.wyohs-catintro { margin-bottom: 36px; }
	.wyohs-catintro .wyohs-catintro__toggle { padding: 12px 22px 10px; font-size: 16px; letter-spacing: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.wyohs-catintro .wyohs-catintro__toggle,
	.wyohs-catintro .wyohs-catintro__close { transition: none; }
}