/* LearnDash Focus Mode Styling */
@import url("https://use.typekit.net/sti8dsy.css");

:root {
  /* this color matches the settings in the LearnDash settings */
  --learndash-blue-lighter: #E6F3FE;
  --learndash-accent-color: #da5434;
  --learndash-progress-color: #007BFF;
  --learndash-notification-color: #8b36dd;
  --learndash-sidebar-background: var(--learndash-blue-lighter);
  --learndash-font-weight-medium: 500;
  --learndash-box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 0px 1px 1px rgba(0, 0, 0, 0.02);
}

.learndash-wrapper {
  font-family: var(--font-family-sans-serif);
}

/* start sidebar */

/* status icon */
.learndash-wrapper .ld-course-navigation .ld-status-icon {
  .ld-icon-checkmark {
    font-size: 0.525em;
    color: white;
  }

  &.ld-status-incomplete {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    background-color: transparent;
  }
}

.learndash-wrapper .ld-lesson-item {
  .ld-expand-button .ld-icon-arrow-down.ld-icon {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
  }

  .ld-expand-button:focus {
    outline-width: 0px !important;
  }
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
  border-color: var(--learndash-accent-color);
}

.learndash-wrapper .ld-focus-sidebar-wrapper,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
  background-color: var(--learndash-sidebar-background);

  *:not(.ld-icon) {
    color: var(--bs-primary);

    &:hover {
      color: var(--learndash-accent-color);
    }
  }
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list {
  background-color: #fff;
}

/* typography */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-lesson-item .ld-expand-button .ld-expand-text {
  font-size: 1.125em;
  font-weight: var(--learndash-font-weight-medium);
  color: var(--bs-primary) !important;
}

.ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list:before {
  background-color: var(--learndash-blue-lighter) !important;
  /* this needs to match the background color of the sidebar */
}

/* end sidebar */

/* main content */
.learndash-wrapper .ld-focus .ld-focus-sidebar {
  border-right-width: 0px;
  box-shadow: var(--learndash-box-shadow);

}

.learndash-wrapper .ld-focus .ld-focus-main {
  .ld-focus-content {
    max-width: 900px;
    padding: 5rem 4rem;
    margin-left: 0;
  }

  .ld-focus-content h1 {
    margin-bottom: 0;
    font-size: 3rem !important;
  }

  .ld-breadcrumbs {
    background: white;
    padding: 0.5em 0;

    a {
      color: var(--bs-primary) !important;
      font-size: 1.25rem;
      font-weight: var(--learndash-font-weight-medium);
    }

    .ld-breadcrumbs-segments li:after {
      font-size: 1.25rem;
      /* this font size needs to match the a link above*/
    }
  }

  @media (min-width: 1200px) {
    .ld-focus-content h1 {
      font-size: 4rem !important;
    }

    .ld-focus-content .ld-tabs {
      margin: 3em 0;
    }
  }

  /* Content WP Blocks */
  .ld-tabs-content {
    p a {
      text-decoration: underline;
    }

    .wp-block-media-text {
      img {
        aspect-ratio: 4/3;
        object-fit: contain;
        border-radius: var(--bs-border-radius-xxl);
      }

      @media (max-width: 600px) {
        gap: 2rem;
      }
    }

    /* cover block */
    .wp-block-cover.image-contain {
      img.wp-block-cover__image-background {
        object-fit: contain;
      }

      .wp-block-cover__background,
      .wp-block-cover__inner-container {
        transition: opacity 0.3s ease-in-out;
      }
    }

    .wp-block-cover.hover-content:not(:hover) {
      .wp-block-cover__background {
        opacity: 0;
      }

      .wp-block-cover__inner-container {
        visibility: hidden;
        opacity: 0;
      }
    }

    /* image gallery */
    .wp-block-gallery {
      &.image-aspect-ratio-4-3 {
        .wp-block-image {
          border-radius: var(--bs-border-radius-xl);
          overflow: hidden;

          img {
            aspect-ratio: 4/3;
            object-fit: cover;
            object-position: top center;
          }
        }
      }
    }

  }

  /* Buttons */
  input[type="button"],
  button:not(.ld-tab) {
    color: white !important;
    padding: .75rem 1.5rem;
  }

  /* accordion / details*/
  .wp-block-details summary {
    padding: 1rem 0;
    font-size: 1.25rem;
  }
}

/* media (images, videos, etc) */

.learndash-wrapper .ld-focus .ld-focus-main {

  .wp-block-image {
    max-width: 100%;
    margin: 3rem 0;

    img {
      border-radius: var(--bs-border-radius-xl);
    }
  }

  .wp-block-embed.wp-embed-aspect-16-9 {
    position: relative;

    &::before {
      display: block;
      padding-top: 56.25%;
      content: "";
    }

    .wp-block-embed__wrapper {
      position: absolute;
      inset: 0;
    }
  }

  iframe {
    border-radius: var(--bs-border-radius-xl);
    width: 100%;
    height: 100%;
  }
}

/* Material Tab*/
.ld-tab-content.ld-visible {
  li {
    white-space: normal !important;
  }
}

/* end main content */

/* Start Buttons */

.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-focus-content .ld-button {
  color: #fff !important;
  border-width: 2px !important;
  border-style: solid !important;
  font-weight: var(--learndash-font-weight-medium) !important;
  font-size: 1.125rem !important;
  border-radius: var(--bs-border-radius-pill) !important;
  padding: 1rem .75rem;
  white-space: nowrap;
  gap: 0.5em;

  .ld-text {
    padding: 0;
  }
}

/* Header navigations */
.learndash-wrapper .ld-focus-header .ld-content-actions {

  .ld-button:hover,
  input:hover {
    outline-width: 0px !important;
  }
}

/* next,previous navigation buttons */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-content-actions {
  justify-content: space-between;
}

.learndash-wrapper .ld-focus-content .ld-content-actions {

  /* prev button */
  .ld-content-action:first-of-type .ld-button {
    background-color: transparent !important;
    color: var(--learndash-accent-color) !important;
    border-color: var(--learndash-accent-color) !important;
  }

  /* center actions/buttons */
  .ld-content-action:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5em;
  }
}

/* End Buttons */