/* ================================================================
   LearnPress single-course — Bricks design-system skin (v1.6)
   ----------------------------------------------------------------
   Loaded only on lp_course pages (see tk-learnpress-tweaks.php).

   v1.3 changes (over v1.2):
   - Crash Course section colour tokens applied throughout:
       --section-crashcourse          (#e06030)  base
       --section-crashcourse-d-1      (#b34d26)  hover / borders
       --section-crashcourse-d-2      (#863a1d)  deep accent
       --section-crashcourse-d-3      (#5a2613)  hero gradient end
       --section-crashcourse-d-4      (#2d130a)  darkest shade
     These map to Bricks palette IDs vwfrpx / hbjhdl / ludlke / elwowo / dwjmod.
   - Hero gradient updated to use crash-course palette (replaces
     the generic espresso gradient)
   - CTA button and active tab underline use crash-course base
   - Materials "Download" button accent matches crash-course gold
     (unchanged — gold is right for downloads regardless of section)
   - All other token names are unchanged; general styling preserved.

   Design tokens are pulled from the live Bricks palette so they
   stay in sync if colours change in Bricks → Variables.
   ================================================================ */

/* -- Local token aliases for this stylesheet -- */
.single-lp_course {

	/* General palette */
	--lp-cream:         var(--warm-cream, #faf7f2);
	--lp-espresso:      var(--espresso, #1f120a);
	--lp-espresso-soft: var(--espresso-l-1, #332820);
	--lp-text:          var(--body, #5a3e2b);
	--lp-muted:         var(--espresso-l-3, #5c534d);
	--lp-rule:          rgba(44, 26, 14, 0.10);
	--lp-rule-strong:   rgba(44, 26, 14, 0.18);
	--lp-gold:          var(--gold, #e8c97a);
	--lp-gold-deep:     #d9b75c;
	--lp-teal:          var(--teal, #2e6b5e);
	--lp-teal-deep:     var(--teal-d-3, #122b26);
	--lp-card-radius:   12px;

	/* Crash Course section palette (Bricks: vwfrpx family) */
	--lp-cc:            var(--section-crashcourse,      #e06030);
	--lp-cc-d1:         var(--section-crashcourse-d-1,  #b34d26);
	--lp-cc-d2:         var(--section-crashcourse-d-2,  #863a1d);
	--lp-cc-d3:         var(--section-crashcourse-d-3,  #5a2613);
	--lp-cc-d4:         var(--section-crashcourse-d-4,  #2d130a);
}

/* ================================================================
   PAGE FRAME
   ================================================================ */

/*
 * Z-INDEX FIX — neutralise the global body::before gradient overlay.
 *
 * Bricks "Custom CSS" (global-custom-css.min.css) adds:
 *   body::before {
 *     content: ""; position: absolute; inset: 0;
 *     background: linear-gradient(to bottom, transparent, var(--teal-l-4) 40vh);
 *     pointer-events: none; z-index: 0;
 *   }
 *
 * body has position: relative, so the ::before at z-index: 0 paints
 * OVER static children (z-index: auto). This covers the entire LP
 * content area — tabs, curriculum, overview text all disappear.
 *
 * Fix: remove the pseudo-element entirely on LP course pages.
 */
body.single-lp_course::before {
	display: none !important;
}

body.single-lp_course {
	background-color: rgb(213, 225, 223);
	background-image: radial-gradient(
		circle at 0% 0%,
		rgba(213, 225, 223, 0.92),
		rgba(213, 225, 223, 0.58) 38%,
		rgba(250, 247, 242, 0.20) 78%
	);
	background-attachment: fixed;
}

body.single-lp_course .lp-archive-courses {
	max-width: 1280px;
	margin: 32px auto 48px;
	padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px);
	background: var(--lp-cream);
	border-radius: var(--lp-card-radius);
	box-shadow: 0 6px 32px rgba(44, 26, 14, 0.06);
	color: var(--lp-text);
}

/* ================================================================
   LAYOUT — LP4 structure, sidebar floats over hero then sticky
   ----------------------------------------------------------------
   LP4 DOM:
     .course-summary-content (flex)
     ├── .course-detail-info        ← hero (title + gradient)
     └── .lp-entry-content          ← main content area
         ├── .entry-content-left    ← tabs + overview
         └── aside.course-summary-sidebar ← image + CTA + progress

   The sidebar overlaps the bottom of the hero (like LP's original
   layout) then becomes sticky as the user scrolls. We do this with
   a negative margin-top on the sidebar equal to the hero height,
   and matching padding-top on the hero.
   ================================================================ */

body.single-lp_course #learn-press-course {
	max-width: 100%;
	width: 100%;
}

/* Hero + content stack vertically */
body.single-lp_course .course-content.course-summary-content {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	max-width: 100%;
	gap: 0;
}

/* Hero fills full width, with right padding to prevent text going
   behind the sidebar card */
body.single-lp_course .course-detail-info {
	width: 100% !important;
	flex: none !important;
	padding-right: calc(clamp(260px, 28%, 320px) + 32px) !important;
	position: relative;
	z-index: 1;
}

/* Content row below hero */
body.single-lp_course .lp-entry-content.lp-content-area {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 0 clamp(24px, 3vw, 32px);
	width: 100%;
	max-width: 100%;
	position: relative;
}

/* Left: tabs + overview — fills remaining width */
body.single-lp_course .entry-content-left {
	flex: 1 1 0 !important;
	min-width: 0;
	padding-top: clamp(24px, 3vw, 32px);
}

/* Right: sidebar card — overlaps hero with negative margin,
   then sticks as user scrolls */
body.single-lp_course aside.course-summary-sidebar {
	flex: 0 0 clamp(260px, 28%, 320px) !important;
	width: clamp(260px, 28%, 320px) !important;
	margin-top: -280px;  /* pull up to overlap hero */
	position: sticky;
	top: 24px;
	z-index: 10;
}

@media (max-width: 900px) {
	body.single-lp_course .course-detail-info {
		padding-right: clamp(24px, 5vw, 56px) !important;
	}
	body.single-lp_course .lp-entry-content.lp-content-area {
		flex-direction: column !important;
	}
	body.single-lp_course aside.course-summary-sidebar {
		margin-top: 0 !important;
		position: static !important;
		width: 100% !important;
		flex: none !important;
	}
}

/* ================================================================
   HIDE unwanted meta items (LP3 + LP4 selectors)
   ================================================================ */

/* LP3/LP4 — hide instructor, category, duration, level, quiz count */
.single-lp_course .meta-item-instructor,
.single-lp_course .meta-item-categories,
.single-lp_course .meta-item-duration,
.single-lp_course .meta-item-level,
.single-lp_course .meta-item-quiz,
.single-lp_course .course-price .free,
/* LP3: entire primary meta row */
.single-lp_course .course-meta-primary,
/* LP4: entire primary meta block above title */
.single-lp_course .course-meta.course-meta-primary,
/* LP3: curriculum summary lifetime + duration */
.single-lp_course .course-curriculum-info__left .course-duration,
.single-lp_course .course-curriculum-info__left li.course-duration {
	display: none !important;
}

/* LP4: hide Lifetime + All levels from secondary meta */
.single-lp_course .course-meta-secondary .meta-item-duration,
.single-lp_course .course-meta-secondary .meta-item-level,
.single-lp_course .course-meta-secondary .meta-item-quiz {
	display: none !important;
}

/* LP3: trailing separator after hidden duration item */
.single-lp_course .course-curriculum-info__left li.course-count-lesson::after,
.single-lp_course .course-curriculum-info__left li:has(+ li.course-duration)::after {
	display: none !important;
}

body.single-lp_course .lp-course-buttons:empty {
	display: none !important;
}

/* ================================================================
   BREADCRUMB — trim to "Crash Courses > Course Title"
   ================================================================ */
.single-lp_course .learn-press-breadcrumb > li:nth-child(1),
.single-lp_course .learn-press-breadcrumb > li:nth-child(2),
.single-lp_course .learn-press-breadcrumb > li:nth-child(5),
.single-lp_course .learn-press-breadcrumb > li:nth-child(6) {
	display: none !important;
}

.single-lp_course ul.learn-press-breadcrumb {
	list-style: none;
	padding: 0 0 20px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--lp-rule);
	font-size: 14px;
	color: var(--lp-muted);
	width: 100%;
	max-width: 100%;
	background: transparent;
}
.single-lp_course .learn-press-breadcrumb > li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	list-style: none;
}
.single-lp_course .learn-press-breadcrumb a {
	color: var(--lp-muted);
	text-decoration: none;
	transition: color 120ms ease;
}
.single-lp_course .learn-press-breadcrumb a:hover {
	color: var(--lp-cc-d1);
}
.single-lp_course .learn-press-breadcrumb .breadcrumb-delimiter {
	opacity: 0.5;
	margin: 0 8px;
}

/* ================================================================
   HERO BANNER — Crash Course section gradient
   (was generic espresso; now uses --section-crashcourse palette)
   ================================================================ */
body.single-lp_course #learn-press-course .course-summary-content {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0;
	margin: 0 0 16px;
}

body.single-lp_course #learn-press-course .course-detail-info {
	background: linear-gradient(
		135deg,
		var(--lp-cc-d4) 0%,
		var(--lp-cc-d2) 45%,
		var(--lp-cc-d1) 75%,
		var(--lp-cc)    100%
	) !important;
	color: var(--lp-cream);
	border-radius: var(--lp-card-radius);
	padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px) clamp(48px, 7vw, 80px);
	margin: 0;
	box-shadow:
		0 4px 24px rgba(224, 96, 48, 0.18),
		0 1px 4px  rgba(45, 19, 10, 0.25);
	overflow: visible;
	position: relative;
	min-height: 260px;
}

/* Subtle warm-light shimmer in the top-left corner */
body.single-lp_course #learn-press-course .course-detail-info::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 10% 20%,
		rgba(232, 201, 122, 0.12) 0%,   /* --gold at low opacity */
		transparent 60%
	);
	pointer-events: none;
}

body.single-lp_course .course-detail-info .lp-content-area {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

body.single-lp_course .course-detail-info .course-title,
body.single-lp_course .course-detail-info h1.course-title {
	color: var(--lp-cream);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0 0 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba(45, 19, 10, 0.3);
}

body.single-lp_course .course-detail-info .course-meta-secondary {
	border-top: 1px solid rgba(250, 247, 242, 0.20);
	padding-top: 20px;
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	color: rgba(250, 247, 242, 0.90);
}
body.single-lp_course .course-detail-info .course-meta-secondary .meta-item {
	color: rgba(250, 247, 242, 0.90);
	font-size: 15px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.01em;
}
body.single-lp_course .course-detail-info .course-meta-secondary .meta-item .meta-number {
	color: var(--lp-cream);
	font-weight: 700;
	font-size: 17px;
}
body.single-lp_course .course-detail-info .course-meta-secondary .meta-item i,
body.single-lp_course .course-detail-info .course-meta-secondary .meta-item svg,
body.single-lp_course .course-detail-info .course-meta-secondary .meta-item::before {
	color: var(--lp-gold);
	fill: var(--lp-gold);
}

/* ================================================================
   SIDEBAR — image card + CTA button
   ================================================================ */
body.single-lp_course .course-summary-sidebar,
body.single-lp_course .course-info-right {
	background: transparent;
}

body.single-lp_course .course-summary-sidebar__inner {
	background: #ffffff;
	border: 1px solid var(--lp-rule);
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 8px 32px rgba(45, 19, 10, 0.18),
		0 2px 8px  rgba(45, 19, 10, 0.10);
	height: auto;
}

body.single-lp_course .course-sidebar-preview .media-preview img,
body.single-lp_course .course-summary-sidebar img {
	display: block;
	width: 100%;
	height: auto;
}

body.single-lp_course .lp-course-buttons {
	padding: 16px;
}

/* CTA button — crash course orange */
body.single-lp_course .lp-course-buttons button,
body.single-lp_course .lp-course-buttons .button,
body.single-lp_course .lp-button-wrapper button,
body.single-lp_course #lp-button-take-this-course,
body.single-lp_course #lp-button-finish-course {
	background: var(--lp-cc) !important;          /* #e06030 */
	color: var(--lp-cream) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px 22px !important;
	font-weight: 600 !important;
	width: 100% !important;
	cursor: pointer;
	transition: background 150ms ease, transform 80ms ease;
	font-size: 15px;
	letter-spacing: 0.01em;
}
body.single-lp_course .lp-course-buttons button:hover,
body.single-lp_course .lp-course-buttons .button:hover {
	background: var(--lp-cc-d2) !important;       /* #863a1d */
}
body.single-lp_course .lp-course-buttons button:active {
	transform: translateY(1px);
}

/* Hide LP4's skeleton loader — never resolves when Bricks renders */
body.single-lp_course .lp-skeleton-animation {
	display: none !important;
}

/* Style the progress section inside the sidebar */
body.single-lp_course .lp-course-progress-wrapper {
	padding: 16px 16px 20px;
	border-top: 1px solid var(--lp-rule);
}
body.single-lp_course .course-results-progress {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body.single-lp_course .items-progress {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
body.single-lp_course .items-progress__heading {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lp-muted);
	margin: 0;
}
body.single-lp_course .items-progress .number,
body.single-lp_course .course-progress .number {
	font-size: 14px;
	font-weight: 700;
	color: var(--lp-espresso);
}
body.single-lp_course .course-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.single-lp_course .lp-course-progress,
body.single-lp_course .course-progress-bar,
body.single-lp_course [class*="lp-progress"] {
	height: 6px !important;
	border-radius: 3px !important;
	background: var(--lp-rule-strong) !important;
	overflow: hidden;
}
body.single-lp_course .lp-course-progress-bar,
body.single-lp_course .course-progress-bar span,
body.single-lp_course [class*="lp-progress"] span {
	height: 100% !important;
	border-radius: 3px !important;
	background: var(--lp-cc) !important;
	display: block;
}

/* ================================================================
   TABS — hide Instructor, skin Overview / Curriculum / Materials
   ================================================================ */

/* Instructor tab not needed (always Tim) */
body.single-lp_course .course-nav-tab-instructor {
	display: none !important;
}

body.single-lp_course #learn-press-course-tabs.course-tabs,
body.single-lp_course .course-tabs {
	margin-top: 12px;
}
body.single-lp_course .course-nav-tabs,
body.single-lp_course ul.learn-press-nav-tabs {
	border-bottom: 1px solid var(--lp-rule-strong);
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	gap: 4px;
	list-style: none;
	flex-wrap: wrap;
}
body.single-lp_course .course-nav-tabs li {
	list-style: none;
	margin: 0;
}
body.single-lp_course .course-nav-tabs li label,
body.single-lp_course .course-nav-tabs li a {
	display: inline-block;
	padding: 12px 20px;
	color: var(--lp-muted);
	font-weight: 500;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
	background: transparent;
	text-decoration: none;
	margin-bottom: -1px;
}
body.single-lp_course .course-nav-tabs li.active label,
body.single-lp_course .course-nav-tabs li.active a,
body.single-lp_course .course-nav-tabs li label:hover,
body.single-lp_course .course-nav-tabs li a:hover {
	color: var(--lp-cc-d2);                       /* dark orange on hover/active */
	border-bottom-color: var(--lp-cc);            /* #e06030 underline */
}

body.single-lp_course .course-tab-panels,
body.single-lp_course .lp-entry-content {
	color: var(--lp-text);
	font-size: 17.5px;
	line-height: 1.65;
}
body.single-lp_course .lp-entry-content h2,
body.single-lp_course .lp-entry-content h3 {
	color: var(--lp-espresso);
	margin-top: 1.5em;
}

/* ================================================================
   CURRICULUM tab — section headers + lesson rows
   ================================================================ */
body.single-lp_course .course-curriculum .section,
body.single-lp_course .course-curriculum .curriculum-sections {
	margin-bottom: 16px;
}
body.single-lp_course .course-curriculum .section-header,
body.single-lp_course .course-curriculum .section-title {
	background: rgba(224, 96, 48, 0.06);          /* faint crash-course tint */
	color: var(--lp-espresso);
	padding: 14px 18px;
	border-radius: 8px;
	font-weight: 600;
	border: 1px solid rgba(224, 96, 48, 0.18);    /* --lp-cc at low opacity */
}
body.single-lp_course .course-curriculum .course-item,
body.single-lp_course .course-curriculum .section-content li {
	padding: 12px 18px;
	border-bottom: 1px solid var(--lp-rule);
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--lp-text);
}
body.single-lp_course .course-curriculum .course-item:last-child {
	border-bottom: none;
}
body.single-lp_course .course-curriculum .course-item a {
	color: var(--lp-text);
	text-decoration: none;
}
body.single-lp_course .course-curriculum .course-item a:hover {
	color: var(--lp-cc-d1);                       /* orange hover */
}

/* Curriculum summary line — kill bullets */
.single-lp_course .course-curriculum-info,
.single-lp_course .course-curriculum-info ul,
.single-lp_course .course-curriculum-info__left,
.single-lp_course .course-curriculum-info__right {
	list-style: none !important;
	padding-left: 0 !important;
}
.single-lp_course .course-curriculum-info__left li {
	list-style: none !important;
}
.single-lp_course .course-curriculum-info__left li::marker {
	content: none !important;
}

/* ================================================================
   MATERIALS tab — prominent gold "Download" buttons
   (gold is intentionally kept here — it pops regardless of section)
   ================================================================ */
.single-lp_course .course-material-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--lp-rule);
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
}
.single-lp_course .course-material-table thead th {
	background: rgba(224, 96, 48, 0.05);
	color: var(--lp-espresso);
	font-weight: 600;
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--lp-rule-strong);
	font-size: 14px;
	letter-spacing: 0.02em;
}
.single-lp_course .course-material-table tbody td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--lp-rule);
	color: var(--lp-text);
	vertical-align: middle;
}
.single-lp_course .course-material-table tbody tr:last-child td {
	border-bottom: none;
}
.single-lp_course .course-material-table tbody tr:hover td {
	background: rgba(232, 201, 122, 0.06);
}
.single-lp_course .course-material-table .lp-material-file-name {
	font-weight: 500;
}
.single-lp_course .course-material-table .lp-material-file-type {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	color: var(--lp-muted);
	letter-spacing: 0.04em;
}
.single-lp_course .course-material-table .lp-material-file-size {
	color: var(--lp-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.single-lp_course .course-material-table .lp-material-file-link {
	text-align: center;
}

.single-lp_course .course-material-table .lp-material-file-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--lp-gold);
	color: var(--lp-espresso) !important;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: background 150ms ease, transform 80ms ease;
	border: none;
	min-width: 110px;
}
.single-lp_course .course-material-table .lp-material-file-link a::after {
	content: 'Download';
	letter-spacing: 0.02em;
}
.single-lp_course .course-material-table .lp-material-file-link a:hover {
	background: var(--lp-gold-deep);
}
.single-lp_course .course-material-table .lp-material-file-link a:active {
	transform: translateY(1px);
}
.single-lp_course .course-material-table .lp-material-file-link a i,
.single-lp_course .course-material-table .lp-icon-file-download,
.single-lp_course .course-material-table .btn-download-material {
	font-size: 18px !important;
	width: 18px;
	height: 18px;
	line-height: 1;
	color: var(--lp-espresso) !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
	body.single-lp_course .lp-archive-courses {
		margin: 16px 12px 32px;
		padding: 24px 18px;
		border-radius: 10px;
	}
	body.single-lp_course #learn-press-course .course-detail-info {
		padding: 28px 22px;
	}
	.single-lp_course .course-material-table thead {
		display: none;
	}
	.single-lp_course .course-material-table tbody td {
		display: block;
		border-bottom: none;
		padding: 4px 18px;
	}
	.single-lp_course .course-material-table tbody tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--lp-rule);
	}
	.single-lp_course .course-material-table .lp-material-file-link {
		text-align: left;
		padding-top: 12px !important;
	}
}