/**
 * Course sidebar.
 *
 * Carried over unchanged from the sidebar code block this replaces, so the switch
 * is invisible to readers. Only two additions: the current-lesson highlight, and
 * the fonts are left to the theme rather than pulled from Google on every page —
 * Montserrat is already loaded site-wide.
 */

.ktt-course-sidebar {
	background: #ffffff;
	padding: 28px 24px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	border-top: 4px solid #1f7f95;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}
.ktt-course-sidebar .ktt-sidebar-title {
	margin: 0 0 20px 0;
	font-family: 'Merriweather', Georgia, serif;
	font-size: 1.3em;
	font-weight: 400;
	color: #000;
	letter-spacing: 0.3px;
	text-align: center;
}

/* Progress bar */
.ktt-course-sidebar .ktt-progress-bar-container {
	width: 100%;
	height: 8px;
	background-color: #e5e5e5;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}
.ktt-course-sidebar .ktt-progress-fill {
	height: 100%;
	background-color: #1f7f95;
	width: 0%;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ktt-course-sidebar .ktt-progress-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #1f7f95;
	margin: 0 0 24px 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Accordion */
.ktt-course-sidebar .ktt-accordion { border-top: 1px solid #e5e5e5; }
.ktt-course-sidebar .ktt-module { border-bottom: 1px solid #e5e5e5; }
.ktt-course-sidebar .ktt-module-header {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 14px 0;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.3px;
	transition: color 0.2s ease;
}
.ktt-course-sidebar .ktt-module-info { display: flex; flex-direction: column; gap: 3px; }
.ktt-course-sidebar .ktt-module-fraction {
	font-size: 11px;
	font-weight: 500;
	color: #434343;
	letter-spacing: 0.5px;
}
.ktt-course-sidebar .ktt-module-fraction.module-done { color: #1f7f95; }
.ktt-course-sidebar .ktt-chevron {
	font-size: 10px;
	color: #a5ccd5;
	transition: transform 0.3s ease;
}
.ktt-course-sidebar .ktt-module.is-open .ktt-chevron { transform: rotate(180deg); }

/* Accordion content */
.ktt-course-sidebar .ktt-module-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}
.ktt-course-sidebar .ktt-module-content-inner { padding: 4px 0 16px 0; }

/* Lesson list */
.ktt-course-sidebar .ktt-lesson-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ktt-course-sidebar .ktt-lesson-item {
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
}
.ktt-course-sidebar .ktt-lesson-item:last-child { margin-bottom: 0; }
.ktt-course-sidebar .ktt-lesson-link {
	text-decoration: none;
	color: #434343;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.015em;
	transition: color 0.2s ease, transform 0.2s ease;
	display: flex;
	align-items: flex-start;
	width: 100%;
}
/* Guarded, because on a touch screen :hover latches after a tap — the row stays
   nudged 3px across and tinted, looking selected when it isn't. */
@media (hover: hover) {
	.ktt-course-sidebar .ktt-lesson-link:hover {
		color: #1f7f95;
		transform: translateX(3px);
	}
	.ktt-course-sidebar .ktt-module-header:hover { color: #1f7f95; }
}

/* The lesson being read. Not in the pasted version — cheap to add once the
   permalink is known server-side, and it saves people hunting for their place. */
.ktt-course-sidebar .ktt-lesson-item.ktt-current .ktt-lesson-link {
	color: #1f7f95;
	font-weight: 600;
}

/* Status icon */
.ktt-course-sidebar .ktt-status-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border-radius: 50%;
	border: 2px solid #e5e5e5;
	margin-right: 10px;
	margin-top: 1px;
	position: relative;
	transition: all 0.3s ease;
	background-color: #f9f9f9;
}

/* Completed */
.ktt-course-sidebar .ktt-completed .ktt-status-icon {
	border-color: #1f7f95;
	background-color: #1f7f95;
}
.ktt-course-sidebar .ktt-completed .ktt-status-icon::after {
	content: '\2713';
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ktt-course-sidebar .ktt-completed .ktt-lesson-text {
	opacity: 0.45;
	text-decoration: line-through;
}

/* Closing page: a destination, not a tracked lesson. Outside the percentage. */
.ktt-course-sidebar .ktt-sw-finish {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e5e5e5;
	text-align: center;
}
.ktt-course-sidebar .ktt-sw-finish a {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #1f7f95;
	text-decoration: none;
	letter-spacing: 0.4px;
}
.ktt-course-sidebar .ktt-sw-finish a:hover { text-decoration: underline; }

/* An unpublished lesson, visible only to someone who can edit posts. Readers
   never receive these rows at all, so this styling is never public. */
.ktt-course-sidebar .ktt-draft-flag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	background: #fcf3d7;
	color: #8a6d00;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	vertical-align: 1px;
}

/* ------------------------------------------------------------------------- *
 * Phones
 *
 * The sidebar was written for a narrow desktop column and carried over as-is,
 * which left it with nothing for small screens at all. When Avada stacks the
 * columns it becomes a full-width card, and two things that are fine at 260px
 * wide stop being fine at 390px:
 *
 *   - The lesson rows were a ~19px tap target (13px text, 12px apart), twenty
 *     of them in a column. Both Apple and Google ask for 44px. Every row here
 *     is a link someone is meant to tap with a thumb.
 *   - 28px/24px of card padding is generous on a desktop column and wasteful
 *     when the card is the whole screen.
 *
 * Deliberately NOT done: capping the accordion with `overflow-y: auto`. A
 * nested scroll area inside a page is the single most annoying thing you can
 * do to a thumb, and this plugin has already spent a week on scrolling bugs.
 * The accordion keeps every module but the current one closed, so the height
 * is a handful of headers plus one open module.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.ktt-course-sidebar {
		padding: 20px 16px;
	}

	.ktt-course-sidebar .ktt-sidebar-title {
		margin-bottom: 16px;
		font-size: 1.2em;
	}

	/* Room to read, since the card now has the full width of the screen. */
	.ktt-course-sidebar .ktt-module-header {
		padding: 16px 0;
		font-size: 15px;
	}

	.ktt-course-sidebar .ktt-module-fraction { font-size: 12px; }

	.ktt-course-sidebar .ktt-chevron {
		font-size: 12px;
		padding-left: 12px;
	}

	/* The tap target. Padding on the link rather than margin on the item, so the
	   whole 44px is inside the anchor and actually receives the tap. */
	.ktt-course-sidebar .ktt-lesson-item { margin-bottom: 0; }

	.ktt-course-sidebar .ktt-lesson-link {
		min-height: 44px;
		padding: 7px 0;
		font-size: 15px;
		align-items: center;
	}

	.ktt-course-sidebar .ktt-status-icon {
		width: 20px;
		height: 20px;
		min-width: 20px;
		margin-top: 0;
	}

	.ktt-course-sidebar .ktt-module-content-inner { padding: 2px 0 10px 0; }

	.ktt-course-sidebar .ktt-sw-finish a { font-size: 14px; }
}

/* Visit-anytime module (Resources): links only — no checklist circles. */
.ktt-course-sidebar .ktt-module--optional .ktt-status-icon { display: none; }
.ktt-course-sidebar .ktt-module-anytime { color: #1f7f95; font-style: italic; }