/* =============================================================================
   CCLA Sermon Archive — styles modeled on calvarycch.org/sermons
   ============================================================================= */

/* ── CSS custom properties — scoped to :root so single sermon pages inherit ── */
/* Defaults below are overridden by the PHP palette engine via wp_add_inline_style. */
:root {
	/* Accent & brand */
	--servantly-navy:           #1a2744;
	--servantly-navy-dark:      #111c36;
	--servantly-gold:           #d6754f;
	--servantly-gold-dark:      #b85c38;
	--servantly-secondary:      #226053;
	--servantly-secondary-dark: #1a4a3e;
	--servantly-live:           #e03030;

	/* Backgrounds & surfaces */
	--servantly-page-bg:        #e9e8e7;
	--servantly-surface-bg:     #f5f5f4;
	--servantly-card-bg:        #ffffff;
	--servantly-border:         #e0ddd9;

	/* Typography */
	--servantly-text-primary:   #1a1a1a;
	--servantly-text-secondary: #555555;

	/* Badges */
	--servantly-badge-bg:       #1a2744;
	--servantly-badge-text:     #ffffff;

	/* Overlays & media */
	--servantly-hero-tint:      #0a0a0a;
	--servantly-player-bg:      #000000;

	/* Watch page */
	--servantly-watch-bg:       #0f1117;
	--servantly-watch-surface:  #1c2333;
	--servantly-watch-footer:   #13171f;
	--servantly-watch-panel:    #243044;

	/* Legacy utility aliases */
	--servantly-white:          #ffffff;
	--servantly-gray-100:       #f5f6f8;
	--servantly-gray-200:       #e8eaed;
	--servantly-gray-500:       #6b7280;
	--servantly-gray-700:       #374151;

	/* Radius & shadow */
	--servantly-radius:         6px;
	--servantly-shadow:         0 2px 12px rgba(0, 0, 0, .10);
}

/* ── Reset / scope ─────────────────────────────────────────────────────────── */
.servantly-sermons-page *,
.servantly-sermons-page *::before,
.servantly-sermons-page *::after {
	box-sizing: border-box;
}

.servantly-sermons-page {
	font-family: inherit;
	color: var(--servantly-gray-700);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.servantly-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: var(--servantly-radius);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .2s, color .2s, border-color .2s;
}

.servantly-btn--primary {
	background: var(--servantly-gold);
	color: #fff;
	border-color: var(--servantly-gold);
}

.servantly-btn--primary:hover {
	background: var(--servantly-gold-dark);
	border-color: var(--servantly-gold-dark);
	color: #fff;
}

.servantly-btn--secondary {
	background: transparent;
	color: var(--servantly-white);
	border-color: rgba(255, 255, 255, .6);
}

.servantly-btn--secondary:hover {
	background: rgba(255, 255, 255, .15);
	border-color: var(--servantly-white);
}

.servantly-btn--outline {
	background: transparent;
	color: var(--servantly-gold);
	border-color: var(--servantly-gold);
}

.servantly-btn--outline:hover {
	background: var(--servantly-gold);
	color: var(--servantly-white);
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.servantly-hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: flex-end;
	background: var(--servantly-navy-dark) center / cover no-repeat;
	padding: 0;
}

.servantly-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--servantly-navy-dark) 95%, transparent) 0%,
		color-mix(in srgb, var(--servantly-navy-dark) 55%, transparent) 55%,
		color-mix(in srgb, var(--servantly-navy-dark) 25%, transparent) 100%
	);
}

.servantly-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	padding: 60px 48px;
	color: var(--servantly-white);
	text-align: right;
}

/* 1 — Label: "The Message" */
.servantly-hero__eyebrow {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--servantly-gold);
	margin: 0 0 4px;
}

/* 2 — Passage: tight under the label */
.servantly-hero__scripture {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin: 0 0 20px;
}

/* 3 — Sermon title: large, heavy, all-caps */
.servantly-hero__title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 12px;
}


.servantly-hero__title a {
	color: var(--servantly-white);
	text-decoration: none;
}

.servantly-hero__title a:hover {
	color: var(--servantly-gold);
}

/* 4 — Speaker: light, small, separated from title */
.servantly-hero__speaker {
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin: 0 0 28px;
}

/* 5 — Buttons */
.servantly-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
}

/* ── Live banner ────────────────────────────────────────────────────────────── */
.servantly-live-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 22px;
	background: transparent;
	color: var(--servantly-gold);
	text-decoration: none;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 12px 12px 0 0;
	border: 2px solid var(--servantly-gold);
	border-bottom: none;
	transition: background .2s ease, color .2s ease;
}

.servantly-live-banner:hover {
	background: color-mix(in srgb, var(--servantly-gold) 8%, transparent);
	color: var(--servantly-gold);
}

/* Red pulsing dot */
.servantly-live-banner__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--servantly-live);
	flex-shrink: 0;
	animation: servantly-live-pulse-banner 1.4s ease-in-out infinite;
}

@keyframes servantly-live-pulse-banner {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--servantly-live) 60%, transparent); }
	50%      { opacity: .6; box-shadow: 0 0 0 5px transparent; }
}

.servantly-live-banner__label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.servantly-live-banner__cta {
	flex-shrink: 0;
	font-weight: 700;
}

/* Connect live banner to hero with matching terracotta border */
.servantly-live-banner + .servantly-hero--shortcode {
	border-radius: 0 0 12px 12px;
	border: 2px solid var(--servantly-gold);
	border-top: none;
}

/* ── Countdown banner ───────────────────────────────────────────────────────── */
.servantly-countdown-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 22px;
	background: transparent;
	color: var(--servantly-gold);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 12px 12px 0 0;
	border: 2px solid var(--servantly-gold);
	border-bottom: none;
}

.servantly-cd__label {
	flex-shrink: 0;
	opacity: .9;
}

/* Post-start grace: sentence case, no giant 00:00:00 timer */
.servantly-countdown-banner--buffer {
	justify-content: center;
	text-transform: none;
	letter-spacing: .02em;
	font-weight: 500;
}

.servantly-countdown-banner--buffer .servantly-cd__label {
	text-align: center;
	max-width: 36em;
	line-height: 1.35;
}

.servantly-countdown-banner--buffer .servantly-cd__timer {
	display: none;
}

.servantly-cd__timer {
	display: flex;
	align-items: center;
	gap: 6px;
}

.servantly-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.servantly-cd__num {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--servantly-gold);
	min-width: 2ch;
	text-align: center;
}

.servantly-cd__unit-label {
	font-size: .6rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: color-mix(in srgb, var(--servantly-gold) 70%, transparent);
	margin-top: 2px;
}

.servantly-cd__sep {
	font-size: 1.2rem;
	font-weight: 700;
	color: color-mix(in srgb, var(--servantly-gold) 50%, transparent);
	align-self: flex-start;
	padding-top: 2px;
}

/* Connect countdown banner to hero */
.servantly-countdown-banner + .servantly-hero--shortcode {
	border-radius: 0 0 12px 12px;
	border: 2px solid var(--servantly-gold);
	border-top: none;
}

/* ── Shortcode hero modifier ────────────────────────────────────────────────── */
/* When the hero is dropped via shortcode, honour the container's width and     */
/* use an h2 instead of h1 so heading hierarchy on the host page stays correct. */
.servantly-hero--shortcode {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.servantly-hero--shortcode .servantly-hero__title {
	font-size: clamp(1.6rem, 4vw, 2.8rem);
}

/* ── Recent strip ───────────────────────────────────────────────────────────── */
.servantly-recent {
	background: var(--servantly-secondary);
	padding: 40px 0;
}

.servantly-recent__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.servantly-recent__heading {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--servantly-badge-text, #ffffff);
	margin: 0 0 20px;
}

.servantly-recent__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.servantly-recent__track::-webkit-scrollbar {
	height: 4px;
}

.servantly-recent__track::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .08);
}

.servantly-recent__track::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .5);
	border-radius: 2px;
}

/* ── Cards (shared) ─────────────────────────────────────────────────────────── */
.servantly-card {
	display: flex;
	flex-direction: column;
	background: var(--servantly-card-bg, #fff);
	border-radius: var(--servantly-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--servantly-gray-700);
	box-shadow: var(--servantly-shadow);
	transition: transform .2s, box-shadow .2s;
}

.servantly-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.servantly-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--servantly-navy) center / cover no-repeat;
	flex-shrink: 0;
	overflow: hidden;
}

.servantly-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .25);
	opacity: 0;
	transition: opacity .2s;
}

.servantly-card:hover .servantly-card__play {
	opacity: 1;
}

.servantly-card__play svg {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
	transition: transform .18s;
}

.servantly-card:hover .servantly-card__play svg {
	transform: scale(1.1);
}

.servantly-card__body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.servantly-card__scripture {
	font-size: .75rem;
	font-weight: 600;
	color: var(--servantly-gold);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0;
}

.servantly-card__title {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--servantly-navy);
}

.servantly-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 4px 0 0;
	font-size: .75rem;
	color: var(--servantly-gray-500);
}

.servantly-card__series {
	background: var(--servantly-gray-200);
	color: var(--servantly-navy);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: .7rem;
}

/* ── Compact card (recent strip) ────────────────────────────────────────────── */
.servantly-card--compact {
	min-width: 220px;
	max-width: 240px;
	scroll-snap-align: start;
	flex-shrink: 0;
}

.servantly-card--compact .servantly-card__title {
	font-size: .875rem;
}

/* ── Library section ────────────────────────────────────────────────────────── */
.servantly-library {
	background: var(--servantly-gray-100);
	padding: 50px 0 70px;
}

.servantly-library__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.servantly-library__heading {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--servantly-navy);
	margin: 0 0 24px;
}

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.servantly-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
	padding: 18px 20px;
	background: var(--servantly-white);
	border-radius: var(--servantly-radius);
	box-shadow: var(--servantly-shadow);
}

.servantly-filter__select {
	flex: 1;
	min-width: 160px;
	padding: 9px 32px 9px 12px;
	font-size: .9rem;
	color: var(--servantly-navy);
	background: var(--servantly-gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a2744' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: 1.5px solid var(--servantly-gray-200);
	border-radius: var(--servantly-radius);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .2s;
}

.servantly-filter__select:focus {
	outline: 2px solid var(--servantly-gold);
	outline-offset: 1px;
	border-color: var(--servantly-gold);
}

.servantly-filter__select--sort {
	flex: 0 0 auto;
	min-width: 190px;
	border-left: 1.5px solid var(--servantly-gray-200);
}

/* ── Results grid ───────────────────────────────────────────────────────────── */
.servantly-sermons__grid-error {
	padding: 40px;
	text-align: center;
	color: var(--servantly-gray-500);
}

.servantly-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	min-height: 200px;
}

.servantly-grid .servantly-card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.servantly-loading {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px;
}

.servantly-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--servantly-gray-200);
	border-top-color: var(--servantly-navy);
	border-radius: 50%;
	animation: servantly-spin .7s linear infinite;
}

@keyframes servantly-spin {
	to { transform: rotate(360deg); }
}

/* ── Load more / no results ─────────────────────────────────────────────────── */
.servantly-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.servantly-no-results {
	color: var(--servantly-gray-500);
	font-size: 1rem;
	text-align: center;
	padding: 40px 0;
	margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.servantly-hero {
		min-height: 360px;
	}

	.servantly-hero__content {
		max-width: 100%;
		margin-left: 0;
		padding: 32px 20px 20px;
		text-align: left;
	}

	.servantly-hero__actions {
		justify-content: flex-start;
	}

	/* Scale down type on small screens */
	.servantly-hero__title {
		font-size: clamp(1.4rem, 6vw, 2rem);
	}

	.servantly-hero__eyebrow {
		font-size: 1rem;
	}

	.servantly-filters {
		flex-direction: column;
	}

	.servantly-filter__select,
	.servantly-filter__select--sort {
		min-width: 0;
		width: 100%;
	}

	.servantly-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.servantly-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Single Sermon Post
   All rules use body.servantly-sermon-page — added via PHP body_class filter in
   class-servantly-si-template.php — because Salient/caching setups do not always
   put category slugs in the body class.
   ============================================================================= */

/* ── Background ─────────────────────────────────────────────────────────── */
body.servantly-sermon-page .container-wrap {
	background-color: var(--servantly-page-bg, #e9e8e7) !important;
}

/* ── Sermon title (output by plugin — always visible) ───────────────────── */
.servantly-single__title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 12px !important;
	color: var(--servantly-text-primary, #1a1a1a);
}

/* ── Hide Salient default post chrome ───────────────────────────────────── */
/* "By admin  April 13, 2026  No Comments" header row */
body.servantly-sermon-page #single-below-header,
/* Theme-rendered title (we output our own above) */
body.servantly-sermon-page .nectar-post-header-media .post-title,
body.servantly-sermon-page .section-title h1,
body.servantly-sermon-page .nectar-post-header-media h1,
/* Category labels in the title section */
body.servantly-sermon-page .section-title .meta-category,
body.servantly-sermon-page .section-title span.meta-category,
/* Author bio / gravatar block below post */
body.servantly-sermon-page #author-bio,
body.servantly-sermon-page #author-info,
/* Comments section and reply form */
body.servantly-sermon-page .comments-section,
body.servantly-sermon-page .comment-wrap,
body.servantly-sermon-page #respond,
body.servantly-sermon-page .comment-respond,
/* Featured image in the post content area */
body.servantly-sermon-page .post-content .post-thumbnail,
body.servantly-sermon-page .post-content > figure.wp-post-image,
/* Hide only the image/media parts of the nectar post header — not the title */
body.servantly-sermon-page .nectar-post-header-media .featured-image-wrap,
body.servantly-sermon-page .nectar-post-header-media .nectar-featured-image,
body.servantly-sermon-page .nectar-post-header-media .single-featured-image,
body.servantly-sermon-page .nectar-post-header-media figure,
body.servantly-sermon-page .nectar-post-header-media img {
	display: none !important;
}

/* ── YouTube embed ──────────────────────────────────────────────────────── */
body.servantly-sermon-page .wp-block-embed,
body.servantly-sermon-page .wp-block-embed__wrapper {
	background: var(--servantly-player-bg, #000) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin: 24px 0 !important;
}

body.servantly-sermon-page .wp-block-embed iframe {
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	display: block !important;
}

/* ── Sermon meta block (before content) ─────────────────────────────────── */
/* Full-width background wrapper — breaks out of the content column to cover
   .container-wrap entirely. The inline background-color is set by PHP before
   Salient's JS runs, so the theme can never override it. */
.servantly-single__bg-wrap {
	position: relative !important;
	/* Viewport-width breakout: extends to full browser width regardless of
	   any parent max-width or padding constraints. */
	width: 100vw !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.servantly-single__content-inner {
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 40px 24px 60px !important;
	box-sizing: border-box !important;
}

.servantly-single__meta {
	margin: 0 0 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Speaker — Date byline (CCCH pattern: "Jack Hibbs – April 13, 2026") */
.servantly-single__byline {
	display: flex !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 1rem !important;
	color: var(--servantly-text-secondary, #555) !important;
}

.servantly-single__speaker-link,
.servantly-single__speaker {
	font-weight: 700 !important;
	color: var(--servantly-secondary) !important;
	text-decoration: none !important;
	font-size: 1rem !important;
}

.servantly-single__speaker-link:hover {
	text-decoration: underline !important;
}

.servantly-single__byline-sep {
	color: var(--servantly-text-secondary, #555) !important;
	font-weight: 400 !important;
	padding: 0 6px !important;
}

.servantly-single__date {
	color: var(--servantly-text-secondary, #555) !important;
	font-weight: 400 !important;
}

/* Series badge */
.servantly-single__series-line {
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.servantly-single__series-badge {
	display: inline-block !important;
	background: var(--servantly-secondary) !important;
	color: var(--servantly-badge-text, #fff) !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	padding: 3px 12px !important;
	border-radius: 20px !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.servantly-single__series-badge:hover {
	background: var(--servantly-secondary-dark) !important;
	color: var(--servantly-badge-text, #fff) !important;
}

/* Scripture reference */
.servantly-single__scripture {
	font-size: .95rem !important;
	color: var(--servantly-text-secondary, #555) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	font-style: italic !important;
}

.servantly-single__scripture-label {
	font-style: normal !important;
	font-weight: 700 !important;
	color: var(--servantly-text-primary, #333) !important;
}

.servantly-single__scripture-link {
	color: var(--servantly-gold) !important;
	text-decoration: underline !important;
	text-decoration-color: color-mix(in srgb, var(--servantly-gold) 40%, transparent) !important;
	text-underline-offset: 3px !important;
	transition: color .15s, text-decoration-color .15s !important;
}

.servantly-single__scripture-link:hover {
	color: var(--servantly-gold-dark) !important;
	text-decoration-color: color-mix(in srgb, var(--servantly-gold-dark) 70%, transparent) !important;
}

/* Embedded video player on single sermon pages */
.servantly-single__player-wrap {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	background: var(--servantly-player-bg, #000) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin: 0 0 24px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .25) !important;
}

.servantly-single__player-wrap iframe {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

/* ── Tag badges (after content) ─────────────────────────────────────────── *
 * All tags — book, series, speaker, WP post tags — share a single unified   *
 * dark-badge style matching CCCH's uniform tag presentation.                *
 * -------------------------------------------------------------------------- */
.servantly-single__description {
	margin: 28px 0 0 !important;
	padding: 20px !important;
	background: var(--servantly-surface-bg, #f5f5f4) !important;
	border-left: 4px solid var(--servantly-secondary) !important;
	border-radius: 0 6px 6px 0 !important;
	font-size: .95rem !important;
	line-height: 1.7 !important;
	color: var(--servantly-text-primary, #333) !important;
}

.servantly-res-drawer__body {
	font-size: .95rem !important;
	line-height: 1.7 !important;
	color: var(--servantly-text-primary, #333) !important;
}

.servantly-single__tags {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 32px 0 0 !important;
	padding: 20px 0 0 !important;
	border-top: 1px solid var(--servantly-border, #e0ddd9) !important;
}

.servantly-single__tags-label {
	font-size: .72rem !important;
	font-weight: 700 !important;
	color: var(--servantly-text-secondary, #888) !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	margin-right: 2px !important;
}

.servantly-single__tag {
	display: inline-block !important;
	padding: 5px 13px !important;
	background: var(--servantly-gold) !important;
	color: var(--servantly-badge-text, #fff) !important;
	border-radius: 4px !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background .18s !important;
}

.servantly-single__tag:hover {
	background: var(--servantly-gold-dark) !important;
	color: var(--servantly-badge-text, #fff) !important;
}

/* ==========================================================================
   Download Resource Buttons — single sermon page
   ========================================================================== */

/* ── Button row ──────────────────────────────────────────────────────────── */
.servantly-single__resources {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 20px 0 8px !important;
	padding: 0 !important;

	/* CSS custom properties set inline by PHP from global settings */
	--servantly-res-btn-bg:    var(--servantly-navy);
	--servantly-res-btn-hover: var(--servantly-navy-dark);
	--servantly-res-btn-text:  #ffffff;
}

.servantly-single__res-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 22px !important;
	min-height: 44px !important;
	background: var(--servantly-res-btn-bg) !important;
	color: var(--servantly-res-btn-text) !important;
	border: 2px solid transparent !important;
	border-radius: 6px !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background .18s ease, transform .12s ease, box-shadow .18s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.servantly-single__res-btn svg {
	flex-shrink: 0 !important;
	opacity: .85 !important;
}

.servantly-single__res-btn:hover,
.servantly-single__res-btn:focus-visible {
	background: var(--servantly-res-btn-hover) !important;
	color: var(--servantly-res-btn-text) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18) !important;
	outline: none !important;
}

.servantly-single__res-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .14) !important;
}

/* ── Full-height drawer (desktop: right slide-in, mobile: bottom sheet) ───── */

/* Overlay backdrop */
.servantly-res-drawer {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	background: rgba(0, 0, 0, 0) !important;
	display: flex !important;
	align-items: stretch !important;
	justify-content: flex-end !important;
	pointer-events: none !important;
	transition: background .28s ease !important;
}

.servantly-res-drawer.is-open {
	background: rgba(0, 0, 0, .52) !important;
	pointer-events: auto !important;
}

/* Panel itself */
.servantly-res-drawer__panel {
	width: min(480px, 92vw) !important;
	height: 100% !important;
	background: var(--servantly-card-bg, #ffffff) !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: -8px 0 40px rgba(0, 0, 0, .22) !important;
	transform: translateX(100%) !important;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
	overflow: hidden !important;
	border-radius: 0 !important;
}

.servantly-res-drawer.is-open .servantly-res-drawer__panel {
	transform: translateX(0) !important;
}

/* Header */
.servantly-res-drawer__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 18px 20px 16px !important;
	border-bottom: 1px solid var(--servantly-border, #e0ddd9) !important;
	flex-shrink: 0 !important;
	background: var(--servantly-surface-bg, #f5f5f4) !important;
}

.servantly-res-drawer__title {
	margin: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--servantly-navy, #1a2744) !important;
	line-height: 1.3 !important;
}

.servantly-res-drawer__close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	background: transparent !important;
	border: 1.5px solid var(--servantly-border, #d1d5db) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	color: var(--servantly-gray-500, #6b7280) !important;
	flex-shrink: 0 !important;
	transition: background .15s, color .15s, border-color .15s !important;
	padding: 0 !important;
}

.servantly-res-drawer__close:hover {
	background: var(--servantly-surface-bg, #f3f4f6) !important;
	color: var(--servantly-text-primary, #111) !important;
	border-color: #9ca3af !important;
}

.servantly-res-drawer__close:focus-visible {
	outline: 2px solid var(--servantly-gold) !important;
	outline-offset: 2px !important;
}

/* Scrollable body */
.servantly-res-drawer__body {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 24px 20px 40px !important;
	font-size: .95rem !important;
	line-height: 1.75 !important;
	color: var(--servantly-gray-700, #374151) !important;
	-webkit-overflow-scrolling: touch !important;
}

.servantly-res-drawer__body h1,
.servantly-res-drawer__body h2,
.servantly-res-drawer__body h3 {
	color: var(--servantly-navy, #1a2744) !important;
	margin-top: 1.4em !important;
	margin-bottom: .4em !important;
	line-height: 1.3 !important;
}

.servantly-res-drawer__body p {
	margin: 0 0 1em !important;
}

.servantly-res-drawer__body ul,
.servantly-res-drawer__body ol {
	margin: 0 0 1em 1.4em !important;
}

.servantly-res-drawer__body a {
	color: var(--servantly-gold) !important;
	text-decoration: underline !important;
}

/* Lock body scroll when a drawer is open */
body.servantly-drawer-open {
	overflow: hidden !important;
}

/* ── Mobile: bottom sheet ────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.servantly-res-drawer {
		align-items: flex-end !important;
		justify-content: stretch !important;
	}

	.servantly-res-drawer__panel {
		width: 100% !important;
		height: 85dvh !important;
		height: 85vh !important;           /* fallback for browsers without dvh */
		max-height: 85dvh !important;
		max-height: 85vh !important;
		border-radius: 18px 18px 0 0 !important;
		box-shadow: 0 -8px 40px rgba(0, 0, 0, .25) !important;
		transform: translateY(100%) !important;
		transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
	}

	.servantly-res-drawer.is-open .servantly-res-drawer__panel {
		transform: translateY(0) !important;
	}

	/* Drag handle pill at the top of the bottom sheet */
	.servantly-res-drawer__header::before {
		content: '' !important;
		display: block !important;
		position: absolute !important;
		top: 8px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 40px !important;
		height: 4px !important;
		background: var(--servantly-border, #d1d5db) !important;
		border-radius: 2px !important;
	}

	.servantly-res-drawer__header {
		position: relative !important;
		padding-top: 24px !important;
	}

	/* Full-width stacked buttons on small screens */
	.servantly-single__resources {
		flex-direction: column !important;
	}

	.servantly-single__res-btn {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Safe area inset so content clears the home indicator on iPhone */
	.servantly-res-drawer__body {
		padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ==========================================================================
   Watch Online page  [calvary_watch]
   ========================================================================== */

.servantly-watch {
	background: var(--servantly-watch-bg);
	color: #f0f0f0;
	font-family: inherit;
}

/* ── Stage (main player) ─────────────────────────────────────────────────── */

.servantly-watch__stage {
	max-width: 960px;
	margin: 0 auto;
	padding: 40px 24px 0;
}

.servantly-watch__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.servantly-watch__badge--live {
	background: color-mix(in srgb, var(--servantly-live) 15%, transparent);
	color: color-mix(in srgb, var(--servantly-live) 35%, #fff);
	border: 1px solid color-mix(in srgb, var(--servantly-live) 40%, transparent);
}

.servantly-watch__badge--recent {
	background: color-mix(in srgb, var(--servantly-gold) 15%, transparent);
	color: var(--servantly-gold);
	border: 1px solid color-mix(in srgb, var(--servantly-gold) 35%, transparent);
}

.servantly-watch__live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--servantly-live);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--servantly-live) 60%, transparent);
	animation: servantly-live-pulse 1.6s ease-out infinite;
	flex-shrink: 0;
}

@keyframes servantly-live-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--servantly-live) 60%, transparent); }
	70%  { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Responsive 16:9 iframe wrapper */
.servantly-watch__player-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--servantly-player-bg, #000);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.servantly-watch__player-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Live row: video + optional YouTube live chat drawer */
.servantly-watch__live-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
}

.servantly-watch__live-main {
	position: relative;
	flex: 1;
	min-width: 0;
	isolation: isolate;
}

/* Keep the video below the toggle so the iframe cannot steal clicks (paint order). */
.servantly-watch__live-main .servantly-watch__player-wrap {
	z-index: 0;
}

.servantly-watch__chat-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 20;
	pointer-events: auto;
	transform: translateY(-50%);
	width: 34px;
	height: 72px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px 0 0 10px;
	background: var(--servantly-watch-panel);
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: -4px 0 18px rgba(0, 0, 0, .35);
	transition: background .18s, color .18s;
}

.servantly-watch__chat-toggle:hover {
	background: color-mix(in srgb, var(--servantly-gold) 22%, var(--servantly-watch-panel));
	color: #fff;
}

.servantly-watch__chat-toggle:focus-visible {
	outline: 2px solid var(--servantly-gold);
	outline-offset: 2px;
}

.servantly-watch__chat-toggle-icon {
	display: flex;
	transition: transform .22s ease;
}

.servantly-watch__live-row--chat-open .servantly-watch__chat-toggle-icon {
	transform: rotate(180deg);
}

.servantly-watch__live-chat-shell {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: flex-basis .28s ease, max-width .28s ease, width .28s ease, opacity .2s ease, min-width .28s ease;
	align-self: stretch;
}

/*
 * Chat open: full-width panel below the video (not beside it), so the player
 * stays full stage width and the embed has room for messages + composer.
 */
.servantly-watch__live-row--chat-open {
	flex-direction: column;
	align-items: stretch;
}

.servantly-watch__live-row--chat-open .servantly-watch__chat-toggle {
	top: auto;
	bottom: 10px;
	right: 10px;
	transform: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}

.servantly-watch__live-row--chat-open .servantly-watch__live-main {
	width: 100%;
	max-width: 100%;
}

.servantly-watch__live-row--chat-open .servantly-watch__live-chat-shell {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	opacity: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.servantly-watch__live-chat-inner {
	flex: 1;
	min-height: 0;
	height: 100%;
	background: var(--servantly-hero-tint, #0a0a0a);
	border-radius: 0 10px 10px 0;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.servantly-watch__live-row--chat-open .servantly-watch__live-main .servantly-watch__player-wrap {
	border-radius: 10px;
}

.servantly-watch__live-row--chat-open .servantly-watch__live-chat-inner {
	flex: 0 0 auto;
	height: auto;
	min-height: clamp(380px, 72vh, 780px);
	min-height: clamp(380px, 72dvh, 780px);
	border-radius: 10px;
	margin-top: 14px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-sizing: border-box;
}

.servantly-watch__live-chat-iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 0;
}

.servantly-watch__live-row--chat-open .servantly-watch__live-chat-iframe {
	min-height: clamp(360px, 68vh, 720px);
	min-height: clamp(360px, 68dvh, 720px);
	height: clamp(360px, 68vh, 720px);
	height: clamp(360px, 68dvh, 720px);
}

.servantly-watch__no-video {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--servantly-watch-surface);
	border-radius: 10px;
	color: rgba(255, 255, 255, .4);
	font-size: 1rem;
}

.servantly-watch__player-meta {
	padding: 20px 0 32px;
}

.servantly-watch__player-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 8px;
}

.servantly-watch__player-title a {
	color: inherit;
	text-decoration: none;
	transition: color .18s;
}

.servantly-watch__player-title a:hover {
	color: var(--servantly-gold);
}

.servantly-watch__player-sub {
	font-size: .85rem;
	color: rgba(255, 255, 255, .5);
	margin: 0;
	letter-spacing: .04em;
}

/* ── Recent messages grid ────────────────────────────────────────────────── */

.servantly-watch__recent {
	background: var(--servantly-watch-footer);
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding: 48px 24px 64px;
}

.servantly-watch__recent-inner {
	max-width: 960px;
	margin: 0 auto;
}

.servantly-watch__recent-heading {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--servantly-gold);
	margin: 0 0 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid color-mix(in srgb, var(--servantly-gold) 25%, transparent);
}

.servantly-watch__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── Watch card ──────────────────────────────────────────────────────────── */

.servantly-watch-card {
	background: var(--servantly-watch-surface);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s, box-shadow .2s;
	outline: 2px solid transparent;
}

.servantly-watch-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.servantly-watch-card--active {
	outline-color: var(--servantly-gold);
}

/* Thumbnail button */
.servantly-watch-card__thumb-btn {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--servantly-player-bg, #000);
	border: 0;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}

.servantly-watch-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.servantly-watch-card__img--placeholder {
	background: var(--servantly-watch-panel);
}

.servantly-watch-card__thumb-btn:hover .servantly-watch-card__img {
	transform: scale(1.04);
}

.servantly-watch-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	opacity: 0;
	transition: opacity .2s;
}

.servantly-watch-card__play svg {
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

.servantly-watch-card__thumb-btn:hover .servantly-watch-card__play,
.servantly-watch-card--active .servantly-watch-card__play {
	opacity: 1;
}

.servantly-watch-card--active .servantly-watch-card__play {
	background: color-mix(in srgb, var(--servantly-gold) 40%, transparent);
	color: #fff;
}

/* Card body */
.servantly-watch-card__body {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.servantly-watch-card__title {
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
	color: #f0f0f0;
	margin: 0;
}

.servantly-watch-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color .18s;
}

.servantly-watch-card__title a:hover {
	color: var(--servantly-gold);
}

.servantly-watch-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: .72rem;
	color: rgba(255, 255, 255, .45);
	margin: 0;
}

.servantly-watch-card__speaker {
	font-weight: 600;
	color: rgba(255, 255, 255, .6);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
	.servantly-watch__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.servantly-watch__stage {
		padding: 24px 16px 0;
	}

	.servantly-watch__grid {
		grid-template-columns: 1fr;
	}

	.servantly-watch__recent {
		padding: 32px 16px 48px;
	}
}


/* =============================================================================
   Sermon Description Styles  — v2.1.0
   Applied via .servantly-single__description--{style} on the description div.
   Works with both servantly-desc__* plugin classes and legacy ccla-* classes
   so existing description HTML does not need to be rewritten.
   ============================================================================= */

@keyframes servantly-desc-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Shared inner helper styles — servantly-desc__* canonical classes plus
   ccla-* backward-compatibility aliases.

   BACKWARD COMPATIBILITY NOTE (WordPress.org reviewers):
   The ccla-* selectors below are intentional backward-compatibility aliases
   for sites that were using the plugin before v2.1.0 and already have
   description content marked up with ccla-* classes. Scoping every rule
   inside .servantly-single__description ensures zero leakage outside the
   plugin's own output. New installs should use servantly-desc__* instead.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper / guide font baseline ──────────────────────────────────────── */
.servantly-single__description,
.servantly-single__description .servantly-desc__guide,
.servantly-res-drawer__body,
.servantly-res-drawer__body .servantly-desc__guide,
.servantly-res-drawer__body .ccla-guide,
.servantly-single__description .ccla-guide {
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif !important;
	color: var(--servantly-text-primary, #2c2c2c) !important;
	line-height: 1.7 !important;
}

/* ── Guide eyebrow / church name lines ───────────────────────────────────── */
.servantly-single__description .servantly-desc__eyebrow,
.servantly-res-drawer__body .servantly-desc__eyebrow,
.servantly-res-drawer__body .ccla-guide-eyebrow,
.servantly-single__description .ccla-guide-eyebrow {
	font-size: .65rem !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--servantly-gold, #d6754f) !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	display: block !important;
}

.servantly-single__description .servantly-desc__church,
.servantly-res-drawer__body .servantly-desc__church,
.servantly-res-drawer__body .ccla-guide-church,
.servantly-single__description .ccla-guide-church {
	font-size: .9rem !important;
	color: var(--servantly-text-secondary, #777) !important;
	margin: 0 0 20px !important;
	display: block !important;
}

/* ── Scripture quote block ───────────────────────────────────────────────── */
.servantly-single__description .servantly-desc__quote,
.servantly-res-drawer__body .servantly-desc__quote,
.servantly-res-drawer__body .ccla-quote,
.servantly-single__description .ccla-quote {
	background: #fdf6f3 !important;
	border-left: 4px solid var(--servantly-gold, #d6754f) !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 14px 18px !important;
	margin: 0 0 10px !important;
}

.servantly-single__description .servantly-desc__quote p,
.servantly-res-drawer__body .servantly-desc__quote p,
.servantly-res-drawer__body .ccla-quote p,
.servantly-single__description .ccla-quote p {
	font-style: italic !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	margin: 0 0 6px !important;
	font-size: .95rem !important;
	line-height: 1.7 !important;
}

.servantly-single__description .servantly-desc__quote-ref,
.servantly-res-drawer__body .servantly-desc__quote-ref,
.servantly-res-drawer__body .ccla-quote-ref,
.servantly-single__description .ccla-quote-ref {
	font-size: .8rem !important;
	font-weight: 600 !important;
	color: var(--servantly-gold, #d6754f) !important;
	display: block !important;
	margin: 0 !important;
}

/* ── Numbered theme / point list ─────────────────────────────────────────── */
.servantly-single__description .servantly-desc__themes,
.servantly-res-drawer__body .servantly-desc__themes,
.servantly-res-drawer__body .ccla-themes,
.servantly-single__description .ccla-themes {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0 0 1em !important;
	padding: 0 !important;
}

.servantly-single__description .servantly-desc__theme-item,
.servantly-res-drawer__body .servantly-desc__theme-item,
.servantly-res-drawer__body .ccla-theme-item,
.servantly-single__description .ccla-theme-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--servantly-border, #f0e8e2) !important;
	margin: 0 !important;
}

.servantly-single__description .servantly-desc__theme-num,
.servantly-res-drawer__body .servantly-desc__theme-num,
.servantly-res-drawer__body .ccla-theme-num,
.servantly-single__description .ccla-theme-num {
	background: var(--servantly-gold, #d6754f) !important;
	color: var(--servantly-badge-text, #fff) !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	min-width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

.servantly-single__description .servantly-desc__theme-item strong,
.servantly-res-drawer__body .servantly-desc__theme-item strong,
.servantly-res-drawer__body .ccla-theme-item strong,
.servantly-single__description .ccla-theme-item strong {
	display: block !important;
	color: var(--servantly-text-primary, #1a1a1a) !important;
	font-size: .97rem !important;
	margin-bottom: 2px !important;
}

.servantly-single__description .servantly-desc__theme-item span,
.servantly-res-drawer__body .servantly-desc__theme-item span,
.servantly-res-drawer__body .ccla-theme-item span,
.servantly-single__description .ccla-theme-item span {
	color: var(--servantly-text-secondary, #666) !important;
	font-size: .92rem !important;
	line-height: 1.55 !important;
}

/* ── Discussion question cards ───────────────────────────────────────────── */
.servantly-single__description .servantly-desc__questions,
.servantly-res-drawer__body .servantly-desc__questions,
.servantly-res-drawer__body .ccla-questions,
.servantly-single__description .ccla-questions {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin: 0 0 1em !important;
}

.servantly-single__description .servantly-desc__question,
.servantly-res-drawer__body .servantly-desc__question,
.servantly-res-drawer__body .ccla-question,
.servantly-single__description .ccla-question {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	background: #fdf6f3 !important;
	border-radius: 10px !important;
	padding: 14px !important;
	margin: 0 !important;
	font-size: .95rem !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	line-height: 1.6 !important;
}

.servantly-single__description .servantly-desc__question-num,
.servantly-res-drawer__body .servantly-desc__question-num,
.servantly-res-drawer__body .ccla-question-num,
.servantly-single__description .ccla-question-num {
	background: #fff !important;
	color: var(--servantly-gold, #d6754f) !important;
	border: 1.5px solid var(--servantly-gold, #d6754f) !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	min-width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

.servantly-single__description .servantly-desc__question-ref,
.servantly-res-drawer__body .servantly-desc__question-ref,
.servantly-res-drawer__body .ccla-question-ref,
.servantly-single__description .ccla-question-ref {
	font-size: .78rem !important;
	color: var(--servantly-gold, #d6754f) !important;
	font-weight: 600 !important;
	display: block !important;
	margin: 6px 0 0 !important;
}

/* ── This week / two-column action grid ──────────────────────────────────── */
.servantly-single__description .servantly-desc__week-grid,
.servantly-res-drawer__body .servantly-desc__week-grid,
.servantly-res-drawer__body .ccla-week-grid,
.servantly-single__description .ccla-week-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px !important;
	margin: 0 0 1em !important;
}

.servantly-single__description .servantly-desc__week-card,
.servantly-res-drawer__body .servantly-desc__week-card,
.servantly-res-drawer__body .ccla-week-card,
.servantly-single__description .ccla-week-card {
	background: #fdf6f3 !important;
	border-radius: 10px !important;
	padding: 16px 18px !important;
}

.servantly-single__description .servantly-desc__week-card-label,
.servantly-res-drawer__body .servantly-desc__week-card-label,
.servantly-res-drawer__body .ccla-week-card-label,
.servantly-single__description .ccla-week-card-label {
	font-size: .65rem !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--servantly-gold, #d6754f) !important;
	display: block !important;
	margin: 0 0 8px !important;
}

.servantly-single__description .servantly-desc__week-card p,
.servantly-res-drawer__body .servantly-desc__week-card p,
.servantly-res-drawer__body .ccla-week-card p,
.servantly-single__description .ccla-week-card p {
	font-size: .93rem !important;
	color: var(--servantly-text-primary, #444) !important;
	margin: 0 !important;
	line-height: 1.6 !important;
}

@media (max-width: 560px) {
	.servantly-single__description .servantly-desc__week-grid,
	.servantly-res-drawer__body .servantly-desc__week-grid,
	.servantly-res-drawer__body .ccla-week-grid,
	.servantly-single__description .ccla-week-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── Section labels ──────────────────────────────────────────────────────── */
.servantly-single__description .servantly-desc__section-label,
.servantly-res-drawer__body .servantly-desc__section-label,
.servantly-res-drawer__body .ccla-section-label,
.servantly-single__description .ccla-section-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: .65rem !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--servantly-gold, #d6754f) !important;
	margin: 2em 0 .75em !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	line-height: 1 !important;
}

.servantly-single__description .servantly-desc__section-label::before,
.servantly-res-drawer__body .servantly-desc__section-label::before,
.servantly-res-drawer__body .ccla-section-label::before,
.servantly-single__description .ccla-section-label::before {
	content: '' !important;
	display: inline-block !important;
	width: 18px !important;
	height: 2px !important;
	background: var(--servantly-gold, #d6754f) !important;
	border-radius: 2px !important;
	flex-shrink: 0 !important;
}

.servantly-single__description .servantly-desc__section-label::after,
.servantly-res-drawer__body .servantly-desc__section-label::after,
.servantly-res-drawer__body .ccla-section-label::after,
.servantly-single__description .ccla-section-label::after {
	content: '' !important;
	flex: 1 !important;
	height: 1px !important;
	background: var(--servantly-border, #f0e0d8) !important;
}

/* ── Body text ───────────────────────────────────────────────────────────── */
.servantly-res-drawer__body p,
.servantly-single__description p {
	margin: 0 0 1em !important;
	font-size: .97rem !important;
	line-height: 1.75 !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
}

/* ── Bullet paragraphs / lists ───────────────────────────────────────────── */
.servantly-single__description .servantly-desc__bullets,
.servantly-res-drawer__body .servantly-desc__bullets,
.servantly-res-drawer__body .ccla-bullets,
.servantly-single__description .ccla-bullets {
	font-size: .95rem !important;
	line-height: 1.85 !important;
	color: var(--servantly-text-primary, #4a4a4a) !important;
	margin: 0 0 1em !important;
}

/* ── Takeaway card list ──────────────────────────────────────────────────── */
.servantly-single__description .servantly-desc__takeaways,
.servantly-res-drawer__body .servantly-desc__takeaways,
.servantly-res-drawer__body .ccla-takeaways,
.servantly-single__description .ccla-takeaways {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	margin: 0 0 1.2em !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ── Individual takeaway card ────────────────────────────────────────────── */
.servantly-single__description .servantly-desc__takeaway,
.servantly-res-drawer__body .servantly-desc__takeaway,
.servantly-res-drawer__body .ccla-takeaway,
.servantly-single__description .ccla-takeaway {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 10px 14px !important;
	background: #fdf6f3 !important;
	border-radius: 8px !important;
	font-size: .95rem !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	line-height: 1.6 !important;
	cursor: default !important;
	transition: background .2s ease, transform .2s ease !important;
	border: none !important;
	margin: 0 !important;
}

.servantly-single__description .servantly-desc__takeaway:hover,
.servantly-res-drawer__body .servantly-desc__takeaway:hover,
.servantly-res-drawer__body .ccla-takeaway:hover,
.servantly-single__description .ccla-takeaway:hover {
	background: #faeae2 !important;
	transform: translateX(3px) !important;
}

/* ── Check icon ──────────────────────────────────────────────────────────── */
.servantly-single__description .servantly-desc__check,
.servantly-res-drawer__body .servantly-desc__check,
.servantly-res-drawer__body .ccla-check,
.servantly-single__description .ccla-check {
	color: var(--servantly-gold, #d6754f) !important;
	font-size: .9rem !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
	margin-top: 3px !important;
	transition: transform .25s ease !important;
	line-height: 1 !important;
}

.servantly-single__description .servantly-desc__takeaway:hover .servantly-desc__check,
.servantly-res-drawer__body .servantly-desc__takeaway:hover .servantly-desc__check,
.servantly-res-drawer__body .ccla-takeaway:hover .ccla-check,
.servantly-single__description .ccla-takeaway:hover .ccla-check {
	transform: scale(1.3) !important;
}

/* ── Inline highlight ────────────────────────────────────────────────────── */
.servantly-res-drawer__body .servantly-desc__highlight,
.servantly-single__description .servantly-desc__highlight {
	display: inline !important;
	background: rgba(214, 117, 79, .12) !important;
	border-radius: 3px !important;
	padding: 1px 5px !important;
	font-weight: 600 !important;
	color: var(--servantly-text-primary, #1a1a1a) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   Outer wrapper display styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Classic — refined left-border box (the existing base style) ─────────── */
.servantly-single__description--classic {
	/* inherits base .servantly-single__description rules */
}

/* ── Article — editorial, open layout, fade-in ───────────────────────────── */
.servantly-single__description--article {
	background: transparent !important;
	border-left: none !important;
	border-radius: 0 !important;
	padding: 4px 0 0 !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	line-height: 1.75 !important;
	animation: servantly-desc-fadein .5s ease both !important;
}

/* ── Summary — elevated white card ──────────────────────────────────────── */
.servantly-single__description--summary {
	background: var(--servantly-card-bg, #fff) !important;
	border: none !important;
	border-left: none !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .07), 0 8px 32px rgba(0, 0, 0, .06) !important;
	padding: 32px 36px !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	line-height: 1.75 !important;
	animation: servantly-desc-fadein .45s ease both !important;
}

.servantly-single__description--summary::before {
	content: '' !important;
	display: block !important;
	width: 44px !important;
	height: 3px !important;
	background: var(--servantly-gold, #d6754f) !important;
	border-radius: 2px !important;
	margin-bottom: 22px !important;
}

/* Override takeaway card backgrounds inside the white summary card */
.servantly-single__description--summary .servantly-desc__takeaway,
.servantly-single__description--summary .ccla-takeaway {
	background: #fdf6f3 !important;
}

.servantly-single__description--summary .servantly-desc__takeaway:hover,
.servantly-single__description--summary .ccla-takeaway:hover {
	background: #faeae2 !important;
}

/* ── Minimal — clean open typography, no container ───────────────────────── */
.servantly-single__description--minimal {
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--servantly-text-secondary, #555) !important;
	line-height: 1.9 !important;
	font-size: .97rem !important;
}

.servantly-single__description--minimal p {
	color: var(--servantly-text-secondary, #555) !important;
	margin: 0 0 .85em !important;
}

/* ── Cards — strong accent top-bar ───────────────────────────────────────── */
.servantly-single__description--cards {
	background: var(--servantly-surface-bg, #f5f5f4) !important;
	border: none !important;
	border-left: none !important;
	border-top: 4px solid var(--servantly-gold, #d6754f) !important;
	border-radius: 0 0 10px 10px !important;
	padding: 26px 30px !important;
	color: var(--servantly-text-primary, #3d3d3d) !important;
	line-height: 1.75 !important;
	animation: servantly-desc-fadein .4s ease both !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.servantly-single__description--summary {
		padding: 22px 20px !important;
		border-radius: 8px !important;
	}

	.servantly-single__description--cards {
		padding: 18px 16px !important;
	}
}


/* =============================================================================
   Layout System  — v2.1.0
   All layouts are driven by modifier classes added by PHP based on the
   "Design" tab settings. The Classic layout is the default (no extra CSS needed
   beyond the existing base rules).
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   SINGLE SERMON PAGE — layout modifiers
   Applied to: .servantly-single__bg-wrap--{layout}
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero layout ────────────────────────────────────────────────────────── */
.servantly-single__bg-wrap--hero .servantly-single__hero-header {
	position: relative;
	width: 100%;
	min-height: 320px;
	background: var(--servantly-hero-tint, #0a0a0a) center / cover no-repeat;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.servantly-single__bg-wrap--hero .servantly-single__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--servantly-hero-tint, #000) 90%, transparent) 0%,
		color-mix(in srgb, var(--servantly-hero-tint, #000) 40%, transparent) 60%,
		transparent 100%
	);
}

.servantly-single__bg-wrap--hero .servantly-single__hero-header-inner {
	position: relative;
	z-index: 1;
	padding: 48px 24px 40px;
	max-width: 860px;
	margin: 0 auto;
	width: 100%;
}

.servantly-single__bg-wrap--hero .servantly-single__hero-title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 12px;
}

.servantly-single__bg-wrap--hero .servantly-single__hero-series {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--servantly-gold);
}

.servantly-single__bg-wrap--hero .servantly-single__hero-series a {
	color: inherit;
	text-decoration: none;
}

/* In Hero layout, hide the duplicate h1 from the content block */
.servantly-single__bg-wrap--hero .servantly-single__title {
	display: none;
}

/* ── Minimal layout — Stripe-style white card on light bg ───────────────── */
.servantly-single__bg-wrap--minimal {
	background-color: var(--servantly-page-bg, #f4f4f4) !important;
}

.servantly-single__bg-wrap--minimal .servantly-single__content-inner {
	max-width: 720px !important;
	background: var(--servantly-card-bg, #fff);
	border-radius: 12px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, .08);
	padding: 48px 48px 64px !important;
	margin: 40px auto !important;
}

@media (max-width: 640px) {
	.servantly-single__bg-wrap--minimal .servantly-single__content-inner {
		padding: 28px 22px 40px !important;
		border-radius: 8px;
		margin: 20px 16px !important;
	}
}

/* ── Sidebar layout — 2-column: content + meta side by side ────────────── */
@media (min-width: 768px) {
	.servantly-single__bg-wrap--sidebar .servantly-single__content-inner {
		max-width: 1100px !important;
	}

	.servantly-single__bg-wrap--sidebar .servantly-single__meta {
		display: grid !important;
		grid-template-columns: 1fr 340px !important;
		grid-template-rows: auto !important;
		gap: 0 40px !important;
		align-items: start !important;
	}

	/* Player spans both columns on top */
	.servantly-single__bg-wrap--sidebar .servantly-single__player-wrap {
		grid-column: 1 / -1 !important;
	}

	/* Description and content in the main column */
	.servantly-single__bg-wrap--sidebar .servantly-single__title,
	.servantly-single__bg-wrap--sidebar .servantly-single__byline,
	.servantly-single__bg-wrap--sidebar .servantly-single__scripture {
		grid-column: 1 / 2 !important;
	}

	/* Series + resources in the sidebar column */
	.servantly-single__bg-wrap--sidebar .servantly-single__series-line,
	.servantly-single__bg-wrap--sidebar .servantly-single__resources {
		grid-column: 2 / 3 !important;
		grid-row: 2 / 5 !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════════
   HERO SHORTCODE — layout modifiers (.servantly-hero--{layout})
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Split layout — 50 / 50 image + content ────────────────────────────── */
.servantly-hero--split {
	background: var(--servantly-page-bg, #e9e8e7) !important;
	min-height: 0 !important;
	align-items: stretch !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.servantly-hero--split .servantly-hero__thumbnail {
	background: var(--servantly-navy-dark, #111) center / cover no-repeat;
	min-height: 360px;
	display: block;
}

.servantly-hero--split .servantly-hero__content {
	background: var(--servantly-navy, #1a2744);
	color: #fff;
	max-width: none;
	margin: 0;
	padding: 48px 40px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.servantly-hero--split .servantly-hero__actions {
	justify-content: flex-start;
}

@media (max-width: 680px) {
	.servantly-hero--split {
		grid-template-columns: 1fr;
	}
	.servantly-hero--split .servantly-hero__thumbnail {
		min-height: 220px;
	}
	.servantly-hero--split .servantly-hero__content {
		padding: 28px 22px;
	}
}

/* ── Cinematic layout — tall full-bleed dark, centered ─────────────────── */
.servantly-hero--cinematic {
	min-height: 680px !important;
	align-items: center !important;
}

.servantly-hero--cinematic .servantly-hero__overlay {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--servantly-hero-tint, #000) 70%, transparent) 0%,
		color-mix(in srgb, var(--servantly-hero-tint, #000) 30%, transparent) 50%,
		color-mix(in srgb, var(--servantly-hero-tint, #000) 70%, transparent) 100%
	);
}

.servantly-hero--cinematic .servantly-hero__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.servantly-hero--cinematic .servantly-hero__actions {
	justify-content: center;
}

/* ── Minimal hero layout — light card ──────────────────────────────────── */
.servantly-hero--minimal {
	background: var(--servantly-card-bg, #fff) !important;
	min-height: 0 !important;
	border: 1px solid var(--servantly-border, #e0ddd9) !important;
}

.servantly-hero--minimal .servantly-hero__thumbnail {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--servantly-navy-dark, #111) center / cover no-repeat;
	display: block;
}

.servantly-hero--minimal .servantly-hero__content {
	color: var(--servantly-text-primary, #1a1a1a) !important;
	background: var(--servantly-card-bg, #fff);
	padding: 28px 32px 32px;
	max-width: none;
	margin: 0;
	text-align: left;
}

.servantly-hero--minimal .servantly-hero__eyebrow {
	color: var(--servantly-gold) !important;
	font-size: 1rem !important;
}

.servantly-hero--minimal .servantly-hero__title {
	font-size: clamp(1.4rem, 3vw, 2rem) !important;
	color: var(--servantly-text-primary, #1a1a1a) !important;
}

.servantly-hero--minimal .servantly-hero__title a {
	color: var(--servantly-text-primary, #1a1a1a) !important;
}

.servantly-hero--minimal .servantly-hero__title a:hover {
	color: var(--servantly-gold) !important;
}

.servantly-hero--minimal .servantly-hero__scripture,
.servantly-hero--minimal .servantly-hero__speaker {
	color: var(--servantly-text-secondary, #555) !important;
}

.servantly-hero--minimal .servantly-hero__actions {
	justify-content: flex-start;
}

.servantly-hero--minimal .servantly-btn--outline {
	color: var(--servantly-gold);
	border-color: var(--servantly-gold);
}

/* ── Connect banners to split / minimal / cinematic layouts too ──────────── */
.servantly-live-banner + .servantly-hero--split,
.servantly-live-banner + .servantly-hero--cinematic,
.servantly-live-banner + .servantly-hero--minimal,
.servantly-countdown-banner + .servantly-hero--split,
.servantly-countdown-banner + .servantly-hero--cinematic,
.servantly-countdown-banner + .servantly-hero--minimal {
	border: 2px solid var(--servantly-gold);
	border-top: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   SERMON ARCHIVE PAGE — layout modifiers (.servantly-sermons-page--{layout})
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Magazine layout ────────────────────────────────────────────────────── */
.servantly-sermons-page--magazine .servantly-grid {
	grid-template-columns: 1fr 1fr 1fr !important;
	grid-template-rows: auto !important;
}

/* First card spans two columns and two rows — the "feature" card */
.servantly-sermons-page--magazine .servantly-grid .servantly-card:first-child {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.servantly-sermons-page--magazine .servantly-grid .servantly-card:first-child .servantly-card__thumb {
	aspect-ratio: 16 / 9;
}

.servantly-sermons-page--magazine .servantly-grid .servantly-card:first-child .servantly-card__title {
	font-size: 1.2rem !important;
}

.servantly-sermons-page--magazine .servantly-grid .servantly-card:first-child .servantly-card__body {
	padding: 20px 22px;
}

@media (max-width: 768px) {
	.servantly-sermons-page--magazine .servantly-grid {
		grid-template-columns: 1fr 1fr !important;
	}
	.servantly-sermons-page--magazine .servantly-grid .servantly-card:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 480px) {
	.servantly-sermons-page--magazine .servantly-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── List layout ────────────────────────────────────────────────────────── */
.servantly-sermons-page--list .servantly-grid {
	grid-template-columns: 1fr !important;
	gap: 12px !important;
}

.servantly-sermons-page--list .servantly-grid .servantly-card {
	flex-direction: row !important;
	align-items: stretch;
}

.servantly-sermons-page--list .servantly-grid .servantly-card__thumb {
	width: 200px !important;
	flex-shrink: 0 !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
}

.servantly-sermons-page--list .servantly-grid .servantly-card__body {
	padding: 16px 20px;
	justify-content: center;
	gap: 6px;
}

.servantly-sermons-page--list .servantly-grid .servantly-card__title {
	font-size: 1rem !important;
}

@media (max-width: 540px) {
	.servantly-sermons-page--list .servantly-grid .servantly-card {
		flex-direction: column !important;
	}
	.servantly-sermons-page--list .servantly-grid .servantly-card__thumb {
		width: 100% !important;
		aspect-ratio: 16 / 9 !important;
	}
}