/**
 * WalkWise — Tutor LMS late overrides (loads after tutor-front + Pro addons).
 * Ensures brand tokens win the cascade on catalog, dashboard, player, filters.
 */

/* ── Buttons ── */
.tutor-btn-primary,
.tutor-button-primary,
a.tutor-btn-primary,
button.tutor-btn-primary,
.tutor-course-enroll-btn,
.tutor-course-single-btn-group .tutor-btn,
.tutor-dashboard .tutor-btn-primary {
  background: var(--ww-gradient) !important;
  background-image: var(--ww-gradient) !important;
  border: none !important;
  border-radius: var(--ww-radius-btn, 15px) !important;
  color: var(--ww-white) !important;
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-bold, 700) !important;
  box-shadow: none !important;
  transition: opacity var(--ww-transition, 200ms ease);
}
.tutor-btn-primary:hover,
.tutor-course-enroll-btn:hover,
.tutor-dashboard .tutor-btn-primary:hover {
  opacity: 0.92;
  transform: none !important;
  box-shadow: none !important;
}

.tutor-btn-outline-primary,
.tutor-btn-ghost {
  border-radius: var(--ww-radius-btn, 15px) !important;
  border-color: var(--ww-primary) !important;
  color: var(--ww-primary) !important;
  font-family: var(--ww-font-heading) !important;
}

/* ── Course filter sidebar ── */
.tutor-course-filter,
.tutor-course-filter-wrapper,
.tutor-course-filter-container {
  font-family: var(--ww-font-sub) !important;
}
.tutor-course-filter h3,
.tutor-course-filter .tutor-course-filter-title {
  font-family: var(--ww-font-heading) !important;
  color: var(--ww-text) !important;
  font-weight: var(--ww-weight-bold, 700) !important;
}
.tutor-course-filter input[type="checkbox"] + label,
.tutor-course-filter label {
  color: var(--ww-body) !important;
  font-family: var(--ww-font-sub) !important;
}
.tutor-course-filter a {
  color: var(--ww-primary) !important;
}

/* ── Dashboard sidebar ── */
.tutor-dashboard .tutor-dashboard-permalink,
.tutor-dashboard-left-menu .tutor-dashboard-menu-item a {
  font-family: var(--ww-font-sub) !important;
  color: var(--ww-body) !important;
  border-radius: var(--ww-radius-sm, 8px);
}
.tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a,
.tutor-dashboard-left-menu .tutor-dashboard-menu-item.is-active a {
  background: var(--ww-lavender) !important;
  color: var(--ww-primary) !important;
  font-weight: var(--ww-weight-semibold, 600) !important;
}

/* ── Forms ── */
.tutor-form-control,
.tutor-form-group input,
.tutor-form-group select,
.tutor-form-group textarea {
  border-radius: var(--ww-radius-sm, 8px) !important;
  border-color: var(--ww-border) !important;
  font-family: var(--ww-font-sub) !important;
  min-height: 44px;
}
.tutor-form-control:focus,
.tutor-form-group input:focus {
  border-color: var(--ww-primary) !important;
  box-shadow: 0 0 0 2px rgba(246, 126, 58, 0.2) !important;
}

/* ── Progress / badges ── */
.tutor-progress-bar .tutor-progress-value {
  background: var(--ww-gradient) !important;
}
.tutor-course-progress-percent {
  color: var(--ww-primary) !important;
  font-family: var(--ww-font-heading) !important;
}

/* ── Single course sidebar box ── */
.tutor-single-course-sidebar .tutor-card,
.tutor-course-details-widget,
.tutor-course-single-sidebar .tutor-card {
  border-radius: var(--ww-radius-lg) !important;
  border: 1px solid var(--ww-border) !important;
  box-shadow: none !important;
}

/* ── Width consistency (audit fix) ──
   Tutor's default .tutor-container steps down to 1140px for any viewport under
   ~1400px, so 1280–1366px laptops showed the single-course/lesson content in a
   narrow 1140px column with wide empty gutters — while the catalog goes edge to
   edge. Keep a wide, consistent container on common laptop widths. */
@media (min-width: 1200px) {
  .tutor-course-details-page.tutor-container,
  .single-courses .tutor-container,
  .single-lesson .tutor-container {
    max-width: 1296px !important;
  }
}
@media (min-width: 1400px) {
  .tutor-course-details-page.tutor-container,
  .single-courses .tutor-container,
  .single-lesson .tutor-container {
    max-width: 1320px !important;
  }
}

/* ── Pagination ── */
.tutor-pagination .page-numbers.current {
  background: var(--ww-primary) !important;
  border-color: var(--ww-primary) !important;
  border-radius: var(--ww-radius-sm, 8px) !important;
}

/* ── Prevent dark-mode link bleed on catalog ── */
.tutor-course-title a,
.tutor-course-card .tutor-course-name a {
  color: var(--ww-text) !important;
}
.tutor-course-title a:hover,
.tutor-course-card .tutor-course-name a:hover {
  color: var(--ww-primary) !important;
}

/* Flat course cards — walkwise2 (QA-11) */
.tutor-course-card,
.tutor-course-wrap .tutor-course-card,
.tutor-loop-course-container .tutor-course-card,
.tutor-card.tutor-course-card,
.tutor-course-list .tutor-card,
.tutor-course-list-item .tutor-card {
  box-shadow: none !important;
  border: 1px solid var(--ww-border, #E8E8E8) !important;
}
.tutor-course-card:hover,
.tutor-loop-course-container .tutor-course-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Course archive — single column on mobile (R-08) */
@media (max-width: 768px) {
  .course-archive-page .tutor-row > [class*="tutor-col-"],
  .course-archive-page .tutor-course-list .tutor-course-col,
  .course-archive-page .tutor-course-filter-loop-container .tutor-col-lg-4,
  .course-archive-page .tutor-course-filter-loop-container .tutor-col-md-6,
  .course-archive-page .tutor-course-filter-loop-container .tutor-col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .course-archive-page .tutor-course-filter-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Single course — enhanced pedagogical metadata ── */
.tutor-course-details-info .tutor-course-details-info-item,
.tutor-course-requirements,
.tutor-course-target-audience,
.tutor-course-benefits {
  font-family: var(--ww-font-sub) !important;
  color: var(--ww-body) !important;
}

.tutor-course-details-info-item .tutor-icon {
  color: var(--ww-primary) !important;
}

.tutor-course-details-info-item .tutor-text-bold {
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-semibold, 600) !important;
  color: var(--ww-text) !important;
}

.tutor-course-details-content h4,
.tutor-course-details-content .tutor-segment-title {
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-bold, 700) !important;
  color: var(--ww-navy) !important;
}

.tutor-single-course-content-wrap .tutor-course-details-content ul li::before,
.tutor-course-requirements li::before,
.tutor-course-target-audience li::before,
.tutor-course-benefits li::before {
  color: var(--ww-green) !important;
}

/* ── Lesson page — restored header integration (post-spotlight) ── */
.single-lesson .site-header,
.single-lesson .site-header .container {
  position: relative;
  z-index: 100;
}

.single-lesson .tutor-single-lesson-wrap,
.single-lesson .tutor-single-lesson-segment {
  max-width: var(--ww-container, 1200px);
  margin-inline: auto;
  padding: var(--ww-space-6, 24px) var(--ww-space-4, 16px);
}

.single-lesson .tutor-course-topic-list {
  border-radius: var(--ww-radius-lg, 12px) !important;
  border: 1px solid var(--ww-border) !important;
  overflow: hidden;
}

/* ── Lesson top bar — WalkWise brand + navigation (template override) ── */
.ww-lesson-topbar {
  gap: var(--ww-space-4, 16px);
}
.ww-lesson-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-space-4, 16px);
  flex-shrink: 0;
}
.ww-lesson-topbar__logo img {
  height: 34px;
  width: auto;
  display: block;
}
.ww-lesson-topbar__home-link {
  font-family: var(--ww-font-heading) !important;
  font-weight: var(--ww-weight-bold, 700) !important;
  color: var(--ww-navy, #203065) !important;
  text-decoration: none;
  font-size: var(--ww-text-lg, 1.125rem);
}
.ww-lesson-topbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-space-4, 16px);
}
.ww-lesson-topbar__nav a {
  font-family: var(--ww-font-sub, 'Montserrat', sans-serif) !important;
  font-weight: 600 !important;
  font-size: var(--ww-text-sm, 0.875rem) !important;
  color: var(--ww-body, #5D5D5D) !important;
  text-decoration: none;
  transition: color 0.15s ease;
  padding: 6px 4px;
}
.ww-lesson-topbar__nav a:hover,
.ww-lesson-topbar__nav a:focus-visible {
  color: var(--ww-primary, #F67E3A) !important;
}
/* Hide the WalkWise brand nav on small screens (Tutor shows its own compact bar). */
@media (max-width: 991px) {
  .ww-lesson-topbar__nav {
    display: none;
  }
  .ww-lesson-topbar__logo img {
    height: 28px;
  }
}

/* ── Lesson navigation bar styling ── */
.ww-lesson-nav {
  background: var(--ww-lavender, #F5F6FF);
  border-top: 1px solid var(--ww-border, #e5e7eb);
  padding: var(--ww-space-4, 16px) var(--ww-space-6, 24px);
  margin-top: var(--ww-space-8, 32px);
}

.ww-lesson-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--ww-container, 1200px);
  margin-inline: auto;
  gap: var(--ww-space-4, 16px);
}

.ww-lesson-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--ww-radius-btn, 15px);
  font-family: var(--ww-font-heading);
  font-weight: var(--ww-weight-semibold, 600);
  font-size: var(--ww-text-sm, 0.875rem);
  text-decoration: none;
  color: var(--ww-primary);
  background: var(--ww-white, #fff);
  border: 1px solid var(--ww-primary);
  transition: all 0.2s ease;
  min-height: 44px;
}

.ww-lesson-nav__btn:hover {
  background: var(--ww-primary);
  color: var(--ww-white, #fff);
}

.ww-lesson-nav__btn.is-disabled {
  opacity: 0;
  pointer-events: none;
}

.ww-lesson-nav__complete {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ww-radius-btn, 15px);
  font-family: var(--ww-font-heading);
  font-weight: var(--ww-weight-bold, 700);
  font-size: var(--ww-text-base, 1rem);
  background: var(--ww-gradient);
  color: var(--ww-white, #fff);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  min-height: 48px;
}

.ww-lesson-nav__complete:hover {
  opacity: 0.9;
}

.ww-lesson-nav__complete:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ww-lesson-nav__done {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--ww-font-heading);
  font-weight: var(--ww-weight-bold, 700);
  color: var(--ww-green, #5DB12F);
  font-size: var(--ww-text-base, 1rem);
}

@media (max-width: 768px) {
  .ww-lesson-nav__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ww-lesson-nav__btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .ww-lesson-nav__complete,
  .ww-lesson-nav__done {
    order: -1;
    flex: 0 0 100%;
    justify-content: center;
    margin-bottom: var(--ww-space-2, 8px);
  }
  .ww-lesson-nav__label {
    display: none;
  }
}