/* =====================================================
   COURSE LIGHT THEME OVERRIDES
   Active when NOT in dark mode. Overrides hardcoded dark
   colors in course.css with light-friendly equivalents.
   Uses :root:not(.theme-dark) scoping — no JS changes needed.
   ===================================================== */

/* =====================================================
   PAGE & HEADINGS
   ===================================================== */

:root:not(.theme-dark) .course-hero h1 {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .course-section h2 {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .course-section h3 {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .course-section h4 {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   PROGRESS BAR
   ===================================================== */

:root:not(.theme-dark) .course-progress-line {
  background: rgba(0, 0, 0, 0.1);
}

:root:not(.theme-dark) .course-progress-step {
  color: rgba(0, 0, 0, 0.35);
}

:root:not(.theme-dark) .course-progress-step:hover:not(.locked) {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .course-progress-step .step-dot {
  border-color: rgba(0, 0, 0, 0.15);
}

:root:not(.theme-dark) .course-progress-step.current {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .course-progress-step.locked {
  color: rgba(0, 0, 0, 0.4);
}

:root:not(.theme-dark) .course-progress-step.locked .step-dot {
  border-color: rgba(0, 0, 0, 0.1);
}

/* =====================================================
   NAV BUTTONS
   ===================================================== */

:root:not(.theme-dark) .course-nav-back {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ag-text-muted, #7A6B63);
}

:root:not(.theme-dark) .course-nav-back:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   RESUME BANNER
   ===================================================== */

:root:not(.theme-dark) .course-resume-banner strong {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   QUIZ
   ===================================================== */

:root:not(.theme-dark) .quiz-question-text {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .quiz-option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .quiz-option:hover:not(.disabled) {
  background: rgba(74, 144, 217, 0.06);
}

:root:not(.theme-dark) .quiz-option .option-letter {
  background: rgba(0, 0, 0, 0.06);
}

:root:not(.theme-dark) .quiz-explanation strong {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .quiz-summary-title {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .quiz-summary-score .score-divider {
  color: rgba(0, 0, 0, 0.25);
}

:root:not(.theme-dark) .quiz-summary-score .score-total {
  color: rgba(0, 0, 0, 0.4);
}

:root:not(.theme-dark) .quiz-review-title {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .quiz-review-item {
  background: rgba(0, 0, 0, 0.02);
}

:root:not(.theme-dark) .quiz-review-question {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   TIMER
   ===================================================== */

:root:not(.theme-dark) .tool-timer-display {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .tool-timer-bar-track {
  background: rgba(0, 0, 0, 0.06);
}

/* =====================================================
   REFLECTION
   ===================================================== */

:root:not(.theme-dark) .tool-reflection-prompt {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .tool-reflection-textarea {
  color: var(--ag-text, #2D1B14);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

:root:not(.theme-dark) .tool-reflection-textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

:root:not(.theme-dark) .tool-reflection-count {
  color: rgba(0, 0, 0, 0.35);
}

/* =====================================================
   CHECKLIST
   ===================================================== */

:root:not(.theme-dark) .tool-checklist-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root:not(.theme-dark) .tool-checklist-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

:root:not(.theme-dark) .tool-checklist-check {
  border-color: rgba(0, 0, 0, 0.2);
}

:root:not(.theme-dark) .tool-checklist-item.checked .tool-checklist-text {
  color: rgba(0, 0, 0, 0.35);
}

/* =====================================================
   EXPANDABLE PANEL
   ===================================================== */

:root:not(.theme-dark) .tool-expandable-header {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .tool-expandable-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* =====================================================
   MODIFICATION TOGGLE
   ===================================================== */

:root:not(.theme-dark) .tool-mod-pill {
  border-color: rgba(0, 0, 0, 0.15);
}

:root:not(.theme-dark) .tool-mod-pill:hover {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   CALCULATOR
   ===================================================== */

:root:not(.theme-dark) .tool-calculator-title {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .tool-calculator-field input {
  color: var(--ag-text, #2D1B14);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

/* =====================================================
   BUTTONS
   ===================================================== */

:root:not(.theme-dark) .course-page .btn-secondary {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ag-text-muted, #7A6B63);
}

:root:not(.theme-dark) .course-page .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   CALLOUT BOXES
   ===================================================== */

:root:not(.theme-dark) .callout strong {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   COMPARISON TABLE
   ===================================================== */

:root:not(.theme-dark) .comparison-table th {
  color: var(--ag-text, #2D1B14);
  background: rgba(0, 0, 0, 0.03);
}

:root:not(.theme-dark) .comparison-table td {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* =====================================================
   OBJECTIVES LIST
   ===================================================== */

:root:not(.theme-dark) .objectives-list li::before {
  border-color: rgba(0, 0, 0, 0.2);
}

:root:not(.theme-dark) .objectives-list li.done {
  color: rgba(0, 0, 0, 0.4);
}

/* =====================================================
   TAP-TO-CATEGORIZE
   ===================================================== */

:root:not(.theme-dark) .categorize-bucket {
  border-color: rgba(0, 0, 0, 0.12);
}

:root:not(.theme-dark) .categorize-item {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   VISIONING TOOL
   ===================================================== */

:root:not(.theme-dark) .visioning-category-title {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .visioning-custom-add input {
  color: var(--ag-text, #2D1B14);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

:root:not(.theme-dark) .visioning-age-option {
  border-color: rgba(0, 0, 0, 0.15);
}

:root:not(.theme-dark) .visioning-age-option:hover {
  color: var(--ag-text, #2D1B14);
}

:root:not(.theme-dark) .backcasting-card-activity {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   FAMILY HISTORY
   ===================================================== */

:root:not(.theme-dark) .family-history-group-title {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   ACTION CARDS
   ===================================================== */

:root:not(.theme-dark) .action-card-content h4 {
  color: var(--ag-text, #2D1B14);
}

/* =====================================================
   LECTURE SEGMENTS
   ===================================================== */

:root:not(.theme-dark) .segment-intro {
  color: #2D1B14;
}

/* =====================================================
   ASSESSMENT CARDS
   ===================================================== */

:root:not(.theme-dark) .assessment-card {
  background: #fff;
  border-color: #E5E0DB;
}

:root:not(.theme-dark) .assessment-header h4 {
  color: #2D1B14;
}

:root:not(.theme-dark) .assessment-why {
  color: #7A6B63;
}

:root:not(.theme-dark) .assessment-entry h5 {
  color: #2D1B14;
}

:root:not(.theme-dark) .assessment-field label {
  color: #2D1B14;
}

:root:not(.theme-dark) .assessment-field input {
  color: #2D1B14;
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

:root:not(.theme-dark) .assessment-age-sex select,
:root:not(.theme-dark) .assessment-age-sex input {
  color: #2D1B14;
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

:root:not(.theme-dark) .assessment-result {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

:root:not(.theme-dark) .assessment-result-bar {
  background: rgba(0, 0, 0, 0.06);
}

:root:not(.theme-dark) .category-nav {
  position: sticky !important;
  top: var(--main-nav-height, 57px) !important;
  background-color: #F5F0EB !important;
  background: #F5F0EB !important;
  border-bottom: 1px solid #D5CFC9;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root:not(.theme-dark) .category-nav::before {
  background: #F5F0EB !important;
}

:root:not(.theme-dark) .cat-nav-link {
  font-size: 12px;
  padding: 4px 8px;
  color: #1D4ED8 !important;
  background: rgba(0,0,0,0.05);
  border-color: #D5CFC9;
}

:root:not(.theme-dark) .cat-nav-link:hover {
  background: rgba(0,0,0,0.1);
  color: #1E40AF !important;
}

:root:not(.theme-dark) .cat-nav-dropdown {
  background: #fff !important;
  border-color: #D5CFC9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

:root:not(.theme-dark) .cat-nav-dropdown a {
  color: #1D4ED8 !important;
}

:root:not(.theme-dark) .cat-nav-dropdown a:hover {
  background: #F0F0F0;
  color: #1E40AF !important;
}

/* Legacy fallback */
:root:not(.theme-dark) .category-nav > a {
  background: rgba(0, 0, 0, 0.04);
  color: #7A6B63;
}

:root:not(.theme-dark) .category-nav > a:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #2D1B14;
}

:root:not(.theme-dark) .category-desc {
  color: #7A6B63;
}

/* =====================================================
   EXTERNAL LINK & DEXA NOTE
   ===================================================== */

:root:not(.theme-dark) .assessment-external-note {
  color: #7A6B63;
}

:root:not(.theme-dark) .assessment-dexa-note {
  background: rgba(74, 144, 217, 0.06);
  border-color: rgba(74, 144, 217, 0.15);
}

:root:not(.theme-dark) .assessment-dexa-note p {
  color: #7A6B63;
}

:root:not(.theme-dark) .assessment-calc-value {
  color: var(--wing-accent, #4A90D9);
}

:root:not(.theme-dark) .assessment-field select {
  color: #2D1B14;
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

/* =====================================================
   SECTION DIVIDERS
   ===================================================== */

:root:not(.theme-dark) .section-divider {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* =====================================================
   ASSESSMENT DATE INPUT — Light Mode
   ===================================================== */

:root:not(.theme-dark) .assessment-date-input {
  background: #fff;
  color: #2D1B14;
  border-color: #E5E0DB;
}

/* =====================================================
   VISUAL PERCENTILE BAR — Light Mode
   ===================================================== */

:root:not(.theme-dark) .result-bar-marker-dot {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

:root:not(.theme-dark) .result-bar-labels {
  color: #6B7280;
}

:root:not(.theme-dark) .result-description {
  color: #6B7280;
}

/* =====================================================
   HISTORY TABLE — Light Mode
   ===================================================== */

:root:not(.theme-dark) .assessment-history {
  border-top-color: #E5E0DB;
}

:root:not(.theme-dark) .assessment-history h6 {
  color: #6B7280;
}

:root:not(.theme-dark) .history-table th {
  color: #6B7280;
  border-bottom-color: #E5E0DB;
}

:root:not(.theme-dark) .history-table td {
  color: #2D1B14;
}

/* =====================================================
   GLOBAL USER INFO — Light Mode
   ===================================================== */

:root:not(.theme-dark) .welcome-user-info {
  background: rgba(0,0,0,0.03);
  border-color: #E5E0DB;
}

:root:not(.theme-dark) .welcome-user-info h4 {
  color: #2D1B14;
}

:root:not(.theme-dark) .welcome-user-info > p {
  color: #6B5B52;
}

:root:not(.theme-dark) .welcome-field label {
  color: #6B5B52;
}

:root:not(.theme-dark) .welcome-field input,
:root:not(.theme-dark) .welcome-field select {
  background: #fff;
  border-color: #D5CEC7;
  color: #2D1B14;
}

/* =====================================================
   LINK CONTRAST — Light Mode
   #1D4ED8 passes WCAG AA on light backgrounds
   ===================================================== */

:root:not(.theme-dark) .course-section a,
:root:not(.theme-dark) .assessment-card a,
:root:not(.theme-dark) .category-nav a,
:root:not(.theme-dark) .callout a,
:root:not(.theme-dark) .course-page a {
  color: #1D4ED8 !important;
}

:root:not(.theme-dark) .course-section a:hover,
:root:not(.theme-dark) .assessment-card a:hover,
:root:not(.theme-dark) .category-nav a:hover,
:root:not(.theme-dark) .callout a:hover,
:root:not(.theme-dark) .course-page a:hover {
  color: #1E40AF !important;
}

:root:not(.theme-dark) .change-positive { color: #059669 !important; }
:root:not(.theme-dark) .change-negative { color: #B91C1C !important; }

/* =====================================================
   UNIFIED RESULTS — Light Mode
   ===================================================== */

:root:not(.theme-dark) .norm-display h4 {
  color: #6B7280;
}

:root:not(.theme-dark) .norm-percentile {
  color: #6B5B52;
}

:root:not(.theme-dark) .norm-target {
  background: rgba(37, 99, 235, 0.05);
  border-left-color: #2563EB;
}

:root:not(.theme-dark) .norm-target p {
  color: #6B5B52;
}

/* =====================================================
   RISK INTERPRETATION — Light Mode
   ===================================================== */

:root:not(.theme-dark) .risk-category {
  color: #2D1B14;
}

:root:not(.theme-dark) .risk-description {
  color: #44342B;
}

:root:not(.theme-dark) .risk-note {
  color: #7A5008;
}

:root:not(.theme-dark) .risk-indicator.risk-excellent {
  background: rgba(0, 166, 126, 0.08);
  border-left-color: #059669;
}

:root:not(.theme-dark) .risk-indicator.risk-good {
  background: rgba(37, 99, 235, 0.06);
  border-left-color: #2563EB;
}

:root:not(.theme-dark) .risk-indicator.risk-moderate {
  background: rgba(180, 130, 20, 0.08);
  border-left-color: #B45309;
}

:root:not(.theme-dark) .risk-indicator.risk-elevated {
  background: rgba(220, 38, 38, 0.06);
  border-left-color: #DC2626;
}

:root:not(.theme-dark) .risk-indicator.risk-neutral {
  background: rgba(0, 0, 0, 0.03);
  border-left-color: #9CA3AF;
}

/* =====================================================
   SELECT DROPDOWNS — Light Mode
   ===================================================== */

:root:not(.theme-dark) select,
:root:not(.theme-dark) .welcome-user-info select,
:root:not(.theme-dark) .welcome-field select,
:root:not(.theme-dark) .assessment-field select,
:root:not(.theme-dark) .assessment-card select {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  background-image: none !important;
  background-color: #fff !important;
  color: #2D1B14 !important;
  border: 1px solid #D5CFC9 !important;
}

:root:not(.theme-dark) select option,
:root:not(.theme-dark) .welcome-field select option,
:root:not(.theme-dark) .assessment-field select option,
:root:not(.theme-dark) .assessment-card select option {
  background-color: #fff !important;
  color: #2D1B14 !important;
}

/* =====================================================
   BODY TEXT — Light Mode (FIX 2: contrast)
   ===================================================== */

:root:not(.theme-dark) .course-section p,
:root:not(.theme-dark) .course-section ul,
:root:not(.theme-dark) .course-section ol,
:root:not(.theme-dark) .course-section li {
  color: #2D1B14;
}

:root:not(.theme-dark) .tool-checklist-text {
  color: #2D1B14;
}

/* =====================================================
   CHARACTER COUNTER — Light Mode (FIX 6)
   ===================================================== */

:root:not(.theme-dark) .tool-reflection-count {
  color: #5C4033;
}

/* =====================================================
   SAVED INDICATOR — Light Mode (FIX 7)
   ===================================================== */

:root:not(.theme-dark) .tool-reflection-saved {
  color: #15803d;
}

:root:not(.theme-dark) .visioning-saved-indicator {
  color: #15803d;
}

/* =====================================================
   KNOWLEDGE CHECK CARDS — Light Mode (FIX 4)
   ===================================================== */

:root:not(.theme-dark) .knowledge-check-card {
  background: #ffffff !important;
  border-color: #d4c5b5 !important;
  color: #2D1B14 !important;
}

:root:not(.theme-dark) .knowledge-check-card p {
  color: #2D1B14 !important;
}

/* Categorize items (Fiber Type game) — Light Mode (FIX 4) */
:root:not(.theme-dark) .categorize-item {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #2D1B14;
}

/* =====================================================
   REVEAL ANSWER BUTTONS — Light Mode contrast (Fix 2)
   Replaces warm brown #7A6B63 (fails WCAG AA).
   ===================================================== */
:root:not(.theme-dark) button[data-reveal-target],
:root:not(.theme-dark) .reveal-answer,
:root:not(.theme-dark) .btn-reveal {
  color: #1D4ED8 !important;
  border: 1px solid rgba(29, 78, 216, 0.4) !important;
  background: transparent !important;
}

/* =====================================================
   FOOTER LINKS — Light Mode (Fix 3)
   Uses #app ID (specificity 1,3,1) to beat site-light.css
   rule which sets .hub-footer a to #8B4513 (saddlebrown).
   site-light.css loads AFTER course-light.css on course pages
   so higher specificity is required to win.
   ===================================================== */

:root:not(.theme-dark) #app .hub-footer a,
:root:not(.theme-dark) #app footer a {
  color: #1D4ED8 !important;
}

:root:not(.theme-dark) #app .hub-footer a:hover,
:root:not(.theme-dark) #app footer a:hover {
  color: #1E40AF !important;
  text-decoration: underline !important;
}

/* =====================================================
   FOOTER COPYRIGHT TEXT — Light Mode (Fix 4)
   site-light.css sets .hub-footer p to #7A6B63 (~2.16:1
   contrast on light background). Override to #2D1B14.
   ===================================================== */

:root:not(.theme-dark) #app .hub-footer p,
:root:not(.theme-dark) #app footer p {
  color: #2D1B14 !important;
}