/**
 * Adroit's colours on Tutor LMS screens.
 *
 * Variables and a handful of high specificity overrides, no layout. Tutor can
 * rewrite its markup in the next release and this still applies, which is why
 * it is not a template override. Everything is scoped to Tutor's own wrappers
 * so nothing leaks onto the rest of the site.
 *
 * The palette is sampled from adroittutors.com, not invented:
 *   brand red  #830606
 *   deep red   #6F0B0B
 *   body text  #333333
 *   headings   Poppins, already loaded by the theme
 */

.tutor-wrap,
.tutor-dashboard,
.tutor-course-single-wrapper,
.tutor-course-topics-wrap,
.tutor-checkout-page,
body.tutor-lms-page {
	--tutor-color-primary: #830606;
	--tutor-color-primary-rgb: 131, 6, 6;
	--tutor-color-primary-hover: #6f0b0b;
	--tutor-color-primary-30: #e8c9c9;
	--tutor-color-primary-20: #f3e0e0;
	--tutor-color-primary-10: #fbeaea;
	--tutor-body-color: #333333;
	--tutor-color-black: #1a1a1a;
	--tutor-border-radius-6: 6px;
}

/* Tutor sets its own font stack. Match the dashboard's headings. */
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3,
.tutor-course-single-wrapper h1, .tutor-course-single-wrapper h2,
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3 {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a1a;
}

/*
 * Buttons. Tutor ships a blue that has nothing to do with Adroit, and its own
 * rules are specific enough that variables alone do not always win.
 */
.tutor-wrap .tutor-btn-primary,
.tutor-dashboard .tutor-btn-primary,
.tutor-btn.tutor-btn-primary {
	background-color: #830606 !important;
	border-color: #830606 !important;
	color: #ffffff !important;
}
.tutor-wrap .tutor-btn-primary:hover,
.tutor-dashboard .tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:hover {
	background-color: #6f0b0b !important;
	border-color: #6f0b0b !important;
}

.tutor-wrap .tutor-btn-outline-primary,
.tutor-btn.tutor-btn-outline-primary {
	border-color: #830606 !important;
	color: #830606 !important;
}
.tutor-wrap .tutor-btn-outline-primary:hover,
.tutor-btn.tutor-btn-outline-primary:hover {
	background-color: #830606 !important;
	color: #ffffff !important;
}

/* Links and the progress bars a student sees on every course. */
.tutor-dashboard a:not(.tutor-btn),
.tutor-course-single-wrapper a:not(.tutor-btn) { color: #830606; }

.tutor-progress-bar span,
.tutor-progress-value,
.tutor-ratio-progress-bar { background-color: #830606 !important; }

/* The selected item in Tutor's own sidebar, so the two menus agree. */
.tutor-dashboard-menu-item.active > a,
.tutor-dashboard-menu .active > a {
	color: #830606 !important;
	border-color: #830606 !important;
}

/* ---------------------------------------------------------- My Adroit -- */

/*
 * The button that takes a student from Tutor's account area to Adroit.
 *
 * Deliberately the strongest thing on the screen after Tutor's own primary
 * action. It is a door to a different part of the site, and a door nobody
 * notices is a door nobody uses.
 */
.adroit-launch-wrap { margin: 0 0 1.25rem; }
.adroit-launch-wrap--in-menu { margin: 0 0 .9rem; }

.adroit-launch {
	display: flex !important; align-items: center; justify-content: center;
	gap: .5rem; width: 100%;
	padding: .7rem 1rem;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: .95rem; font-weight: 600; line-height: 1.3;
	text-align: center; text-decoration: none !important;
	color: #ffffff !important;
	background: #830606; border: 1px solid #830606; border-radius: 6px;
	transition: background .12s, border-color .12s;
}
.adroit-launch:hover,
.adroit-launch:focus {
	background: #6f0b0b; border-color: #6f0b0b;
	color: #ffffff !important; text-decoration: none !important;
}
.adroit-launch:focus-visible { outline: 2px solid #830606; outline-offset: 2px; }
.adroit-launch span { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
.adroit-launch-cap { font-size: 1.05rem; line-height: 1; }

/* On a wide screen it sits with the menu, so it should not stretch the page. */
@media (min-width: 768px) {
	.adroit-launch-wrap:not(.adroit-launch-wrap--in-menu) .adroit-launch {
		width: auto; display: inline-flex !important;
	}
}