/*
 * SBA adapters for Sensei internals that do not use WordPress block defaults.
 * Shared design belongs in theme.json. Sensei owns layout and learner behavior.
 */

 /* ----- Defaults and base styles to fix Sensei styles ----- */

 /* Use the browser's selection colors instead of Sensei's inverted palette. */
.sensei-course-theme ::selection {
  background-color: Highlight;
  color: HighlightText;
}

/* Sensei already derives its primary, text and background globals from WP styles.
 * These remaining plugin roles have independent defaults. */
body.sensei-course-theme,
.editor-styles-wrapper:has(.wp-block-sensei-lms-ui) {
  --sensei-secondary-color: var(--wp--preset--color--secondary);
  --border-color: var(--wp--preset--color--neutral-300);
}

/* Header and course-list progress use plugin markup, not core block colors. */
.sensei-course-theme-course-progress-bar:not(.has-background),
.sensei-progress-bar__bar:not(.has-background) {
  background-color: var(--wp--preset--color--neutral-100);
}
.sensei-course-theme-course-progress-bar-inner:not(.has-background),
.sensei-progress-bar__progress:not(.has-background) {
  background-color: var(--wp--preset--color--secondary);
}

/* ----- Block:"SBA courses displayed in a grid" ----- */

/* Match the initiative cards. */
.sba-course-card {
  border-radius: 18px;
}

.sba-course-card .wp-block-post-featured-image img {
  border-radius: 10px;
}

/* Update the grid for Courses grid layout */
/* Updated the grid because of the image size requirement */

.wp-block-sensei-lms-course-list {

  .wp-block-post-template.is-layout-grid {
    gap: 1rem;
  }
  .wp-block-post {
    margin: 0;
    padding: 0;
  }

  /* Break to 2 columns between 601px and 900px */
  @media (min-width: 601px) and (max-width: 900px) {
    .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

/* ----- Block:"Course Outline" ----- */

/* The Lessons heading strip, not the lesson links beneath it. */
.wp-block-sensei-lms-course-outline.is-style-default .wp-block-sensei-lms-course-outline-module:not(.is-style-minimal) .wp-block-sensei-lms-course-outline-module__lessons-title,
.wp-block-sensei-lms-course-outline-module.is-style-default .wp-block-sensei-lms-course-outline-module__lessons-title {
  background-color: #f7f7f7;
}

.wp-block-sensei-lms-course-outline-module-bordered {
  border-color: #ececec;
}

.wp-block-sensei-lms-course-outline.is-style-default .wp-block-sensei-lms-course-outline-module:not(.is-style-minimal) .wp-block-sensei-lms-course-outline-module__header:not(.has-background),.wp-block-sensei-lms-course-outline-module.is-style-default .wp-block-sensei-lms-course-outline-module__header:not(.has-background) {
    background-color: var(--wp--preset--color--secondary);
}


/* ----- Learning Mode defaults ----- */

/* Keep Sensei's label-drawn checkbox, with the real input reachable by keyboard. */
.sensei-course-theme.quiz form #sensei-quiz-list input.sensei-multiple-choice-answer-option-checkbox {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sensei-course-theme.quiz form #sensei-quiz-list input.sensei-multiple-choice-answer-option-checkbox:focus + label::before {
  outline: .25rem solid var(--theme-focus-outline-color);
}

/* Sensei includes raw HTML controls as well as parsed core Button blocks.
 * They inherit the global button geometry, but do not receive core's generated
 * per-instance Outline variation. Supply that missing semantic treatment only. */
:is(body.sensei-course-theme, .editor-styles-wrapper) .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
  transition: none;
}
:is(body.sensei-course-theme, .editor-styles-wrapper) .wp-block-button.is-style-outline > .wp-block-button__link:not(:disabled, [aria-disabled="true"], .is-busy, [aria-busy="true"]):hover {
  background-color: var(--wp--preset--color--secondary-hover);
  color: var(--wp--preset--color--primary-light);
}

/* Shared button styles normally cover these too; inactive controls must not
 * acquire an active hover background from the site's global hover rule. */
body.sensei-course-theme .wp-block-button:not(.is-style-outline) > .wp-block-button__link:is(:disabled, [aria-disabled="true"], .is-busy, [aria-busy="true"]) {
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary-light);
}

/* Sensei makes this secondary action transparent; restore link contrast rather
 * than the white foreground intended for a filled WordPress button. */
.sensei-course-theme-locked-lesson-notice__actions .sensei-course-theme__button.is-secondary {
  color: var(--wp--preset--color--secondary);
  text-decoration: underline;
}
.sensei-course-theme-locked-lesson-notice__actions .sensei-course-theme__button.is-secondary:hover {
  background: transparent;
  color: var(--wp--preset--color--secondary-hover);
}

/* Completed is a status, not an available action. Keep its spacing aligned. */
:is(body.sensei-course-theme, .editor-styles-wrapper) .wp-block-sensei-lms-button-lesson-completed.wp-block-button .wp-block-button__link,
body.sensei-course-theme .wp-block-button.is-style-outline .sensei-course-theme-lesson-actions__completed {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--wp--preset--color--neutral-100);
  border-color: transparent;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-decoration: none;
  cursor: default;
  opacity: 1;
  filter: none;
  padding-left: 1rem;
}

/* Empty generated content and a mask make the checkmark purely decorative. */
.wp-block-sensei-lms-button-lesson-completed.wp-block-button .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}