/*
 * CRENC LearnDash Focus Mode skin.
 * LearnDash LD30 remains responsible for layout, navigation and interactions.
 */

:root {
  --crenc-ld-green: #17775d;
  --crenc-ld-green-dark: #0d5946;
  --crenc-ld-green-soft: #edf7f3;
  --crenc-ld-ink: #0d1b2e;
  --crenc-ld-copy: #445068;
  --crenc-ld-muted: #687588;
  --crenc-ld-border: #dce5e1;
  --crenc-ld-neutral: #f5f7f6;
  --crenc-ld-white: #ffffff;
  --crenc-ld-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --crenc-ld-display: "Fraunces", Georgia, serif;
}

body.single-sfwd-lessons,
body.single-sfwd-topic,
body.single-sfwd-quiz,
body.single-sfwd-lessons .ld-focus,
body.single-sfwd-topic .ld-focus,
body.single-sfwd-quiz .ld-focus,
body .ld-focus .ld-focus-main,
body .ld-focus .ld-focus-content,
body .ld-focus #ld-focus-content {
  background: var(--crenc-ld-white);
}

body .ld-focus,
body .ld-focus .learndash-wrapper,
body .ld-focus button,
body .ld-focus input,
body .ld-focus select,
body .ld-focus textarea {
  font-family: var(--crenc-ld-sans);
}

body .ld-focus .learndash-wrapper {
  --ldcolor-primary: var(--crenc-ld-green);
  --ldcolor-secondary: var(--crenc-ld-green);
  --ldcolor-tertiary: var(--crenc-ld-green-dark);
  color: var(--crenc-ld-ink);
}

/* Header and progress */
body .ld-focus .ld-focus-header {
  border-bottom: 1px solid var(--crenc-ld-border);
  background: var(--crenc-ld-white);
  box-shadow: 0 1px 4px rgba(13, 27, 46, .04);
}

body .ld-focus .ld-brand-logo img {
  max-height: 42px;
  width: auto;
}

body .ld-focus .ld-progress-percentage,
body .ld-focus .ld-progress-steps,
body .ld-focus .ld-focus-header .ld-content-action a,
body .ld-focus .ld-user-menu .ld-text {
  color: var(--crenc-ld-green-dark) !important;
}

body .ld-focus .ld-progress-bar {
  background: #e4ece8;
}

body .ld-focus .ld-progress-bar-percentage,
body .ld-focus .ld-primary-background,
body .ld-focus .ld-secondary-background {
  background-color: var(--crenc-ld-green) !important;
}

body .ld-focus .ld-primary-color,
body .ld-focus .ld-primary-color-hover:hover,
body .ld-focus .ld-secondary-color,
body .ld-focus .ld-secondary-color-hover:hover {
  color: var(--crenc-ld-green) !important;
}

/* Native course navigation with restrained branding */
body .ld-focus .ld-focus-sidebar {
  border-right: 1px solid var(--crenc-ld-border);
  background: var(--crenc-ld-white);
  box-shadow: none;
}

body.single-sfwd-lessons .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading,
body.single-sfwd-topic .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading,
body.single-sfwd-quiz .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
  border-bottom-color: rgba(255, 255, 255, .16);
  background: var(--crenc-ld-green-dark) !important;
}

body .ld-focus .ld-course-navigation-heading #ld-focus-mode-course-heading,
body .ld-focus .ld-course-navigation-heading .ld-focus-sidebar-trigger,
body .ld-focus .ld-course-navigation-heading .ld-icon {
  color: #fff !important;
}

body .ld-focus .ld-course-navigation-heading .ld-icon {
  background: transparent !important;
}

body .ld-focus .ld-course-navigation-heading .ld-focus-sidebar-trigger .ld-icon {
  right: 12px !important;
}

body .ld-focus .ld-course-navigation .ld-lesson-item {
  border-bottom-color: var(--crenc-ld-border);
}

body .ld-focus .ld-course-navigation .ld-lesson-item-preview,
body .ld-focus .ld-course-navigation .ld-table-list-item-preview {
  transition: background-color 140ms ease, color 140ms ease;
}

body .ld-focus .ld-course-navigation .ld-lesson-item-preview:hover,
body .ld-focus .ld-course-navigation .ld-table-list-item-preview:hover {
  background: #f7f9f8;
}

body .ld-focus .ld-course-navigation .ld-is-current-lesson > .ld-lesson-item-preview,
body .ld-focus .ld-course-navigation .ld-is-current-item .ld-table-list-item-preview,
body .ld-focus .ld-course-navigation .learndash-current-menu-item .ld-table-list-item-preview {
  background: var(--crenc-ld-green-soft);
  box-shadow: inset 3px 0 0 var(--crenc-ld-green);
}

body.single-sfwd-lessons .learndash-wrapper .ld-focus .ld-lesson-item-preview-heading,
body.single-sfwd-topic .learndash-wrapper .ld-focus .ld-lesson-item-preview-heading,
body.single-sfwd-quiz .learndash-wrapper .ld-focus .ld-lesson-item-preview-heading {
  color: var(--crenc-ld-green-dark) !important;
}

body .ld-focus .ld-status-icon,
body .ld-focus .ld-item-icon,
body .ld-focus .ld-icon-checkmark {
  color: var(--crenc-ld-green) !important;
}

body .ld-focus .ld-status-complete .ld-status-icon,
body .ld-focus .learndash-complete .ld-status-icon,
body .ld-focus .ld-status-icon.ld-status-complete {
  background: var(--crenc-ld-green) !important;
  color: #fff !important;
}

body .ld-focus .ld-status-complete .ld-icon-checkmark,
body .ld-focus .learndash-complete .ld-icon-checkmark,
body .ld-focus .ld-status-icon.ld-status-complete .ld-icon-checkmark {
  color: #fff !important;
}

/* Main reading surface */
body .ld-focus .ld-focus-content > h1,
body .ld-focus .ld-focus-content h2,
body .ld-focus .ld-focus-content h3,
body .ld-focus .ld-tabs-content h2,
body .ld-focus .ld-tabs-content h3,
body .ld-focus .wpProQuiz_question_text,
body .ld-focus .wpProQuiz_question_text p {
  color: var(--crenc-ld-ink);
  font-family: var(--crenc-ld-display);
  font-weight: 600;
  letter-spacing: 0;
}

body .ld-focus .ld-focus-content p,
body .ld-focus .ld-tabs-content p,
body .ld-focus .ld-focus-content li,
body .ld-focus .ld-tabs-content li {
  color: var(--crenc-ld-copy);
}

body .ld-focus .ld-focus-content a,
body .ld-focus .ld-tabs-content a,
body .ld-focus .ld-breadcrumbs a,
body .ld-focus .ld-course-step-back {
  color: var(--crenc-ld-green-dark) !important;
}

body .ld-focus .ld-breadcrumbs {
  border-color: var(--crenc-ld-border);
  background: var(--crenc-ld-neutral);
}

body .ld-focus .ld-status-complete,
body .ld-focus .ld-status.ld-status-complete {
  background: var(--crenc-ld-green) !important;
  color: #fff !important;
}

body .ld-focus .ld-tabs,
body .ld-focus .ld-table-list,
body .ld-focus .ld-alert {
  border-color: var(--crenc-ld-border);
  box-shadow: none;
}

body .ld-focus .ld-table-list-header {
  background: var(--crenc-ld-green-dark) !important;
  color: #fff !important;
}

body .ld-focus .ld-table-list-header * {
  color: #fff !important;
}

/* Native controls, branded without changing their dimensions */
body .ld-focus .ld-button,
body .ld-focus .learndash_mark_complete_button,
body .ld-focus input.learndash_mark_complete_button,
body .ld-focus .wpProQuiz_button,
body .ld-focus .wpProQuiz_button2,
body.single-sfwd-quiz .ld-focus #ld-focus-content .wpProQuiz_content input.wpProQuiz_button,
body.single-sfwd-quiz .ld-focus #ld-focus-content .wpProQuiz_content input.wpProQuiz_button2 {
  border-color: var(--crenc-ld-green) !important;
  background-color: var(--crenc-ld-green) !important;
  color: #fff !important;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

body .ld-focus .ld-content-actions .ld-button:not(.ld-button-transparent),
body .ld-focus .ld-content-actions .ld-button:not(.ld-button-transparent) .ld-text,
body .ld-focus .ld-content-actions .ld-button:not(.ld-button-transparent) .ld-icon {
  color: #fff !important;
}

body .ld-focus .ld-button:hover,
body .ld-focus .learndash_mark_complete_button:hover,
body .ld-focus input.learndash_mark_complete_button:hover,
body .ld-focus .wpProQuiz_button:hover,
body .ld-focus .wpProQuiz_button2:hover,
body.single-sfwd-quiz .ld-focus #ld-focus-content .wpProQuiz_content input.wpProQuiz_button:hover,
body.single-sfwd-quiz .ld-focus #ld-focus-content .wpProQuiz_content input.wpProQuiz_button2:hover {
  border-color: var(--crenc-ld-green-dark) !important;
  background-color: var(--crenc-ld-green-dark) !important;
  color: #fff !important;
}

body .ld-focus .ld-button-transparent,
body .ld-focus .ld-content-actions .ld-button-transparent,
body .ld-focus .ld-course-step-back {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--crenc-ld-green-dark) !important;
}

body .ld-focus .ld-button-transparent:hover,
body .ld-focus .ld-content-actions .ld-button-transparent:hover,
body .ld-focus .ld-course-step-back:hover {
  background: var(--crenc-ld-green-soft) !important;
  color: var(--crenc-ld-green-dark) !important;
}

/* Quiz choices and written responses */
body .ld-focus .wpProQuiz_content,
body .ld-focus .wpProQuiz_question,
body .ld-focus .wpProQuiz_questionList,
body .ld-focus .wpProQuiz_questionListItem {
  box-shadow: none;
}

body .ld-focus .wpProQuiz_questionListItem label {
  border-color: var(--crenc-ld-border);
  background: #f7f8f8;
  color: var(--crenc-ld-copy);
  transition: border-color 140ms ease, background-color 140ms ease;
}

body .ld-focus .wpProQuiz_questionListItem label:hover,
body .ld-focus .wpProQuiz_questionListItem label:has(input:checked) {
  border-color: #9fc8b9;
  background: var(--crenc-ld-green-soft);
}

body .ld-focus .wpProQuiz_questionListItem input {
  accent-color: var(--crenc-ld-green);
}

body .ld-focus textarea,
body .ld-focus input[type="text"],
body .ld-focus input[type="email"],
body .ld-focus input[type="url"] {
  border: 1px solid var(--crenc-ld-border);
  background: var(--crenc-ld-white);
  color: var(--crenc-ld-ink);
}

body .ld-focus textarea:focus,
body .ld-focus input[type="text"]:focus,
body .ld-focus input[type="email"]:focus,
body .ld-focus input[type="url"]:focus,
body.single-sfwd-quiz .ld-focus #ld-focus-content .wpProQuiz_content textarea:focus {
  border-color: var(--crenc-ld-green) !important;
  box-shadow: 0 0 0 3px rgba(23, 119, 93, .12) !important;
  outline: 0;
}

/* Responsive embedded media without changing the content column. */
body .ld-focus .wp-block-embed__wrapper,
body .ld-focus .et_pb_video_box,
body .ld-focus .fluid-width-video-wrapper {
  max-width: 100%;
}

body .ld-focus .wp-block-embed__wrapper iframe,
body .ld-focus iframe[src*="youtube.com"],
body .ld-focus iframe[src*="youtu.be"],
body .ld-focus iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 6px;
}

@media (max-width: 640px) {
  body .ld-focus .ld-brand-logo img {
    max-height: 34px;
  }
}