/* Church H2O — livestream and archive.
   Inherits the theme's design tokens, with fallbacks so the plugin still looks
   deliberate under a different theme. */

/* ---- Live banner ------------------------------------------------------- */

.h2o-live-banner {
	position: relative;
	z-index: 120;
	background: linear-gradient(100deg, #b3261e, #d1372e);
	color: #fff;
}

.h2o-live-banner[hidden] {
	display: none;
}

.h2o-live-banner__inner {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: min(100% - 2.5rem, var(--h2o-wrap, 76rem));
	margin-inline: auto;
	padding-block: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.h2o-live-banner__text {
	margin-inline-end: auto;
}

.h2o-live-banner__cta {
	padding: 0.35rem 1.05rem;
	border-radius: var(--h2o-radius-pill, 999px);
	background: #fff;
	color: #b3261e;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.h2o-live-banner__cta:hover {
	background: #ffe9e7;
	color: #8f1e18;
}

.h2o-live-banner__close {
	display: grid;
	place-items: center;
	padding: 0.25rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.15);
	color: inherit;
	cursor: pointer;
}

.h2o-live-banner__close:hover {
	background: rgb(255 255 255 / 0.3);
}

/* The pulsing dot. One animation, used everywhere something is live. */

.h2o-player__dot,
.h2o-live-banner__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	animation: h2o-pulse 2s ease-in-out infinite;
}

.h2o-live-banner__dot {
	background: #fff;
}

@keyframes h2o-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
	.h2o-player__dot,
	.h2o-live-banner__dot {
		animation: none;
	}
}

/* ---- Inline badge ------------------------------------------------------ */

.h2o-inline-live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--h2o-radius-pill, 999px);
	background: #b3261e;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.h2o-inline-live[hidden] {
	display: none;
}

.h2o-inline-live:hover {
	background: #8f1e18;
	color: #fff;
}

/* ---- Player ------------------------------------------------------------ */

.h2o-player {
	margin-block: var(--h2o-gap-lg, 2.5rem);
}

.h2o-player__stage {
	position: relative;
	border-radius: var(--h2o-radius-lg, 24px);
	overflow: hidden;
	background: #000;
	box-shadow: var(--h2o-shadow-md, 0 18px 44px -24px rgb(4 28 44 / 0.4));
}

.h2o-player__stage[hidden],
.h2o-player__offline[hidden] {
	display: none;
}

.h2o-player__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* The vendor's snippet carries its own width/height attributes; override them
   so the frame fills our aspect-ratio box instead of its own fixed size. */
.h2o-player__embed .h2o-player__frame,
.h2o-player__embed iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

.h2o-player__badge {
	position: absolute;
	top: 0.9rem;
	inset-inline-start: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.8rem;
	border-radius: var(--h2o-radius-pill, 999px);
	background: #b3261e;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}

.h2o-player__message {
	position: absolute;
	inset-inline: 0;
	bottom: 3.5rem;
	margin: 0 auto;
	width: fit-content;
	max-width: 90%;
	padding: 0.55rem 1.1rem;
	border-radius: var(--h2o-radius-pill, 999px);
	background: rgb(0 0 0 / 0.75);
	color: #fff;
	font-size: 0.9rem;
	backdrop-filter: blur(4px);
}

.h2o-player__message[hidden] {
	display: none;
}

/* ---- Offline state ----------------------------------------------------- */

.h2o-offline {
	padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	background: var(--h2o-bg-alt, #f6fafc);
	border: 1px solid var(--h2o-line, #dbe8f0);
	border-radius: var(--h2o-radius-lg, 24px);
	text-align: center;
}

.h2o-offline__icon {
	color: var(--h2o-surf, #2ea9d6);
	margin-inline: auto;
	margin-bottom: 1rem;
	opacity: 0.8;
}

.h2o-offline__title {
	margin: 0 0 0.6rem;
	font-size: var(--h2o-step-2, 1.6rem);
}

.h2o-offline__text {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--h2o-text-soft, #53707f);
}

.h2o-offline__times {
	list-style: none;
	margin: 1.75rem auto 0;
	padding: 0;
	display: inline-grid;
	gap: 0.6rem;
	text-align: start;
}

.h2o-offline__times li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--h2o-line, #dbe8f0);
}

.h2o-offline__times li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.h2o-offline__times span {
	color: var(--h2o-text-soft, #53707f);
}

.h2o-offline__times strong {
	font-variant-numeric: tabular-nums;
}

.h2o-offline__latest {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--h2o-line, #dbe8f0);
}

.h2o-offline__latest-label {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--h2o-text-soft, #53707f);
}

/* ---- Archive ----------------------------------------------------------- */

.h2o-archive {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--h2o-gap, 1.5rem);
	margin-block: var(--h2o-gap-lg, 2.5rem);
}

.h2o-archive__empty {
	padding: 1.5rem;
	background: var(--h2o-bg-alt, #f6fafc);
	border: 1px solid var(--h2o-line, #dbe8f0);
	border-radius: var(--h2o-radius-md, 16px);
	color: var(--h2o-text-soft, #53707f);
}

.h2o-recording {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--h2o-surface, #fff);
	border: 1px solid var(--h2o-line, #dbe8f0);
	border-radius: var(--h2o-radius-lg, 24px);
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.h2o-recording:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--h2o-surf, #2ea9d6) 55%, transparent);
	box-shadow: var(--h2o-shadow-md, 0 18px 44px -24px rgb(4 28 44 / 0.4));
	color: inherit;
}

.h2o-recording--wide {
	flex-direction: row;
	align-items: center;
	max-width: 32rem;
	margin-inline: auto;
	text-align: start;
}

.h2o-recording--wide .h2o-recording__media {
	width: 11rem;
	flex: none;
}

.h2o-recording__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(150deg, var(--h2o-harbour, #072c44), var(--h2o-blue, #1174b8));
}

.h2o-recording__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.h2o-recording__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(14rem 9rem at 32% 24%, rgb(127 217 232 / 0.32), transparent 70%),
		linear-gradient(150deg, var(--h2o-harbour, #072c44), var(--h2o-blue, #1174b8));
}

.h2o-recording__play {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: var(--h2o-deep, #0a3d62);
	transition: transform 0.22s ease;
}

.h2o-recording:hover .h2o-recording__play {
	transform: scale(1.08);
}

.h2o-recording__duration {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	background: rgb(0 0 0 / 0.75);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.h2o-recording__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1.25rem 1.3rem;
	flex: 1;
}

.h2o-recording__date {
	font-family: var(--h2o-font-display, inherit);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.h2o-recording__meta {
	font-size: 0.87rem;
	color: var(--h2o-text-soft, #53707f);
}

@media (prefers-reduced-motion: reduce) {
	.h2o-recording,
	.h2o-recording__play {
		transition: none;
	}

	.h2o-recording:hover {
		transform: none;
	}
}

/* ---- Archive modal ----------------------------------------------------- */

.h2o-vod-modal {
	width: min(96vw, 64rem);
	padding: 0;
	border: 0;
	border-radius: var(--h2o-radius-lg, 24px);
	background: #000;
	overflow: visible;
}

.h2o-vod-modal::backdrop {
	background: rgb(4 28 44 / 0.82);
	backdrop-filter: blur(3px);
}

.h2o-vod-modal__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--h2o-radius-lg, 24px);
	background: #000;
}

.h2o-vod-modal__close {
	position: absolute;
	top: -0.75rem;
	inset-inline-end: -0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--h2o-abyss, #041c2c);
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.6);
}

.h2o-vod-modal__close:hover {
	background: var(--h2o-mist, #e8f4fa);
}

@media (max-width: 34rem) {
	.h2o-vod-modal__close {
		top: -3rem;
		inset-inline-end: 0;
	}

	.h2o-recording--wide {
		flex-direction: column;
		align-items: stretch;
	}

	.h2o-recording--wide .h2o-recording__media {
		width: 100%;
	}
}

/* ---- Sermon page player ------------------------------------------------ */

.h2o-sermon-player {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--h2o-radius-lg, 24px);
	background: #000;
	box-shadow: var(--h2o-shadow-md, 0 18px 44px -24px rgb(4 28 44 / 0.4));
}

/* ---- Notification opt-in ----------------------------------------------- */

.h2o-notify {
	margin-block: var(--h2o-gap-lg, 2.5rem);
	padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
	background: var(--h2o-bg-alt, #f6fafc);
	border: 1px solid var(--h2o-line, #dbe8f0);
	border-radius: var(--h2o-radius-lg, 24px);
	text-align: center;
}

.h2o-notify__text {
	margin: 0 auto 1.25rem;
	max-width: 44ch;
	color: var(--h2o-text-soft, #53707f);
}

.h2o-notify__button[data-state="on"] {
	--btn-bg: transparent;
	--btn-fg: var(--h2o-deep, #0a3d62);
	--btn-border: var(--h2o-surf, #2ea9d6);
}

.h2o-notify__button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.h2o-notify__button[disabled]:hover {
	transform: none;
	box-shadow: none;
}

.h2o-notify__ios {
	margin: 1.25rem auto 0;
	max-width: 46ch;
	padding: 0.9rem 1.1rem;
	background: color-mix(in srgb, var(--h2o-accent, #e0a458) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--h2o-accent, #e0a458) 45%, transparent);
	border-radius: var(--h2o-radius-sm, 10px);
	font-size: 0.925rem;
	text-align: start;
}

.h2o-notify__ios[hidden] {
	display: none;
}

/* ---- Podcast links ----------------------------------------------------- */

.h2o-podcast {
	margin-block: var(--h2o-gap-lg, 2.5rem);
	padding: 1.5rem;
	background: var(--h2o-surface, #fff);
	border: 1px solid var(--h2o-line, #dbe8f0);
	border-radius: var(--h2o-radius-lg, 24px);
}

.h2o-podcast__text {
	margin: 0 0 1rem;
	color: var(--h2o-text-soft, #53707f);
}

.h2o-podcast__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.h2o-podcast__url {
	margin: 0;
	font-size: 0.85rem;
	color: var(--h2o-text-soft, #53707f);
	overflow-wrap: anywhere;
}

.h2o-podcast__url code {
	background: var(--h2o-mist, #e8f4fa);
	padding: 0.2em 0.45em;
	border-radius: 5px;
}