/* JoyFuel content refresh: September 2026. Kept separate from the shared
 * member stylesheet so this release does not overwrite unrelated live CSS. */

body.jf-member-home .jf-home-band--compass .jfpc__header {
	grid-template-columns: minmax(0, 0.96fr) minmax(300px, 0.84fr);
	column-gap: clamp(28px, 4vw, 56px);
}

body.jf-member-ui .jf-course-card__context-tag,
body.jf-member-ui .jf-ld-context-tag {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	margin: 0 0 10px;
	padding: 6px 9px;
	border: 1px solid color-mix(in srgb, var(--jf-ui-magenta, #b71668) 28%, var(--jf-ui-line, #e8dce2));
	border-radius: 5px;
	background: color-mix(in srgb, var(--jf-ui-magenta, #b71668) 7%, var(--jf-ui-surface, #fff));
	color: var(--jf-ui-magenta-deep, #85104c);
	font-size: 0.76rem;
	font-weight: 800;
	line-height: 1.15;
}

body.jf-member-ui .jf-ld-context-tag {
	margin-left: 8px;
	vertical-align: top;
}

.jf-live-course-page {
	width: min(calc(100% - 40px), var(--jf-ui-shell, 1240px));
	margin: 0 auto;
	padding: clamp(46px, 7vw, 92px) 0 clamp(64px, 8vw, 112px);
}

.jf-live-course-hero,
.jf-live-course-section {
	border: 1px solid var(--jf-ui-line, #e8dce2);
	background: var(--jf-ui-surface, #fff);
}

.jf-live-course-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: clamp(30px, 6vw, 86px);
	padding: clamp(30px, 5vw, 66px);
	border-radius: 12px 12px 0 0;
}

.jf-live-course-eyebrow {
	margin: 0 0 10px;
	color: var(--jf-ui-magenta-deep, #85104c);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.jf-live-course-hero h1,
.jf-live-course-section h2 {
	margin: 0;
	color: var(--jf-ui-ink, #2e2026);
}

.jf-live-course-hero h1 {
	font-size: clamp(2.1rem, 5vw, 4.8rem);
	line-height: 0.98;
}

.jf-live-course-hero p:not(.jf-live-course-eyebrow) {
	max-width: 680px;
	margin: 22px 0 0;
	color: var(--jf-ui-muted, #705e66);
	font-size: clamp(1rem, 1.5vw, 1.16rem);
	line-height: 1.65;
}

.jf-live-course-button,
.jf-live-course-text-link {
	font-weight: 800;
	text-decoration: none !important;
}

.jf-live-course-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	border-radius: 6px;
	background: var(--jf-ui-magenta, #b71668);
	color: #fff !important;
	white-space: nowrap;
}

.jf-live-course-button:hover,
.jf-live-course-button:focus-visible {
	background: var(--jf-ui-magenta-deep, #85104c);
	color: #fff !important;
}

.jf-live-course-section {
	margin-top: 22px;
	padding: clamp(24px, 4vw, 46px);
	border-radius: 10px;
}

.jf-live-course-page .jf-home-calendar {
	margin: 0;
}

.jf-live-course-page .jf-home-calendar .jf-zoom-cal {
	box-shadow: none;
}

.jf-live-course-section__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 28px;
}

.jf-live-course-section h2 {
	font-size: clamp(1.7rem, 3vw, 2.8rem);
}

.jf-live-course-text-link {
	color: var(--jf-ui-magenta-deep, #85104c) !important;
	white-space: nowrap;
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

.jf-live-course-replay-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--jf-ui-line, #e8dce2);
	border-left: 4px solid var(--jf-ui-magenta, #b71668);
	border-radius: 8px;
	background: var(--jf-ui-surface-warm, #fbf5f7);
}

.jf-live-course-replay-card h3 {
	margin: 0 0 8px;
	color: var(--jf-ui-ink, #2e2026);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.jf-live-course-replay-card p {
	margin: 0;
	color: var(--jf-ui-muted, #705e66);
}

/* LearnDash Focus Mode replaces the theme chrome. This compact bar restores
 * the main JoyFuel destinations above the lesson controls. */
body.jf-member-learning.ld-in-focus-mode {
	--jf-focus-global-header-height: 76px;
}

.jf-focus-global-header {
	position: fixed;
	z-index: 1100;
	top: 0;
	right: 0;
	left: 0;
	height: var(--jf-focus-global-header-height);
	background: var(--jf-ui-magenta, #b71668);
	color: #fff;
}

.jf-focus-global-header__inner {
	display: flex;
	width: min(calc(100% - 48px), var(--jf-ui-shell, 1240px));
	height: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin-inline: auto;
}

.jf-focus-global-header__brand {
	display: inline-grid;
	grid-template-columns: 52px auto;
	align-items: center;
	gap: 8px;
	color: #fff !important;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	text-transform: uppercase;
}

.jf-focus-global-header__brand img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}

.jf-focus-global-header__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(24px, 3vw, 44px);
}

.jf-focus-global-header__nav a {
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
}

.jf-focus-global-header__brand:hover,
.jf-focus-global-header__brand:focus-visible,
.jf-focus-global-header__nav a:hover,
.jf-focus-global-header__nav a:focus-visible {
	color: #fff !important;
	text-decoration: underline !important;
	text-underline-offset: 5px;
}

.jf-focus-global-header__menu {
	display: none;
}

body.jf-member-learning.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header {
	top: var(--jf-focus-global-header-height);
}

body.jf-member-learning.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar {
	top: var(--jf-focus-global-header-height);
	height: calc(100dvh - var(--jf-focus-global-header-height));
	padding-top: 51px;
}

body.jf-member-learning.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-main {
	padding-top: var(--jf-focus-global-header-height);
}

@media (max-width: 767px) {
	body.jf-member-home .jf-home-band--compass .jfpc__header {
		grid-template-columns: 1fr;
	}

	.jf-live-course-page {
		width: min(calc(100% - 28px), var(--jf-ui-shell, 1240px));
		padding-top: 28px;
	}

	.jf-live-course-hero {
		grid-template-columns: 1fr;
		align-items: start;
		padding: 24px 20px;
	}

	.jf-live-course-button {
		width: 100%;
	}

	.jf-live-course-section {
		padding: 20px 14px;
	}

	.jf-live-course-section__heading {
		display: grid;
		align-items: start;
		gap: 14px;
	}

	.jf-live-course-text-link {
		white-space: normal;
	}

	.jf-live-course-replay-card {
		grid-template-columns: 1fr;
		align-items: start;
	}

	body.jf-member-learning.ld-in-focus-mode {
		--jf-focus-global-header-height: 68px;
	}

	.jf-focus-global-header__inner {
		width: min(calc(100% - 28px), var(--jf-ui-shell, 1240px));
		gap: 16px;
	}

	.jf-focus-global-header__brand {
		grid-template-columns: 46px auto;
		font-size: 0.72rem;
	}

	.jf-focus-global-header__brand img {
		width: 46px;
		height: 46px;
	}

	.jf-focus-global-header__nav {
		display: none;
	}

	.jf-focus-global-header__menu {
		position: relative;
		display: block;
	}

	.jf-focus-global-header__menu summary {
		display: inline-flex;
		min-height: 42px;
		align-items: center;
		justify-content: center;
		padding: 9px 13px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 6px;
		color: #fff;
		font-weight: 750;
		cursor: pointer;
		list-style: none;
	}

	.jf-focus-global-header__menu summary::-webkit-details-marker {
		display: none;
	}

	.jf-focus-global-header__menu nav {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		display: grid;
		width: min(78vw, 280px);
		padding: 8px;
		border: 1px solid var(--jf-ui-line, #e8dce2);
		border-radius: 8px;
		background: var(--jf-ui-surface, #fff);
		box-shadow: var(--jf-ui-shadow, 0 16px 34px rgba(43, 20, 31, 0.16));
	}

	.jf-focus-global-header__menu nav a {
		padding: 12px;
		border-radius: 5px;
		color: var(--jf-ui-ink, #2e2026) !important;
		font-weight: 700;
		text-decoration: none;
	}

	.jf-focus-global-header__menu nav a:hover,
	.jf-focus-global-header__menu nav a:focus-visible {
		background: var(--jf-ui-surface-warm, #fbf5f7);
		color: var(--jf-ui-magenta-deep, #85104c) !important;
	}

	body.jf-member-learning.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header {
		top: 0;
	}

	body.jf-member-learning.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar {
		top: var(--jf-focus-global-header-height);
		height: calc(100dvh - var(--jf-focus-global-header-height));
		padding-top: 0;
	}
}