/**
 * ------------------------------
 * tl-lesson.css
 * ------------------------------
 * @purpose
 * レッスンページのcss
 *
 * @pages
 * ・(レッスンページ共通)
 *
 * @note
 *
 * @version
 * 1.2.0
 */

/***
 * ----------------------------------------
 *  # 講座動画
 * ----------------------------------------
 */
/***
 * [動画リンク]
 */
a.wp-block-wpzoom-video-popup-block-block {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  cursor: pointer;
  color: rgb(3, 140, 195);
  font-weight: 430;
  font-size: 1.1rem !important;
}
a.wp-block-wpzoom-video-popup-block-block:hover {
  opacity: 0.7;
  transform: translateX(5px);
}

/***
 * [動画ポップアップ]
 */
.editor-styles-wrapper a.wpzoom-video-popup-block,
a.wpzoom-video-popup-block {
  min-height: auto !important;
  justify-content: flex-start !important;
}

/**
 * ----------------------------------------
 *  # レッスン見出し
 * ----------------------------------------
 */
.wm-lesson-identity {
  width: min(100%, 960px);
  margin: 0px auto 18px;
  padding: 0 4px;
  box-sizing: border-box;
}

.wm-lesson-identity-course {
  display: inline-block;
  margin-bottom: 7px;

  color: rgb(3, 140, 195);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  letter-spacing: 0.02em;
}

a.wm-lesson-identity-course:hover,
a.wm-lesson-identity-course:focus-visible {
  color: #02739f;
  opacity: 0.8;
}

.wm-lesson-identity-title {
  margin: 0;
  color: #1f2a36;
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/**
 * ----------------------------------------
 *  # QuietTestへ進む完了ボタン
 * ----------------------------------------
 */
.wm-lesson-quiet-test-ready .tutor-learning-area-footer {
  justify-content: center;
}

.wm-lesson-quiet-test-ready .tutor-learning-area-footer form {
  width: auto;
  margin: 0;
}

.wm-lesson-quiet-test-button,
.wm-lesson-quiet-test-button:hover,
.wm-lesson-quiet-test-button:focus,
.wm-lesson-quiet-test-button:focus-visible,
.wm-lesson-quiet-test-button:active {
  width: 390px !important;
  min-width: 390px !important;
  min-height: 56px !important;
  padding: 0 30px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 1px solid #4d74df !important;
  border-radius: 999px !important;
  background: #4d74df !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(77, 116, 223, 0.24) !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.015em;

  opacity: 1 !important;
  cursor: pointer !important;
}

.wm-lesson-quiet-test-button:hover {
  background: #4167cf !important;
  border-color: #4167cf !important;
  transform: translateY(-1px);
}

.wm-lesson-quiet-test-button > svg {
  display: none !important;
}

.wm-lesson-standard-next-hidden {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .wm-lesson-identity {
    width: calc(100% - 28px);
    margin: 0px auto 14px;
    padding: 0;
  }

  .wm-lesson-identity-course {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .wm-lesson-identity-title {
    font-size: 17px;
    line-height: 1.55;
  }

  /**
   * SPでも標準フッターと完了導線を表示
   */
  .wm-lesson-quiet-test-ready .tutor-learning-area-footer {
    display: flex !important;
    padding: 16px 14px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .wm-lesson-quiet-test-ready .tutor-learning-area-footer form {
    width: 100%;
  }

  .wm-lesson-quiet-test-button,
  .wm-lesson-quiet-test-button:hover,
  .wm-lesson-quiet-test-button:focus,
  .wm-lesson-quiet-test-button:focus-visible,
  .wm-lesson-quiet-test-button:active {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }
}

/**
 * ----------------------------------------
 *  # QuietTest導線：前へボタン非表示
 * ----------------------------------------
 */
body.wm-lesson-quiet-test-ready
  .tutor-learning-area-footer
  .tutor-previous-link {
  display: none !important;
}

/**
 * Tutor LMSの「前」リンクには専用classがないため、
 * フッター直下の先頭リンクとして指定する。
 */
body.wm-lesson-quiet-test-ready
  .tutor-learning-area-footer[data-lesson]
  > a:first-child {
  display: none !important;
}

/**
 * The QuietTest call to action uses Tutor LMS's native lesson footer.
 * Keep it in the document flow until its floating interaction has been
 * designed separately, so it cannot overlap the learning navigation or
 * curriculum drawer.
 */
body.wm-lesson-quiet-test-ready .tutor-learning-area-footer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
}

/**
 * ----------------------------------------
 *  #142 QuietNote CTAを学習フッター直上へ固定 [pc,sp]
 *    ・Tutor LMS標準の完了フォームをDOMごと再利用する
 *    ・学習ナビより上、レッスンパネルより下に表示する
 * ----------------------------------------
 */
.wm-lesson-quiet-note-cta {
  position: fixed;
  right: auto;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 9995;
  width: min(620px, calc(100vw - 48px));
  transform: translateX(-50%);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.wm-lesson-quiet-note-cta form,
.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button {
  width: 100%;
  margin: 0 !important;
}

.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button,
.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:hover,
.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:focus,
.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:focus-visible,
.wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:active {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
}

/* ドロワー操作中はCTAを隠し、パネル内の操作を優先する。 */
body.wm-curriculum-open .wm-lesson-quiet-note-cta {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

/* 固定CTAに本文末尾が隠れないための予約領域。 */
body.wm-lesson-quiet-note-ready.wm-learning-nav-ready {
  padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

@media screen and (max-width: 768px) {
  .wm-lesson-quiet-note-cta {
    right: auto;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: calc(100vw - 28px);
  }

  .wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button,
  .wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:hover,
  .wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:focus,
  .wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:focus-visible,
  .wm-lesson-quiet-note-cta .wm-lesson-quiet-test-button:active {
    min-height: 52px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }

  body.wm-lesson-quiet-note-ready.wm-learning-nav-ready {
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
  }
}