/*
 * Lobby screen and Presenter template.
 * Sizes are based on the screen itself (vmin), so the same page fits
 * a 4:3 projector and a widescreen TV.
 */
:root {
	--bv-teal: #1A363B;
	--bv-teal-dark: #13292D;
	--bv-gold: #DEB374;
	--bv-light: #F5F5F5;
	--bv-soft: #CDD4D1;
	--bv-muted: #BEC9C6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
html { background: var(--bv-teal-dark); }
body.screen-body {
	background: radial-gradient(ellipse at 50% 120%, #234a50 0%, var(--bv-teal) 50%, var(--bv-teal-dark) 100%);
	color: var(--bv-light);
	font-family: Arial, Helvetica, sans-serif;
	cursor: none;
}
.screen {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
}
.screen-slides {
	position: relative;
	flex: 1;
	font-size: 4.6vmin;
	line-height: 1.35;
}
.slide {
	position: absolute;
	inset: 0;
	padding: 6vmin 7vmin 3vmin;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.slide.is-active { opacity: 1; }
.slide > * { max-width: 88vw; margin: 0 0 0.5em; }
@media (min-aspect-ratio: 16/10) {
	.slide > * { max-width: 72vw; }
}
.slide h1, .slide h2, .slide h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
	line-height: 1.15;
	margin: 0 0 0.45em;
}
.slide h1 { font-size: 2.1em; }
.slide h2 { font-size: 1.7em; color: var(--bv-gold); }
.slide h3 { font-size: 1.3em; color: var(--bv-soft); }
.slide p { color: var(--bv-light); }
.slide strong { color: var(--bv-gold); font-weight: normal; }
.slide ul, .slide ol { text-align: left; }
.slide img { max-height: 55vh; width: auto; max-width: 100%; }
.slide figure { margin: 0 0 0.5em; }
.slide a { color: var(--bv-gold); text-decoration: none; }

.screen-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3vmin;
	padding: 2.2vmin 4vmin;
	border-top: 0.4vmin solid var(--bv-gold);
	background: rgba(19, 41, 45, 0.85);
}
.screen-logo { height: 7vmin; width: auto; }
.screen-service {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.4vmin;
	color: var(--bv-soft);
}

/* Bible trivia */
.slide-trivia .trivia-label {
	font-size: 0.8em;
	color: var(--bv-muted);
	margin-bottom: 0.6em;
}
.slide-trivia .trivia-question,
.slide-trivia .trivia-answer {
	font-size: 1.7em;
	color: var(--bv-light);
	max-width: 80vw;
}
.slide-trivia .trivia-answer { color: var(--bv-gold); }
.slide-trivia .trivia-ref {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--bv-soft);
	margin-top: 0.3em;
}
.slide-trivia [hidden] { display: none; }

/* Picture-only slides fill the whole screen. On a screen with a different
   shape, the edges are trimmed, so keep words near the middle of the picture. */
.slide.slide-picture { padding: 0; }
.slide.slide-picture > * { max-width: none; width: 100%; height: 100%; margin: 0; }
.slide.slide-picture figure,
.slide.slide-picture .wp-block-image { width: 100%; height: 100%; margin: 0; }
.slide.slide-picture img {
	width: 100%;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}
.screen.is-picture .screen-bar { display: none; }
.slide-picture figcaption { display: none; }

/* Title bar: shows when a widescreen picture is framed on a 4:3 screen */
.screen-title {
	display: none;
	flex: 0 0 auto;
	padding: 1.8vmin 4vmin;
	background: #1F4247;
	border-bottom: 0.4vmin solid var(--bv-gold);
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.2vmin;
	color: var(--bv-light);
	line-height: 1.2;
}
.screen.is-framed .screen-title { display: block; }
.screen.is-framed .screen-bar { display: flex !important; background: #1F4247; }

/* Picture modes */
.slide.slide-picture.mode-framed img,
.slide.slide-picture.mode-contain img { object-fit: contain; }

/* Bottom bar: logo, countdown in the middle, clock on the right */
.screen-bar > .screen-logo { flex: 0 0 auto; }
.screen-status {
	margin: 0 0 0 auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.4vmin;
	color: var(--bv-soft);
	white-space: nowrap;
	text-align: right;
}
.screen-status-name:not(:empty)::after { content: ", "; }
.screen-status-name { color: var(--bv-light); }
.screen-status-time { font-variant-numeric: tabular-nums; }
.bar-always .screen-bar { display: flex !important; }

/* Countdown in the bottom bar */
.screen-countdown {
	flex: 1 1 auto;
	justify-content: center;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 1.6vmin;
	font-family: Georgia, "Times New Roman", serif;
}
.screen-countdown[hidden] { display: none; }
.screen-countdown-label { font-size: 3.4vmin; color: var(--bv-light); }
.screen-countdown-time {
	font-size: 6vmin;
	color: var(--bv-gold);
	font-variant-numeric: tabular-nums;
	min-width: 4ch;
	text-align: right;
}
.screen.is-countdown .screen-bar { display: flex !important; padding-top: 1.6vmin; padding-bottom: 1.6vmin; }

@media (prefers-reduced-motion: reduce) {
	.slide { transition: none; }
}