/* =======================================================================
   WyoHS: The Events Calendar, dressed for this site
   Loaded by /inc/events.php on event archives, single events and venues.

   The Events Calendar's Views v2 publishes its whole design as custom
   properties on :root, about 208 of them. Retargeting that token layer does
   most of the work in one place and keeps working when the plugin updates,
   which is why this file overrides tokens first and reaches for element
   selectors only where the plugin has no token (typeface choices, mostly).

   This sheet loads after the plugin's, so plain :root wins on order without
   needing !important or manufactured specificity.
   ======================================================================= */

:root {

	/* ---------- palette --------------------------------------------- */

	/* The plugin's default accent is a saturated blue. Navy carries the same
	   emphasis without introducing a colour the site does not own. */
	--tec-color-accent-primary: var(--wyohs-navy, #1b3a5c);
	--tec-color-accent-primary-hover: #1b3a5ccc;
	--tec-color-accent-primary-active: #1b3a5ce6;
	--tec-color-accent-primary-background: #1b3a5c12;
	--tec-color-accent-primary-background-datepicker: #1b3a5c12;
	--tec-color-accent-primary-week-event: #1b3a5c1a;
	--tec-color-accent-primary-week-event-hover: #1b3a5c33;
	--tec-color-accent-primary-week-event-featured: #1b3a5c0a;
	--tec-color-accent-primary-week-event-featured-hover: #1b3a5c24;

	--tec-color-accent-secondary: var(--wyohs-navy, #1b3a5c);
	--tec-color-accent-secondary-hover: #1b3a5ccc;
	--tec-color-accent-secondary-active: #1b3a5ce6;
	--tec-color-accent-secondary-background: #1b3a5c12;

	--tec-color-text-primary: var(--wyohs-ink, #1a1a1a);
	--tec-color-text-primary-light: rgba(27, 58, 92, .62);
	--tec-color-text-secondary: rgba(27, 58, 92, .72);
	--tec-color-text-events-title: var(--wyohs-navy, #1b3a5c);
	--tec-color-text-event-date: var(--wyohs-navy, #1b3a5c);
	--tec-color-text-event-title: var(--wyohs-navy, #1b3a5c);

	--tec-color-link-primary: var(--wyohs-navy, #1b3a5c);
	--tec-color-link-accent: var(--wyohs-navy, #1b3a5c);
	--tec-color-link-accent-hover: var(--wyohs-green, #4e9553);

	--tec-color-button-primary: var(--wyohs-navy, #1b3a5c);
	--tec-color-button-primary-hover: #1b3a5ccc;
	--tec-color-button-primary-active: #1b3a5ce6;
	--tec-color-button-secondary: var(--wyohs-navy, #1b3a5c);

	--tec-color-day-marker-month: var(--wyohs-navy, #1b3a5c);
	--tec-color-day-marker-current-month: var(--wyohs-navy, #1b3a5c);

	/* Warm hairlines. The plugin's greys read cold against cream. */
	--tec-color-border-default: rgba(27, 58, 92, .22);
	--tec-color-border-secondary: rgba(27, 58, 92, .14);
	--tec-color-border-tertiary: rgba(27, 58, 92, .10);
	--tec-color-border-active: var(--wyohs-navy, #1b3a5c);
	--tec-color-border-hover: rgba(27, 58, 92, .45);

	/* Month view draws multi-day events as tinted bars, and these keep their
	   own tokens rather than reading the accent, which is why the grid stayed
	   periwinkle after everything else turned navy. */
	--tec-color-background-primary-multiday: #1b3a5c33;
	--tec-color-background-primary-multiday-hover: #1b3a5c4d;
	--tec-color-background-secondary-multiday: #d2a56c4d;
	--tec-color-background-secondary-multiday-hover: #d2a56c66;

	--tec-color-background-secondary: rgba(27, 58, 92, .05);
	--tec-color-background-events-bar: transparent;
	--tec-color-background-view-selector-list-item-hover: rgba(27, 58, 92, .06);

	/* The submit button’s label has its own token, and the plugin’s element
	   rule for it out-specifies anything reasonable, so set it here rather
	   than escalating selectors. */
	--tec-color-text-events-bar-submit-button: var(--wyohs-peach, #f6d7b3);

	/* ---------- shape ----------------------------------------------- */

	/* Square corners throughout, which is the rule the rest of the site
	   follows: cards, panels and buttons are all flat rectangles. */
	--tec-border-radius-default: 0;
	--tec-border-radius-month-multiday: 0;
	--tec-events-border-radius-pill: 0;
}

/* =======================================================================
   Typography. The plugin has size and weight tokens but no family tokens
   beyond one sans-serif, so these are element rules by necessity.
   ======================================================================= */

/* Everything the plugin leaves in its own Helvetica stack takes plain Special
   Gothic. Views v2 routes nearly all of it through one family token, so
   retargeting that does the work; the declaration on .tribe-events catches what
   inherits from the theme instead (the archive H1, the search label), and the
   form controls are listed because a control never inherits a family. */
.tribe-events {
	--tec-font-family-sans-serif: 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-family: 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.tribe-events input,
.tribe-events select,
.tribe-events textarea,
.tribe-events button,
.tribe-events label {
	font-family: 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Event names take the serif, the way every other title on the site does. */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-day__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title,
.tribe-events-single .tribe-events-single-event-title {
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-day__event-title-link,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-day__event-title-link:hover,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover {
	/* The plugin's anchor-thin carries a transparent border-bottom that turns
	   navy on hover, landing a second thin rule under every line beside our sand
	   underline. One line is the point, so the border stays transparent here.
	   Focus still shows it, which is the one place it earns its keep. */
	border-bottom-color: transparent;
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* Anything acting as a label rather than as prose: the view tabs, the search
   button, the nav, weekday headers and the month separators. Condensed caps
   is the site's label voice. */
.tribe-events .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-events-bar__search-button-text,
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-events-calendar-month__header-column-title-mobile,
.tribe-events .tribe-events-calendar-month__header-column-title-desktop {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* The pagination pair at the foot of every view is the one place on the page
   that behaves like the previous/next links under a blog post, so it borrows
   that voice outright: the serif at reading size, sentence case, no tracking.
   The disabled end of the pair keeps the plugin's grey. */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__prev-label,
.tribe-events .tribe-events-c-nav__next-label {
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
}

.tribe-events .tribe-events-c-nav__prev:not([disabled]),
.tribe-events .tribe-events-c-nav__next:not([disabled]) {
	color: var(--wyohs-navy, #1b3a5c);
}

/* The big day number beside a listing reads as a date stamp. It runs in the
   condensed display face rather than the serif, so it sits in one voice with the
   weekday label stacked above it, and it loses the plugin's bold. */
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events .tribe-events-calendar-day__event-date-tag-daynum {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.05;
	color: var(--wyohs-navy, #1b3a5c);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	font-size: 13px;
	color: rgba(27, 58, 92, .7);
}

.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-size: 17px;
	color: var(--wyohs-navy, #1b3a5c);
}

/* Month grid: the day numbers take the same condensed display face as the day
   stamps in list view, so one date never appears in two voices, and the weekday
   letters are labels, so they take the condensed caps at a readable size. */
.tribe-events .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day-date-daynum-link {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	color: var(--wyohs-navy, #1b3a5c);
}

.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-events-calendar-month__header-column-title-mobile,
.tribe-events .tribe-events-calendar-month__header-column-title-desktop {
	font-size: 13px;
	color: rgba(27, 58, 92, .7);
}

.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title {
	font-size: 14px;
}

/* =======================================================================
   Shapes the tokens do not reach
   ======================================================================= */

/* The search field is a boxed white control by default. Underlined on the
   page's own ground matches the county chooser on the Regions page. */
/* The plugin draws a box around the search row. The site prefers underlines,
   and the field and the active tab already carry one each. The doubled
   selector matches the plugin’s own specificity rather than beating it with
   !important. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar {
	background: transparent;
	border: 0;
}

.tribe-events .tribe-events-c-events-bar__search-container,
.tribe-events .tribe-events-c-search__input-control {
	background: transparent;
}

.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-common-form-control-text__input {
	border: 0;
	border-bottom: 1px solid rgba(27, 58, 92, .45);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--wyohs-serif, Georgia, serif);
	font-size: 18px;
	color: var(--wyohs-navy, #1b3a5c);
}

.tribe-events .tribe-events-c-search__input:focus {
	outline: none;
	border-bottom-color: var(--wyohs-navy, #1b3a5c);
	border-bottom-width: 2px;
}

/* Navy fill, peach type, square: the button idiom from the people cards. */
.tribe-events .tribe-events-c-search__button {
	border-radius: 0;
	border: 0;
	padding: 13px 22px 11px;
	background: var(--wyohs-navy, #1b3a5c);
	font-size: 15px;
	transition: filter .15s ease;
}

.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search__button:focus {
	background: var(--wyohs-navy, #1b3a5c);
	filter: brightness(1.15);
}

/* The active view tab keeps a rule under it rather than a pill around it. */
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	border-bottom: 2px solid var(--wyohs-sand, #d2a56c);
}

/* "Upcoming", "August 2026" and the like are the heading of the view. */
.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wyohs-navy, #1b3a5c);
}

/* "Today" is a control, so it takes the label voice and loses its pill. */
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-c-top-bar__today-button {
	border-radius: 0;
	border: 1px solid rgba(27, 58, 92, .3);
	font-size: 13px;
	color: var(--wyohs-navy, #1b3a5c);
}

.tribe-events .tribe-events-c-nav__today:hover,
.tribe-events .tribe-events-c-top-bar__today-button:hover {
	border-color: var(--wyohs-navy, #1b3a5c);
	background: rgba(27, 58, 92, .06);
}

/* Square thumbnails, matching the 4:5 card photos elsewhere. */
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-day__event-featured-image {
	border-radius: 0;
}

/* Buttons the plugin draws with a border get the same square treatment. */
.tribe-events .tribe-common-c-btn-border,
.tribe-events .tribe-common-c-btn-border-small,
.tribe-events .tribe-events-c-subscribe-dropdown__button {
	border-radius: 0;
}

/* Hairline between listings instead of the plugin's grey rule.
   The plugin hangs that rule directly under an event's last line and puts all
   the air above it, so every listing sits flush on its own hairline. Trading the
   row margins for equal padding keeps the same rhythm between events and centres
   the rule in the gap. The doubled class outruns the plugin's own row margins,
   which are 40px on the first row and 48px on the rest. */
.tribe-events.tribe-events-view .tribe-events-calendar-list__event-row {
	border-bottom: 1px solid rgba(27, 58, 92, .14);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 40px;
	padding-bottom: 40px;
}

.tribe-events .tribe-events-calendar-list__event-row:last-child { border-bottom: 0; }

/* The last event of a month closes against the next month separator, which
   brings its own rule. Two hairlines a few pixels apart read as a mistake, so
   the listing drops its own. */
.tribe-events .tribe-events-calendar-list__event-row:has(+ .tribe-events-calendar-list__month-separator) {
	border-bottom: 0;
}

/* An em dash between a venue and its town, so the two stop running together as
   one phrase. It hangs off the address rather than the venue name, so an event
   with no address never trails a dangling dash, and it sits at regular weight
   while the venue name stays bold. */
.tribe-events .tribe-events-calendar-list__event-venue-address::before,
.tribe-events .tribe-events-calendar-day__event-venue-address::before {
	content: '\2014';
	font-weight: 400;
}

/* Lead-in above the calendar. The Themer hero closes with 163px of row padding
   and the plugin then opens its container with 96px of its own, which together
   read as a hole between the page title and the search row. Both come down. The
   hero rule is scoped to Part 795, the events-archive hero, so no other page's
   hero band moves. */
.fl-builder-content-795 .wyohs-hero .fl-row-content-wrap {
	padding-bottom: 84px;
}

.tribe-events.tribe-events-view .tribe-events-l-container {
	padding-top: 24px;
}
/* =======================================================================
   Single event
   ======================================================================= */

/* The date line under the title is the event's most important fact after
   its name, so it takes the label voice at a size that carries. */
.tribe-events-single .tribe-events-schedule,
.tribe-events-single .tribe-events-schedule h2 {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-navy, #1b3a5c);
}

/* The column headers -- Details, Organizer, Venue -- are Young Serif in
   navy, sentence case. They used to wear the condensed sand caps this file
   gives to field labels, which made a column header and the DATE: label
   under it read as the same rank. The serif separates them, and navy
   against the sand labels puts the weight where it belongs.

   The field labels below keep the condensed caps. They are labels. */
.tribe-events-single .tribe-events-single-section-title,
.tribe-events-single .tribe-events-meta-group > h2,
.tribe-events-single .tribe-events-meta-group > h3 {
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-navy, #1b3a5c);
	margin: 0 0 22px;
}

.tribe-events-single .tribe-events-meta-label {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(27, 58, 92, .72);
}

.tribe-events-single .tribe-events-meta-value {
	color: var(--wyohs-ink, #1a1a1a);
}

.tribe-events-single .tribe-events-event-meta {
	border-top: 1px solid rgba(27, 58, 92, .18);
	border-bottom: 1px solid rgba(27, 58, 92, .18);
	background: transparent;
}

/* The previous/next pair takes the blog's footer treatment: Young Serif
   23/28 in navy, sentence case, no tracking. It is the same device doing
   the same job at the foot of a single entry, and the condensed caps it
   used to wear made it read as a label rather than as the title of the
   thing on the other end of the link.

   The "All Events" link that used to share these rules is gone: the hero
   prints a breadcrumb in its place and .tribe-events-back is hidden. */
.tribe-events-single .tribe-events-nav-previous a,
.tribe-events-single .tribe-events-nav-next a {
	font-family: var(--wyohs-serif, Georgia, serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-navy, #1b3a5c);
	text-decoration: none;
}

@media (max-width: 767px) {

	.tribe-events-single .tribe-events-nav-previous a,
	.tribe-events-single .tribe-events-nav-next a {
		font-size: 19px;
		line-height: 24px;
	}
}

.tribe-events-single .tribe-events-sub-nav {
	border-top: 1px solid rgba(27, 58, 92, .18);
	padding: 18px 0 0;
}

/* =======================================================================
   Shared chrome: the subscribe button, exports, and pagination
   ======================================================================= */

/* Outlined navy rather than a blue pill, matching the panel close button on
   the people page. */
.tribe-events .tribe-events-c-subscribe-dropdown__button {
	border: 2px solid var(--wyohs-navy, #1b3a5c);
	background: transparent;
	padding: 10px 18px;
}

.tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events .tribe-events-c-subscribe-dropdown__button:focus {
	background: var(--wyohs-navy, #1b3a5c);
}

.tribe-events .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-c-subscribe-dropdown__button:focus .tribe-events-c-subscribe-dropdown__button-text {
	color: var(--wyohs-peach, #f6d7b3);
}

.tribe-events .tribe-events-c-subscribe-dropdown__content {
	border: 1px solid rgba(27, 58, 92, .22);
	border-radius: 0;
	box-shadow: 0 14px 30px rgba(27, 58, 92, .18);
}

.tribe-events .tribe-events-c-subscribe-dropdown__list-item-link {
	color: var(--wyohs-navy, #1b3a5c);
}

/* Page-to-page links at the foot of a view. */
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next {
	font-size: 14px;
	color: var(--wyohs-navy, #1b3a5c);
}

/* =======================================================================
   Day view
   ======================================================================= */

.tribe-events .tribe-events-calendar-day__event-datetime,
.tribe-events .tribe-events-calendar-day__type-separator-text {
	font-family: var(--wyohs-display, 'Arial Narrow', sans-serif);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(27, 58, 92, .72);
}

.tribe-events .tribe-events-calendar-day__event-row {
	border-bottom: 1px solid rgba(27, 58, 92, .14);
}

/* =====================================================================
   The single-event hero

   Printed by /inc/events.php on fl_before_content, so it lands as a direct
   child of .fl-page immediately before .fl-page-content. That puts it
   OUTSIDE .fl-builder-content, which is worth knowing before editing it:
   none of Beaver Builder's per-layout rules reach in here, the theme's
   .fl-builder-content h3 trap does not apply, and the mobile gutters in
   layout.css do not either, because those hang off .fl-row-content. This
   block carries everything the band needs.

   It is the blog entry hero rebuilt for an event, and since the calendar
   was widened to the site's measure (see the section below) the numbers
   are now the blog's own: 250px of top clearance for the overlay header,
   a left-aligned Young Serif 50/70 title in white, and a 460px framed
   featured image hung off the right, lapping the lower edge. Those were
   measured off "WHS Blog Entries" rather than invented, so the two pages
   read as siblings.

   The ground is the exception. The blog's band is a photo row whose image
   connection currently resolves to nothing, so it renders as cream under a
   50% wash -- a warm taupe. This one is flat navy, the same ground every
   interior page hero uses, which is also the ground the sand breadcrumb
   above the title already lives on everywhere else on the site.

   The frame is [wyohs_post_photo] and the .wyohs-postphoto block in
   /assets/post.css. Its art, its window geometry and its 0.79deg tilt are
   not restated here and must not be: change the frame once and both pages
   follow.

   Three departures from the blog, all deliberate:

   - A breadcrumb sits above the title. The "All Events" link it replaces
     named no path, and an event is three levels down.
   - The lap is 96px rather than 290px. A blog post has a narrow content
     measure and a meta rail, so its frame can hang deep into the page
     beside the copy. The calendar's own markup runs the full width of its
     column with a two-column meta table under it, and there is no rail to
     sit beside, so the frame laps just enough to break the band's edge.
   - An event with no featured image gets no frame at all, rather than the
     navy field a post falls back to. That is 27 of 31 events today, and
     the empty frame reads as a fault rather than as a design.
   ===================================================================== */

:root {
	--evhero-pad-top: 250px;
	--evhero-pad-bottom: 40px;
	--evhero-max: 1440px;
	--evhero-gutter: 24px;
	--evhero-photo-w: 460px;
	--evhero-lap: 96px;
}

.wyohs-evhero {
	position: relative;
	background-color: var(--wyohs-navy, #1b3a5c);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The background properties above are set for a photograph this band does
   not have yet. If one is ever put here, it needs a scrim over it before
   white type will hold -- an ::after at inset 0 in something like
   rgba(10, 0, 0, .5), which is what the blog hero's row carries. Flat navy
   needs no scrim, so there is none. */

/* 1440 is the site's measure, and since the section below puts the
   calendar's own container on the same numbers, the hero's left edge lands
   exactly on the copy beneath it.

   The gutter is 24px rather than the 20px a Beaver Builder module sits at,
   for one reason, and it belongs to the calendar rather than to the hero:
   Views v2 lays its list rows out as a grid whose row carries -24px side
   margins against 24px of cell padding, so the row bleeds 24px past its
   container. At a 20px gutter that bleed ran 4px past the viewport and put
   a horizontal scrollbar on the page at every width below about 1480. At
   24px the bleed lands exactly on the page edge. The hero follows the same
   token so the two stay on one line. The gutter is a token
   rather than padding written straight onto the inner because the frame
   reads it too: an absolutely positioned child offsets from its ancestor's
   PADDING box, so right:0 would hang the frame past the copy by exactly the
   gutter. Both have to move together. */
.wyohs-evhero__inner {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: var(--evhero-max);
	margin: 0 auto;
	padding: var(--evhero-pad-top) var(--evhero-gutter) var(--evhero-pad-bottom);
}

.wyohs-evhero__title {
	margin: 0;
	font-family: var(--wyohs-serif, 'Young Serif'), serif;
	font-size: 50px;
	line-height: 70px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.wyohs-evhero__when {
	margin: 16px 0 0;
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

/* The frame sits above whatever follows the band. z-index rather than
   source order, because .fl-page-content comes later in the document and
   would otherwise paint over the part that laps. */
.wyohs-evhero__photo {
	position: relative;
	z-index: 3;
}

@media (min-width: 993px) {

	.wyohs-evhero__photo {
		position: absolute;
		right: var(--evhero-gutter);
		bottom: calc(var(--evhero-lap) * -1);
		width: var(--evhero-photo-w);
	}

	/* Keep the title out from under the frame. A long event name is the
	   normal case here, not the exception. */
	.wyohs-evhero--photo .wyohs-evhero__text {
		max-width: calc(100% - var(--evhero-photo-w) - 44px);
	}
}

/* There is deliberately NO clearance rule under the lap.

   An earlier version pushed the whole column past the frame's lowest point,
   which left a band of empty cream the height of the lap across the full
   measure and opened the page on a hole. The copy tucks up beside the frame
   instead: it is held to a measure that cannot reach it (see the
   description block below), so the two overlap vertically and never touch,
   and the column starts where the theme would have started it anyway.

   Nothing else in that zone needs clearing either. The subscribe button is
   narrow and left-aligned, and the details block sits far enough down that
   even a one-line description clears the frame before it. */

/* ---------------------------------------------------------------------
   What the hero replaces

   All four still render from the plugin's own template. Hiding them beats
   unhooking the template, which turns every plugin update into a merge.
   display:none takes them out of the accessibility tree as well, so the
   hero's h1 is the only h1 and the date is announced once.
   --------------------------------------------------------------------- */

body.single-tribe_events .tribe-events-back,
body.single-tribe_events .tribe-events-single > .tribe-events-single-event-title,
body.single-tribe_events .tribe-events-single > .tribe-events-schedule,
body.single-tribe_events .tribe-events-event-image {
	display: none;
}

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

   Below 993px the frame drops out of the corner and into the flow under
   the title, still lapping the band's lower edge. The negative margin has
   to clear the inner's own bottom padding as well as the lap, or the
   photo simply sits inside the band with nothing hanging.
   --------------------------------------------------------------------- */

@media (max-width: 992px) {

	:root {
		--evhero-pad-top: 190px;
		--evhero-lap: 24px;
	}

	.wyohs-evhero__title {
		font-size: 38px;
		line-height: 46px;
	}

	.wyohs-evhero__photo {
		width: 100%;
		max-width: var(--evhero-photo-w);
		margin: 30px 0 calc((var(--evhero-pad-bottom) + var(--evhero-lap)) * -1);
	}
}

@media (max-width: 600px) {

	:root {
		--evhero-pad-top: 150px;
		--evhero-pad-bottom: 32px;
	}

	.wyohs-evhero__title {
		font-size: 32px;
		line-height: 40px;
	}

	.wyohs-evhero__when {
		font-size: 16px;
		letter-spacing: 1.6px;
	}
}

/* =====================================================================
   The calendar at the site's measure

   Every Beaver Builder row on this site runs to 1440 with 20px of module
   margin inside it, which puts body copy in a 1400px column. The Events
   Calendar is the one thing on the site that no Beaver Builder layout
   takes over: it renders inside the BB theme's own .container, which the
   skin sets to width:1020px / max-width:90% above 1100px, full width with
   40px gutters from 768 to 1099, and full width with 20px gutters below
   that. So the calendar sat 380px narrower than everything around it, and
   the archive's own hero -- a Beaver Builder Part at 1440 -- floated over
   a list indented 210px from its title.

   These four declarations put the calendar on the site's measure. They
   are scoped to a body class rather than to .tribe-events so they reach
   every route the plugin owns, including the venue and organizer pages
   and the /events-calendar/month/ style view URLs, and so they cannot
   escape onto an ordinary page.

   .fl-content inside carries 15px of padding and .row cancels it with a
   -15px margin, so the content edge is the container's own content box.
   That is why 1440 with a 20px gutter lands on the same pixel as a
   Beaver Builder module and not 15px inside it.
   ===================================================================== */

body.wyohs-events-route .fl-content-full.container {
	width: auto;
	max-width: var(--evhero-max, 1440px);
	padding-left: var(--evhero-gutter, 20px);
	padding-right: var(--evhero-gutter, 20px);
}

/* Views v2 then insets itself again inside that container: a 1260px cap
   with 70px of margin either side, which put every list row and the whole
   month grid 70px in from the measure the rest of the page sits on. The
   container above is the gutter now, so all three go. The class is doubled
   because the plugin's own rules on this element beat a single class, the
   same trick the lead-in spacing further up this file needs. */
body.wyohs-events-route .tribe-events.tribe-events-view .tribe-events-l-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* =====================================================================
   The single event's body face

   The restyle retargets --tec-font-family-sans-serif on .tribe-events,
   which converts every Views v2 surface in one stroke. The single-event
   template is not Views v2: it is the plugin's legacy template, its
   wrapper is .tribe-events-single, and it never gets that class. So the
   description, the meta values, the venue block and the previous/next
   pair all fell back to Helvetica Neue while the calendar around them was
   in Special Gothic.

   Two declarations rather than one, because the template mixes the two
   ways of getting a face: most of its rules read the plugin token, and a
   few elements (the back link, the footer nav) simply inherit from body,
   which the BB theme sets to Helvetica.

   The condensed label voice and the serif titles are set elsewhere in
   this file with their own selectors, so they are unaffected.
   ===================================================================== */

.tribe-events-single {
	--tec-font-family-sans-serif: var(--wyohs-sans, 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-family: var(--wyohs-sans, 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

/* =====================================================================
   One underline, never two

   `tribe-events-single-full.css` hangs a `border-bottom: 1px solid` on a
   link's hover, focus and active states, and the BB theme skin's own
   `a:hover` adds `text-decoration: underline` on top of it. Two lines a
   few pixels apart, on every link in the plugin's own markup.

   The site's link idiom is one sand underline at a 4px offset, so the
   border goes and the underline is stated here rather than left to the
   theme, which would draw it in its own colour hard against the baseline.
   Focus keeps the same treatment; the outline is what carries focus.

   The event titles in list, day and month view are handled further up
   this file, where the same collision happens with the plugin's
   anchor-thin border.
   ===================================================================== */

.tribe-events-single a:hover,
.tribe-events-single a:focus-visible,
.tribe-events-content a:hover,
.tribe-events-content a:focus,
.tribe-events-content a:active {
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-color: var(--wyohs-sand, #d2a56c);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* =====================================================================
   The doubled rule at the foot of a single event

   The details block closes on a hairline of ours
   (.tribe-events-event-meta, border-bottom) and the plugin opens
   #tribe-events-footer on a hairline of its own at the same y, in a
   slightly different alpha. Two 1px rules stacked read as one thick
   fuzzy one. The plugin's goes; ours already marks that boundary, and
   .tribe-events-sub-nav carries the rule above the previous/next pair.
   ===================================================================== */

.tribe-events-single #tribe-events-footer {
	border-top: 0;
}

/* =====================================================================
   The details block across the full measure

   TEC lays the meta out as two sibling sections inside a flex parent --
   .primary holds Details and Organizer, .secondary holds Venue and the
   map -- and every one of those columns is a fixed 168px. At the theme's
   old 1020px that filled most of the row. At 1400 it left the right half
   of the page empty while the four columns huddled on the left.

   The declarations below turn the fixed widths into shares: the sections
   split the measure, the groups split their section, and the gap is
   stated rather than left to the margin-right TEC hangs on each group, so
   the last column reaches the right edge instead of stopping 24px short.

   The space between the two sections is padding inside them, NOT a gap on
   the flex parent. Each section draws the hairline above and below the
   block itself, so a gap between them punches a 40px hole through both
   rules. Padding keeps the two boxes touching and the rules continuous,
   and splitting it 20px each side keeps all four columns the same width.

   The two sections already stretch to a common height, which is the other
   half of why those hairlines read as one rule across the whole block.
   ===================================================================== */

body.wyohs-events-route .tribe-events-single .type-tribe_events {
	flex-wrap: wrap;
}

body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta {
	flex: 1 1 0;
	min-width: 0;
	gap: 40px;
}

body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta.primary {
	padding-right: 20px;
}

body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta.secondary {
	padding-left: 20px;
}

body.wyohs-events-route .tribe-events-event-meta .tribe-events-meta-group,
body.wyohs-events-route .tribe-events-event-meta .tribe-events-venue-map {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	margin-right: 0;
}

body.wyohs-events-route .tribe-events-venue-map iframe {
	width: 100%;
}

/* No rules on the block at all.

   Three hairlines used to close a single event: one above the details, one
   below it, and one above the previous/next pair, with a fourth stub over
   the map column where the plugin puts a border-top on the gmap meta group
   as well. Four rules inside about three hundred pixels drew boxes around
   nothing. Only the pair's own rule survives, which is the one that is
   actually separating two things.

   The gmap group is named through .tribe-events-meta-group rather than by
   itself, because the plugin hangs that border on the group class and any
   other group that ever gets one should lose it the same way. */
body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta,
body.wyohs-events-route .tribe-events-single .tribe-events-meta-group {
	border-top: 0;
	border-bottom: 0;
}

/* And the plugin draws a fourth one as a ::before on the section rather
   than as a border on it, which is why zeroing border-top above left a
   rule still sitting on the block's top edge with nothing in the computed
   styles to explain it. If a hairline on this page has no visible source,
   check the pseudo-elements before anything else. */
body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta::before,
body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta::after {
	border-top: 0;
	border-bottom: 0;
}

/* Air between one fact and the next. TEC stacks label and value with
   nothing between the pairs, so DATE / August 29 / WEBSITE / the url read
   as a single four-line paragraph rather than as two facts. */
body.wyohs-events-route .tribe-events-meta-group .tribe-events-meta-item {
	margin-bottom: 22px;
}

body.wyohs-events-route .tribe-events-meta-group .tribe-events-meta-item:last-child {
	margin-bottom: 0;
}

/* =====================================================================
   The previous/next pair

   TEC lays the pair out as a flex row set to space-between with both items
   free to size to their content, so one long event name walks across the
   middle and shoulders the other one into the corner. Capping each at half
   the measure, less half the gap, keeps them in their own columns however
   long the titles run, and the next link reads from its own right edge so
   the pair stays anchored to the two ends of the rule above it.
   ===================================================================== */

body.wyohs-events-route .tribe-events-single .tribe-events-sub-nav {
	gap: 48px;
}

body.wyohs-events-route .tribe-events-single .tribe-events-nav-previous,
body.wyohs-events-route .tribe-events-single .tribe-events-nav-next {
	flex: 0 1 auto;
	max-width: calc(50% - 24px);
	min-width: 0;
}

body.wyohs-events-route .tribe-events-single .tribe-events-nav-next {
	text-align: right;
}

/* =====================================================================
   The description at one size whatever shape the copy arrives in

   The theme sizes body copy on the `p` element, so an event whose
   description was written in the editor reads at 18/27 and an event whose
   description was pasted in from a word processor -- arriving as a bare
   `<div dir="auto">` with `<br>` between the lines, which is what the
   Drupal import left behind on several of these -- fell back to the BB
   theme's own 14px. Same page, same block, two sizes, depending on
   invisible markup.

   Sizing the container rather than the paragraph settles it for every
   shape the copy can take, and the `p` and `li` selectors below are only
   there to out-specify the theme's own element rules.
   ===================================================================== */

body.wyohs-events-route .tribe-events-single-event-description,
body.wyohs-events-route .tribe-events-single-event-description p,
body.wyohs-events-route .tribe-events-single-event-description li {
	font-size: 18px;
	line-height: 27px;
}

/* And held to two thirds of the measure.

   Two jobs at once. It keeps the copy clear of the framed photograph,
   which hangs into the top of this column on the right: at 66% the
   description ends around 924px of a 1400px measure and the frame starts
   at 940, so the two can sit at the same height without ever meeting, and
   the clearance above can stay small. And it gives the prose a readable
   line: the full 1400 ran to something like two hundred characters.

   The passed-event notice takes the same measure, because it is the one
   other thing that can appear at the top of this column and would
   otherwise run under the frame on a past event that has a photograph.

   66% alone is not enough to clear the frame, though: the frame is a fixed
   460px while 66% is a share, so on a narrower desktop the two start to
   meet. 1100px of viewport gives a 1052px measure, and 66% of that is 694
   against a frame beginning at 592. So on an event that HAS a photograph
   the measure is whichever of the two is smaller, and the subtraction wins
   wherever the percentage would not.

   The frame drops into the flow below 993px, so both come off there. */
body.wyohs-events-route .tribe-events-single-event-description,
body.wyohs-events-route .tribe-events-notices {
	max-width: 66%;
}

body.single-tribe_events:has(.wyohs-evhero--photo) .tribe-events-single-event-description,
body.single-tribe_events:has(.wyohs-evhero--photo) .tribe-events-notices {
	max-width: min(66%, calc(100% - var(--evhero-photo-w) - 44px));
}

@media (max-width: 992px) {

	body.wyohs-events-route .tribe-events-single-event-description,
	body.wyohs-events-route .tribe-events-notices {
		max-width: none;
	}
}

/* Two columns of four squeezed into a phone is a table, not a list. */
@media (max-width: 992px) {

	body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta {
		flex: 1 1 100%;
	}

	body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta.primary {
		padding-right: 0;
	}

	body.wyohs-events-route .tribe-events-single-section.tribe-events-event-meta.secondary {
		padding-left: 0;
		border-top: 0;
	}
}

/* =====================================================================
   The venue block

   TEC's markup is a list: the venue name is one item, the whole address a
   second inside an <address>, then phone and website as their own items.
   The 22px of air this file puts between meta items is right between
   facts and wrong inside one, so the name closes it up and the address
   follows immediately underneath, the way an address is written.

   The country is dropped when it is the United States -- that is done in
   /inc/events.php, on the tribe_get_country filter, because CSS cannot
   match on text. It reaches the list view's venue lines as well, which
   were reading "Moorcroft, WY, United States". Anywhere else keeps its
   country and gets its own line, which is where a country belongs on a
   posted address.
   ===================================================================== */

body.wyohs-events-route .tribe-events-meta-group .tribe-events-meta-item.tribe-venue {
	font-weight: 700;
	margin-bottom: 0;
}

/* The organizer name takes the same treatment as the venue name: it is
   the thing being named and the lines under it are its details. It keeps
   the 22px between meta items, because what follows is a labelled field
   rather than the second line of an address. */
body.wyohs-events-route .tribe-events-meta-group .tribe-events-meta-item.tribe-organizer {
	font-weight: 700;
}

/* TEC gives the address element a line-height of its own, 1.85, which is
   26px against this block's 14px, while every other line in the meta column
   sets on the list item's 20.3px. That opened a wider gap between the street
   and the town than between the venue name and the street, so a three-line
   address read as two things rather than one. Inheriting puts all three
   lines on the column's own rhythm. */
body.wyohs-events-route .tribe-events-address,
body.wyohs-events-route .tribe-events-single address {
	margin: 0;
	font-style: normal;
	line-height: inherit;
}

body.wyohs-events-route .tribe-country-name {
	display: block;
}

/* =====================================================================
   Abbreviations

   TEC marks up state codes and dates as <abbr title>, which browsers draw
   with a dotted underline. Against this site's sand link underline that
   reads as a second kind of link. The pointer still turns into a question
   mark, so the tooltip is still discoverable -- only the dots go.
   ===================================================================== */

body.wyohs-events-route abbr[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}