/* ==========================================================================
   Homepage content rows (saved rows: WHS Home Welcome, WHS News Slider,
   WHS Events Carousel, WHS Blog Carousel). Shared tokens first, then per-row.
   Loaded site-wide after home.css so the same rows work on any page.
   ========================================================================== */
/* --- Section titles / subtitles --- */
.wyohs-section-title,
.wyohs-section-title.fl-heading,
.wyohs-section-title .fl-heading-text {
	font-family: var(--wyohs-serif);
	font-weight: 400;
	font-size: 3em;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wyohs-ink);
	margin: 0 0 .35em;
}
.wyohs-section-title--navy.fl-heading, .wyohs-section-title--navy .fl-heading-text { color: var(--wyohs-navy); }
.wyohs-section-title--peach.fl-heading, .wyohs-section-title--peach .fl-heading-text { color: var(--wyohs-peach); }
.wyohs-section-title--ink.fl-heading, .wyohs-section-title--ink .fl-heading-text { color: var(--wyohs-ink); }
.wyohs-section-title--white.fl-heading, .wyohs-section-title--white .fl-heading-text { color: #fff; }
.wyohs-section-sub, .wyohs-section-sub p { font-size: 16px; line-height: 1.5; color: var(--wyohs-ink); margin: 0 0 1.6em; }
.wyohs-prose--left, .wyohs-prose--left p { text-align: left; }
.wyohs-welcome .wyohs-prose { margin-left: 0; max-width: 40em; }

/* --- Text links (Button module + .wyohs-textlink): "LABEL >" in the display face --- */
.wyohs-textlink { --link-color: var(--wyohs-ink); }
.wyohs-textlink--ink   { --link-color: var(--wyohs-ink); }
.wyohs-textlink--green { --link-color: var(--wyohs-green); }
.wyohs-textlink--navy  { --link-color: var(--wyohs-navy); }
.wyohs-textlink--peach { --link-color: var(--wyohs-peach); }
.wyohs-textlink--sand  { --link-color: var(--wyohs-sand); }
.wyohs-textlink--white { --link-color: #fff; }
.wyohs-textlink--gold  { --link-color: #e2a93a; }
.wyohs-textlink .fl-button-wrap { text-align: left; margin: 0; padding: 0; }
.wyohs-textlink .fl-module-content { margin-left: 0; margin-right: 0; }
.wyohs-textlink a.fl-button,
.wyohs-textlink a.fl-button:visited {
	display: inline-block;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0;
	font-family: var(--wyohs-display);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--link-color) !important;
	text-decoration: none;
}
.wyohs-textlink a.fl-button .fl-button-text { color: inherit; }
.wyohs-textlink a.fl-button .fl-button-text::after { content: " >"; font-size: .7em; vertical-align: .08em; }
.wyohs-textlink a.fl-button:hover .fl-button-text,
.wyohs-textlink a.fl-button:focus-visible .fl-button-text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.wyohs-textlink + .wyohs-textlink { margin-top: 10px; }

/* --- Square arrows shared by the Content Slider (.wyohs-slider) and Posts Carousel (.wyohs-carousel) --- */
.wyohs-slider, .wyohs-carousel { --arrow-bg: var(--wyohs-navy); --arrow-fg: var(--wyohs-peach); --arrow-size: 44px; --arrow-offset: -66px; }
.wyohs-news .wyohs-slider   { --arrow-bg: #e2a93a; --arrow-fg: var(--wyohs-navy); }
.wyohs-events .wyohs-carousel { --arrow-bg: var(--wyohs-navy); --arrow-fg: var(--wyohs-peach); }
.wyohs-blog .wyohs-carousel   { --arrow-bg: #2c1f17; --arrow-fg: #fff; }
.wyohs-slider .fl-content-slider, .wyohs-carousel .fl-post-carousel { position: relative; }
/* BB parks the nav container at top:50%; make it cover the module so buttons position against the whole track. */
.wyohs-slider .fl-content-slider-navigation,
.wyohs-carousel .fl-post-carousel-navigation { position: absolute !important; inset: 0 !important; height: auto !important; margin: 0 !important; pointer-events: none; }
.wyohs-slider .fl-content-slider-navigation button,
.wyohs-carousel .fl-post-carousel-navigation button { pointer-events: auto; }

.wyohs-slider .fl-content-slider-navigation button,
.wyohs-carousel .fl-post-carousel-navigation button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--arrow-size);
	height: var(--arrow-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background: var(--arrow-bg) !important;
	color: var(--arrow-fg);
	opacity: 1;
	cursor: pointer;
	z-index: 20;
	transition: filter .15s ease;
}
.wyohs-slider .fl-content-slider-navigation button:hover,
.wyohs-carousel .fl-post-carousel-navigation button:hover { filter: brightness(1.12); }
.wyohs-slider .fl-content-slider-navigation .slider-prev,
.wyohs-carousel .fl-post-carousel-navigation .carousel-prev { left: var(--arrow-offset); }
.wyohs-slider .fl-content-slider-navigation .slider-next,
.wyohs-carousel .fl-post-carousel-navigation .carousel-next { right: var(--arrow-offset); }
.wyohs-slider .fl-content-slider-navigation button,
.wyohs-carousel .fl-post-carousel-navigation button { display: flex; align-items: center; justify-content: center; }
.wyohs-slider .fl-content-slider-svg-container,
.wyohs-carousel .fl-post-carousel-svg-container { position: static !important; display: block; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 0; transform: none !important; }
.wyohs-slider .fl-content-slider-navigation svg,
.wyohs-carousel .fl-post-carousel-navigation svg { position: static !important; inset: auto; display: block; width: 30px !important; height: 30px !important; fill: var(--arrow-fg) !important; }
.wyohs-carousel .fl-post-carousel-navigation button { top: calc(50% + 41px); }   /* offset for the 82px badge gutter above the cards */
/* Below 1240px there is no gutter for the arrows beside the track, so they move above it,
   side by side in the top-right corner (this also covers BB's medium/tablet breakpoints). */
@media (max-width: 1240px) {
	.wyohs-slider .fl-content-slider, .wyohs-carousel .fl-post-carousel { padding-top: calc(var(--arrow-size) + 16px); }
	.wyohs-slider .fl-content-slider-navigation button,
	.wyohs-carousel .fl-post-carousel-navigation button { top: 0; transform: none; left: auto; }
	.wyohs-slider .fl-content-slider-navigation .slider-prev,
	.wyohs-carousel .fl-post-carousel-navigation .carousel-prev { left: auto; right: calc(var(--arrow-size) + 8px); }
	.wyohs-slider .fl-content-slider-navigation .slider-next,
	.wyohs-carousel .fl-post-carousel-navigation .carousel-next { right: 0; }
}

/* --- Left/right alignment: every module edge sits on the row content edge (BB's default 20px
       module margins and the carousels' centred/padded wrappers are removed inside these rows). --- */
.wyohs-welcome .fl-module, .wyohs-news .fl-module, .wyohs-events .fl-module, .wyohs-blog .fl-module, .wyohs-korell .fl-module,
.wyohs-welcome .fl-module-content, .wyohs-news .fl-module-content, .wyohs-events .fl-module-content, .wyohs-blog .fl-module-content, .wyohs-korell .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; }
.wyohs-carousel .fl-post-carousel { padding-left: 0 !important; padding-right: 0 !important; }
.wyohs-carousel .bx-wrapper, .wyohs-slider .bx-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
/* The Learn/Explore/Support row is a fixed-width row (its 20px padding sits inside the 1440px box),
   the rows below are full-width rows with fixed content; above 1440px drop its side padding so the
   card edges line up with the text below. */
@media (min-width: 1440px) { .wyohs-cards > .fl-row-content-wrap { padding-left: 0; padding-right: 0; } }

/* --- Welcome row --- */
.wyohs-welcome .wyohs-section-title, .wyohs-welcome .wyohs-section-title .fl-heading-text { font-size: clamp(2.4em, 3.4vw, 3.6em); }
.wyohs-welcome__copy .fl-col-content { padding-right: 40px; }
@media (max-width: 767px) { .wyohs-welcome__copy .fl-col-content { padding-right: 0; } }

/* --- News slider (Content Slider module) --- */
.wyohs-slider .fl-slide-content-wrap { display: block; width: auto !important; height: auto !important; max-width: 70%; }
.wyohs-slider .fl-slide-content { display: block; margin: 0 !important; padding: 36px 48px 40px !important; }
.wyohs-slider { --slider-h: 400px; } /* keep equal to the module's Height setting */
.wyohs-slider .fl-slide-foreground {
	position: relative; z-index: 1;
	display: flex; align-items: flex-end; min-height: var(--slider-h); height: 100%; max-width: none !important;
	background: linear-gradient(to top, rgba(10,20,32,.78) 0%, rgba(10,20,32,.35) 45%, rgba(10,20,32,0) 75%);
}
.wyohs-slider .fl-slide-title {
	font-family: var(--wyohs-serif);
	font-weight: 400;
	font-size: 2.6em;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	margin: 0 0 .3em;
	text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.wyohs-slider .fl-slide-text, .wyohs-slider .fl-slide-text p { font-size: 14.5px; line-height: 1.5; color: #fff; }
.wyohs-slider .fl-slide-text p { margin: 0 0 .8em; }
.wyohs-slider .fl-slide-cta-link {
	display: inline-block;
	font-family: var(--wyohs-display);
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-peach) !important;
	text-decoration: none;
}
.wyohs-slider .fl-slide-cta-link::after { content: " >"; font-size: .7em; }
.wyohs-slider .fl-slide-cta-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wyohs-news .wyohs-textlink { margin-top: 24px; }

/* --- Posts Carousel cards (events + blog) --- */
.wyohs-carousel { --card-bg: #bad4f3; --card-ink: var(--wyohs-ink); --card-title: var(--wyohs-navy); --card-rule: var(--wyohs-navy); --card-foot-bg: var(--wyohs-navy); --card-foot-fg: var(--wyohs-peach); }
.wyohs-blog__carousel { --card-bg: var(--wyohs-sand); --card-title: #2c1f17; --card-rule: #2c1f17; --card-foot-bg: #2c1f17; --card-foot-fg: #fff; }
/* Equal-height cards: let the track flex and stretch instead of trusting bxSlider's measured height. */
.wyohs-carousel .bx-viewport { height: auto !important; }
.wyohs-carousel .bx-viewport > .fl-post-carousel-wrapper { display: flex !important; align-items: stretch; height: auto !important; }
.wyohs-carousel .fl-post-carousel-post {
	flex: 0 0 auto;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--card-bg) !important;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	height: auto !important;
}
.wyohs-carousel .fl-post-carousel-image { position: relative; margin: 0; }
.wyohs-carousel .fl-post-carousel-image img { display: block; width: 100%; height: 170px !important; object-fit: cover; }
.wyohs-carousel .fl-post-carousel-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 18px 0;
	background: transparent !important;
}
.wyohs-carousel .fl-post-carousel-title {
	font-family: var(--wyohs-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 .6em;
	padding-bottom: .55em;
	border-bottom: 1px solid var(--card-rule);
}
.wyohs-carousel .fl-post-carousel-title a { color: var(--card-title); text-decoration: none; }
.wyohs-carousel .fl-post-carousel-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wyohs-carousel .fl-post-carousel-meta { order: -1; margin: 0 0 .9em; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--card-ink); }
.wyohs-carousel .fl-post-carousel-meta a { color: inherit; text-decoration: none; }
.wyohs-carousel .fl-post-carousel-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.wyohs-carousel .fl-post-carousel-content, .wyohs-carousel .fl-post-carousel-content p { font-size: 13px; line-height: 1.5; color: var(--card-ink); }
.wyohs-carousel .fl-post-carousel-content p { margin: 0 0 1em; }
.wyohs-carousel .fl-post-carousel-more {
	display: block;
	margin: auto -18px 0;
	padding: 13px 20px;
	background: var(--card-foot-bg);
	color: var(--card-foot-fg) !important;
	font-family: var(--wyohs-display);
	font-size: 19px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .15s ease;
}
.wyohs-carousel .fl-post-carousel-more:hover { filter: brightness(1.15); }
.wyohs-carousel .fl-post-carousel-more::after { content: " >"; font-size: .7em; }
.wyohs-carousel .fl-post-carousel-more .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wyohs-carousel .fl-post-carousel-wrapper { padding-top: 82px; }  /* room for the date badge to poke above the card */
.wyohs-carousel .bx-wrapper { margin-bottom: 0 !important; }
.wyohs-events .wyohs-textlink, .wyohs-blog .wyohs-textlink { margin-top: 28px; }

/* Category badge (blog) and date badge (events), both injected by home.js */
.wyohs-badge {
	position: absolute;
	left: 18px;
	bottom: 16px;
	padding: 5px 9px;
	background: var(--wyohs-cream);
	color: var(--wyohs-ink);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 3px;
	line-height: 1.2;
	z-index: 2;
}
/* Stand-in for an event with no featured image, built by home.js. Same 170px height
   as the cropped photo, so a row of mixed cards keeps one baseline. The event's own
   title is set huge, tilted and clipped, then faded up into the cream so the date
   badge has clean ground under it. Three variants, chosen off the post id, keep two
   neighbouring stand-ins from twinning. */
.wyohs-eventph {
	position: relative;
	margin: 0;
	width: 100%;
	height: 170px;
	background: var(--wyohs-cream);
}
.wyohs-eventph__crop { position: absolute; inset: 0; overflow: hidden; }
.wyohs-eventph__crop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #fff8e7 0%, rgba(255, 248, 231, .72) 38%, rgba(255, 248, 231, 0) 78%);
}
.wyohs-eventph__word {
	position: absolute;
	left: -14%;
	bottom: -18%;
	width: 150%;
	margin: 0;
	font-family: var(--wyohs-serif);
	font-size: 64px;
	line-height: .9;
	color: rgba(27, 58, 92, .22);
	transform: rotate(-7deg);
	transform-origin: 0 100%;
}
.wyohs-eventph--v1 .wyohs-eventph__word { left: -22%; bottom: -6%;  font-size: 56px; transform: rotate(-4deg); }
.wyohs-eventph--v2 .wyohs-eventph__word { left: -8%;  bottom: -28%; font-size: 74px; transform: rotate(-10deg); }

.wyohs-datebadge {
	position: absolute;
	left: 50%;
	top: -82px;
	transform: translateX(-50%);
	display: flex;
	gap: 3px;
	z-index: 2;
	font-family: var(--wyohs-display);
	color: var(--wyohs-peach);
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}
.wyohs-datebadge__part {
	background: var(--wyohs-navy);
	padding: 12px 14px 10px;
	min-width: 70px;
	text-align: center;
	line-height: 1;
}
.wyohs-datebadge__mon { display: block; font-size: 1.45em; margin-bottom: 6px; color: #fff; }
.wyohs-datebadge__day { display: block; font-size: 3em; color: #fff; }
.wyohs-datebadge--range .wyohs-datebadge__part + .wyohs-datebadge__part { position: relative; }
.wyohs-datebadge--range .wyohs-datebadge__part + .wyohs-datebadge__part::before {
	content: ""; position: absolute; left: -12px; top: 50%; width: 22px; height: 2px; background: var(--wyohs-peach);
}
/* Event card meta (injected by home.js from The Events Calendar data) */
.wyohs-events__carousel .fl-post-carousel-content > p { display: none; }   /* excerpt not used on event cards */
.wyohs-events__carousel .fl-post-carousel-title { border-bottom: 0; padding-bottom: 0; margin-bottom: .5em; }
.wyohs-eventmeta--where {
	font-size: 11.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--card-ink);
	padding-bottom: .9em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--card-rule);
}
.wyohs-eventmeta--details { margin-bottom: 1.2em; }
.wyohs-eventmeta__line { display: block; font-size: 13px; line-height: 1.5; color: var(--card-ink); margin-bottom: .35em; }

/* --- Korell feature band (saved row "WHS Korell Feature") --- */
.wyohs-korell { color: #fff; }
.wyohs-korell .fl-col-group { display: flex; align-items: center; }
.wyohs-korell .fl-col-group::before, .wyohs-korell .fl-col-group::after { display: none; }
.wyohs-korell .fl-col { min-width: 0; float: none; }
.wyohs-korell__logo-img .fl-photo { display: flex; justify-content: flex-start; }   /* logo flush to the left content edge */
.wyohs-korell__logo-img .fl-photo-img { width: 100%; max-width: 320px; height: auto; }
.wyohs-korell__side-img .fl-photo { display: flex; justify-content: flex-end; }     /* polaroids flush to the right content edge */
.wyohs-korell__side-img .fl-photo-img { width: 100%; max-width: 420px; height2.6e: auto; }
.wyohs-korell__copy > .fl-col-content { padding: 0 48px; }
.wyohs-korell .wyohs-section-title--white.fl-heading { font-size: 4em; margin-bottom: .5em; }
.wyohs-korell__tag.fl-heading, .wyohs-korell__tag .fl-heading-text {
	font-family: var(--wyohs-display);
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.4;
	margin: 0 0 1.2em;
}
.wyohs-prose--onnavy, .wyohs-prose--onnavy p { color: #fff; }
.wyohs-korell .wyohs-prose { max-width: 34em; margin-left: 0; }
@media (max-width: 992px) {
	.wyohs-korell .fl-col-group { flex-wrap: wrap; }
	.wyohs-korell .fl-col { flex: 1 1 100%; width: 100% !important; max-width: 100%; }
	.wyohs-korell__copy > .fl-col-content { padding: 28px 0; }
	.wyohs-korell__logo-img .fl-photo, .wyohs-korell__side-img .fl-photo { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Phone refinements — 28 Aug 2026
   Every selector here restates the class pair the rule above it uses
   (.wyohs-section-title.fl-heading, not .wyohs-section-title), because the
   base rules are two classes deep and a single class loses to them.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Section heads come down from 3em. 2.5em is the size at which
	   "Announcements" clears 350px of measure on a 390px screen, which is the
	   narrowest phone worth designing for. The welcome head (--ink) has its
	   own clamp and the Korell head (--white) is handled below, so neither is
	   named here. */
	.wyohs-section-title--peach.fl-heading,
	.wyohs-section-title--navy.fl-heading {
		font-size: 2.5em;
		line-height: 1.12;
	}

	/* Korell: head, tagline and both pictures about a fifth smaller. */
	.wyohs-korell .wyohs-section-title--white.fl-heading {
		font-size: 3.2em;
		line-height: 1.1;
	}

	.wyohs-korell .wyohs-korell__tag.fl-heading {
		font-size: 17px;
	}

	.wyohs-korell .wyohs-korell__logo-img img,
	.wyohs-korell .wyohs-korell__side-img img {
		max-width: 80%;
	}

	/* News slider: the photograph stacks above the copy at this width, so the
	   dark card the copy sits on has nothing to hold it to and only muddies
	   the navy row behind it. White type straight on the row instead, full
	   measure, and the gradient that lifts the copy off the photograph on
	   desktop goes with it. */
	.wyohs-slider .fl-slide-content-wrap {
		max-width: 100%;
	}

	.wyohs-slider .fl-slide-content {
		background: transparent !important;
		padding: 22px 0 6px !important;
	}

	.wyohs-slider .fl-slide-foreground {
		background: none;
		min-height: 0;
	}
}

/* ==========================================================================
   Snapshot: one ordinary photograph dressed as a print, so a plain photo can
   sit in a .wyohs-welcome media column beside the pre-framed composites on the
   home page. Add `wyohs-snapshot` to a Photo module (Advanced > Class); add
   `wyohs-snapshot--right` as well to tilt it the other way. Crops to 4:3.
   First used on Donate, 2 Oct 2026.
   ========================================================================== */
.fl-module-photo.wyohs-snapshot .fl-photo-content {
  display: inline-block;
  background: #fbf6ea;
  padding: 14px 14px 46px;
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: 0 12px 26px rgba(27, 58, 92, .18), 0 1px 3px rgba(0, 0, 0, .12);
  transform: rotate(-2deg);
}
.fl-module-photo.wyohs-snapshot--right .fl-photo-content { transform: rotate(2deg); }
.fl-module-photo.wyohs-snapshot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 768px) {
  .fl-module-photo.wyohs-snapshot .fl-photo-content { padding: 10px 10px 32px; transform: rotate(-1.2deg); }
  .fl-module-photo.wyohs-snapshot--right .fl-photo-content { transform: rotate(1.2deg); }
}

/* Snapshot at phone width: clear the gutter and the copy below it. */
@media (max-width: 768px) {
  .fl-module-photo.wyohs-snapshot { padding: 0 6px; margin-bottom: 28px; }
}