/* /live/ and /agenda/, one pair: enqueued on those two pages only, by
 * mu-plugins/vetefits-live.php. Both open on the site's navy hero and share the
 * day rail (.vf-day). /live/ adds the stage; /agenda/ adds the printed program.
 * The player itself reuses .vetefits-video from vetefits.css.
 *
 * Contrast, computed from theme.json: gold on navy-deep 10.1:1 and on navy 8.3:1,
 * on-navy on navy-deep 15.1:1 and on navy 12.4:1, contrast on paper 15.4:1,
 * contrast-2 on paper 7.6:1, gold-text on paper 6.1:1, stone on paper 5.4:1. */

/* ------------------------------------------------------------- the opener */
.vf-deck {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.25;
}
.vf-dayhero h1 { margin-top: 0; }
.vf-dayhero .vf-deck + p { margin-top: var(--wp--preset--spacing--20); }
.vf-dayhero__rail { margin-top: var(--wp--preset--spacing--50); }
.vf-dayhero__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}
@media (min-width: 56rem) {
	.vf-dayhero__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
		align-items: end;
		column-gap: var(--wp--preset--spacing--60);
	}
}
.vf-live-when {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.25rem;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
}
/* "Watch the Event Live" and "Join us online" can't stand above "This event has ended".
 * The plugin sets the body class from the ended state, so this needs no script. */
.vf-live-is-ended .vf-live-upcoming { display: none; }

/* The Give link in the hero (DEC-126), with the recipient directly under it. */
.vf-live-give p { margin: .625rem 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.vf-live-give .wp-block-button__link { display: block; text-align: center; }

/* ----------------------------------------------------------- the day rail
 * The stops are spaced by the hours between them: two, one, then two. */
.vf-day {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vf-day__stop {
	position: relative;
	flex: 2 1 0;
	min-width: 0;
	padding: 1.125rem 1.5rem 0 0;
	border-top: 2px solid var(--wp--preset--color--gold-deep);
}
.vf-day__stop:nth-child(2) { flex-grow: 1; }
.vf-day__stop:last-child { flex: 0 0 auto; width: 8.5rem; padding-right: 0; border-top-color: transparent; }
.vf-day__stop::before {
	content: "";
	position: absolute;
	top: -11px; /* The dot is 20px with its border, centered on the 2px line above the padding box. */
	left: 0;
	width: .875rem;
	height: .875rem;
	background: var(--wp--preset--color--gold);
	border: 3px solid var(--wp--preset--color--navy-deep);
	border-radius: 50%;
	box-sizing: content-box;
	margin-left: -3px;
}
.vf-day__clock {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}
.vf-day__what {
	display: block;
	margin-top: .375rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--on-navy);
}
/* live.js marks where the day has reached, on /live/ only. */
.vf-day__stop.is-now::before { background: var(--wp--preset--color--base); }
.vf-day__stop.is-now .vf-day__what { color: var(--wp--preset--color--base); font-weight: 600; }
@media (max-width: 46rem) {
	.vf-day { display: block; }
	.vf-day__stop,
	.vf-day__stop:last-child {
		width: auto;
		padding: 0 0 1.5rem 1.625rem;
		border-top: 0;
		border-left: 2px solid var(--wp--preset--color--gold-deep);
	}
	.vf-day__stop:last-child { padding-bottom: 0; border-left-color: transparent; }
	.vf-day__stop::before { top: .3rem; left: -11px; margin: 0; }
}
/* The one moment of motion: the rail draws itself once. It is fully there by default. */
@media (prefers-reduced-motion: no-preference) {
	.vf-day { animation: vf-day-draw 1.1s cubic-bezier(.16, 1, .3, 1) both; }
	@keyframes vf-day-draw { from { clip-path: inset(-1rem 100% -1rem -1rem); } to { clip-path: inset(-1rem -1rem -1rem -1rem); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 46rem) {
	.vf-day { animation-name: vf-day-draw-down; }
	@keyframes vf-day-draw-down { from { clip-path: inset(-1rem -1rem 100% -1rem); } to { clip-path: inset(-1rem -1rem -1rem -1rem); } }
}

/* ---------------------------------------------------------------- /live/ */
.vf-live [hidden] { display: none !important; }
.vf-live { max-width: 76rem; margin-inline: auto; }
.vf-live h2,
.vf-live h3 { color: var(--wp--preset--color--base); margin: 0 0 .75rem; }
.vf-live h2 { font-size: var(--wp--preset--font-size--x-large); }
.vf-live h3 { font-size: var(--wp--preset--font-size--large); margin-top: 1.25rem; }

/* The stage: the 16:9 area before there is anything to play, framed like a camera's
 * viewfinder with the site's ridge along its foot. A minimum, not a fixed box: at 320px
 * or 200% text zoom the words need more height than 16:9 gives, and min-height:auto
 * lets the box grow instead of clipping them. */
.vf-live__screen {
	--vf-mark: var(--wp--preset--color--gold);
	position: relative;
	isolation: isolate;
	aspect-ratio: 16 / 9;
	max-width: 62rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
	text-align: center;
	background-color: var(--wp--preset--color--navy);
	background-image:
		linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)),
		linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)),
		linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark)),
		linear-gradient(var(--vf-mark), var(--vf-mark)), linear-gradient(var(--vf-mark), var(--vf-mark));
	background-repeat: no-repeat;
	background-size:
		1.75rem 2px, 2px 1.75rem, 1.75rem 2px, 2px 1.75rem,
		1.75rem 2px, 2px 1.75rem, 1.75rem 2px, 2px 1.75rem;
	background-position:
		top .875rem left .875rem, top .875rem left .875rem,
		top .875rem right .875rem, top .875rem right .875rem,
		bottom .875rem left .875rem, bottom .875rem left .875rem,
		bottom .875rem right .875rem, bottom .875rem right .875rem;
	border-radius: 4px;
	box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, .7);
}
.vf-live__screen::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: url("../brand/hero-ridge.svg") bottom center / cover no-repeat;
	opacity: .22;
	border-radius: 0 0 4px 4px;
	z-index: -1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.vf-live__screen h2 {
	margin: 0;
	font-size: clamp(1.625rem, 4.6vw, 3rem);
	line-height: 1.1;
	letter-spacing: .01em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.vf-live__screen p { margin: .25rem 0 0; }
.vf-live__date { margin-top: .875rem !important; font-weight: 700; color: var(--wp--preset--color--base); }
.vf-live__countdown { margin-top: clamp(1.25rem, 3vw, 2rem); }
.vf-live__countdown p { margin: 0 0 .625rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-navy); }

.vf-clock { display: flex; justify-content: center; gap: clamp(.375rem, 1.5vw, .75rem); }
.vf-clock__tile {
	display: block;
	min-width: clamp(3.75rem, 16vw, 7rem);
	padding: clamp(.5rem, 1.5vw, .875rem) .375rem clamp(.5rem, 1.2vw, .75rem);
	background: var(--wp--preset--color--navy-deep);
	border: 1px solid var(--wp--preset--color--navy-tint);
	border-radius: 4px;
}
.vf-clock__n {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gold);
}
.vf-clock__u {
	display: block;
	margin-top: .375rem;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-navy);
}

.vf-live__screen--thanks { aspect-ratio: auto; min-height: 16rem; }
.vf-live__screen--thanks .vf-live__links { margin-top: 1rem; }
.vf-live__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
/* The theme's default link is navy-light, which can't be read on this band. */
.vf-live__links a { display: inline-block; padding-block: .25rem; color: var(--wp--preset--color--gold); }
.vf-live__links a:hover,
.vf-live__links a:focus { color: var(--wp--preset--color--base); }

/* The frame is navy-deep on a navy-deep band, so it needs an edge to read as a player. */
.vf-live__watch,
.vf-live__replay { max-width: 62rem; margin-inline: auto !important; }
.vf-live__player { max-width: 62rem; margin-inline: auto; }
.vf-live__player .vetefits-video__frame { border: 1px solid var(--wp--preset--color--gold); }
.vf-live__nojs {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 1rem;
	text-align: center;
}
.vf-live__captions { max-width: 62rem; margin: .5rem auto 0; font-size: var(--wp--preset--font-size--small); }
.vf-live__notice {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--gold);
	border-radius: 6px;
}

.vf-live-schedule { margin-top: var(--wp--preset--spacing--50); }
.vf-live-schedule__head { margin-bottom: var(--wp--preset--spacing--40); }
.vf-live-schedule__head p { margin: 0; color: var(--wp--preset--color--on-navy); }
.vf-live-schedule__head h2 { margin-bottom: .25rem; font-size: var(--wp--preset--font-size--xx-large); }
.vf-live-schedule__more { margin: var(--wp--preset--spacing--30) 0 0; }
.vf-live-schedule a { display: inline-block; padding-block: .25rem; font-weight: 600; color: var(--wp--preset--color--gold); }
.vf-live-schedule a:hover,
.vf-live-schedule a:focus { color: var(--wp--preset--color--base); }

.vf-live-share { margin-top: 2rem; }
.vf-live-share h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 .5rem; }
.vf-live-share ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.vf-live-share a { display: inline-block; padding-block: .25rem; }

/* --------------------------------------------------------------- /agenda/
 * A printed order of the day: one spine, the clock beside it, dot leaders to the names. */
.vf-order { max-width: 76rem; margin-inline: auto; }
.vf-hour {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.vf-hour__head { display: contents; font: inherit; margin: 0; }
.vf-hour__clock {
	display: block;
	margin-bottom: .25rem;
	padding-left: 1.625rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 3.8vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
	position: relative;
	border-left: 2px solid var(--wp--preset--color--gold-deep);
}
.vf-hour__title {
	display: block;
	padding-left: 1.625rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	text-wrap: balance;
	border-left: 2px solid var(--wp--preset--color--gold-deep);
}
.vf-hour__body {
	padding: .75rem 0 var(--wp--preset--spacing--50) 1.625rem;
	border-left: 2px solid var(--wp--preset--color--gold-deep);
	min-width: 0;
}
.vf-hour__clock::before {
	content: "";
	position: absolute;
	top: .55em;
	left: -.5625rem;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--gold);
	border: 3px solid var(--wp--preset--color--paper);
	border-radius: 50%;
	box-sizing: border-box;
}
.vf-hour:last-child .vf-hour__body { padding-bottom: 0; }
.vf-hour:last-child .vf-hour__clock,
.vf-hour:last-child .vf-hour__title,
.vf-hour:last-child .vf-hour__body { border-left-color: transparent; }
/* The spine runs on to the last dot and stops there. */
.vf-hour:last-child .vf-hour__clock::after {
	content: "";
	position: absolute;
	top: 0;
	left: -2px;
	width: 2px;
	height: .7em;
	background: var(--wp--preset--color--gold-deep);
}
.vf-hour__body > :first-child { margin-top: 0; }
.vf-hour__body p { max-width: 42rem; line-height: 1.6; }
.vf-hour__body h3 {
	margin: var(--wp--preset--spacing--40) 0 .625rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	text-wrap: balance;
}
.vf-mayChange { font-weight: 600; color: var(--wp--preset--color--gold-text); }
.vf-listlead { margin-bottom: .375rem; font-weight: 600; }
.vf-more { margin-top: var(--wp--preset--spacing--20); }

@media (min-width: 56rem) {
	.vf-hour { grid-template-columns: 15rem minmax(0, 1fr); }
	.vf-hour__clock {
		grid-row: 1 / span 2;
		align-self: start;
		position: sticky;
		top: 6rem;
		margin: 0;
		padding: 0 2rem 0 0;
		border-left: 0;
		text-align: right;
	}
	.vf-hour__title { padding: .75rem 0 0 2.25rem; }
	.vf-hour__body { padding-left: 2.25rem; }
	.vf-hour__clock::before,
	.vf-hour:last-child .vf-hour__clock::after { display: none; }
	.vf-hour:last-child .vf-hour__title::after {
		content: "";
		position: absolute;
		top: 0;
		left: -2px;
		width: 2px;
		height: 1.25rem;
		background: var(--wp--preset--color--gold-deep);
	}
	.vf-hour__title { position: relative; }
	.vf-hour__title::before {
		content: "";
		position: absolute;
		top: 1.0625rem;
		left: -.5625rem;
		width: 1rem;
		height: 1rem;
		background: var(--wp--preset--color--gold);
		border: 3px solid var(--wp--preset--color--paper);
		border-radius: 50%;
		box-sizing: border-box;
	}
}

.vf-prog { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.vf-prog__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .625rem;
	padding-block: .4375rem;
	line-height: 1.4;
}
.vf-prog__what { font-weight: 600; color: var(--wp--preset--color--contrast); }
.vf-prog__row::after {
	content: "";
	flex: 1 1 2rem;
	order: 1;
	min-width: 2rem;
	border-bottom: 2px dotted var(--wp--preset--color--gold-deep);
	transform: translateY(-.2em);
}
/* margin-left: when the names wrap to their own line, they stay at the right edge. */
.vf-prog__who { order: 2; margin-left: auto; text-align: right; color: var(--wp--preset--color--contrast-2); }
.vf-prog__row--solo::after { display: none; }
.vf-prog--close { margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--wp--preset--color--sand); }
/* Lists of names: quiet rules, and two columns for the long one where they fit. */
.vf-prog--names .vf-prog__row { padding-block: .5rem; border-bottom: 1px solid var(--wp--preset--color--sand); break-inside: avoid; }
.vf-prog--names .vf-prog__what { font-weight: 400; }
.vf-prog--set { max-width: none; }
@media (min-width: 46rem) {
	.vf-prog--set { columns: 2; column-gap: var(--wp--preset--spacing--50); }
}
@media (max-width: 30rem) {
	.vf-prog__row::after { display: none; }
	.vf-prog__who { flex-basis: 100%; text-align: left; }
}

.vf-crisisline { margin-top: var(--wp--preset--spacing--20); font-weight: 600; }