/*
 * Course page and course cards.
 *
 * Loaded when LearnDash is active, on the front and in the editors. Styles the
 * course template (templates/single-sfwd-courses.html), the course patterns and
 * the markup of the LearnDash template overrides in learndash/ld30/.
 */

/*
 * Layout: main column and sticky side card. Below the "tablet" breakpoint
 * (theme.json settings.viewport) they stack, and the mobile card shows instead.
 */
.wp-block-group.teachers-room-course {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.teachers-room-course > .teachers-room-course__main {
	flex: 999 1 480px;
	min-width: 0;
}

.teachers-room-course > .teachers-room-course__aside {
	flex: 1 1 340px;
	max-width: 420px;
	overflow: hidden;
}

@media (width <= 1023px) {
	.teachers-room-course > .teachers-room-course__main {
		flex-basis: 100%;
	}

	.teachers-room-course > .wp-block-group.teachers-room-course__aside {
		position: static;
	}
}

.teachers-room-course__lead {
	max-width: 640px;
}

/*
 * Pills and tags with an icon (paragraph styles "Pill" and "Tag").
 */
[class*="has-icon-"] {
	--teachers-room-icon-size: 16px;
}

.has-icon-check {
	--teachers-room-icon: var(--teachers-room-icon-check);
	--teachers-room-icon-size: 14px;
}

.has-icon-clock {
	--teachers-room-icon: var(--teachers-room-icon-clock);
}

.has-icon-layers {
	--teachers-room-icon: var(--teachers-room-icon-layers);
}

.has-icon-play {
	--teachers-room-icon: var(--teachers-room-icon-play);
}

.has-icon-award {
	--teachers-room-icon: var(--teachers-room-icon-award);
}

.has-icon-arrow {
	--teachers-room-icon: var(--teachers-room-icon-arrow);
	--teachers-room-icon-size: 15px;
}

:is(.has-icon-check, .has-icon-clock, .has-icon-layers, .has-icon-play, .has-icon-award)::before,
.has-icon-arrow::after {
	content: "";
	flex: none;
	width: var(--teachers-room-icon-size);
	height: var(--teachers-room-icon-size);
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--teachers-room-icon) center / contain no-repeat;
	mask: var(--teachers-room-icon) center / contain no-repeat;
}

.has-icon-check::before,
.has-icon-arrow::after {
	background-color: currentColor;
}

.has-icon-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.teachers-room-certificate-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.teachers-room-certificate-note::before {
	--teachers-room-icon-size: 20px;
	margin-top: 1px;
}

/* Price: "€20 one-off payment". */
.teachers-room-price {
	align-items: baseline !important;
}

.teachers-room-price__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* LearnDash wrappers around the visitor and student blocks add no spacing of their own. */
.teachers-room-course .learndash-wrapper:where(.learndash-shortcode-wrap) {
	padding: 0;
}

/*
 * Progress (override of LearnDash widgets/course-progress.php).
 */
.teachers-room-progress {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.teachers-room-progress__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
}

.teachers-room-progress__percentage {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.teachers-room-course__card-mobile .teachers-room-progress__percentage {
	font-size: 34px;
}

.teachers-room-progress__steps {
	color: var(--wp--preset--color--contrast-2);
	font-size: 14.5px;
}

.teachers-room-progress__bar {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary-soft);
}

.teachers-room-progress__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
}

/*
 * Lesson list (override of LearnDash shortcodes/course_content_shortcode.php).
 * Each lesson is a card: a row (number, title link, progress, toggle) and the
 * list of its topics and quizzes, open or closed by the toggle.
 */
.teachers-room-lessons__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.teachers-room-lesson {
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
}

.teachers-room-lesson:has(a.teachers-room-lesson__title:hover) {
	border-color: var(--wp--preset--color--primary);
}

.teachers-room-lesson.is-current {
	border: 1.5px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-soft);
}

.teachers-room-lesson__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
}

.teachers-room-lesson:has(.teachers-room-lesson__toggle) .teachers-room-lesson__row {
	padding-right: 12px;
}

.teachers-room-lesson__badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
}

.teachers-room-lesson.is-quiz .teachers-room-lesson__badge {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	text-transform: uppercase;
}

.teachers-room-lesson.is-done .teachers-room-lesson__badge {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.teachers-room-lesson.is-upcoming .teachers-room-lesson__badge {
	border: 2px solid var(--wp--preset--color--border-field);
	background-color: transparent;
	color: var(--wp--preset--color--contrast-2);
}

.teachers-room-lesson__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* The title link covers the whole row; the toggle stays on top of it. */
a.teachers-room-lesson__title {
	text-decoration: none;
}

a.teachers-room-lesson__title::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

a.teachers-room-lesson__title:hover {
	color: var(--wp--preset--color--contrast);
}

a.teachers-room-lesson__title:focus-visible {
	outline: none;
}

a.teachers-room-lesson__title:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.teachers-room-lesson__meta {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 14.5px;
}

.teachers-room-lesson.is-current .teachers-room-lesson__meta,
.teachers-room-lesson.is-preview .teachers-room-lesson__meta {
	gap: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.teachers-room-lesson__toggle {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -2px 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.teachers-room-lesson__toggle:hover {
	background-color: var(--wp--preset--color--primary-soft);
}

.teachers-room-lesson__toggle svg {
	transition: transform 0.15s ease;
}

.teachers-room-lesson__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Topics and quizzes of a lesson, aligned with the lesson title. */
.teachers-room-lesson__steps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 22px;
	padding: 10px 0 14px 58px;
	border-top: 1px solid var(--wp--preset--color--line);
	list-style: none;
	font-size: 15.5px;
}

.teachers-room-lesson.is-current .teachers-room-lesson__steps {
	border-top-color: var(--wp--preset--color--accent);
}

.teachers-room-lesson__steps[hidden] {
	display: none;
}

.teachers-room-step {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
}

.teachers-room-step a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.teachers-room-step a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.teachers-room-step__status {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	border: 2px solid var(--wp--preset--color--border-field);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast-2);
}

.teachers-room-step__status svg {
	width: 12px;
	height: 12px;
}

.teachers-room-step.is-done .teachers-room-step__status {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.teachers-room-lesson.is-locked .teachers-room-step__status,
.teachers-room-lesson.is-preview .teachers-room-step__status {
	border: 0;
}

.teachers-room-lesson.is-locked .teachers-room-step__status svg {
	width: 16px;
	height: 16px;
}

.teachers-room-lesson.is-locked .teachers-room-step {
	color: var(--wp--preset--color--contrast-2);
}

.teachers-room-step__type {
	padding: 0 8px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.teachers-room-lessons__note {
	margin: 10px 0 0;
	padding: 4px 4px 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 14.5px;
}

@media (width <= 480px) {
	.teachers-room-lesson__row {
		gap: 12px;
		padding: 16px;
	}

	.teachers-room-lesson__title {
		font-size: 16px;
	}

	.teachers-room-lesson__steps {
		margin: 0 16px;
		padding-left: 0;
	}
}

/*
 * Trainer and certificate sections.
 */
.teachers-room-trainer__body > .teachers-room-trainer__text {
	flex: 1 1 320px;
	min-width: 0;
}

.teachers-room-trainer__text .is-style-dots {
	max-width: 560px;
}

.teachers-room-certificate > .teachers-room-certificate__text {
	flex: 1 1 280px;
	min-width: 0;
}

.teachers-room-certificate > .teachers-room-certificate__image {
	flex: 0 1 340px;
	margin: 0;
}

.teachers-room-certificate__image img {
	max-width: 100%;
	height: auto;
}

/*
 * Course cards: the whole card links to the course through the title link.
 */
.teachers-room-course-card {
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.teachers-room-course-card:hover {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: var(--wp--preset--shadow--raised);
}

.teachers-room-course-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.teachers-room-course-card .wp-block-post-title a:focus-visible {
	outline: none;
}

.teachers-room-course-card:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Short description: at most three lines, so the cards in a row stay even. */
.teachers-room-course-card .teachers-room-course-card__description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.teachers-room-course-card .teachers-room-course-card__mix {
	margin-top: auto;
	padding-top: 6px;
}

/*
 * Course sign-up (Teachers Room Courses plugin block), on the "Checkout"
 * page template: free course sign-up, sign-in and "Check your inbox".
 */
.wp-block-teachers-room-signup {
	gap: 32px;
}

.wp-block-teachers-room-signup__hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.wp-block-teachers-room-signup__badge {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin: 0;
	padding: 0 14px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 13.5px;
	font-weight: 700;
}

.wp-block-teachers-room-signup__title {
	margin: 0;
	font-size: clamp(2.125rem, 1.7rem + 1.4vw, 2.875rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.wp-block-teachers-room-signup__lead {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 18px;
	line-height: 1.55;
	text-wrap: pretty;
}

.wp-block-teachers-room-signup__lead strong {
	color: var(--wp--preset--color--contrast);
}

.wp-block-teachers-room-signup__notice {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 14px;
	background-color: var(--wp--preset--color--accent-soft);
	font-size: 15px;
}

.wp-block-teachers-room-signup__card {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--floating);
}

.wp-block-teachers-room-signup__card--message {
	align-items: center;
	gap: 20px;
	padding: 48px var(--wp--preset--spacing--50);
	text-align: center;
}

.wp-block-teachers-room-signup__card--message .wp-block-teachers-room-signup__lead {
	max-width: 440px;
}

.wp-block-teachers-room-signup__card--message .wp-block-teachers-room-signup__title {
	font-size: clamp(2rem, 1.7rem + 1vw, 2.625rem);
}

.wp-block-teachers-room-signup__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Course summary: image, title, details, price; a line below it. */
.wp-block-teachers-room-signup__course {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-teachers-room-signup__course-image {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	object-fit: cover;
}

.wp-block-teachers-room-signup__course-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wp-block-teachers-room-signup__course-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.wp-block-teachers-room-signup__course-meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: 14.5px;
}

.wp-block-teachers-room-signup__course-price {
	flex: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
}

/* Fields. */
.wp-block-teachers-room-signup__field {
	margin: 0;
}

.wp-block-teachers-room-signup__field label {
	font-size: 14.5px;
	font-weight: 600;
}

.wp-block-teachers-room-signup__field input {
	height: 52px;
	padding: 0 16px;
	border: 1.5px solid var(--wp--preset--color--border-field);
	border-radius: 12px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 16px;
}

.wp-block-teachers-room-signup__field input:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wp-block-teachers-room-signup__hint {
	color: var(--wp--preset--color--contrast-2);
	font-size: 14px;
}

.wp-block-teachers-room-signup__checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wp-block-teachers-room-signup__check {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 0;
	font-size: 15px;
	cursor: pointer;
}

.wp-block-teachers-room-signup__check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--primary);
}

.wp-block-teachers-room-signup__check a {
	font-weight: 600;
}

.wp-block-teachers-room-signup__optional {
	color: var(--wp--preset--color--contrast-2);
}

/* Buttons. */
.wp-block-teachers-room-signup__submit {
	display: flex;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	font-size: 17px;
	cursor: pointer;
}

.wp-block-teachers-room-signup__secondary {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-teachers-room-signup__secondary:hover {
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-teachers-room-signup__switch {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: 15.5px;
	text-align: center;
}

.wp-block-teachers-room-signup__switch a {
	font-weight: 600;
}