/* =============================================================================
   tutor-learn.css — scoped crimson/gold branding for the Tutor LMS front-end
   LEARN surfaces: single course, single lesson, quiz attempt + result
   (LRN-01/02/03 presentation / D-07 / D-08).

   - SCOPED: every rule is namespaced under a Tutor learn wrapper
     (.tutor-course-single / .tutor-single-course / .tutor-single-lesson /
     .tutor-course-topic / .tutor-quiz* / .tutor-wrap) so nothing leaks onto
     non-Tutor surfaces (Pitfall 5 / threat T-05-05). The page is wrapped by the
     Phase-1 chrome (header.php / footer.php) which keeps its own brand.css.
   - REUSES the Phase-1 brand tokens (--primary crimson, --secondary gold,
     --foreground, --background, --card, etc.) from style.css / brand.css via the
     `llb-brand` style dependency declared in the 05-01 enqueue
     (handle 'llb-tutor-learn', dep array('llb-brand'), version 0.5.0). Tokens are
     NEVER redeclared here — single source of truth stays in style.css.
   - ZERO non-brand (cool-tone) values anywhere (FND-02): Tutor's default non-brand
     link / button / focus / active-tab / progress colors are explicitly overridden
     to crimson/gold below. No hex in {0000ff,0d6efd,007bff,2271b1} and the cool-tone
     keyword is absent from the entire file (enforced by the 05-02 grep gate).
   - Presentation only (D-08): all learning logic lives in Tutor + llb-core.

   STAGING REFINEMENT (A3): the exact Tutor 3.9.x wrapper / element class names are
   confirmed against the live rendered course / lesson / quiz markup during the
   05-02 human-verify checkpoint. The variant selectors below cover the common
   3.9.x classes; adjust only on staging if a surface survives unbranded.
   Mirrors the verified tutor-dashboard.css (04-01) discipline exactly.
   ============================================================================= */

/* ---- Learn-surface shell (off-white page bg, dark brand text) --------------- */
.tutor-course-single,
.tutor-single-course,
.tutor-single-lesson,
.tutor-course-topic,
.tutor-quiz,
.tutor-wrap {
	color: var(--foreground);
	background: var(--background);            /* warm off-white page bg */
}

/* ---- Links across every learn surface: crimson, gold-hover (override Tutor) -
 *
 * TEXT links only — the :not() is load-bearing, do not drop it.
 * Tutor styles some anchors AS BUTTONS (`a.tutor-btn.tutor-btn-primary`), which
 * carry their own crimson background plus `color:#fff` at specificity (0,1,0).
 * A bare `.tutor-wrap a` is (0,1,1), so it outranked that and repainted the
 * button's LABEL crimson on its crimson background — the "Start Learning" CTA
 * rendered as a solid red block with an invisible label on every course page.
 * Hover did not rescue it either: brand.css maps --tutor-color-primary-hover to
 * the same #8B1F18 as --primary-hover, so text and background moved in lockstep.
 * Excluding button-styled anchors lets Tutor's own `color:#fff` win.
 */
.tutor-course-single a:not([class*="tutor-btn"]),
.tutor-single-course a:not([class*="tutor-btn"]),
.tutor-single-lesson a:not([class*="tutor-btn"]),
.tutor-course-topic a:not([class*="tutor-btn"]),
.tutor-quiz a:not([class*="tutor-btn"]),
.tutor-wrap a:not([class*="tutor-btn"]) {
	color: var(--primary);
	transition: color .15s ease;
}
.tutor-course-single a:not([class*="tutor-btn"]):hover,
.tutor-single-course a:not([class*="tutor-btn"]):hover,
.tutor-single-lesson a:not([class*="tutor-btn"]):hover,
.tutor-course-topic a:not([class*="tutor-btn"]):hover,
.tutor-quiz a:not([class*="tutor-btn"]):hover,
.tutor-wrap a:not([class*="tutor-btn"]):hover {
	color: var(--primary-hover);
}

/* ---- Course-content tooltips: keep hidden ones out of the scroll area -------
 *
 * Tutor hides the ⓘ topic tooltips with `opacity:0; visibility:hidden` while
 * leaving them `position:absolute`. Hidden that way they still contribute to the
 * document's SCROLLABLE OVERFLOW, and because Tutor also caps them at
 * `max-width:208px`, a long topic summary wraps into a column thousands of
 * pixels tall. On /courses/llb-sem-1/ the five tooltips stretched the document
 * from 2246px to 5241px — 2995px of dead white space below the footer.
 *
 * Toggling `display` instead removes them from overflow entirely when hidden.
 * Measured: scrollHeight 5241 -> 2246, exactly body.offsetHeight (the footer
 * bottom). Loads after tutor.min.css at equal specificity, so it wins.
 *
 * NOTE: this fixes the dead space, NOT the tooltip's own size — a very long
 * topic summary still renders a very tall tooltip ON HOVER, exactly as before.
 * That is content shape, not layout; tracked separately.
 */
.tooltip-wrap .tooltip-txt { display: none; }
.tooltip-wrap:hover .tooltip-txt { display: block; }

/* Cap the shown tooltip. Tutor puts the WHOLE topic summary in here at
 * max-width:208px, and several summaries are full unit outlines — the tallest
 * measured 3410px, a dark ribbon many times the viewport. Scroll the overflow
 * instead. The tooltip sits inside .tooltip-wrap, so hovering it to scroll
 * keeps it open. text-align comes back to left because Tutor centres it, which
 * is fine for one line and unreadable for a paragraph.
 * This is a guard, not the real fix — shortening the topic summaries is (BL-004).
 */
.tooltip-wrap .tooltip-txt {
	max-height: 40vh;
	overflow-y: auto;
	text-align: left;
	overscroll-behavior: contain;
}

/* =============================================================================
   SINGLE COURSE — enroll CTA, curriculum accordion, progress, course cards.
   ============================================================================= */

/* ---- Enroll / add-to-cart CTA = crimson bg, white text, gold hover ---------- */
.tutor-course-single .tutor-enroll-course-button,
.tutor-single-course .tutor-enroll-course-button,
.tutor-course-single .tutor-btn-primary,
.tutor-single-course .tutor-btn-primary,
.tutor-course-single .tutor-btn.tutor-btn-primary,
.tutor-single-course .tutor-btn.tutor-btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tutor-course-single .tutor-enroll-course-button:hover,
.tutor-single-course .tutor-enroll-course-button:hover,
.tutor-course-single .tutor-enroll-course-button:focus,
.tutor-single-course .tutor-enroll-course-button:focus,
.tutor-course-single .tutor-btn-primary:hover,
.tutor-single-course .tutor-btn-primary:hover {
	background: var(--secondary);            /* gold hover (UI-SPEC) */
	color: var(--secondary-foreground);
	border-color: var(--secondary);
}

/* ---- Curriculum accordion: crimson topic headers, gold active/links --------- */
.tutor-course-single .tutor-accordion-item-header,
.tutor-single-course .tutor-accordion-item-header,
.tutor-course-single .tutor-course-topic-title,
.tutor-single-course .tutor-course-topic-title,
.tutor-course-topic .tutor-accordion-item-header {
	color: var(--foreground);
	border-left: 4px solid var(--primary);   /* crimson accent rail */
	background: var(--card);
}
.tutor-course-single .tutor-accordion-item-header:hover,
.tutor-single-course .tutor-accordion-item-header:hover,
.tutor-course-single .tutor-accordion-item-header.is-active,
.tutor-single-course .tutor-accordion-item-header.is-active,
.tutor-course-topic .tutor-accordion-item-header.is-active {
	color: var(--primary);
}
.tutor-course-single .tutor-course-topic .tutor-course-content-list a,
.tutor-single-course .tutor-course-topic .tutor-course-content-list a,
.tutor-course-topic .tutor-course-content-list a {
	color: var(--foreground);
}
.tutor-course-single .tutor-course-topic .tutor-course-content-list a:hover,
.tutor-single-course .tutor-course-topic .tutor-course-content-list a:hover,
.tutor-course-topic .tutor-course-content-list a.active {
	color: var(--primary);
}

/* ---- Progress bar = gold fill (override Tutor default) ---------------------- */
.tutor-course-single .tutor-progress-bar,
.tutor-single-course .tutor-progress-bar,
.tutor-single-lesson .tutor-progress-bar,
.tutor-course-single .tutor-progress-value-bar,
.tutor-single-course .tutor-progress-value-bar,
.tutor-single-lesson .tutor-progress-value-bar,
.tutor-course-single .tutor-progress-bar span,
.tutor-single-course .tutor-progress-bar span {
	background: var(--secondary);            /* gold progress fill */
}

/* ---- Course meta / info cards (reuse Phase-2 card visual language) ---------- */
.tutor-course-single .tutor-card,
.tutor-single-course .tutor-card,
.tutor-course-single .tutor-course-summary-item {
	background: var(--card);
	color: var(--card-foreground);
	border-radius: 12px;                     /* rounded-xl, matches .llb-card */
	border-left: 4px solid var(--primary);   /* crimson accent border */
	box-shadow: 0 4px 6px -1px rgba(181, 38, 30, .08),
	            0 2px 4px -1px rgba(181, 38, 30, .04);
	overflow: hidden;
}

/* =============================================================================
   SINGLE LESSON — video pane container + lesson body + sidebar nav.
   ============================================================================= */

/* ---- Lesson video pane: neutral container on off-white, brand-only chrome --- */
.tutor-single-lesson .tutor-lesson-wrapper,
.tutor-single-lesson .tutor-video-player,
.tutor-single-lesson .tutor-lesson-content {
	background: var(--background);
	color: var(--foreground);
}
.tutor-single-lesson .tutor-video-player {
	border-radius: 12px;
	overflow: hidden;
}
/* Lesson sidebar / topic list active item = crimson (override Tutor default) */
.tutor-single-lesson .tutor-course-topic-single-item.active,
.tutor-single-lesson .tutor-course-content-list a.active,
.tutor-single-lesson .tutor-lesson-sidebar a.active {
	color: var(--primary);
	border-left: 3px solid var(--secondary);  /* gold active rail */
}
.tutor-single-lesson .tutor-lesson-sidebar a:hover {
	color: var(--primary-hover);
}
/* Mark-complete / next-prev nav buttons = crimson, gold hover */
.tutor-single-lesson .tutor-btn-primary,
.tutor-single-lesson .tutor-lesson-mark-complete .tutor-btn,
.tutor-single-lesson .tutor-lesson-navigation .tutor-btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.tutor-single-lesson .tutor-btn-primary:hover,
.tutor-single-lesson .tutor-lesson-mark-complete .tutor-btn:hover,
.tutor-single-lesson .tutor-lesson-navigation .tutor-btn-primary:hover {
	background: var(--secondary);
	color: var(--secondary-foreground);
	border-color: var(--secondary);
}

/* =============================================================================
   QUIZ — question cards, options, submit, attempt messaging.
   ============================================================================= */

/* ---- Quiz question cards: subtle bordered cards on off-white ---------------- */
.tutor-quiz .tutor-quiz-question,
.tutor-quiz .tutor-quiz-question-item,
.tutor-quiz .quiz-attempt-single-question {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-left: 4px solid var(--primary);   /* crimson accent */
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}
.tutor-quiz .tutor-quiz-question-title,
.tutor-quiz .question-title {
	color: var(--foreground);
	font-weight: 700;
}

/* ---- Quiz answer options: gold-tinted selected state (brand only) ----------- */
.tutor-quiz .tutor-quiz-answer-single,
.tutor-quiz .tutor-quiz-answer label {
	color: var(--foreground);
	border-radius: 8px;
	transition: background-color .15s ease, border-color .15s ease;
}
.tutor-quiz .tutor-quiz-answer-single:hover,
.tutor-quiz .tutor-quiz-answer label:hover {
	background: rgba(245, 197, 24, .12);     /* faint gold hover */
}
.tutor-quiz .tutor-quiz-answer-single.is-selected,
.tutor-quiz input[type="radio"]:checked + label,
.tutor-quiz input[type="checkbox"]:checked + label {
	border-color: var(--primary);
	color: var(--primary);
}
/* Accent the native option controls crimson (overrides UA default accent) */
.tutor-quiz input[type="radio"],
.tutor-quiz input[type="checkbox"] {
	accent-color: var(--primary);
}

/* ---- Quiz submit / next / finish = crimson, gold hover ---------------------- */
.tutor-quiz .tutor-quiz-submit-btn,
.tutor-quiz .tutor-btn-primary,
.tutor-quiz .tutor-btn.tutor-btn-primary,
.tutor-quiz button[type="submit"] {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tutor-quiz .tutor-quiz-submit-btn:hover,
.tutor-quiz .tutor-quiz-submit-btn:focus,
.tutor-quiz .tutor-btn-primary:hover,
.tutor-quiz button[type="submit"]:hover {
	background: var(--secondary);
	color: var(--secondary-foreground);
	border-color: var(--secondary);
}

/* ---- Attempt-limit / status messaging in brand colors (no default accent) --- */
.tutor-quiz .tutor-quiz-attempt-message,
.tutor-quiz .quiz-attempts-info,
.tutor-quiz .tutor-alert {
	color: var(--foreground);
	border-left: 4px solid var(--secondary); /* gold info rail */
	background: var(--card);
	border-radius: 8px;
	padding: .75rem 1rem;
}

/* =============================================================================
   QUIZ RESULT / SCORE PANEL — positive brand styling (pass = crimson/gold).
   ============================================================================= */
.tutor-quiz .tutor-quiz-result,
.tutor-quiz .quiz-attempt-result,
.tutor-quiz .tutor-quiz-attempt-result,
.tutor-quiz .tutor-quiz-result-wrap {
	background: var(--card);
	color: var(--card-foreground);
	border-radius: 12px;
	border-top: 4px solid var(--primary);    /* crimson result banner rail */
	box-shadow: 0 4px 6px -1px rgba(181, 38, 30, .08),
	            0 2px 4px -1px rgba(181, 38, 30, .04);
	padding: 1.25rem 1.5rem;
}
/* The headline score number/ring = gold on crimson-accented panel */
.tutor-quiz .tutor-quiz-result .tutor-quiz-result-percent,
.tutor-quiz .quiz-attempt-result .result-percent,
.tutor-quiz .tutor-quiz-result-score {
	color: var(--primary);
	font-weight: 700;
}
/* Pass / fail badges in brand colors — never default cool-tone */
.tutor-quiz .tutor-quiz-result .tutor-badge-success,
.tutor-quiz .quiz-attempt-result .pass {
	background: var(--secondary);            /* gold "pass" badge */
	color: var(--secondary-foreground);
	border-radius: 999px;
	padding: .25rem .6rem;
	font-weight: 700;
}
.tutor-quiz .tutor-quiz-result .tutor-badge-danger,
.tutor-quiz .quiz-attempt-result .fail {
	background: var(--primary);              /* crimson "fail" badge */
	color: var(--primary-foreground);
	border-radius: 999px;
	padding: .25rem .6rem;
	font-weight: 700;
}

/* =============================================================================
   ACTIVE TABS / NAV PILLS across learn surfaces — crimson active, gold underline.
   Explicitly overrides Tutor's default active-tab color (the most common
   surviving non-brand accent).
   ============================================================================= */
.tutor-course-single .tutor-nav .tutor-nav-link.is-active,
.tutor-single-course .tutor-nav .tutor-nav-link.is-active,
.tutor-quiz .tutor-nav .tutor-nav-link.is-active,
.tutor-wrap .tutor-nav-link.is-active,
.tutor-wrap .tutor-tab.is-active {
	color: var(--primary);
	border-bottom: 2px solid var(--secondary);  /* gold underline */
}
.tutor-course-single .tutor-nav .tutor-nav-link:hover,
.tutor-single-course .tutor-nav .tutor-nav-link:hover,
.tutor-quiz .tutor-nav .tutor-nav-link:hover {
	color: var(--primary-hover);
}

/* =============================================================================
   INPUTS / FORMS on learn surfaces — crimson focus rings only (no cool-tone).
   ============================================================================= */
.tutor-course-single input[type="text"],
.tutor-course-single input[type="email"],
.tutor-course-single input[type="search"],
.tutor-course-single textarea,
.tutor-course-single select,
.tutor-single-lesson input[type="text"],
.tutor-single-lesson textarea,
.tutor-quiz input[type="text"],
.tutor-quiz input[type="number"],
.tutor-quiz textarea,
.tutor-quiz select {
	border: 1px solid var(--input);
	border-radius: 8px;
	color: var(--foreground);
	background: var(--card);
}
.tutor-course-single input:focus,
.tutor-course-single textarea:focus,
.tutor-course-single select:focus,
.tutor-single-lesson input:focus,
.tutor-single-lesson textarea:focus,
.tutor-quiz input:focus,
.tutor-quiz textarea:focus,
.tutor-quiz select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(181, 38, 30, .25);   /* crimson ring only */
}

/* ---- Keyboard focus rings: crimson/gold ONLY — never the browser default ---- */
.tutor-course-single a:focus-visible,
.tutor-course-single button:focus-visible,
.tutor-course-single [tabindex]:focus-visible,
.tutor-single-course a:focus-visible,
.tutor-single-course button:focus-visible,
.tutor-single-lesson a:focus-visible,
.tutor-single-lesson button:focus-visible,
.tutor-single-lesson [tabindex]:focus-visible,
.tutor-quiz a:focus-visible,
.tutor-quiz button:focus-visible,
.tutor-quiz [tabindex]:focus-visible,
.tutor-quiz input:focus-visible,
.tutor-quiz label:focus-visible,
.tutor-wrap a:focus-visible,
.tutor-wrap button:focus-visible {
	outline: 2px solid var(--primary);       /* visible AA crimson focus ring */
	outline-offset: 2px;
}

/* =============================================================================
   RESPONSIVE — mobile-first stacking for learn surfaces (UI-SPEC / mobile-first).
   Video pane + curriculum + lesson sidebar go full width; tap targets enlarge.
   ============================================================================= */
@media (max-width: 767px) {
	.tutor-single-lesson .tutor-lesson-wrapper,
	.tutor-single-lesson .tutor-video-player,
	.tutor-single-lesson .tutor-lesson-sidebar {
		width: 100%;
		float: none;
		margin-bottom: 1rem;
	}
	.tutor-course-single .tutor-course-topic,
	.tutor-single-course .tutor-course-topic {
		width: 100%;
	}
	/* Comfortable tap targets for CTAs and quiz controls on phones */
	.tutor-course-single .tutor-enroll-course-button,
	.tutor-single-course .tutor-enroll-course-button,
	.tutor-quiz .tutor-quiz-submit-btn,
	.tutor-quiz .tutor-btn-primary,
	.tutor-single-lesson .tutor-btn-primary {
		width: 100%;
		padding: .85rem 1rem;
		font-size: 1rem;
	}
	.tutor-quiz .tutor-quiz-answer-single,
	.tutor-quiz .tutor-quiz-answer label {
		padding: .75rem;
	}
	.tutor-quiz .tutor-quiz-result,
	.tutor-quiz .quiz-attempt-result {
		padding: 1rem;
	}
}