/* -----------------------------------------------------------------------
   Oral History Database

   A remake of the Society's own Wyoming Oral History Online page. The words
   are theirs; the only thing this page adds is arrangement, and one picture.

   The database is the whole point, so it gets the Awards Manual panel: sand
   label bar, peach field, serif title, inline navy button, and a plate taken
   out of the flow lapping the panel's left edge. Everything else on the page
   is a Governing Documents row, because the three downloads are files and
   that is what the file row is for.

   Values are measured off awards.css and documents.css. They are re-stated
   rather than shared because those stylesheets load on other pages and
   nothing here should depend on them, which is the same call documents.css
   made about whn.css. If any of the three is restyled, look at the others.
   ----------------------------------------------------------------------- */

/* Page furniture --------------------------------------------------------
   Native Heading and Text Editor modules, rendered with include_wrapper
   false, so each class sits ON the element. They shrink-wrap as flex items
   unless width is set, and the horizontal margins have to be zeroed with
   it: the theme gives every module 20px of side margin above 992px and the
   percentage resolves against the column's content box, which overflows the
   document at 1200px. */

.wyohs-woho-page .wyohs-woho-page__head,
.wyohs-woho-page .wyohs-woho-page__note,
.wyohs-woho-page .wyohs-woho-page__body,
.wyohs-woho-page .wyohs-woho-page__panel,
.wyohs-woho-page .wyohs-woho-page__files,
.wyohs-woho-page .wyohs-woho-page__next-head {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wyohs-woho-page .wyohs-woho-page__head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
	max-width: 1160px;
	margin: 0 auto;
}

.wyohs-woho-page .wyohs-woho-page__note,
.wyohs-woho-page .wyohs-woho-page__body {
	max-width: 1160px;
	margin: 14px auto 0;
	text-align: left;
}

.wyohs-woho-page .wyohs-woho-page__note p,
.wyohs-woho-page .wyohs-woho-page__body p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.65;
	color: #5c5c5c;
	max-width: 72ch;
	margin: 0 0 16px;
}

.wyohs-woho-page .wyohs-woho-page__body p {
	font-size: 18px;
	line-height: 1.68;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-woho-page .wyohs-woho-page__note p:last-child,
.wyohs-woho-page .wyohs-woho-page__body p:last-child {
	margin-bottom: 0;
}

.wyohs-woho-page .wyohs-woho-page__body a,
.wyohs-woho-page .wyohs-woho-page__note a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 3px;
}

.wyohs-woho-page .wyohs-woho-page__next-head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
}

/* Where to go next: three Link Card instances in ONE Beaver Builder column,
   laid out by grid, because Beaver Builder deletes a column the moment it is
   empty. Copied from documents.css, where it was solved first. */

.wyohs-woho-page--cards .fl-col-group {
	display: block;
}

.wyohs-woho-page--cards .fl-col {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

.wyohs-woho-page--cards .fl-col-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}

.wyohs-woho-page--cards .fl-col-content > .wyohs-next {
	margin: 0;
	width: 100%;
}

/* The panel -------------------------------------------------------------
   Geometry is the Awards Manual panel, which is Wyoming History News's
   current-issue panel: the plate is taken out of the flow and laps the
   panel's left edge, so the bar and the field are both indented past it,
   and the whole composition is then shifted right by half the plate's total
   left overhang so it reads as centred.

   That nudge is 17px, not 18px as on the Awards Manual, and the difference
   is not arbitrary. The overhang is the 24px offset plus the wedge the tilt
   throws past the plate's own box, which is height x sin(3.4deg). The
   awards plate is a 791 x 1024 page and 389px tall at this width; this one
   is a 900 x 999 screen capture and 333px tall, so its wedge is 20px rather
   than 23px. **Change the plate, the width, the offset or the angle and
   this number has to be recomputed**, or the panel sits visibly off centre.
   ----------------------------------------------------------------------- */

.wyohs-woho {
	--woho-plate-w: 300px;
	--woho-plate-out: 24px;
	--woho-plate-gap: 30px;
	--woho-nudge: 17px;
	--woho-indent: calc(var(--woho-plate-w) - var(--woho-plate-out) + var(--woho-plate-gap));
	display: block;
	max-width: 1160px;
	margin: 0 auto;
	text-align: left;
}

/* The max-width subtracts the nudge, and that is not cosmetic. Once the
   panel is wide enough to fill the measure, `left` still pushes it right,
   so its right edge overshoots the column by the nudge while the plate
   stays put on the left: measured at 900px, 3px of clearance on the left
   and 17px of overshoot on the right. Taking the nudge out of the width
   makes the overhang symmetrical again, about 8px each side at 760 to
   900px, which is inside the page's 20px gutter and clips nothing. */

.wyohs-woho__panel {
	position: relative;
	left: var(--woho-nudge);
	width: fit-content;
	max-width: calc(100% - var(--woho-nudge));
	margin: 0 auto;
}

.wyohs-woho__plate {
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--woho-plate-out));
	z-index: 2;
	display: block;
	width: var(--woho-plate-w);
	transform: translateY(-50%) rotate(-3.4deg);
	transform-origin: 50% 50%;
	transition: transform .25s ease;
}

.wyohs-woho__plate-img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 2px 6px rgba(26, 26, 26, .22), 0 18px 40px rgba(26, 26, 26, .22);
}

.wyohs-woho__panel:hover .wyohs-woho__plate,
.wyohs-woho__panel:focus-within .wyohs-woho__plate {
	transform: translateY(calc(-50% - 5px)) rotate(-1.1deg);
}

.wyohs-woho__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 30px;
	padding: 11px 28px 11px var(--woho-indent);
	background: var(--wyohs-sand, #d2a56c);
}

.wyohs-woho__bar-label,
.wyohs-woho__bar-meta {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One'), 'Arial Narrow', sans-serif;
	font-size: 14px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: #4a2f14;
	white-space: nowrap;
}

.wyohs-woho__field {
	padding: 28px 34px 32px var(--woho-indent);
	background: var(--wyohs-peach, #f6d7b3);
}

.wyohs-woho__title {
	margin: 0;
	font-family: var(--wyohs-serif, 'Young Serif'), Georgia, serif;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-woho__teaser {
	max-width: 46ch;
	margin: 10px 0 0;
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 16px;
	line-height: 1.55;
	color: #3a2c1c;
}

.wyohs-woho__cta {
	display: inline-block;
	margin-top: 22px;
	padding: 13px 26px;
	background: var(--wyohs-navy, #1b3a5c);
	border: 0;
	font-family: var(--wyohs-display, 'Special Gothic Condensed One'), 'Arial Narrow', sans-serif;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wyohs-cream, #fff8e7);
	transition: background-color .18s ease;
}

.wyohs-woho__cta:hover,
.wyohs-woho__cta:focus-visible,
.wyohs-woho__panel:hover .wyohs-woho__cta {
	background: #14293f;
	color: var(--wyohs-cream, #fff8e7);
	text-decoration: none;
}

/* The three files -------------------------------------------------------
   Governing Documents rows. A download has no cover, so the same 64px box
   at the same 17/22 proportion carries the file type in Young Serif sand on
   navy. ACCDB is five characters and would set at 17px wider than the tile,
   so the tile's type steps down when the word is long. */

.wyohs-woho-files {
	--wf-rule: rgba(26, 26, 26, .22);
	--wf-hair: rgba(26, 26, 26, .12);
	--wf-quiet: #5c5c5c;
	max-width: 1160px;
	margin: 0 auto;
	text-align: left;
}

.wyohs-woho-files__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--wf-rule);
	border-bottom: 2px solid var(--wf-rule);
}

.wyohs-woho-files__item + .wyohs-woho-files__item {
	border-top: 1px solid var(--wf-hair);
}

.wyohs-woho-files__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 18px 16px 18px 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease;
}

a.wyohs-woho-files__link:hover,
a.wyohs-woho-files__link:focus-visible {
	background: rgba(246, 215, 179, .45);
	text-decoration: none;
}

.wyohs-woho-files__kind {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	aspect-ratio: 17 / 22;
	background: var(--wyohs-navy, #1b3a5c);
	border: 1px solid var(--wf-hair);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .14);
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 17px;
	line-height: 1;
	letter-spacing: -.3px;
	color: var(--wyohs-sand, #d2a56c);
}

.wyohs-woho-files__text {
	display: block;
	min-width: 0;
}

.wyohs-woho-files__title {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 22px;
	line-height: 1.25;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-woho-files__meta {
	display: flex;
	align-items: baseline;
	gap: 18px;
	white-space: nowrap;
}

.wyohs-woho-files__size {
	min-width: 62px;
	text-align: right;
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wf-quiet);
}

.wyohs-woho-files__chev {
	font-size: 22px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
	transition: transform .15s ease;
}

a.wyohs-woho-files__link:hover .wyohs-woho-files__chev {
	transform: translateX(3px);
}

.wyohs-woho-files__note {
	margin: 18px 0 0;
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--wf-quiet);
	max-width: 72ch;
}

/* Narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {

	.wyohs-woho-page--cards .fl-col-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 780px) {

	.wyohs-woho {
		--woho-plate-w: 220px;
		--woho-plate-gap: 22px;
		--woho-nudge: 15px;
	}

	.wyohs-woho__title {
		font-size: 28px;
	}
}

/* At phone width the plate comes back into the flow and sits above the
   title. There is no cover column left to indent past, and a tilted sheet
   hanging over a 20px gutter reads as a mistake rather than as depth. The
   hover transform has to be restated here too, because the desktop one
   carries a translateY(-50%) that only makes sense while absolute. */

@media (max-width: 640px) {

	.wyohs-woho {
		--woho-indent: 22px;
	}

	.wyohs-woho__panel {
		left: 0;
		width: auto;
	}

	.wyohs-woho__plate {
		position: static;
		width: 190px;
		margin: 0 0 20px;
		transform: rotate(-2deg);
	}

	.wyohs-woho__panel:hover .wyohs-woho__plate,
	.wyohs-woho__panel:focus-within .wyohs-woho__plate {
		transform: rotate(-1deg);
	}

	.wyohs-woho__bar {
		flex-direction: column;
		gap: 4px;
		padding: 11px 22px;
	}

	.wyohs-woho__bar-label,
	.wyohs-woho__bar-meta {
		white-space: normal;
	}

	.wyohs-woho__field {
		padding: 24px 22px 28px;
	}

	.wyohs-woho-page .wyohs-woho-page__head {
		font-size: 28px;
	}

	.wyohs-woho-page .wyohs-woho-page__next-head {
		font-size: 30px;
	}

	.wyohs-woho-files__link {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 16px;
		padding: 16px 4px;
	}

	.wyohs-woho-files__kind {
		width: 52px;
		font-size: 14px;
	}

	.wyohs-woho-files__title {
		font-size: 20px;
	}

	.wyohs-woho-files__meta {
		grid-column: 2;
		gap: 14px;
		margin-top: 6px;
	}

	.wyohs-woho-files__chev {
		display: none;
	}
}

/* Undoing the host module -----------------------------------------------
   Both shortcodes sit in their own HTML modules, siblings of the prose
   rather than inside it, so nothing here has to fight a Text Editor
   module's centring or type scale. These are a guard, not a fix: if either
   is moved into a .wyohs-prose module they are what stops the panel going
   centred and the button painting navy on navy. */

.wyohs-prose .wyohs-woho,
.wyohs-prose .wyohs-woho-files,
.wyohs-prose .wyohs-woho *,
.wyohs-prose .wyohs-woho-files * {
	text-align: left;
}

.wyohs-prose a.wyohs-woho__cta,
.wyohs-prose .wyohs-woho__panel:hover a.wyohs-woho__cta {
	color: var(--wyohs-cream, #fff8e7);
	text-decoration: none;
}

.wyohs-prose a.wyohs-woho-files__link {
	color: inherit;
	text-decoration: none;
	background: none;
}