/* -----------------------------------------------------------------------
   WyoHS Annual Conference

   This page is unlike every other component on the site: **there is no
   shortcode.** Every word, every link, every photograph on it is a native
   Beaver Builder module, and this stylesheet is the only thing the theme
   contributes. That is deliberate. The conference is re-registered,
   re-priced, re-dated and re-illustrated every single year, by staff, and
   anything held in PHP would mean a developer each October.

   So the rule for this page is: if a value changes yearly, it lives in a
   module. If it is a shape, it lives here.

   Four arrangements, all measured off pages that already exist:

   1. `.wyohs-conf-reg` is the **central link panel** — the device on
      Wyoming History News, Submit Nomination and the Oral History
      Database — rebuilt out of six native modules instead of a shortcode.
      Sand label bar, peach field, serif title, navy button, and a plate
      lapping the left edge.
   2. `.wyohs-conf-sched` and `.wyohs-conf-rooms` style ordinary lists
      typed into a Text Editor. An editor sees a bulleted list; a reader
      sees a schedule and a set of hotel blocks. Nothing here needs the
      list to be marked up any particular way beyond one item per line.
   3. `.wyohs-conf-trek` is the panel again, mirrored and quieter, for the
      one outing that hangs off the conference.
   4. `.wyohs-conf-page--cards` is the standard three-card closer.

   Values are measured off oral-history.css, grants-page.css and
   people.css and re-stated here rather than shared, because those sheets
   load on other pages and nothing here should depend on them. Same call
   documents.css made about whn.css. If one is restyled, look at the rest.
   ----------------------------------------------------------------------- */

/* Page furniture --------------------------------------------------------
   Native Heading and Text Editor modules put the class straight on the
   module element, which is a flex item in the column and shrink-wraps
   unless width is set. 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 exactly 1200px. */

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

.wyohs-conf-page .wyohs-conf-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-conf-page .wyohs-conf-page__body {
	max-width: 1160px;
	margin: 18px auto 0;
	text-align: left;
}

.wyohs-conf-page .wyohs-conf-page__body p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 18px;
	line-height: 1.68;
	color: var(--wyohs-ink, #1a1a1a);
	max-width: 72ch;
	margin: 0 0 18px;
}

.wyohs-conf-page .wyohs-conf-page__body p:last-child {
	margin-bottom: 0;
}

/* The line that sits under a block and points somewhere else. Smaller than
   body copy and set in the condensed face, so it reads as an aside rather
   than as another paragraph. */

.wyohs-conf-page .wyohs-conf-page__note {
	max-width: 1160px;
	margin: 20px auto 0;
	text-align: left;
}

.wyohs-conf-page .wyohs-conf-page__note p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #5a5245;
	max-width: 72ch;
	margin: 0;
}

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

.wyohs-conf-page .wyohs-conf-page__note a:hover {
	text-decoration-color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-conf-page .wyohs-conf-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-conf-page--cards .fl-col-group {
	display: block;
}

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

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

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

/* The registration panel ------------------------------------------------

   The central link panel, assembled from modules. Two Beaver Builder
   columns: the plate on the left, the field on the right. The peach and
   the padding sit on the field column's own content box, so the modules
   inside it are ordinary modules and an editor can add another one
   without knowing any of this is here.

   The plate laps the field by --reg-lap and tilts by --reg-tilt. Unlike
   the Awards Manual panel, nothing is taken out of the flow and nothing
   has to be re-centred by hand: the columns hold their own widths and the
   lap is a negative margin, so changing the plate's picture, or its
   width, costs no arithmetic anywhere. That was the whole reason to build
   it this way rather than port the shortcode. */

.wyohs-conf-reg {
	--reg-lap: 46px;
	--reg-tilt: -2.2deg;
	--reg-pad: 40px;

	/* How far in from the field's left edge the words have to start. The
	   plate laps the field by --reg-lap and the field wants --reg-pad of
	   air of its own, so anything less than the sum sets the first line of
	   type underneath the photograph. That is exactly what happened on the
	   first build: the title, the dates and the calendar link all ran in
	   behind the poster. */
	--reg-inset: calc(var(--reg-pad) + var(--reg-lap));
}

.wyohs-conf-reg .fl-row-content {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.wyohs-conf-reg .fl-col-group {
	align-items: center;
}

/* The plate. A Photo module, so this year's poster is swapped in the
   builder's own media picker and nothing else on the page moves. The
   frame is square-ish by habit rather than by rule: object-fit means a
   landscape banner and a portrait poster both sit correctly. */

.wyohs-conf-reg .wyohs-conf-reg__plate {
	width: 100%;
	margin: 0;
	position: relative;
	z-index: 2;
}

.wyohs-conf-reg .wyohs-conf-reg__plate .fl-photo,
.wyohs-conf-reg .wyohs-conf-reg__plate .fl-photo-content {
	display: block;
	width: 100%;
	margin: 0;
}

.wyohs-conf-reg .wyohs-conf-reg__plate img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border: 1px solid rgba(26, 26, 26, .14);
	box-shadow: 0 2px 5px rgba(26, 26, 26, .18), 0 16px 34px rgba(26, 26, 26, .16);
	transform: rotate(var(--reg-tilt));
	transform-origin: center center;
}

/* The field. Peach, with the sand bar pulled out to its edges. */

.wyohs-conf-reg .fl-col:last-child .fl-col-content {
	background: var(--wyohs-peach, #f6d7b3);
	padding: var(--reg-pad) var(--reg-pad) var(--reg-pad) var(--reg-inset);
	margin-left: calc(var(--reg-lap) * -1);
	position: relative;
	z-index: 1;
}

.wyohs-conf-reg .fl-col:last-child .fl-module {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* The sand bar spans the whole field and the plate laps over its left
   end, so it is pulled out to both edges and then padded back in by the
   same inset the prose uses. The selector carries the module class as
   well as .fl-module because the margin-zeroing rule directly above is
   four classes deep and beats anything shorter. */

.wyohs-conf-reg .fl-col:last-child .fl-module.wyohs-conf-reg__eyebrow {
	background: var(--wyohs-sand, #d2a56c);
	margin: calc(var(--reg-pad) * -1) calc(var(--reg-pad) * -1) 26px calc(var(--reg-inset) * -1);
	padding: 13px var(--reg-pad) 11px var(--reg-inset);
	width: auto;
}

.wyohs-conf-reg .wyohs-conf-reg__eyebrow p {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-navy, #1b3a5c);
	margin: 0;
	text-align: left;
}

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

.wyohs-conf-reg .wyohs-conf-reg__meta {
	margin: 14px 0 0;
	text-align: left;
}

.wyohs-conf-reg .wyohs-conf-reg__meta p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 8px;
}

.wyohs-conf-reg .wyohs-conf-reg__meta p:last-child {
	margin-bottom: 0;
}

/* The button. Filled navy rather than the site's text link, because this
   is the one thing the page exists to get somebody to do. Written against
   the module's own anchor so Beaver Builder's button settings cannot
   fight it. */

.wyohs-conf-reg .wyohs-conf-reg__cta {
	margin: 24px 0 0;
	text-align: left;
}

.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button,
.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button:visited {
	display: inline-block;
	background: var(--wyohs-navy, #1b3a5c) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 15px 26px 13px !important;
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wyohs-peach, #f6d7b3) !important;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button .fl-button-text {
	color: inherit;
}

.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button .fl-button-text::after {
	content: ' >';
	font-size: .7em;
	vertical-align: .08em;
}

.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button:hover,
.wyohs-conf-reg .wyohs-conf-reg__cta a.fl-button:focus-visible {
	background: #12283f !important;
	color: #fff !important;
}

.wyohs-conf-reg .wyohs-conf-reg__cal {
	margin: 16px 0 0;
}

/* The schedule ----------------------------------------------------------
   An ordinary bulleted list typed into a Text Editor. Each item reads
   "time -- what happens", and the em dash is the split: the part before it
   is set in the condensed face and given a fixed column, the rest runs as
   body copy. If somebody types an item with no dash it simply sets as one
   line of body copy, which is the right failure. */

.wyohs-conf-sched {
	max-width: 1160px;
	margin: 22px auto 0;
	text-align: left;
	width: 100%;
}

.wyohs-conf-sched ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 780px;
	border-top: 1px solid rgba(26, 26, 26, .14);
}

.wyohs-conf-sched li {
	margin: 0;
	padding: 13px 0 12px;
	border-bottom: 1px solid rgba(26, 26, 26, .14);
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wyohs-ink, #1a1a1a);
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 4px 22px;
	align-items: baseline;
}

.wyohs-conf-sched li strong {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #6a5842;
}

/* The hotels ------------------------------------------------------------
   Also an ordinary list. One hotel per item, its name in a strong, the
   rest of the line free text. Three across at desktop, and the blocks sit
   on a peach field so the section reads as a set of options rather than
   as more prose. */

.wyohs-conf-rooms {
	max-width: 1160px;
	margin: 22px auto 0;
	text-align: left;
	width: 100%;
}

.wyohs-conf-rooms ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.wyohs-conf-rooms li {
	margin: 0;
	background: var(--wyohs-peach, #f6d7b3);
	padding: 24px 24px 26px;
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 16px;
	line-height: 1.62;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-conf-rooms li strong {
	display: block;
	font-weight: 400;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 21px;
	line-height: 1.2;
	color: var(--wyohs-navy, #1b3a5c);
	margin: 0 0 12px;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(27, 58, 92, .3);
}

.wyohs-conf-rooms li a {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: underline;
	text-decoration-color: rgba(27, 58, 92, .45);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.wyohs-conf-rooms li a:hover {
	text-decoration-color: var(--wyohs-navy, #1b3a5c);
}

/* The trek --------------------------------------------------------------
   The panel again, without the peach: a photograph beside a serif title, a
   date line, a teaser and a text link out to the calendar. Quieter than
   the registration panel on purpose, because the conference is what this
   page is for and the trek hangs off it. */

.wyohs-conf-trek .fl-row-content {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.wyohs-conf-trek .fl-col-group {
	align-items: center;
}

.wyohs-conf-trek .wyohs-conf-trek__photo {
	width: 100%;
	margin: 0;
}

.wyohs-conf-trek .wyohs-conf-trek__photo .fl-photo,
.wyohs-conf-trek .wyohs-conf-trek__photo .fl-photo-content {
	display: block;
	width: 100%;
	margin: 0;
}

.wyohs-conf-trek .wyohs-conf-trek__photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border: 1px solid rgba(26, 26, 26, .14);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .16), 0 8px 20px rgba(26, 26, 26, .12);
}

.wyohs-conf-trek .fl-col:last-child .fl-module {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.wyohs-conf-trek .wyohs-conf-trek__title {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
	margin: 0;
}

.wyohs-conf-trek .wyohs-conf-trek__when {
	margin: 12px 0 0;
	text-align: left;
}

.wyohs-conf-trek .wyohs-conf-trek__when p {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #6a5842;
	margin: 0;
}

.wyohs-conf-trek .wyohs-conf-trek__body {
	margin: 16px 0 0;
	text-align: left;
}

.wyohs-conf-trek .wyohs-conf-trek__body p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 14px;
}

.wyohs-conf-trek .wyohs-conf-trek__body p:last-child {
	margin-bottom: 0;
}

.wyohs-conf-trek .wyohs-conf-trek__link {
	margin: 20px 0 0;
}

/* Narrow ----------------------------------------------------------------
   Beaver Builder stacks its own columns at 768px, which leaves the two
   panels cramped for the 224px above that, so both are stacked here at
   900px instead. Once the registration panel is stacked the lap and the
   tilt come off: a tilted picture sitting on top of a peach block reads as
   a mistake rather than as a composition. */

@media (max-width: 900px) {

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

	.wyohs-conf-reg .fl-col,
	.wyohs-conf-trek .fl-col {
		width: 100% !important;
		max-width: 100%;
		flex: 1 1 100%;
	}

	/* Zeroing the lap is enough: the field's left padding and the sand
	   bar's pull-out are both computed from it. */

	.wyohs-conf-reg {
		--reg-lap: 0px;
	}

	.wyohs-conf-reg .fl-col:last-child .fl-col-content {
		margin-left: 0;
		margin-top: 0;
	}

	.wyohs-conf-reg .wyohs-conf-reg__plate img {
		transform: none;
	}

	.wyohs-conf-trek .wyohs-conf-trek__photo {
		margin-bottom: 24px;
	}

	.wyohs-conf-rooms ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {

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

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

	.wyohs-conf-reg {
		--reg-pad: 26px;
	}

	.wyohs-conf-reg .wyohs-conf-reg__title {
		font-size: 27px;
	}

	.wyohs-conf-trek .wyohs-conf-trek__title {
		font-size: 26px;
	}

	.wyohs-conf-rooms ul {
		grid-template-columns: 1fr;
	}

	/* The schedule's label column stacks. 150px beside a phone-width
	   measure leaves the description setting three words wide. */

	.wyohs-conf-sched li {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* Undoing the host module -----------------------------------------------
   The schedule and hotel lists are typed into Text Editor modules, which
   on this site centre their contents and set their own type scale. These
   are a guard, not a fix. */

.wyohs-prose .wyohs-conf-sched,
.wyohs-prose .wyohs-conf-rooms,
.wyohs-prose .wyohs-conf-sched *,
.wyohs-prose .wyohs-conf-rooms * {
	text-align: left;
}