/* ============================================================================
   Eco4Life — LearnDash (Focus Mode) overrides
   ----------------------------------------------------------------------------
   Aligns LD's default LD30 / Focus Mode UI with the Blocksy + eco4life
   palette. Enqueued only on LearnDash post types so it can't affect the
   marketing pages.
   ============================================================================ */

:root {
    --e4l-radius-sm: 0.375rem;
    --e4l-radius-md: 0.5rem;
    --e4l-radius-lg: 0.75rem;
    --e4l-shadow:
        0 1px 3px rgba(58, 79, 102, 0.06), 0 4px 16px rgba(58, 79, 102, 0.04);
}

/* -----------------------------------------------------------------
   Focus Mode Header
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-focus-header {
    background: #fff;
    border-bottom: 1px solid var(--wp--preset--color--neutral-200, #e1e8ed);
    box-shadow: var(--e4l-shadow);
    min-height: 72px;
    padding: 0.5rem 1.25rem !important;
}

/* Header is 72px tall (fixed at top:0). Sidebar must:
   1. Start exactly at top: 72px (right under header)
   2. NOT inherit LD's padding-top: 50px (was reserving space for a 51px
      header, but ours is fixed-positioned and the sidebar's own top
      already clears it). Without this override the heading floats
      ~50px below the header. */
body .learndash-wrapper .ld-focus .ld-focus-sidebar,
body .learndash-wrapper .ld-focus-sidebar {
    top: 72px !important;
    padding-top: 0 !important;
}
body.admin-bar .learndash-wrapper .ld-focus .ld-focus-sidebar,
body.admin-bar .learndash-wrapper .ld-focus-sidebar,
body.admin-bar.ld-in-focus-mode .ld-focus-sidebar {
    top: 104px !important; /* 32 admin-bar + 72 header */
    padding-top: 0 !important;
}

/* Mobile admin bar is 46px, not 32px */
@media screen and (max-width: 782px) {
    body.admin-bar .learndash-wrapper .ld-focus .ld-focus-sidebar,
    body.admin-bar .learndash-wrapper .ld-focus-sidebar {
        top: 118px !important; /* 46 admin-bar + 72 header */
    }
}

.learndash-wrapper .ld-focus-header .ld-brand-logo {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-right: 1rem;
}

.learndash-wrapper .e4l-focus-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--wp--preset--color--neutral-900);
}
.learndash-wrapper .e4l-focus-logo {
    display: block;
    max-height: 40px;
    width: auto;
    object-fit: contain;
}
.learndash-wrapper .e4l-focus-wordmark {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--primary);
}
.learndash-wrapper .e4l-focus-brand:hover .e4l-focus-wordmark {
    color: var(--wp--preset--color--primary-dark);
}

.learndash-wrapper .ld-focus-header .ld-focus-header__heading,
.learndash-wrapper .ld-focus-header__heading a {
    color: var(--wp--preset--color--neutral-900) !important;
    font-weight: 700;
}

/* Breathe between header items */
.learndash-wrapper .ld-focus-header .ld-focus-header__items,
.learndash-wrapper .ld-focus-header .ld-focus-header__main-items {
    gap: 1.25rem !important;
}

/* -----------------------------------------------------------------
   Header nav — compact Previous / Next / Mark Complete buttons
   Selectors tuned to what LD actually renders:
     <a class="next">, <a class="previous">
     #learndash_mark_complete_button  (inside .sfwd-mark-complete form)
   ----------------------------------------------------------------- */

/* Focus header nav buttons — the real selector is .ld-button.ld-button-transparent
   wrapping <span class="ld-text"> + <span class="ld-icon"> */
body .learndash-wrapper #ld-focus-header a.ld-button,
body .learndash-wrapper #ld-focus-header .ld-button,
body .learndash-wrapper .ld-focus-header a.ld-button,
body .learndash-wrapper .ld-focus-header a.ld-button-transparent,
body
    .learndash-wrapper
    .ld-focus-header
    .sfwd-mark-complete
    .learndash_mark_complete_button,
body .learndash-wrapper .ld-focus-header #learndash_mark_complete_button,
body .learndash-wrapper .ld-focus-header input.learndash_mark_complete_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: var(--e4l-radius-sm) !important;
    border-width: 1px !important;
    border-style: solid !important;
    letter-spacing: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

body .learndash-wrapper #ld-focus-header .ld-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
}
body .learndash-wrapper #ld-focus-header .ld-icon {
    font-size: 0.75rem !important;
    width: 12px !important;
    height: 12px !important;
}

/* Ghost variant — default state for Previous Lesson / Next Topic */
body .learndash-wrapper #ld-focus-header a.ld-button-transparent,
body .learndash-wrapper #ld-focus-header a.ld-button.ld-button-transparent {
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--neutral-200, #e1e8ed) !important;
}
body .learndash-wrapper #ld-focus-header a.ld-button-transparent:hover {
    background: var(--wp--preset--color--primary-light) !important;
    border-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary-dark) !important;
}

/* Mark Complete — filled primary */
body
    .learndash-wrapper
    #ld-focus-header
    .sfwd-mark-complete
    .learndash_mark_complete_button,
body .learndash-wrapper #ld-focus-header #learndash_mark_complete_button,
body .learndash-wrapper #ld-focus-header input.learndash_mark_complete_button {
    background: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--secondary) !important;
}
body
    .learndash-wrapper
    #ld-focus-header
    .sfwd-mark-complete
    .learndash_mark_complete_button:hover,
body .learndash-wrapper #ld-focus-header #learndash_mark_complete_button:hover {
    background: var(--wp--preset--color--secondary-dark) !important;
    border-color: var(--wp--preset--color--secondary-dark) !important;
}

/* -----------------------------------------------------------------
   Sidebar course heading — match header height so nothing overlaps
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading,
.learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar__course-heading {
    min-height: 72px;
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}
.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading a,
.learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar__course-heading a {
    color: #fff !important;
    text-decoration: none !important;
}

/* Sidebar collapse arrow — smaller circle */
.learndash-wrapper .ld-focus-sidebar .ld-sidebar-trigger {
    width: 32px !important;
    height: 32px !important;
}

.learndash-wrapper .ld-focus-header .ld-breadcrumbs a {
    color: var(--wp--preset--color--neutral-500);
}

.learndash-wrapper .ld-focus-header .ld-user-menu > a,
.learndash-wrapper .ld-focus-header .ld-focus-header__items > a {
    color: var(--wp--preset--color--primary);
}

/* Progress bar in header — fill = primary brand */
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
    background: var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-progress-bar {
    background: var(--wp--preset--color--neutral-200, #e1e8ed) !important;
    border-radius: 999px !important;
    height: 8px !important;
    overflow: hidden;
}

.learndash-wrapper .ld-progress-percentage {
    color: var(--wp--preset--color--primary);
    font-weight: 700;
}

/* -----------------------------------------------------------------
   Focus Mode Sidebar — course outline + progress
   ----------------------------------------------------------------- */

body .learndash-wrapper .ld-focus-sidebar {
    background: var(--wp--preset--color--surface, #f8fafb) !important;
    border-right: 1px solid var(--wp--preset--color--neutral-200, #e1e8ed) !important;
}

/* Sidebar course heading — override LD's blue/teal wall with a light variant.
   LD's winning selector is:
     .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading
   We match it and add body for specificity (0,5,1 > 0,3,0). */

body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--wp--preset--color--primary) !important;
    border-bottom: 1px solid var(--wp--preset--color--neutral-200) !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0.75rem 3rem 0.75rem 1rem !important;
    justify-content: center !important;
}

body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading
    a,
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading
    .ld-focus-mode-course-heading-wrapper,
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading
    .ld-focus-mode-course-heading-wrapper
    a,
body .learndash-wrapper #ld-focus-mode-course-heading {
    color: var(--wp--preset--color--primary) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Hide the content icon inside the heading link — logo already brands the page */
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading
    .ld-focus-mode-course-heading-wrapper {
    padding-left: 0 !important;
}
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-course-navigation-heading
    .ld-focus-mode-course-heading-wrapper
    .ld-icon-content {
    display: none !important;
}

/* Collapse trigger circle — primary-light bg with primary glyph */
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-focus-sidebar-trigger
    .ld-icon {
    background: var(--wp--preset--color--primary-light) !important;
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--primary) !important;
}
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-focus-sidebar-trigger:hover
    .ld-icon,
body
    .learndash-wrapper
    .ld-focus
    .ld-focus-sidebar
    .ld-focus-sidebar-trigger:focus
    .ld-icon {
    background: var(--wp--preset--color--primary) !important;
    color: #fff !important;
    border-color: var(--wp--preset--color--primary) !important;
}

/* Section heading styling (week dividers) */
.learndash-wrapper .ld-lesson-section-heading {
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    font-family: var(--wp--preset--font-family--display) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    padding: 1.5rem 1.25rem 0.35rem 1.5rem !important;
    border-top: 1px solid var(--wp--preset--color--neutral-200) !important;
    border-left: 3px solid transparent !important;
    margin-top: 0.75rem !important;
    display: block !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Current week — highlighted when the user is viewing a lesson inside it.
   Tagged by assets/js/current-week.js. */
.learndash-wrapper .e4l-current-week .ld-lesson-section-heading,
.learndash-wrapper.ld-lesson-section-heading.e4l-current-week,
.learndash-wrapper .ld-item-list-section-heading.e4l-current-week .ld-lesson-section-heading {
    background: var(--wp--preset--color--primary-light, rgba(0, 90, 156, 0.06)) !important;
    border-left-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary) !important;
    font-weight: 700 !important;
}
.learndash-wrapper .e4l-current-week .ld-lesson-section-heading::after,
.learndash-wrapper .ld-item-list-section-heading.e4l-current-week .ld-lesson-section-heading::after {
    content: "Current week";
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--wp--preset--color--primary);
    border-radius: 999px;
    vertical-align: middle;
}

.learndash-wrapper .ld-lesson-section-heading:first-child,
.learndash-wrapper
    .ld-lesson-item-section-heading:first-child
    .ld-lesson-section-heading {
    border-top: 0 !important;
    margin-top: 0 !important;
}

/* Lessons + topics in sidebar nav */
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item,
.learndash-wrapper .ld-focus-sidebar .ld-topic-list-item,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-item {
    background: transparent !important;
    border-color: var(--wp--preset--color--neutral-200, #e1e8ed) !important;
}

.learndash-wrapper .ld-focus-sidebar .ld-table-list-item-preview,
.learndash-wrapper .ld-focus-sidebar .ld-lesson-item__title {
    color: var(--wp--preset--color--neutral-900) !important;
    font-weight: 500 !important;
}

/* Current / active item */
.learndash-wrapper .ld-focus-sidebar .ld-is-current-item > .ld-table-list-item,
.learndash-wrapper
    .ld-focus-sidebar
    .ld-is-current-item
    .ld-table-list-item-preview,
.learndash-wrapper .ld-focus-sidebar .current-menu-item,
.learndash-wrapper .ld-focus-sidebar [class*="current"] > a {
    background: var(--wp--preset--color--primary-light) !important;
    color: var(--wp--preset--color--primary-dark) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--wp--preset--color--primary) !important;
}

/* Completed status indicator */
.learndash-wrapper .ld-focus-sidebar .ld-status-complete,
.learndash-wrapper .ld-focus-sidebar .ld-status-icon-complete {
    background: var(--wp--preset--color--secondary) !important;
    border-color: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
}

/* In-progress indicator */
.learndash-wrapper .ld-focus-sidebar .ld-status-incomplete {
    border-color: var(--wp--preset--color--neutral-300) !important;
}

/* -----------------------------------------------------------------
   Focus Mode — Main content column
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-focus-content {
    background: #fff;
}

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-tabs-content,
.learndash-wrapper .ld-focus-content > .ld-content {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.learndash-wrapper .ld-focus-main h1,
.learndash-wrapper .ld-focus-main h2,
.learndash-wrapper .ld-focus-main h3 {
    color: var(--wp--preset--color--neutral-900);
}

.learndash-wrapper .ld-focus-main h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1.5rem;
}

/* Lesson / topic breadcrumb row */
.learndash-wrapper .ld-lesson-status {
    border-color: var(--wp--preset--color--neutral-200) !important;
    margin-bottom: 1.5rem !important;
}

/* -----------------------------------------------------------------
   Video — constrained width + proper aspect ratio
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-focus-main figure.e4l-video,
.learndash-wrapper .ld-focus-main .wp-block-html figure {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Fallback: any iframe inside the focus content */
.learndash-wrapper .ld-focus-content iframe[src*="vimeo.com"],
.learndash-wrapper .ld-focus-content iframe[src*="youtube.com"] {
    max-width: 100%;
}

/* -----------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------- */

.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper input.learndash_mark_complete_button,
.learndash-wrapper button.ld-button,
.learndash-wrapper .ld-button,
.learndash-wrapper #btn-join {
    background: var(--wp--preset--color--secondary) !important;
    border-color: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
    border-radius: var(--e4l-radius-md) !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: background 0.15s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.learndash-wrapper .learndash_mark_complete_button:hover,
.learndash-wrapper input.learndash_mark_complete_button:hover,
.learndash-wrapper button.ld-button:hover,
.learndash-wrapper .ld-button:hover,
.learndash-wrapper #btn-join:hover {
    background: var(--wp--preset--color--secondary-dark) !important;
    border-color: var(--wp--preset--color--secondary-dark) !important;
}

/* Secondary / alternate buttons (e.g. previous / ghost) */
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button-alternate {
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border: 1px solid var(--wp--preset--color--primary) !important;
}

.learndash-wrapper .ld-button.ld-button-transparent:hover {
    background: var(--wp--preset--color--primary-light) !important;
}

/* Disabled state */
.learndash-wrapper .ld-button[disabled],
.learndash-wrapper .ld-button.ld-button-disabled {
    background: var(--wp--preset--color--neutral-300) !important;
    border-color: var(--wp--preset--color--neutral-300) !important;
    color: var(--wp--preset--color--neutral-500) !important;
    cursor: not-allowed !important;
}

/* Prev / Next navigation arrows */
.learndash-wrapper .ld-focus-main .ld-focus-content-prev,
.learndash-wrapper .ld-focus-main .ld-focus-content-next,
.learndash-wrapper .ld-content-actions .ld-content-action {
    color: var(--wp--preset--color--primary) !important;
}

/* -----------------------------------------------------------------
   Course / lesson landing (non-focus) small cleanup
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-course-status,
.learndash-wrapper .ld-item-list-header,
.learndash-wrapper .ld-lesson-item {
    border-color: var(--wp--preset--color--neutral-200) !important;
    border-radius: var(--e4l-radius-md) !important;
    background: #fff !important;
}

.learndash-wrapper .ld-item-title a,
.learndash-wrapper .ld-lesson-item .ld-lesson-item-preview-heading {
    color: var(--wp--preset--color--neutral-900) !important;
}

/* -----------------------------------------------------------------
   Mobile sidebar toggle + responsive tweaks
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .learndash-wrapper .ld-focus-sidebar {
        box-shadow: var(--e4l-shadow);
    }
}

/* -----------------------------------------------------------------
   Remove the default LD heading background stripe that often clashes
   ----------------------------------------------------------------- */

.learndash-wrapper .ld-focus-main .ld-course-step-title {
    background: transparent !important;
    padding: 0 !important;
}

/* Reflection form lives inside .ld-focus-content too — inherit theme styles */
.learndash-wrapper .ld-focus-content .e4l-reflection__btn {
    background: var(--wp--preset--color--secondary);
    color: #fff;
}

/* -----------------------------------------------------------------
   Native Materials tab — style PDF links as cards
   ----------------------------------------------------------------- */

body .learndash-wrapper .ld-tabs-content #ld-tab-materials-* p,
body .learndash-wrapper .ld-tabs-content [id^="ld-tab-materials-"] p {
    margin: 0 0 0.5rem !important;
}

body .learndash-wrapper .ld-tabs-content [id^="ld-tab-materials-"] a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    background: var(--wp--preset--color--surface, #f8fafb) !important;
    border: 1px solid var(--wp--preset--color--neutral-200, #e1e8ed) !important;
    border-radius: var(--e4l-radius-md) !important;
    color: var(--wp--preset--color--primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    margin-bottom: 0.5rem !important;
}
body .learndash-wrapper .ld-tabs-content [id^="ld-tab-materials-"] a::before {
    content: "📄";
    flex: none;
    font-size: 1.1rem;
}
body .learndash-wrapper .ld-tabs-content [id^="ld-tab-materials-"] a::after {
    content: "↓";
    margin-left: auto;
    color: var(--wp--preset--color--neutral-500);
    font-weight: 400;
}
body .learndash-wrapper .ld-tabs-content [id^="ld-tab-materials-"] a:hover {
    background: var(--wp--preset--color--primary-light) !important;
    border-color: var(--wp--preset--color--primary) !important;
    transform: translateX(2px);
}

/* Tab navigation styling */
body .learndash-wrapper .ld-tabs-navigation .ld-tab.ld-active {
    border-bottom-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary) !important;
}
body .learndash-wrapper .ld-tabs-navigation .ld-tab .ld-icon {
    color: inherit;
}

/* -----------------------------------------------------------------
   Bottom content-actions navigation — match the compact ghost
   styling of the focus-header buttons. By default LD renders these
   as big filled CTAs (190x66) which is too heavy for in-flow nav.
   ----------------------------------------------------------------- */

/* Specificity must beat LD's inline selector chain
   (.ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld--ignore-inline-css))
   which is (0,6,0). Adding body + 2 wrapper classes + the same 4 :not()s gives (0,8,2). */
body
    .learndash-wrapper
    .ld-content-actions
    a.ld-button:not([disabled]):not(.ld-button-reverse):not(
        .ld-button-transparent
    ):not(.ld--ignore-inline-css),
body
    .learndash-wrapper
    .ld-content-actions
    .ld-content-action
    a.ld-button:not([disabled]):not(.ld-button-reverse):not(
        .ld-button-transparent
    ):not(.ld--ignore-inline-css) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border: 1px solid var(--wp--preset--color--neutral-200, #e1e8ed) !important;
    border-radius: var(--e4l-radius-sm) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.9rem !important;
    min-height: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

body
    .learndash-wrapper
    .ld-content-actions
    a.ld-button:not([disabled]):not(.ld-button-reverse):not(
        .ld-button-transparent
    ):not(.ld--ignore-inline-css):hover {
    background: var(--wp--preset--color--primary-light) !important;
    background-color: var(--wp--preset--color--primary-light) !important;
    border-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--primary-dark) !important;
    opacity: 1 !important;
}

body .learndash-wrapper .ld-content-actions .ld-button .ld-icon,
body .learndash-wrapper .ld-content-actions .ld-button svg {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
}

body .learndash-wrapper .ld-content-actions .ld-button .ld-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
}

/* "Back to Lesson" middle link — keep subtle but matched palette */
body .learndash-wrapper .ld-content-actions .ld-course-step-back {
    color: var(--wp--preset--color--primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--wp--preset--color--neutral-200);
    padding-bottom: 0.1rem;
}
body .learndash-wrapper .ld-content-actions .ld-course-step-back:hover {
    color: var(--wp--preset--color--primary-dark) !important;
    border-bottom-color: var(--wp--preset--color--primary);
}

/* -----------------------------------------------------------------
   Course landing — branded status box ("Current Status / Price / Get Started")
   ----------------------------------------------------------------- */

body.single-sfwd-courses .learndash-wrapper .ld-course-status {
    background: #fff !important;
    border: 1px solid var(--wp--preset--color--neutral-200) !important;
    border-radius: var(--e4l-radius-lg) !important;
    box-shadow: var(--e4l-shadow) !important;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) !important;
    margin: clamp(1.5rem, 3vw, 2.5rem) auto !important;
    max-width: 1120px !important;
}

body.single-sfwd-courses .learndash-wrapper .ld-course-status-segment {
    border-color: var(--wp--preset--color--neutral-200) !important;
}

body.single-sfwd-courses .learndash-wrapper .ld-course-status-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--neutral-500) !important;
    margin-bottom: 0.6rem !important;
}

body.single-sfwd-courses .learndash-wrapper .ld-status {
    background: var(--wp--preset--color--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.4rem 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    border: 0 !important;
}

body.single-sfwd-courses .learndash-wrapper .ld-status.ld-status-complete,
body.single-sfwd-courses .learndash-wrapper .ld-status.ld-status-enrolled {
    background: var(--wp--preset--color--secondary) !important;
}

body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-seg-price
    .ld-course-status-content {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--primary) !important;
    letter-spacing: -0.02em !important;
}

body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-action
    a.ld-button {
    background: var(--wp--preset--color--secondary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--e4l-radius-md) !important;
    padding: 0.85rem 1.5rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: background 0.15s ease !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-action
    a.ld-button:hover {
    background: var(--wp--preset--color--secondary-dark) !important;
}

/* Enrolled state — progress widget. Make it feel substantial, not a tiny pill. */
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status.ld-course-status-enrolled {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: clamp(1.5rem, 3vw, 2rem) !important;
}

body.single-sfwd-courses .learndash-wrapper .ld-course-status-enrolled::before {
    content: "Welcome back. Pick up where you left off.";
    display: block;
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--neutral-900);
    margin-bottom: 0.25rem;
}

body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress {
    background: var(--wp--preset--color--surface, #f8fafb) !important;
    border: 1px solid var(--wp--preset--color--neutral-200) !important;
    border-radius: var(--e4l-radius-md) !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress-bar {
    height: 10px !important;
    border-radius: 999px !important;
    background: var(--wp--preset--color--neutral-200) !important;
    margin-top: 0.75rem !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress-bar-percentage {
    background: var(--wp--preset--color--primary) !important;
    border-radius: 999px !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress-stats {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress-percentage {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--primary) !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-course-status-enrolled
    .ld-progress-steps {
    font-size: 0.875rem !important;
    color: var(--wp--preset--color--neutral-500) !important;
    font-weight: 500 !important;
}

/* Hide Blocksy's default page-title block on LD course/lesson/topic
   pages — our injected hero takes that role. Blocksy renders it as
   <section class="hero-section ..."> right above the content. */
body.single-sfwd-courses .hero-section,
body.single-sfwd-lessons .hero-section,
body.single-sfwd-topic .hero-section,
body.single-sfwd-quiz .hero-section,
body.single-sfwd-courses .ct-page-title,
body.single-sfwd-courses [class*="page-title-style"],
body.single-sfwd-courses .entry-header,
body.single-sfwd-courses .post-meta {
    display: none !important;
}

/* Allow alignfull blocks injected via patterns to break out of LD's
   1200px wrapper into the full viewport width.
   Margin trick: width 100vw with offset = (parent center) - (50vw). */
body.single-sfwd-courses .learndash-wrapper .alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Alignwide blocks → 1200px content but allow breakout from narrower wrappers */
body.single-sfwd-courses .learndash-wrapper .alignwide {
    max-width: min(1200px, 100vw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Constrain LD's wrapper to a sane content width for the readable bits */
body.single-sfwd-courses .learndash-wrapper--course {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Course content list section heading + lessons */
body.single-sfwd-courses .learndash-wrapper .ld-item-list-section-heading {
    color: var(--wp--preset--color--primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    margin-top: 1.5rem !important;
}

.e4l-section-description {
    color: var(--wp--preset--color--neutral-700);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.25rem 0 1.25rem;
    max-width: 65ch;
    padding: 0 1.25rem;
}
.e4l-section-description p {
    margin: 0 0 0.6em;
}
.e4l-section-description p:last-child {
    margin-bottom: 0;
}
.e4l-section-description a {
    text-decoration: underline;
}
.e4l-section-description ul,
.e4l-section-description ol {
    margin: 0.25em 0 0.75em 1.25em;
    padding: 0;
}
/* Replace "X Topics / Y Quizzes" count in the lesson expand button with
   a static "DAILY ROADMAP" label. The actual count remains in the DOM
   (just hidden visually) so screen readers still announce content. */
.learndash-wrapper .ld-expand-button .ld-expand-text {
    font-size: 0 !important;
    line-height: 1 !important;
}
.learndash-wrapper .ld-expand-button .ld-expand-text::before {
    content: "DAILY TASKS";
    display: inline-block;
    margin-left: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--wp--preset--color--primary);
    line-height: 1.2;
}

.e4l-section-description--sidebar {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--wp--preset--color--neutral-500);
    margin: 0 0 1rem;
    padding: 0 1.25rem 0.5rem;
    border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}
.e4l-section-description--sidebar p {
    margin: 0 0 0.4em;
}
body.single-sfwd-courses .learndash-wrapper .e4l-section-description p {
    margin: 0 0 0.5rem;
}
body.single-sfwd-courses
    .learndash-wrapper
    .e4l-section-description
    p:last-child {
    margin-bottom: 0;
}

body.single-sfwd-courses
    .learndash-wrapper
    .ld-item-list-actions-listing
    button {
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    border: 1px solid var(--wp--preset--color--neutral-200) !important;
    border-radius: var(--e4l-radius-sm) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 1rem !important;
}
body.single-sfwd-courses
    .learndash-wrapper
    .ld-item-list-actions-listing
    button:hover {
    background: var(--wp--preset--color--primary-light) !important;
    border-color: var(--wp--preset--color--primary) !important;
}

/* ===========================================================================
   Enrolled course hero — replaces marketing hero for active students
   =========================================================================== */

.e4l-enrolled-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(
        --wp--preset--gradient--brand,
        linear-gradient(120deg, #176273 0%, #0f4a5c 50%, #3f8a3f 100%)
    );
    color: #fff;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2rem);
}
.e4l-enrolled-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.e4l-enrolled-hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 0.75rem;
}
.e4l-enrolled-hero__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: #fff;
}
.e4l-enrolled-hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 2rem;
    max-width: 620px;
}
.e4l-enrolled-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    background: var(--wp--preset--color--secondary);
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
    transition:
        background 0.15s ease,
        transform 0.15s ease;
}
.e4l-enrolled-hero__cta:hover {
    background: var(--wp--preset--color--secondary-dark);
    transform: translateY(-1px);
}

/* Hide the redundant prev/next buttons in the LD Focus Mode header.
   The same navigation already appears at the bottom of each lesson/topic
   right next to "Mark Complete", so the top copy just steals visual space. */
body .learndash-wrapper .ld-focus-header .ld-content-actions {
    display: none !important;
}

/* Show the brand logo on mobile too — LD hides .ld-brand-logo with
   display:none under ~782px. Force it visible and size the image down
   so it doesn't crowd the hamburger / mark-complete button. */
@media (max-width: 782px) {
    body .learndash-wrapper .ld-focus-header .ld-brand-logo {
        display: flex !important;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 0.5rem;
    }
    body .learndash-wrapper .ld-focus-header .e4l-focus-logo {
        max-height: 32px;
        width: auto;
    }
    body .learndash-wrapper .ld-focus-header .e4l-focus-wordmark {
        font-size: 1rem;
    }
}