/**
 * LearnDash modern views (course, lesson and topic pages).
 *
 * LearnDash resets its own buttons with single-class `all: unset` rules. The
 * Elementor kit's global rule (`.act-kit button`, `.act-kit
 * input[type="submit"]` in legacy.css) is more specific, so the course
 * "Expand all" and lesson toggles and the "Mark incomplete" control rendered
 * as blue pills with clipped labels. The rules below restate LearnDash's
 * declarations from sfwd-lms/themes/ld30/assets/css/modern.css, each one class
 * more specific, so LearnDash's own design shows through. Keep them in the
 * same order as modern.css.
 */

/* Accordion toggles (modern.css "ld-accordion__expand-button"). */
.act-kit .ld-accordion__expand-button,
.act-kit .ld-accordion__expand-button:hover,
.act-kit .ld-accordion__expand-button:focus {
	all: unset;
	align-items: center;
	color: var(--ld-color-system-body-text);
	display: flex;
	font-size: var(--ld-typography-desktop-body-size);
	font-style: normal;
	gap: var(--ld-spacer-fixed-1);
	line-height: var(--ld-typography-desktop-body-height);
	padding-bottom: var(--ld-spacer-0);
}
.act-kit .ld-accordion__expand-button:hover {
	color: var(--ld-color-brand-primary);
	cursor: pointer;
}
.act-kit .ld-accordion__expand-button:focus-visible {
	border-radius: var(--ld-border-radius-small);
	outline: solid 2px var(--ld-color-brand-primary);
}
.act-kit .ld-accordion__expand-button--all,
.act-kit .ld-accordion__expand-button--all:hover,
.act-kit .ld-accordion__expand-button--all:focus {
	font-weight: var(--ld-typography-font-weight-medium);
}
.act-kit .ld-accordion__expand-button--all:hover {
	border-bottom: 2px solid var(--ld-color-brand-primary);
	margin-bottom: -2px;
}
.act-kit .ld-accordion__expand-button--lesson,
.act-kit .ld-accordion__expand-button--lesson:hover,
.act-kit .ld-accordion__expand-button--lesson:focus,
.act-kit .ld-accordion__expand-button--topic,
.act-kit .ld-accordion__expand-button--topic:hover,
.act-kit .ld-accordion__expand-button--topic:focus {
	font-weight: var(--ld-typography-font-weight-bold);
}
.act-kit .ld-accordion__item .ld-accordion__expand-button {
	font-size: var(--ld-typography-desktop-caption-size);
	grid-area: expand;
	justify-content: flex-end;
	letter-spacing: 1px;
	line-height: var(--ld-typography-desktop-caption-height);
	padding: var(--ld-spacer-2) var(--ld-spacer-fixed-5);
	text-transform: uppercase;
}
.act-kit .ld-accordion.ld-breakpoint--small .ld-accordion__item .ld-accordion__expand-button {
	padding: var(--ld-spacer-2) var(--ld-spacer-fixed-2) var(--ld-spacer-2) var(--ld-spacer-fixed-5);
}

/* Bottom navigation "Mark incomplete" (modern.css
   "ld-navigation__progress-mark-incomplete-button"). One deviation: 1px of
   block padding takes the 22px line to the 24px minimum target (2.5.8). */
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button,
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:active,
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:focus-visible,
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:focus-within,
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:focus,
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:hover {
	all: unset;
	color: var(--ld-color-primitives-blue-500);
	font-family: var(--ld-typography-font-family);
	font-size: var(--ld-typography-mobile-link-size);
	font-weight: var(--ld-typography-font-weight-regular);
	line-height: var(--ld-typography-mobile-link-height);
	padding-block: 1px;
	text-decoration-line: underline;
}
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:hover {
	cursor: pointer;
}
.act-kit .ld-navigation .ld-navigation__progress-mark-incomplete-button:focus-visible {
	border-radius: 2px;
	outline: solid 2px var(--ld-color-brand-primary);
	outline-offset: 2px;
}

/* Focus-mode header avatar. LearnDash scopes its avatar crop to
   `:not(.learndash-wrapper--modern)`, so on modern pages the 96px Gravatar
   spilled out of its 40px slot and covered "Mark incomplete" on phones. */
.learndash-wrapper--modern .ld-focus-header .ld-profile-avatar {
	border-radius: 100%;
	overflow: hidden;
}
.learndash-wrapper--modern .ld-focus-header .ld-profile-avatar img {
	display: block;
	height: auto;
	width: 100%;
}