/* ==========================================================================
   1ST Career — WP Courseware course player (Udemy-style)
   ========================================================================== */
.fct-course-player-page {
	--fctc-bar-bg: #1C1D1F;
	--fctc-bar-h: 56px;
	--fctc-side-w: 380px;
	--fctc-border: #D1D7DC;
	--fctc-soft: #F7F9FA;
	--fctc-done: #1E7F4F;
	background: #fff;
}

/* Focus mode: the site header scrolls away; the player bar stays pinned. */
.fct-course-player-page .fct-header.is-sticky-enabled { position: relative; top: auto; }
.fct-course-player-page .fct-page-hero,
.fct-course-player-page .fct-post-nav,
.fct-course-player-page .fct-sidebar,
.fct-course-player-page .comments-area { display: none !important; }

.fctc-icon { width: 1em; height: 1em; display: inline-block; fill: currentColor; flex-shrink: 0; vertical-align: -.125em; }

/* --------------------------------------------------------------------------
   Player bar
   ----------------------------------------------------------------------- */
.fctc-bar {
	position: sticky;
	top: 0;
	z-index: 880;
	background: var(--fctc-bar-bg);
	color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .08);
}
.admin-bar .fctc-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .fctc-bar { top: 0; } }
.fctc-bar__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--fctc-bar-h);
	padding: 8px 24px;
}
.fctc-bar a { color: #fff; text-decoration: none; }
.fctc-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fctc-bar__back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.fctc-bar__back .fctc-icon { width: 18px; height: 18px; }
.fctc-bar__divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .2); margin: 6px 0; }
.fctc-bar__title {
	font-family: var(--fct-heading-font);
	font-weight: 700;
	font-size: 16px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fctc-bar__progress { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; white-space: nowrap; margin-left: auto; }
.fctc-ring {
	--fctc-pct: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: conic-gradient(var(--fct-primary) calc(var(--fctc-pct) * 1%), rgba(255, 255, 255, .18) 0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.fctc-ring span {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--fctc-bar-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
}
.fctc-bar__toggle {
	display: none;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 6px;
	white-space: nowrap;
}
.fctc-bar__toggle:hover { background: rgba(255, 255, 255, .08); text-decoration: none !important; }

/* --------------------------------------------------------------------------
   Layout
   ----------------------------------------------------------------------- */
.fctc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--fctc-side-w);
	align-items: start;
	min-height: 60vh;
}
.fctc-player--no-sidebar .fctc-layout { grid-template-columns: minmax(0, 1fr); }
.fctc-main { min-width: 0; padding: 28px clamp(16px, 3vw, 48px) 64px; }
.fctc-player--no-sidebar .fctc-main { max-width: 1100px; margin: 0 auto; width: 100%; }
.fctc-unit { max-width: 1100px; margin: 0 auto; }

.fctc-unit__head { margin-bottom: 18px; }
.fctc-unit__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--fct-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.fctc-unit__meta span + span::before { content: "•"; margin-right: 14px; color: var(--fctc-border); }
.fctc-unit__title { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; line-height: 1.25; }

/* --------------------------------------------------------------------------
   WP Courseware unit content
   ----------------------------------------------------------------------- */
.fctc-unit__content { font-size: 16.5px; }
.fctc-unit__content .wpcw-unit-wrapper,
.fctc-unit__content .wpcw-unit-single-content { width: 100%; max-width: none; }

/* Video "stage": first embedded video / iframe block. */
.fctc-unit__content .wpcw-unit-desc > div:first-child:has(iframe),
.fctc-unit__content .wpcw-unit-desc > figure:first-child:has(iframe),
.fctc-unit__content .wpcw-unit-desc > figure:first-child:has(video),
.fctc-unit__content .wpcw-unit-desc > .presto-block-video:first-child,
.fctc-unit__content .wpcw-unit-desc > .wp-block-embed:first-child {
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 28px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.fctc-unit__content iframe, .fctc-unit__content video { max-width: 100%; border: 0; }
.fctc-unit__content .wpcw-unit-desc img { border-radius: 8px; height: auto; }
.fctc-unit__content .wpcw-unit-desc a { color: var(--fct-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Mark as completed box */
.fctc-unit__content .wpcw-unit-completebox { margin: 32px 0 0; }
.fctc-unit__content .wpcw_fe_progress_box_wrap { margin: 0 0 16px; }
.fctc-unit__content .wpcw_fe_progress_box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	background: var(--fctc-soft) !important;
	border: 1px solid var(--fctc-border) !important;
	border-left: 4px solid var(--fct-primary) !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	color: var(--fct-text) !important;
	box-shadow: none !important;
	font-size: 15px;
	min-height: 0;
}
.fctc-unit__content .wpcw_fe_progress_box_success,
.fctc-unit__content .wpcw_fe_progress_box_complete,
.fctc-unit__content .wpcw_fe_progress_box.wpcw_fe_progress_box_success { border-left-color: var(--fctc-done) !important; background: #EEF8F2 !important; }
.fctc-unit__content .wpcw_fe_progress_box_error { border-left-color: #B42318 !important; background: #FDECEA !important; }
.fctc-unit__content .wpcw_fe_progress_box_text { flex: 1 1 260px; margin: 0; padding: 0; float: none; }
.fctc-unit__content .wpcw_fe_progress_box_mark { float: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }

/* WP Courseware buttons */
.fctc-unit__content .fe_btn,
.fctc-unit__content a.fe_btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--fct-heading-font);
	font-weight: 700 !important;
	font-size: 14.5px !important;
	line-height: 1.2 !important;
	padding: 12px 22px !important;
	min-height: 44px;
	border-radius: 6px !important;
	border: 2px solid var(--fct-primary) !important;
	background: var(--fct-primary) !important;
	background-image: none !important;
	color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease;
}
.fctc-unit__content .fe_btn:hover { background: var(--fct-primary-dark) !important; border-color: var(--fct-primary-dark) !important; }
.fctc-unit__content .fe_btn:focus-visible { outline: 3px solid var(--fct-dark); outline-offset: 2px; }

/* Next / previous unit buttons */
.fctc-unit__content .wpcw-unit-navigation { margin-top: 8px; }
.fctc-unit__content .wpcw-unit-navigation .wpcw_fe_progress_box_wrap { margin: 0; }
.fctc-unit__content .wpcw_fe_navigation_box {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	text-align: left !important;
	padding: 16px 0 0;
	border-top: 1px solid var(--fctc-border);
}
.fctc-unit__content .wpcw_fe_navigation_box .fe_btn_navigation_next { margin-left: auto; background: var(--fct-dark) !important; border-color: var(--fct-dark) !important; }
.fctc-unit__content .wpcw_fe_navigation_box .fe_btn_navigation_next:hover { background: var(--fct-primary) !important; border-color: var(--fct-primary) !important; }
.fctc-unit__content .wpcw_fe_navigation_box .fe_btn_navigation_previous { background: #fff !important; color: var(--fct-dark) !important; border-color: var(--fct-dark) !important; }
.fctc-unit__content .wpcw_fe_navigation_box .fe_btn_navigation_previous:hover { background: var(--fct-dark) !important; color: #fff !important; }

/* Quizzes */
.fctc-unit__content .wpcw_fe_quiz_box_wrap, .fctc-unit__content .wpcw_fe_quiz_box { border-radius: 8px; }
.fctc-unit__content .wpcw_fe_quiz_q_single { border-radius: 8px; }

/* Notes toaster: keep clear of the mobile layout */
.fct-course-player-page .wpcw-toaster { z-index: 870; }

/* --------------------------------------------------------------------------
   Course content sidebar
   ----------------------------------------------------------------------- */
.fctc-curriculum {
	position: sticky;
	top: var(--fctc-bar-h);
	max-height: calc(100vh - var(--fctc-bar-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-left: 1px solid var(--fctc-border);
	background: #fff;
	align-self: start;
}
.admin-bar .fctc-curriculum { top: calc(var(--fctc-bar-h) + 32px); max-height: calc(100vh - var(--fctc-bar-h) - 32px); }
.fctc-curriculum__head {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	padding: 16px 18px 14px;
	border-bottom: 1px solid var(--fctc-border);
}
.fctc-curriculum__head h2 { font-size: 16px; margin: 0 0 10px; }
.fctc-curriculum__progress { display: flex; align-items: center; gap: 12px; }
.fctc-meter { flex: 1; height: 6px; border-radius: 999px; background: #E6E9EC; overflow: hidden; }
.fctc-meter span { display: block; height: 100%; background: var(--fct-primary); border-radius: 999px; transition: width .4s ease; }
.fctc-curriculum__count { font-size: 12.5px; color: var(--fct-muted); white-space: nowrap; }

.fctc-module { border-bottom: 1px solid var(--fctc-border); }
.fctc-module__head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 18px;
	background: var(--fctc-soft);
	user-select: none;
}
.fctc-module__head::-webkit-details-marker { display: none; }
.fctc-module__head:hover { background: #EEF1F3; }
.fctc-module__head:focus-visible { outline: 3px solid var(--fct-primary); outline-offset: -3px; }
.fctc-module__title { flex: 1; font-family: var(--fct-heading-font); font-weight: 700; font-size: 14.5px; color: var(--fct-dark); line-height: 1.35; }
.fctc-module__title small { display: block; font-family: var(--fct-body-font); font-weight: 600; font-size: 11.5px; color: var(--fct-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.fctc-module__count { font-size: 12px; color: var(--fct-muted); white-space: nowrap; margin-top: 2px; }
.fctc-module__head .fctc-icon { width: 18px; height: 18px; color: var(--fct-dark); transition: transform .2s ease; margin-top: 1px; }
.fctc-module[open] > .fctc-module__head .fctc-icon { transform: rotate(180deg); }

.fctc-units { list-style: none; margin: 0; padding: 4px 0; }
.fctc-unit-item a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 18px;
	color: var(--fct-text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.45;
	border-left: 3px solid transparent;
}
.fctc-unit-item a:hover { background: var(--fctc-soft); color: var(--fct-dark); text-decoration: none; }
.fctc-unit-item a:focus-visible { outline: 3px solid var(--fct-primary); outline-offset: -3px; }
.fctc-unit-item.is-current a { background: #E9EBEE; border-left-color: var(--fct-primary); color: var(--fct-dark); font-weight: 600; }
.fctc-check {
	width: 18px;
	height: 18px;
	border: 1.5px solid #8A939C;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
	background: #fff;
	color: transparent;
}
.fctc-check .fctc-icon { width: 14px; height: 14px; }
.fctc-unit-item.is-done .fctc-check { background: var(--fctc-done); border-color: var(--fctc-done); color: #fff; }
.fctc-unit-item__title { flex: 1; min-width: 0; }
.fctc-unit-item__type { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--fct-muted); font-weight: 400; }
.fctc-unit-item__type .fctc-icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.fct-course-player-page { --fctc-side-w: 340px; }
}
@media (max-width: 1024px) {
	.fctc-layout { grid-template-columns: minmax(0, 1fr); }
	.fctc-curriculum {
		position: static;
		max-height: none;
		overflow: visible;
		border-left: 0;
		border-top: 1px solid var(--fctc-border);
		scroll-margin-top: calc(var(--fctc-bar-h) + 8px);
	}
	.admin-bar .fctc-curriculum { max-height: none; }
	.fctc-curriculum__head { position: static; }
	.fctc-bar__toggle { display: inline-flex; }
	.fctc-main { padding-bottom: 32px; }
}
@media (max-width: 782px) {
	.fctc-bar__inner { padding: 8px 16px; gap: 10px; flex-wrap: wrap; }
	.fctc-bar__divider { display: none; }
	.fctc-bar__back span { display: none; }
	.fctc-bar__back .fctc-icon { width: 22px; height: 22px; }
	.fctc-bar__title { font-size: 14.5px; }
	.fctc-bar__progress-text { display: none; }
	.fctc-bar__toggle span { display: none; }
	.fctc-bar__toggle { padding: 8px 10px; }
	.fctc-bar__toggle .fctc-icon { width: 20px; height: 20px; }
	.fctc-main { padding: 18px 16px 28px; }
	.fctc-unit__content { font-size: 16px; }
	.fctc-unit__content .wpcw-unit-desc > div:first-child:has(iframe),
	.fctc-unit__content .wpcw-unit-desc > .wp-block-embed:first-child {
		margin-left: -16px;
		margin-right: -16px;
		border-radius: 0;
	}
	.fctc-unit__content .wpcw_fe_progress_box { flex-direction: column; align-items: stretch; }
	.fctc-unit__content .wpcw_fe_progress_box_text { flex: 0 0 auto; }
	.fctc-unit__meta span + span::before { display: none; }
	.fctc-unit__meta { gap: 2px 12px; font-size: 12px; }
	.fctc-unit__content .wpcw_fe_progress_box_mark .fe_btn,
	.fctc-unit__content .wpcw_fe_navigation_box .fe_btn { width: 100%; }
	.fctc-unit-item a { padding: 12px 16px; min-height: 48px; }
	.fctc-module__head { padding: 14px 16px; }
}
@media print {
	.fctc-bar, .fctc-curriculum, .wpcw-toaster { display: none !important; }
	.fctc-layout { display: block; }
}
