/*--------------------------------------------------------------
  AMFM LearnDash Lesson Page Styles
  
  Card-based two-column layout for lesson pages.
  Uses design tokens from base.css.
  
  @since 2026-02-10
--------------------------------------------------------------*/


/* =============================================================================
   1. RESET / HIDE DEFAULT BUDDYBOSS ELEMENTS
   ============================================================================= */

/* Hide the old BuddyBoss sidebar wrapper (replaced by amfm-lesson-sidebar-col) */
.single-sfwd-lessons .lms-topic-sidebar-wrapper {
  display: none !important;
}

/* Hide old header bar (LESSON x OF y, breadcrumbs, status bubble) */
.single-sfwd-lessons .bb-lms-header,
.single-sfwd-lessons #learndash-course-header {
  display: none !important;
}

/* Hide old bottom navigation ONLY outside our nav bar */
.single-sfwd-lessons .learndash-wrapper > .learndash_content_wrap > .ld-content-actions {
  display: none !important;
}

/* Reset ALL default LD styles on content-actions inside our nav bar */
.amfm-lesson-actions .ld-content-actions,
.amfm-lesson-nav-bar .ld-content-actions {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  position: static !important;
  z-index: auto !important;
  clear: none !important;
  float: none !important;
  justify-content: flex-end !important;
}

/* Reset the inner .ld-content-action wrapper */
.amfm-lesson-actions .ld-content-action,
.amfm-lesson-nav-bar .ld-content-action {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Reset BuddyBoss grid layout since we're using our own */
.single-sfwd-lessons #learndash-content .bb-grid.grid {
  display: block;
}

/* Remove default BuddyBoss page content padding */
.single-sfwd-lessons #learndash-page-content {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}

/* Reset the learndash content wrapper spacing */
.single-sfwd-lessons .learndash_content_wrap {
  padding: 0;
  margin: 0;
}

/* Hide Elementor heading, divider, spacer (our nav bar provides these) */
.amfm-lesson-main .elementor-widget-heading,
.amfm-lesson-main .elementor-widget-divider,
.amfm-lesson-main .elementor-widget-spacer {
  display: none !important;
}


/* =============================================================================
   2. CARD WRAPPER (outer + inner)
   ============================================================================= */

.amfm-lesson-card-wrapper {
  background: var(--amfm-bg-primary);
  border-radius: var(--amfm-radius-xl);
  box-shadow: var(--amfm-shadow-card);
  padding: var(--amfm-spacing-md);
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

.amfm-lesson-card {
  display: flex;
  gap: var(--amfm-spacing-4xl);
  align-items: flex-start;
  border: 1px solid var(--amfm-border-primary);
  border-radius: var(--amfm-radius-md);
  padding: var(--amfm-spacing-4xl);
}


/* =============================================================================
   3. LEFT COLUMN: Main lesson content
   ============================================================================= */

.amfm-lesson-main {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 720px;
}

/* Video embeds: rounded corners */
.amfm-lesson-main .elementor-wrapper,
.amfm-lesson-main .elementor-video-iframe {
  border-radius: var(--amfm-radius-lg) !important;
  overflow: hidden;
}

/* Elementor content spacing adjustments */
.amfm-lesson-main .elementor-section {
  margin-bottom: 0;
}

/* Description text styling (serif display font per Figma) */
.amfm-lesson-main .elementor-widget-text-editor .elementor-widget-container p {
  font-family: var(--amfm-font-display);
  font-weight: 300;
  font-size: var(--amfm-text-2xl);
  line-height: var(--amfm-leading-xl);
  color: var(--amfm-text-primary);
}

/* Elementor divider */
.amfm-lesson-main .elementor-widget-divider .elementor-divider-separator {
  border-color: var(--amfm-border-secondary);
}

/* PDF download button styling (matches Figma: brand bg + download icon) */
.amfm-lesson-main .elementor-button {
  background-color: var(--amfm-brand-600) !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--amfm-radius-md) !important;
  border-bottom: none !important;
  font-family: var(--amfm-font-body);
  font-weight: 600;
  font-size: var(--amfm-text-sm);
  line-height: var(--amfm-leading-sm);
  color: var(--amfm-text-white) !important;
  padding: var(--amfm-spacing-md) var(--amfm-spacing-lg);
  box-shadow: var(--amfm-shadow-sm);
  transition: background-color var(--amfm-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--amfm-spacing-md);
}

.amfm-lesson-main .elementor-button:hover {
  background-color: var(--amfm-brand-700) !important;
}

/* Add download icon before button text */
.amfm-lesson-main .elementor-button .elementor-button-content-wrapper::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 12.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V12.5M14.1667 8.33333L10 12.5M10 12.5L5.83333 8.33333M10 12.5V2.5' stroke='white' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Hide Elementor's default button icon (>>) */
.amfm-lesson-main .elementor-button .elementor-button-icon {
  display: none !important;
}

/* Replace button text with "Download PDF" */
.amfm-lesson-main .elementor-button .elementor-button-text {
  font-size: 0;
  line-height: 0;
}

.amfm-lesson-main .elementor-button .elementor-button-text::after {
  content: 'Download PDF';
  font-size: var(--amfm-text-sm);
  line-height: var(--amfm-leading-sm);
}


/* =============================================================================
   4. NAV BAR (title + mark complete + prev/next)
   ============================================================================= */

.amfm-lesson-nav-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--amfm-spacing-xl);
  padding: var(--amfm-spacing-3xl) 0;
  border-bottom: 1px solid var(--amfm-border-secondary);
  margin-bottom: var(--amfm-spacing-3xl);
  width: 100% !important;
  max-width: none !important;
  flex-basis: 100% !important;
  box-sizing: border-box;
}

.amfm-lesson-title-row {
  flex: 1 1 auto;
  min-width: 0;
}

.amfm-lesson-title {
  font-family: var(--amfm-font-body);
  font-weight: 600;
  font-size: var(--amfm-text-lg);
  line-height: var(--amfm-leading-lg);
  color: var(--amfm-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amfm-lesson-number {
  margin-right: var(--amfm-spacing-xs);
}

/* Actions: mark complete + prev/next */
.amfm-lesson-actions {
  display: flex;
  align-items: center;
  gap: var(--amfm-spacing-lg);
  flex-shrink: 0;
}

/* Override mark complete button styling for inline placement */
.amfm-lesson-actions .sfwd-mark-complete {
  margin: 0;
}

/* Mark Complete button - override all LD/BB defaults */
.amfm-lesson-nav-bar .learndash_mark_complete_button,
.amfm-lesson-actions .learndash_mark_complete_button,
.amfm-lesson-nav-bar input[type="submit"].learndash_mark_complete_button {
  background-color: var(--amfm-bg-primary) !important;
  background: var(--amfm-bg-primary) !important;
  border: 1px solid var(--amfm-border-secondary) !important;
  border-top: 1px solid var(--amfm-border-secondary) !important;
  border-radius: var(--amfm-radius-md) !important;
  color: var(--amfm-text-secondary) !important;
  font-family: var(--amfm-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--amfm-text-sm) !important;
  line-height: var(--amfm-leading-sm) !important;
  padding: 8px 14px !important;
  box-shadow: var(--amfm-shadow-sm) !important;
  cursor: pointer;
  transition: all var(--amfm-transition-fast);
  white-space: nowrap;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.amfm-lesson-nav-bar .learndash_mark_complete_button:hover,
.amfm-lesson-actions .learndash_mark_complete_button:hover,
.amfm-lesson-nav-bar input[type="submit"].learndash_mark_complete_button:hover,
.amfm-lesson-actions input[type="submit"].learndash_mark_complete_button:hover,
body.single-sfwd-lessons .amfm-lesson-actions .learndash_mark_complete_button:hover {
  border-color: var(--amfm-brand-600) !important;
  background-color: var(--amfm-neutral-50) !important;
  background: var(--amfm-neutral-50) !important;
  color: var(--amfm-brand-600) !important;
}

.amfm-lesson-nav-bar .learndash_mark_complete_button:focus,
.amfm-lesson-actions .learndash_mark_complete_button:focus,
.amfm-lesson-nav-bar .learndash_mark_complete_button:focus-visible,
.amfm-lesson-actions .learndash_mark_complete_button:focus-visible {
  border-color: var(--amfm-brand-600) !important;
  outline: 2px solid var(--amfm-brand-500) !important;
  outline-offset: 1px;
  background-color: var(--amfm-bg-primary) !important;
  background: var(--amfm-bg-primary) !important;
  color: var(--amfm-brand-600) !important;
}

/* Also reset the sfwd-mark-complete form wrapper */
.amfm-lesson-nav-bar .sfwd-mark-complete,
.amfm-lesson-actions .sfwd-mark-complete {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
}

.amfm-lesson-nav-bar .sfwd-mark-complete::after,
.amfm-lesson-actions .sfwd-mark-complete::after {
  display: none !important;
}

/* Hide the default LD mark-complete arrow/icon */
.amfm-lesson-actions .sfwd-mark-complete::after {
  display: none !important;
}

/* Hide stray LD navigation shortcode wrappers inside our actions */
.amfm-lesson-actions > .learndash-wrapper {
  display: contents;
}

.amfm-lesson-actions .learndash-shortcode-wrap-ld_navigation,
.amfm-lesson-actions .ld-content-actions .ld-content-action:empty {
  display: none !important;
}

/* LD course-steps (wraps mark complete in some configurations) */
.amfm-lesson-actions .ld-content-actions {
  display: flex !important;
  align-items: center;
  gap: var(--amfm-spacing-lg);
  padding: 0;
  margin: 0;
}

/* Prev/Next arrows */
.amfm-lesson-prev-next {
  display: flex;
  align-items: center;
  gap: var(--amfm-spacing-xs);
}

.amfm-lesson-prev-next a,
.amfm-lesson-prev-next span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--amfm-border-secondary) !important;
  border-radius: var(--amfm-radius-md);
  background: var(--amfm-bg-primary);
  color: var(--amfm-text-secondary);
  font-size: var(--amfm-text-sm);
  text-decoration: none !important;
  box-shadow: var(--amfm-shadow-sm) !important;
  transition: all var(--amfm-transition-fast);
}

/* Nuclear option: Override LearnDash's overly-specific border-bottom removal */
/* Match or exceed: .learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) a:not(.button):not(.screen-reader-shortcut) */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .amfm-lesson-prev-next a:not(.button),
.amfm-lesson-actions .amfm-lesson-prev-next a:not(.button):not(.screen-reader-shortcut),
.amfm-lesson-nav-bar .amfm-lesson-prev-next a:not(.button):not(.screen-reader-shortcut),
body.single-sfwd-lessons .amfm-lesson-prev-next a:not(.button),
.learndash-wrapper .amfm-lesson-prev-next a:not(.button),
.ld-content-actions .amfm-lesson-prev-next a,
.amfm-lesson-prev-next a[class*="prev-link"],
.amfm-lesson-prev-next a[class*="next-link"],
.amfm-lesson-prev-next a.prev-link,
.amfm-lesson-prev-next a.next-link {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--amfm-border-secondary) !important;
}

.amfm-lesson-prev-next a:hover {
  border-color: var(--amfm-brand-600);
  background: var(--amfm-neutral-50);
  color: var(--amfm-brand-600);
}

.amfm-lesson-prev-next a:focus,
.amfm-lesson-prev-next a:focus-visible {
  border-color: var(--amfm-brand-600);
  outline: 2px solid var(--amfm-brand-500);
  outline-offset: 1px;
  color: var(--amfm-brand-600);
}

.amfm-lesson-prev-next .empty-post {
  opacity: 0.4;
  pointer-events: none;
}

/* Hide ALL text and child elements inside prev/next links */
.amfm-lesson-prev-next a {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden;
}

.amfm-lesson-prev-next a * {
  display: none !important;
}

/* Chevron icons via CSS background */
.amfm-lesson-prev-next a::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.amfm-lesson-prev-next a.prev-link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 15L7.5 10L12.5 5' stroke='%23535862' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.amfm-lesson-prev-next a.next-link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23535862' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Brand color chevrons on hover/focus */
.amfm-lesson-prev-next a.prev-link:hover::after,
.amfm-lesson-prev-next a.prev-link:focus::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 15L7.5 10L12.5 5' stroke='%23aa6140' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.amfm-lesson-prev-next a.next-link:hover::after,
.amfm-lesson-prev-next a.next-link:focus::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23aa6140' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* =============================================================================
   5. RIGHT COLUMN: Sidebar
   ============================================================================= */

.amfm-lesson-sidebar-col {
  flex: 0 0 320px;
  min-width: 0;
}

.amfm-sidebar-header {
  margin-bottom: 0;
}

.amfm-sidebar-title {
  font-family: var(--amfm-font-body);
  font-weight: 600;
  font-size: var(--amfm-text-lg);
  line-height: var(--amfm-leading-lg);
  color: var(--amfm-text-primary);
  margin: 0 0 var(--amfm-spacing-3xl);
}

.amfm-sidebar-divider {
  height: 1px;
  background: var(--amfm-border-secondary);
  margin: 0;
}

/* Lesson list rows */
.amfm-sidebar-lessons {
  display: flex;
  flex-direction: column;
}

.amfm-sidebar-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amfm-spacing-lg);
  padding: var(--amfm-spacing-xl) var(--amfm-spacing-2xl);
  min-height: 64px;
  border-bottom: 1px solid var(--amfm-border-secondary);
  text-decoration: none;
  color: var(--amfm-text-primary);
  transition: background-color var(--amfm-transition-fast);
}

.amfm-sidebar-lesson-row:hover {
  background-color: var(--amfm-neutral-50);
  text-decoration: none;
  color: var(--amfm-text-primary);
}

.amfm-sidebar-lesson-row.is-current {
  background-color: var(--amfm-neutral-50);
  font-weight: 600;
}

.amfm-sidebar-lesson-row:last-child {
  border-bottom: none;
}

/* Lesson info (number + name) */
.amfm-sidebar-lesson-info {
  display: flex;
  align-items: flex-start;
  gap: var(--amfm-spacing-md);
  flex: 1 1 auto;
  min-width: 0;
}

.amfm-sidebar-lesson-number {
  font-family: var(--amfm-font-body);
  font-weight: 500;
  font-size: var(--amfm-text-sm);
  line-height: var(--amfm-leading-sm);
  color: var(--amfm-text-tertiary);
  flex-shrink: 0;
  min-width: 20px;
}

.amfm-sidebar-lesson-name {
  font-family: var(--amfm-font-body);
  font-weight: 500;
  font-size: var(--amfm-text-sm);
  line-height: var(--amfm-leading-sm);
  color: var(--amfm-text-primary);
}


/* =============================================================================
   6. STATUS BADGES (Complete / Watch)
   ============================================================================= */

.amfm-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--amfm-spacing-xs);
  padding: var(--amfm-spacing-xxs) var(--amfm-spacing-md) var(--amfm-spacing-xxs) var(--amfm-spacing-sm);
  border-radius: var(--amfm-radius-sm); /* 6px rectangular corners, not pill */
  font-family: var(--amfm-font-body);
  font-weight: 500;
  font-size: var(--amfm-text-sm); /* Match dashboard: 14px */
  line-height: var(--amfm-leading-sm);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.amfm-sidebar-badge svg {
  flex-shrink: 0;
}

/* Complete badge (green) */
.amfm-badge-complete {
  background-color: var(--amfm-success-50);
  border: 1px solid var(--amfm-success-200);
  color: var(--amfm-success-700);
}

.amfm-badge-complete svg {
  color: var(--amfm-success-700);
}

/* Watch badge (outlined) - matches dashboard training card */
.amfm-badge-watch {
  background-color: var(--amfm-bg-primary);
  border: 1px solid #d5d7da; /* --dtc-neutral-border from dashboard */
  color: var(--amfm-text-secondary);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
}

.amfm-badge-watch svg {
  color: #717680; /* --dtc-neutral-icon from dashboard */
}

/* Hover state for watch badge - changes text and border */
.amfm-sidebar-lesson-row:hover .amfm-badge-watch,
.amfm-badge-watch:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
  color: var(--amfm-brand-600); /* Brand color text on hover */
}

.amfm-sidebar-lesson-row:hover .amfm-badge-watch svg,
.amfm-badge-watch:hover svg {
  color: var(--amfm-brand-600); /* Brand color icon on hover */
}


/* =============================================================================
   7. ADDITIONAL OVERRIDES (BuddyBoss / LearnDash specificity battles)
   ============================================================================= */

/* Push content below the fixed BuddyBoss header (desktop ~73px) */
.single-sfwd-lessons .site-content,
.single-sfwd-lessons #content.site-content {
  padding-top: 73px !important;
}

/* Override BuddyBoss content area max-width */
.single-sfwd-lessons #learndash-content.container-full {
  max-width: none;
  padding: var(--amfm-spacing-4xl);
}

/* Remove default LD wrapper borders/padding */
.single-sfwd-lessons .learndash-wrapper {
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* LD tabs content - remove bottom margin */
.single-sfwd-lessons .learndash_content_wrap .ld-tabs-content {
  margin-bottom: 0;
}

/* Elementor sections within lesson - reset width and kill inner padding */
.single-sfwd-lessons .learndash_content_wrap .elementor-section-boxed > .elementor-container {
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

/* Tablet / narrow desktop: stack columns, reduce padding */
@media (max-width: 1024px) {
  .single-sfwd-lessons #learndash-content.container-full {
    padding: var(--amfm-spacing-xl);
  }

  .amfm-lesson-card-wrapper {
    padding: var(--amfm-spacing-xs);
  }

  .amfm-lesson-card {
    flex-direction: column;
    gap: var(--amfm-spacing-3xl);
    padding: var(--amfm-spacing-3xl);
  }

  .amfm-lesson-main {
    max-width: none;
  }

  .amfm-lesson-sidebar-col {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Mobile: tighten padding */
@media (max-width: 768px) {
  /* Reset the desktop header offset - mobile header handled differently */
  .single-sfwd-lessons .site-content,
  .single-sfwd-lessons #content.site-content {
    padding-top: 0 !important;
  }

  .single-sfwd-lessons #learndash-content.container-full {
    padding: var(--amfm-spacing-xl);
  }

  .amfm-lesson-card-wrapper {
    padding: var(--amfm-spacing-xs);
    border-radius: var(--amfm-radius-lg);
  }

  .amfm-lesson-card {
    padding: var(--amfm-spacing-xl);
    gap: var(--amfm-spacing-xl);
  }

  .amfm-lesson-nav-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--amfm-spacing-lg);
  }

  .amfm-lesson-title {
    white-space: normal;
    font-size: var(--amfm-text-base);
  }

  .amfm-lesson-actions {
    width: 100%;
    justify-content: space-between;
  }

  .amfm-sidebar-lesson-row {
    padding: var(--amfm-spacing-lg) var(--amfm-spacing-lg);
    min-height: 52px;
  }

  /* Description text: smaller on mobile */
  .amfm-lesson-main .elementor-widget-text-editor .elementor-widget-container p {
    font-size: var(--amfm-text-lg);
    line-height: var(--amfm-leading-lg);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .single-sfwd-lessons #learndash-content.container-full {
    padding: var(--amfm-spacing-md);
  }

  .amfm-lesson-card {
    padding: var(--amfm-spacing-lg);
  }

  .amfm-sidebar-title {
    font-size: var(--amfm-text-base);
  }
}