/**
 * VMT Core — Front-end styles
 *
 * Scoped overrides for LearnDash pages.
 *
 * @package VMT_Core
 * @since   1.1.0
 */

/* ============================================================
   LESSON PAGES (.single-sfwd-lessons)
   ============================================================ */

/**
 * Hide the "Lesson Content" topic/quiz listing that appears below the video.
 * The quiz launches automatically via LearnDash progression — the static list
 * is redundant. Hiding via CSS leaves all links and progression data intact.
 */
.single-sfwd-lessons .ld-lesson-topic-list {
    display: none;
}

/**
 * Spacing above the video.
 *
 * The lesson title is rendered in the focus-mode masthead, not inside
 * .ld-focus-content, so .vmt-lesson-layout is the first element in the
 * content box. 2.5em (~40px) matches the content area's own padding-top.
 */
.single-sfwd-lessons .vmt-lesson-layout {
    margin-top: 1.5em;
}

/**
 * Collapse empty paragraphs that wpautop injects between the video iframe
 * and the .ld-content-actions nav bar inside .vmt-lesson-video.
 * Without this they stack up and create a large unwanted gap.
 */
.single-sfwd-lessons .vmt-lesson-video p:empty,
.single-sfwd-lessons .vmt-lesson-video p:has(> br:only-child) {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
}

/**
 * Space between the video and the .ld-content-actions nav bar.
 * 1.5em matches the padding-left on .ld-focus-content, giving equal spacing
 * on top, bottom, and left of the video. The empty-paragraph rule above
 * prevents wpautop's injected <p> tags from stacking on top of this margin.
 */
.single-sfwd-lessons .ld-content-actions {
    margin-top: 1.5em;
}


/* ============================================================
   QUIZ PAGES (.single-sfwd-quiz)
   ============================================================ */

/**
 * Question text — larger, slightly heavier, more open line-height.
 * Targets both the <legend class="wpProQuiz_question_text"> itself and any
 * child <p> inside it, because legend elements are resistant to CSS
 * inheritance and the question text is often wrapped in a paragraph.
 */
.single-sfwd-quiz .wpProQuiz_question_text,
.single-sfwd-quiz .wpProQuiz_question_text p {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/**
 * Answer option labels — readable size, open line-height.
 */
.single-sfwd-quiz .wpProQuiz_questionListItem label {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/**
 * Spacing between answer options so they don't feel cramped.
 */
.single-sfwd-quiz .wpProQuiz_questionListItem {
    margin-bottom: 0.6em !important;
}

/**
 * Pad the Results section so it doesn't start flush at the top of the content
 * area. .wpProQuiz_content is specific enough without the page-class prefix.
 * The h4 rule neutralises margin:0 set by the ldx plugin stylesheet.
 */
/**
 * Force visible feedback colors — overrides Design Upgrade's color:inherit.
 */
.wpProQuiz_correct {
    color: #2e7d32 !important;
    background-color: #e8f5e9 !important;
}

.wpProQuiz_incorrect {
    color: #c62828 !important;
    background-color: #ffebee !important;
}

.wpProQuiz_response {
    min-height: 20px !important;
}

.wpProQuiz_content .wpProQuiz_results {
    padding-top: 40px !important;
}

.wpProQuiz_content .wpProQuiz_results > h4.wpProQuiz_header:first-child {
    padding-top: 40px !important;
    margin-top: 0 !important;
}


/* ============================================================
   TOPIC LIST SHORTCODE ([vmt_topic_list])
   ============================================================ */

.vmt-topic-list {
    margin: 1.5em 0;
}

.vmt-topic-list__lesson-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 0.75em;
}

.vmt-topic-list__row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.vmt-topic-list__bullet {
    color: #008092;
    font-size: 20px;
    line-height: 1;
    width: 1.5em;
    flex-shrink: 0;
}

.vmt-topic-list__title {
    flex: 1;
    font-size: 16px;
}

.vmt-topic-list__check {
    color: #c17912;
    font-size: 18px;
    margin-left: auto;
    padding-left: 1em;
}

.vmt-topic-list__footer {
    margin-top: 1.5em;
    display: flex;
    justify-content: flex-end;
}

.vmt-topic-list__btn {
    width: fit-content;
}


/* ============================================================
   PROGRESS REPORT TABLE ([vmt_user_progress_report])
   ============================================================ */

.vmt-progress-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-family: Arial, sans-serif;
}

.vmt-progress-table th {
    background: #f4f4f4;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #ccc;
}

.vmt-progress-table th:first-child {
    text-align: left;
}

.vmt-progress-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
}

.vmt-progress-table tr:nth-child(even) {
    background-color: #fafafa;
}

.vmt-progress-table tr:hover {
    background-color: #f1f1f1;
}


/* ============================================================
   CERTIFICATION TIMELINE ([vmt_certification_timeline])
   ============================================================ */

.vmt-timeline {
    position: relative;
    margin: 20px;
    padding-left: 40px;
    border-left: 4px solid #3498db;
}

.vmt-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.vmt-card::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3498db;
    border: 2px solid #fff;
}

.vmt-card.completed  { border-left: 6px solid green; }
.vmt-card.in-progress { border-left: 6px solid orange; }
.vmt-card.locked     { border-left: 6px solid gray; color: #666; }

.vmt-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    margin-top: 8px;
    text-decoration: none;
    font-weight: bold;
}

.vmt-btn.resume { background: #3498db; color: #fff; }
.vmt-btn.review { background: #2ecc71; color: #fff; }
.vmt-btn.log    { background: #f39c12; color: #fff; }
.vmt-btn.apply  { background: #8e44ad; color: #fff; }

.circle-progress {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid #eee;
    border-top-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 10px auto;
}