/* CapyClass screens in the AI Kids look (see inc/capyclass.php). Only CapyClass's own variables, fonts and the few
   colors it doesn't expose as variables. "body" in front of each rule = one step more specific than CapyClass. */

body .hdc-focus,
body .hdc-offer,
body .hdc-course-page,
body .hdc-my-courses,
body .hdc-notes-page,
body .hdc-certificate-page {
	font-family: "Rubik", system-ui, sans-serif;
}

body .hdc-focus h1,
body .hdc-focus h2,
body .hdc-certificate-page h1,
body .hdc-offer h1,
body .hdc-offer h2,
body .hdc-course-page h1,
body .hdc-course-page h2,
body .hdc-my-courses h2,
body .hdc-my-courses h3 {
	font-family: "Jimbory", "Fredoka", "Rubik", system-ui, sans-serif;
	font-weight: 700;
}

/* The lesson (Focus mode): the lo-fi night instead of dark gray */

body.hdc-focus-body {
	background: #1b1442;
}

body .hdc-focus {
	--hdc-bg: #1b1442;
	--hdc-deep: #140e35;
	--hdc-raised: #251a5c;
	--hdc-text: #ece8ff;
	--hdc-muted: #a9a1d8;
	--hdc-pink: #a98bff;
	--hdc-border: rgba(255, 255, 255, 0.1);
}

body .hdc-focus .hdc-lesson-link.is-current,
body .hdc-focus .hdc-account-links .hdc-icon {
	background: rgba(169, 139, 255, 0.18);
}

body .hdc-focus .hdc-lesson-link.is-done .hdc-icon:nth-of-type(2) {
	color: #19c6f0;
}

/* The quiz: the brand's purple button, a right answer in cyan */

body .hdc-focus .hdc-quiz-check {
	background: linear-gradient(180deg, #8d63ff, #7646f5);
	box-shadow: 0 4px 0 #5a30d8;
	font-family: "Fredoka", "Rubik", system-ui, sans-serif;
	font-size: 19px;
}

body .hdc-focus .hdc-quiz-number {
	background: #7b5cff;
}

body .hdc-focus .hdc-quiz-question.is-right {
	border-color: #19c6f0;
}

/* The certificate page: the lo-fi night around the certificate */

body.hdc-certificate-body {
	background: #1b1442 url(../img/bg-sky.webp) center top / cover fixed;
}

body .hdc-certificate-page {
	--hdc-ink: #1d1640;
	--hdc-pink: #ece4ff;

	color: #fff;
}

body .hdc-certificate-page .hdc-certificate-print,
body .hdc-certificate-page .hdc-certificate-download {
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, #8d63ff, #7646f5);
	box-shadow: 0 4px 0 #5a30d8;
	color: #fff;
	font-family: "Fredoka", "Rubik", system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
}

body .hdc-certificate-page .hdc-certificate img {
	border-radius: 20px;
	box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
}

@media print {
	body.hdc-certificate-body {
		background: #fff;
	}
}

/* Course page, my courses, notes */

body .hdc-course-page,
body .hdc-my-courses,
body .hdc-notes-page {
	--hdc-ink: #1d1640;
	--hdc-muted: #5f5888;
	--hdc-line: #e2d6fd;
	--hdc-pink: #ece4ff;
	--hdc-pink-strong: #5a30d8;
	--hdc-green-bg: #dcf7e6;
	--hdc-green: #135c31;
}

body .hdc-course-page .hdc-button:hover {
	background: #d9ccff;
}

body .hdc-my-courses .hdc-badge-locked {
	background: #f4efff;
}

body .hdc-my-courses .hdc-card-progress span {
	background: linear-gradient(to left, #5fe3f6, #a991ff);
}

/* The offer checkout */

body.hdc-offer-body {
	background: #f6f2ff;
}

body .hdc-offer {
	--hdc-ink: #1d1640;
	--hdc-muted: #5f5888;
	--hdc-line: #e2d6fd;
	--hdc-pink: #ece4ff;
	--hdc-pink-strong: #5a30d8;
}

/* The site's name at the top becomes the logo; the text stays for screen readers. */
body .hdc-offer .hdc-offer-brand a {
	display: inline-block;
	width: 190px;
	height: 76px;
	background: url(../img/logo.webp) no-repeat center / contain;
	color: transparent;
	font-size: 0;
}

body .hdc-offer .hdc-offer-product,
body .hdc-offer .hdc-offer-checkout {
	border: 2px solid var(--hdc-line);
	border-radius: 20px;
}

body .hdc-offer .hdc-offer-checkout #place_order {
	padding: 16px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, #8d63ff, #7646f5);
	box-shadow: 0 4px 0 #5a30d8;
	color: #fff;
	font-family: "Fredoka", "Rubik", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
	cursor: pointer;
}

body .hdc-thankyou {
	border-color: #e2d6fd;
	border-radius: 20px;
}