/* Academy page styles
 * Used by: /academy-demo, /dashboard/academy
 */

/* Reset typography for dashboard elements when webapp-shared.css is also loaded.
 * The global h/p styles in webapp-shared.css set dark text colors that conflict
 * with the dashboard's light-on-dark design. */
menu.bg-dark p,
menu.bg-dark li,
nav.bg-dark p {
	color: var(--color-p-light-bright);
}

.academy-layout {
	/* Slightly lighter than the .bg-dark nav so the header reads as a distinct
	 * surface. Local to this file because no other page needs this shade. */
	--academy-surface: #181818;

	min-height: 100dvh;
	width: 100dvw;

	display: flex;
	flex-direction: column;

	background-color: var(--academy-surface);
	background-image: none;
	--webapp-bg-color: var(--academy-surface);
	--bg-color: var(--academy-surface);
	--background-gradient: none;
}

/* CourseList paints each row with its own --category-bg (defaults to
 * --color-bgs-dark, matching the nav). We want rows flush with the surface,
 * so override the row background and the edge-fade gradients that fade
 * toward it. Selector specificity must exceed `.course-category`'s own
 * declaration, hence the descendant selector. */
.academy-layout.webapp-bg .course-category {
	--category-bg: var(--academy-surface);
	--edge-fade-color: rgba(from var(--academy-surface) r g b / 0.5);
	--edge-fade-color-hover: rgba(from var(--academy-surface) r g b / 0.75);
}

.academy-layout .academy-content,
.academy-content {
	flex-grow: 1;

	padding: 0;
	overflow-x: hidden;

	background-color: var(--academy-surface, var(--color-bgs-dark));
}