/* =========================================================
   EDUCA — SHARED LEARNDASH NAVIGATION
   Module: sfwd-lessons
   Lesson: sfwd-topic
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"previous progress next"
		". back .";
	align-items: center;
	gap: 18px 24px;

	margin-top: 30px;
	padding: 30px 0 8px;

	border-top: 1px solid #d8e1ec;
}

/* Grid positions */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__previous {
	grid-area: previous;
	justify-self: start;
	min-width: 0;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__progress {
	grid-area: progress;
	justify-self: center;
	min-width: 0;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__next {
	grid-area: next;
	justify-self: end;
	min-width: 0;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__back-to-course {
	grid-area: back;
	justify-self: center;
	min-width: 0;
}

/* Module overview:
   only Back to Course + Start/Continue Module */

body.single-sfwd-lessons
.learndash-wrapper
.ld-navigation {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "back next";
	gap: 16px 24px;
}

body.single-sfwd-lessons
.learndash-wrapper
.ld-navigation__previous,

body.single-sfwd-lessons
.learndash-wrapper
.ld-navigation__progress {
	display: none !important;
}

body.single-sfwd-lessons
.learndash-wrapper
.ld-navigation__back-to-course {
	justify-self: start;
}

body.single-sfwd-lessons
.learndash-wrapper
.ld-navigation__next {
	justify-self: end;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__previous-link,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__next-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 46px;
	padding: 10px 15px;

	border: 1px solid rgba(37, 99, 235, 0.26);
	border-radius: 14px;
	background: #fff !important;

	color: #253b56 !important;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;

	box-shadow:
		0 7px 18px -16px rgba(37, 99, 235, 0.5);

	transition:
		color 0.18s ease,
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__previous-link svg,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__next-link svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}


/* =========================================================
   MARK COMPLETE — ACTION
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation
.sfwd-mark-complete {
	margin: 0 !important;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation
.learndash_mark_complete_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 46px;
	margin: 0 !important;
	padding: 11px 18px !important;

	border: 1px solid transparent !important;
	border-radius: 12px !important;

	background:
	linear-gradient(
		135deg,
		#3b82f6,
		#2563eb
	) !important;
	color: #fff !important;
	box-shadow:
		0 10px 22px -12px rgba(37, 99, 235, 0.72);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 750;
	line-height: 1.2;
	text-transform: none !important;

	cursor: pointer;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation
.learndash_mark_complete_button
.ld-navigation__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}


/* =========================================================
   COMPLETED — STATUS
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__progress-completed-action {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 46px;
	padding: 10px 16px;

	border: 1px solid rgba(5, 150, 105, 0.24);
	border-radius: 12px;
	background: #ecfdf5;

	color: #047857 !important;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.2;

	box-shadow:
		0 8px 20px -16px rgba(5, 150, 105, 0.5);
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__progress-completed-action
.ld-navigation__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: #047857 !important;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__label--completed {
	color: inherit !important;
	font-weight: inherit !important;
}


/* =========================================================
   BACK TO COURSE
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__back-to-course-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 42px;
	padding: 8px 12px;

	border-radius: 11px;
	background: transparent;

	color: #60708a !important;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none !important;

	transition:
		color 0.18s ease,
		background-color 0.18s ease;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__back-to-course-link svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__previous,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__progress,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__next,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__back-to-course {
	margin: 0 !important;
	padding-top: 0 !important;
}


/* =========================================================
   DESKTOP INTERACTION
   ========================================================= */

@media (hover: hover) {

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__previous-link:hover,

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__next-link:hover {
		border-color: rgba(37, 99, 235, 0.52);
		background: #f4f7ff !important;
		color: #2563eb !important;
		transform: translateY(-1px);
		box-shadow:
			0 11px 22px -16px rgba(37, 99, 235, 0.58);
	}

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation
	.learndash_mark_complete_button:hover {
		background:
			linear-gradient(
				135deg,
				#2563eb,
				#1d4ed8
			) !important;

		color: #fff !important;
		transform: translateY(-1px);

		box-shadow:
			0 14px 26px -13px rgba(37, 99, 235, 0.8);
	}

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__back-to-course-link:hover {
		background: #f5f7fa;
		color: #2563eb !important;
	}
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__previous-link:focus-visible,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__next-link:focus-visible,

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.ld-navigation__back-to-course-link:focus-visible {
	outline: none;
	border-color: rgba(37, 99, 235, 0.58);
	background: #f4f7ff !important;
	color: #2563eb !important;
	box-shadow:
		0 8px 18px -15px rgba(37, 99, 235, 0.58);
}

body:is(.single-sfwd-lessons, .single-sfwd-topic)
.learndash-wrapper
.learndash_mark_complete_button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.27);
	outline-offset: 3px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"progress progress"
			"previous next"
			"back back";

		column-gap: 8px;
        row-gap: 10px;

		margin-top: 24px;
		padding-top: 24px;
	}

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__previous-link,

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__next-link {
		min-height: 42px;
		max-width: 100%;
		padding: 8px 10px;
		font-size: 0.8rem;
	}

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation
	.learndash_mark_complete_button,

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__progress-completed-action {
		min-height: 44px;
		padding: 10px 14px !important;
		font-size: 0.84rem;
	}

	body:is(.single-sfwd-lessons, .single-sfwd-topic)
	.learndash-wrapper
	.ld-navigation__back-to-course-link {
		font-size: 0.82rem;
	}

	/* Module overview: primary route first, return link below */

	body.single-sfwd-lessons
	.learndash-wrapper
	.ld-navigation {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"next"
			"back";
		row-gap: 10px;
	}

	body.single-sfwd-lessons
	.learndash-wrapper
	.ld-navigation__next {
		justify-self: stretch;
		width: 100%;
	}

	body.single-sfwd-lessons
	.learndash-wrapper
	.ld-navigation__next-link {
		width: 100%;
	}

	body.single-sfwd-lessons
	.learndash-wrapper
	.ld-navigation__back-to-course {
		justify-self: center;
	}
}