/* =============================================================================
   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) - */
.tutor-course-single a,
.tutor-single-course a,
.tutor-single-lesson a,
.tutor-course-topic a,
.tutor-quiz a,
.tutor-wrap a {
	color: var(--primary);
	transition: color .15s ease;
}
.tutor-course-single a:hover,
.tutor-single-course a:hover,
.tutor-single-lesson a:hover,
.tutor-course-topic a:hover,
.tutor-quiz a:hover,
.tutor-wrap a:hover {
	color: var(--primary-hover);
}

/* =============================================================================
   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;
	}
}