/*
 * Unified LearnDash lesson bar — Previous · actions · Next in one row.
 * Ported from the Trading Interview theme (ti-lesson-nav); markup comes from
 * the child-theme override learndash/ld30/modules/course-steps.php.
 *
 * Uses the --patui- design tokens defined in pat-header-hero.css.
 *
 * The parent theme (pat/style.css) styles the stock LearnDash buttons with
 * !important (body .learndash_mark_complete_button: min-width 200px, padding,
 * etc.), so the icon-square rules below carry !important too — with higher
 * specificity they win among equal-importance declarations.
 */

.learndash-wrapper .ld-content-actions.pat-lesson-nav {
  display: flex;
  align-items: stretch;
  gap: var(--patui-space-3);
  padding: var(--patui-space-4) 0 !important; /* parent theme forces 15px */
  margin-top: var(--patui-space-6);
  background: none;
  border: 0;
}

/* Prev / Next occupy the flanks; each grows to fill its side */
.pat-lesson-nav .pat-nav-previous,
.pat-lesson-nav .pat-nav-next {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.pat-lesson-nav .pat-nav-next {
  justify-content: flex-end;
}

/* Plain links on the flanks — no card chrome */
.pat-lesson-nav .pat-nav-link {
  display: flex;
  align-items: center;
  gap: var(--patui-space-2);
  min-width: 0;
  padding: var(--patui-space-3) 0;
  font-weight: 500;
  color: hsl(var(--patui-foreground));
  text-decoration: none;
  transition: color 0.2s ease;
}

.pat-lesson-nav .pat-nav-link:hover {
  color: hsl(var(--patui-accent));
}

.pat-lesson-nav .pat-nav-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pat-lesson-nav .pat-nav-arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.pat-lesson-nav .pat-nav-link:hover .pat-nav-arrow svg {
  transform: translateX(-3px);
}

.pat-lesson-nav .pat-nav-next .pat-nav-link:hover .pat-nav-arrow svg {
  transform: translateX(3px);
}

.pat-lesson-nav .pat-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pat-lesson-nav .pat-nav-next .pat-nav-text {
  text-align: right;
}

.pat-lesson-nav .pat-nav-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--patui-muted-foreground));
  font-weight: 600;
}

.pat-lesson-nav .pat-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Center cluster: Back to parent step + Mark Complete */
.pat-lesson-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--patui-space-3);
  flex-shrink: 0;
}

/* Flex, not block: with font-size 0 on the input, a block wrapper would put
   the inline-flex form on a text baseline and the line-box strut adds phantom
   space — the check button renders a few px off against the home button. */
.pat-lesson-nav-actions .pat-mark-complete-wrapper {
  display: inline-flex;
  align-items: center;
}

/* LD30 makes the form display:block, width:100% (≤960px) and paints its own
   ld-icons checkmark via ::after — neutralize all of that; the icon square is
   the <input> itself. Extra .pat-lesson-nav level outweighs LD30's
   .learndash-wrapper:not(...) .sfwd-mark-complete selector. */
.pat-lesson-nav .pat-lesson-nav-actions .pat-mark-complete-wrapper .sfwd-mark-complete {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
}

.pat-lesson-nav .pat-lesson-nav-actions .pat-mark-complete-wrapper .sfwd-mark-complete::after {
  content: none;
}

/* Icon-only center controls — 2.75rem squares. font-size: 0 hides the
   text label (works on the <input> LearnDash renders too); the label
   surfaces as a hover tooltip via data-tooltip on the link/wrapper */
.pat-lesson-nav .pat-lesson-nav-actions .pat-btn-back-course,
.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_complete_button,
.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_incomplete_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  border-radius: var(--patui-radius) !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.pat-lesson-nav .pat-lesson-nav-actions .pat-btn-back-course {
  color: hsl(var(--patui-foreground)) !important;
  background-color: hsl(var(--patui-card));
  border: 1px solid hsl(var(--patui-border));
  text-decoration: none;
}

.pat-lesson-nav .pat-lesson-nav-actions .pat-btn-back-course:hover {
  background-color: hsl(var(--patui-muted));
  transform: translateY(-1px);
}

.pat-lesson-nav .pat-lesson-nav-actions .pat-btn-back-course svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Mark Complete — navy square with a check. background-image because the
   element is an <input>, which can't hold inline SVG children */
.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_complete_button {
  background-color: hsl(var(--patui-primary)) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  border: none !important;
  box-shadow: none !important;
}

.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_complete_button:hover {
  background-color: hsl(var(--patui-primary) / 0.9) !important;
  transform: translateY(-1px);
}

/* Mark Incomplete gets an undo icon. The input carries BOTH classes
   (learndash_mark_incomplete_button learndash_mark_complete_button), so this
   rule must come after the complete rule to win. Icon stroke = #1d2939,
   the hex value of --patui-foreground. */
.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_incomplete_button {
  background-color: hsl(var(--patui-card)) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231d2939'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208'/%3E%3Cpath%20d='M3%203v5h5'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  border: 1px solid hsl(var(--patui-border)) !important;
}

.pat-lesson-nav .pat-lesson-nav-actions .learndash_mark_incomplete_button:hover {
  background-color: hsl(var(--patui-muted)) !important;
}

/* Tooltip — label floats above the control on hover/keyboard focus */
.pat-lesson-nav-actions [data-tooltip] {
  position: relative;
}

.pat-lesson-nav-actions [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: hsl(var(--patui-background));
  background-color: hsl(var(--patui-foreground));
  border-radius: calc(var(--patui-radius) - 2px);
  box-shadow: 0 2px 8px hsl(var(--patui-foreground) / 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.pat-lesson-nav-actions [data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%, 4px);
  border: 5px solid transparent;
  border-top-color: hsl(var(--patui-foreground));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.pat-lesson-nav-actions [data-tooltip]:hover::after,
.pat-lesson-nav-actions [data-tooltip]:focus-within::after,
.pat-lesson-nav-actions [data-tooltip]:hover::before,
.pat-lesson-nav-actions [data-tooltip]:focus-within::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Stacked layout on small screens. The parent theme already forces
   flex-direction: column at ≤768px; this extends the same treatment
   up to the point where the three-part row runs out of room. */
@media (max-width: 820px) {
  .learndash-wrapper .ld-content-actions.pat-lesson-nav {
    flex-direction: column;
    gap: var(--patui-space-2);
  }

  .pat-lesson-nav .pat-nav-previous,
  .pat-lesson-nav .pat-nav-next {
    flex: none;
  }

  .pat-lesson-nav-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}