/* =============================================== */
/* === TUTORLMS COURSE CONTENT STYLING === */
/* =============================================== */

/* ======================== */
/* === MAIN LAYOUT === */
/* ======================== */

/* Main course content wrapper */
.tutor-course-single-content-wrapper {
    background-color: var(--theme-content-bg) !important;
    color: var(--theme-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Course sidebar - FIXED: Higher specificity + removed transform transition */
  body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper,
  body .tutor-course-single-content-wrapper .tutor-lesson-sidebar {
    background-color: var(--theme-content-alt-bg) !important;
    border-right: 2px solid var(--theme-border) !important;
    height: calc(100vh - var(--site-header-height)) !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: var(--site-header-height) !important;
    left: 0 !important;
    width: 320px !important;
    z-index: 90 !important;
  }
  
  /* Content wrapper - FIXED: Only animate margin-left, not width */
  body .tutor-course-single-content-wrapper {
    margin-left: 320px !important;
    transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smoother easing */
    width: calc(100vw - 320px) !important;
    max-width: none !important;
  }
  
  /* Content body - make it truly responsive */
  .tutor-course-topic-single-body {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  
  /* Course spotlight wrapper - responsive container */
  .tutor-course-spotlight-wrapper {
    width: 100% !important;
    max-width: none !important;
    background-color: var(--theme-content-bg) !important;
    transition: background-color 0.3s ease;
  }
  
  /* Container elements - FIXED: Higher specificity + smooth transition */
  body .tutor-course-single-content-wrapper .tutor-container {
    width: 100% !important;
    max-width: min(1140px, calc(100vw - 320px - 4rem)) !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Smooth container transition */
  }
  
  /* FIXED: When sidebar is hidden - only animate the content, let sidebar disappear instantly */
  body .tutor-course-single-content-wrapper.tutor-course-single-sidebar-hidden {
    margin-left: 0 !important;
    width: 100vw !important; /* Keep this for consistency but don't transition it */
  }
  
  /* FIXED: Sidebar hides instantly when content starts moving */
  body .tutor-course-single-content-wrapper.tutor-course-single-sidebar-hidden .tutor-course-single-sidebar-wrapper,
  body .tutor-course-single-content-wrapper.tutor-course-single-sidebar-hidden .tutor-lesson-sidebar {
    transform: translateX(-100%) !important;
    transition: none !important; /* Instant hide to prevent double animation */
  }
  
  /* FIXED: When sidebar shows - it appears instantly, content animates to make room */
  body .tutor-course-single-content-wrapper:not(.tutor-course-single-sidebar-hidden) .tutor-course-single-sidebar-wrapper,
  body .tutor-course-single-content-wrapper:not(.tutor-course-single-sidebar-hidden) .tutor-lesson-sidebar {
    transform: translateX(0) !important;
    transition: none !important; /* Instant show */
  }
  
  /* When sidebar hidden - container can use full width - FIXED: Higher specificity */
  body .tutor-course-single-content-wrapper.tutor-course-single-sidebar-hidden .tutor-container {
    max-width: min(1140px, calc(100vw - 4rem)) !important;
  }
  
  /* Sidebar title */
  .tutor-course-single-sidebar-title {
    background-color: var(--theme-primary) !important;
    border-bottom: 2px solid var(--theme-border) !important;
    padding: 1rem 1.5rem !important;
    color: #ffffff !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
    transition: all 0.3s ease;
  }
  
  .tutor-course-single-sidebar-title * {
    color: #ffffff !important;
  }
  
  /* Main content area */
  #tutor-single-entry-content {
    background-color: var(--theme-content-bg) !important;
    transition: background-color 0.3s ease;
  }
  
  /* Tab content */
  .tutor-tab-item {
    background-color: var(--theme-content-bg) !important;
    padding: 3rem 2rem !important;
    transition: background-color 0.3s ease;
  }
  
  /* Main lesson content wrapper */
  .tutor-lesson-wrapper {
    background-color: var(--theme-content-bg) !important;
    color: var(--theme-text) !important;
    max-width: 100% !important;
    transition: all 0.3s ease;
  }
  
  /* ======================== */
  /* === COURSE TOPICS (SIDEBAR) === */
  /* ======================== */
  
  /* Course topic containers */
  .tutor-course-topic {
    border-bottom: 2px solid var(--theme-border) !important;
    transition: all 0.3s ease;
  }
  
  /* Topic headers */
  .tutor-accordion-item-header {
    background-color: var(--theme-primary) !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--theme-border) !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
  }
  
  .tutor-accordion-item-header:hover {
    background-color: var(--theme-secondary) !important;
  }
  
  .tutor-accordion-item-header.is-active {
    background-color: var(--theme-primary) !important;
    color: #ffffff !important;
  }
  
  /* Topic titles */
  .tutor-course-topic-title {
    font-family: var(--font-mono) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  .tutor-accordion-item-header .tutor-course-topic-title {
    color: #ffffff !important;
  }
  
  /* Topic summary (progress counter) */
  .tutor-course-topic-summary {
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s ease;
  }
  
  .tutor-accordion-item-header .tutor-course-topic-summary {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  /* ======================== */
  /* === LESSON ITEMS === */
  /* ======================== */
  
  /* Lesson item containers */
  .tutor-course-topic-item {
    background-color: var(--theme-content-bg) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    transition: all 0.3s ease;
  }
  
  .tutor-course-topic-item:hover {
    background-color: var(--theme-content-alt-bg) !important;
  }
  
  .tutor-course-topic-item.is-active {
    background-color: var(--theme-secondary) !important;
    border-left: 4px solid var(--theme-primary) !important;
  }
  
  /* Lesson links */
  .tutor-course-topic-item a {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem 1.5rem !important;
    text-decoration: none !important;
    color: var(--theme-text) !important;
    transition: color 0.3s ease;
  }
  
  .tutor-course-topic-item.is-active a {
    color: #ffffff !important;
  }
  
  /* Lesson titles */
  .tutor-course-topic-item-title {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: inherit !important;
    line-height: 1.4 !important;
  }
  
  /* Active lesson title styling */
  .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
    font-family: var(--font-mono) !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
  }
  
  /* Lesson icons */
  .tutor-course-topic-item-icon {
    color: var(--theme-text-muted) !important;
    font-size: 14px !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  
  /* ======================== */
  /* === TYPOGRAPHY SYSTEM === */
  /* ======================== */
  
  /* Headers in lesson content */
  .tutor-lesson-wrapper h1 {
    font-family: var(--font-mono) !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--theme-text) !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  .tutor-lesson-wrapper h2 {
    font-family: var(--font-mono) !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--theme-text) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  .tutor-lesson-wrapper h3 {
    font-family: var(--font-mono) !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--theme-text) !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  .tutor-lesson-wrapper h4 {
    font-family: var(--font-mono) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em !important;
    color: var(--theme-text) !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  .tutor-lesson-wrapper h5,
  .tutor-lesson-wrapper h6 {
    font-family: var(--font-mono) !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0em !important;
    color: var(--theme-text) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    text-transform: lowercase !important;
    transition: color 0.3s ease;
  }
  
  /* Paragraphs and body text */
  .tutor-lesson-wrapper p {
    font-family: var(--font-sans) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0em !important;
    color: var(--theme-text) !important;
    margin-bottom: 1.25rem !important;
    transition: color 0.3s ease;
  }
  
  /* Strong/bold text */
  .tutor-lesson-wrapper strong {
    font-weight: 600 !important;
    color: var(--theme-text) !important;
  }
  
  /* Emphasis/italic text */
  .tutor-lesson-wrapper em {
    font-style: italic !important;
    color: var(--theme-primary) !important;
  }
  
  /* Lists */
  .tutor-lesson-wrapper ul,
  .tutor-lesson-wrapper ol {
    font-family: var(--font-sans) !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  .tutor-lesson-wrapper li {
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    color: var(--theme-text) !important;
    margin-bottom: 0.5rem !important;
    transition: color 0.3s ease;
  }
  
  /* Links */
  .tutor-lesson-wrapper a {
    color: var(--theme-primary) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--theme-primary) !important;
    text-underline-offset: 3px !important;
    transition: all 0.3s ease !important;
  }
  
  .tutor-lesson-wrapper a:hover {
    color: var(--theme-secondary) !important;
    text-decoration-color: var(--theme-secondary) !important;
  }
  
  /* ======================== */
  /* === NAVIGATION FOOTER === */
  /* ======================== */
  
  .tutor-course-topic-single-footer {
    background-color: var(--theme-content-alt-bg) !important;
    border-top: 2px solid var(--theme-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    transition: all 0.3s ease;
  }
  
  /* Navigation buttons */
  .tutor-course-topic-single-footer .tutor-btn {
    font-family: var(--font-mono) !important;
    background-color: var(--theme-content-bg) !important;
    color: var(--theme-text) !important;
    border: 2px solid var(--theme-border) !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 var(--theme-border) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }
  
  .tutor-course-topic-single-footer .tutor-btn:hover {
    background-color: var(--theme-accent) !important;
    color: var(--theme-text) !important;
    transform: translateY(-1px) !important;
    box-shadow: 3px 3px 0 var(--theme-border) !important;
  }
  
  /* ======================== */
  /* === FORM ELEMENTS === */
  /* ======================== */
  
  /* Checkboxes - FIXED: Higher specificity to override Elementor/TutorLMS */
  .tutor-course-topic-item .tutor-d-flex .tutor-form-check-input.tutor-form-check-circle {
    accent-color: var(--theme-primary) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    border: 1px solid var(--theme-border) !important;
    background-color: var(--theme-content-bg) !important;
    flex-shrink: 0 !important;
  }
  
  /* ======================== */
  /* === TOOLTIPS === */
  /* ======================== */
  
  .tooltip-wrap {
    position: relative !important;
  }
  
  .tooltip-txt {
    background-color: var(--theme-text) !important;
    color: var(--theme-content-bg) !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    max-width: 300px !important;
    box-shadow: var(--theme-shadow) !important;
    transition: all 0.3s ease;
  }
  
  /* ======================== */
  /* === UTILITY OVERRIDES === */
  /* ======================== */
  
  /* Only override specific utility classes when needed */
  .tutor-course-single-content-wrapper .tutor-color-secondary {
    color: var(--theme-text) !important;
    transition: color 0.3s ease;
  }
  
  /* ======================== */
  /* === SCROLLBAR STYLING === */
  /* ======================== */
  
  /* Scrollbar styling for sidebar - FIXED: Higher specificity */
  body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper::-webkit-scrollbar,
  body .tutor-course-single-content-wrapper .tutor-lesson-sidebar::-webkit-scrollbar {
    width: 8px !important;
  }
  
  body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-track,
  body .tutor-course-single-content-wrapper .tutor-lesson-sidebar::-webkit-scrollbar-track {
    background: var(--theme-content-alt-bg) !important;
  }
  
  body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb,
  body .tutor-course-single-content-wrapper .tutor-lesson-sidebar::-webkit-scrollbar-thumb {
    background: var(--theme-border) !important;
    border-radius: 4px !important;
  }
  
  body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb:hover,
  body .tutor-course-single-content-wrapper .tutor-lesson-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted) !important;
  }
  
  /* ======================== */
  /* === RESPONSIVE DESIGN === */
  /* ======================== */
  
  /* Mobile responsive adjustments - FIXED: Higher specificity */
  @media (max-width: 1199px) {
    body .tutor-course-single-content-wrapper {
      margin-left: 0 !important;
      width: 100vw !important;
      transition: none !important; /* No content animation on mobile */
    }
    
    body .tutor-course-single-content-wrapper .tutor-container {
      max-width: calc(100vw - 2rem) !important;
      padding: 0 1rem !important;
    }
  
    /* FIXED: Mobile responsive - sidebar becomes overlay with proper animation */
    body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper,
    body .tutor-course-single-content-wrapper .tutor-lesson-sidebar {
      transform: translateX(-100%) !important;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Only animate on mobile */
    }
    
    /* Show sidebar when toggled on mobile - slides in smoothly */
    body .tutor-course-single-content-wrapper .tutor-course-single-sidebar-wrapper.tutor-sidebar-open,
    body .tutor-course-single-content-wrapper .tutor-lesson-sidebar.tutor-sidebar-open {
      transform: translateX(0) !important;
    }
    
    /* Add overlay when sidebar is open on mobile */
    body .tutor-course-single-content-wrapper::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 85;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    body .tutor-course-single-content-wrapper.sidebar-open::before {
      opacity: 1;
      visibility: visible;
    }
    
    /* Make sure buttons show/hide correctly on mobile */
    .tutor-iconic-btn.tutor-d-xl-none {
      display: flex !important;
    }
    
    .tutor-iconic-btn.tutor-d-xl-inline-flex {
      display: none !important;
    }
    
    .tutor-iconic-btn.tutor-d-xl-flex {
      display: none !important;
    }
  }
  
  @media (max-width: 768px) {
    .tutor-lesson-wrapper {
      padding: 1rem !important;
    }
    
    .tutor-tab-item {
      padding: 2rem 1rem !important;
    }
    
    .tutor-lesson-wrapper h1 {
      font-size: 2rem !important;
      margin-bottom: 1rem !important;
    }
    
    .tutor-lesson-wrapper h2 {
      font-size: 1.75rem !important;
      margin-top: 2rem !important;
      margin-bottom: 1rem !important;
    }
    
    .tutor-lesson-wrapper h3 {
      font-size: 1.25rem !important;
      margin-top: 1.5rem !important;
    }
    
    .tutor-lesson-wrapper p {
      font-size: 1rem !important;
    }
    
    .tutor-course-single-sidebar-title {
      padding: 0.75rem 1rem !important;
      font-size: 0.9rem !important;
    }
    
    .tutor-course-topic-title {
      font-size: 0.875rem !important;
    }
    
    .tutor-course-topic-item a {
      padding: 0.75rem 1rem !important;
    }
    
    .tutor-course-topic-item-title {
      font-size: 0.8rem !important;
    }
    
    .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
      font-size: 0.95rem !important;
    }
    
    .tutor-course-topic-single-footer {
      padding: 0.75rem 1rem !important;
    }
    
    .tutor-course-topic-single-footer .tutor-btn {
      padding: 0.5rem 0.75rem !important;
      font-size: 0.8rem !important;
    }
  }
  
  /* ======================== */
  /* === DARK MODE SUPPORT === */
  /* ======================== */
  
  [data-theme="dark"] .tutor-course-single-content-wrapper,
  [data-theme="dark"] #tutor-single-entry-content,
  [data-theme="dark"] .tutor-course-topic-single-body,
  [data-theme="dark"] .tutor-course-spotlight-wrapper,
  [data-theme="dark"] .tutor-tab-item,
  [data-theme="dark"] .tutor-lesson-wrapper,
  [data-theme="dark"] .tutor-course-topic-single-header {
    background-color: var(--theme-content-bg) !important;
    color: var(--theme-text) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-wrapper,
  [data-theme="dark"] .tutor-lesson-sidebar,
  [data-theme="dark"] .tutor-course-topic-single-footer {
    background-color: var(--theme-content-alt-bg) !important;
    border-color: var(--theme-border) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-title,
  [data-theme="dark"] .tutor-accordion-item-header {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-border) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-title *,
  [data-theme="dark"] .tutor-accordion-item-header *,
  [data-theme="dark"] .tutor-course-topic-title,
  [data-theme="dark"] .tutor-course-topic-summary {
    color: #ffffff !important;
  }
  
  [data-theme="dark"] .tutor-course-topic-item {
    background-color: var(--theme-content-bg) !important;
    border-color: var(--theme-border) !important;
  }
  
  [data-theme="dark"] .tutor-course-topic-item:hover {
    background-color: var(--theme-content-alt-bg) !important;
  }
  
  [data-theme="dark"] .tutor-lesson-wrapper h1,
  [data-theme="dark"] .tutor-lesson-wrapper h2,
  [data-theme="dark"] .tutor-lesson-wrapper h3,
  [data-theme="dark"] .tutor-lesson-wrapper h4,
  [data-theme="dark"] .tutor-lesson-wrapper h5,
  [data-theme="dark"] .tutor-lesson-wrapper h6,
  [data-theme="dark"] .tutor-lesson-wrapper p,
  [data-theme="dark"] .tutor-lesson-wrapper li {
    color: var(--theme-text) !important;
  }
  
  [data-theme="dark"] .tutor-course-topic-item.is-active {
    background-color: var(--theme-content-alt-bg) !important;
  }
  
  [data-theme="dark"] .tutor-course-topic-item.is-active a {
    color: var(--theme-text) !important;
  }
  
  [data-theme="dark"] .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
    font-family: var(--font-mono) !important;
    font-size: 1.1rem !important;
    color: var(--theme-text) !important;
  }
  
  [data-theme="dark"] .tutor-lesson-wrapper a {
    color: var(--theme-primary) !important;
  }
  
  [data-theme="dark"] .tutor-lesson-wrapper a:hover {
    color: var(--theme-secondary) !important;
  }
  
  [data-theme="dark"] .tutor-lesson-wrapper em {
    color: var(--theme-primary) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-track,
  [data-theme="dark"] .tutor-lesson-sidebar::-webkit-scrollbar-track {
    background: var(--theme-content-alt-bg) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb,
  [data-theme="dark"] .tutor-lesson-sidebar::-webkit-scrollbar-thumb {
    background: var(--theme-border) !important;
  }
  
  [data-theme="dark"] .tutor-course-single-sidebar-wrapper::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .tutor-lesson-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted) !important;
  }