/* =========================================================================
   Day Strip Navigation
   ========================================================================= */

.ub-day-strip {
    margin-bottom: var(--ub-space-8);
}

.ub-day-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ub-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ub-day-strip__day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ub-ink-soft);
    text-decoration: none;
    border: 1px solid var(--ub-line-strong);
    border-radius: var(--ub-radius-sm);
    transition: all var(--ub-duration-fast) var(--ub-ease);
}

a.ub-day-strip__day:hover {
    color: var(--ub-ink);
    border-color: var(--ub-accent-500);
    background: var(--ub-paper-sunken);
}

.ub-day-strip__day.is-current {
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
    border-color: var(--ub-accent-500);
    font-weight: 800;
}

.ub-day-strip__day.is-done {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.ub-day-strip__day.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--ub-paper-sunken);
}

.ub-day-strip__gap {
    color: var(--ub-ink-muted);
    padding: 0 var(--ub-space-2);
    user-select: none;
}

.ub-day-strip__all {
    margin-top: var(--ub-space-4);
}

.ub-day-strip__all-toggle {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    color: var(--ub-ink-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    transition: color var(--ub-duration-fast) var(--ub-ease);
}

    .ub-day-strip__all-toggle:hover {
        color: var(--ub-ink);
    }

.ub-day-strip__all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: var(--ub-space-2);
    list-style: none;
    margin: var(--ub-space-4) 0 0;
    padding: var(--ub-space-4) 0 0;
    border-top: var(--ub-rule);
    max-height: 20rem;
    overflow-y: auto;
}
/* =========================================================================
   urhema_lesson.css — Lesson reader (Phase 2 Redesign).
   ========================================================================= */

.ub-lesson {
    padding-block: var(--ub-space-7) var(--ub-space-9);
}

/* ---- Breadcrumbs ------------------------------------------------------ */

.ub-lesson__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-2);
    align-items: center;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 500;
    color: var(--ub-ink-muted);
    margin-bottom: var(--ub-space-6);
}

    .ub-lesson__breadcrumbs a {
        color: inherit;
        text-decoration: none;
        transition: color var(--ub-duration-fast) var(--ub-ease);
    }

        .ub-lesson__breadcrumbs a:hover {
            color: var(--ub-ink);
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

    .ub-lesson__breadcrumbs .is-current {
        font-weight: 700;
        color: var(--ub-ink);
    }

/* ---- Layout Grid ------------------------------------------------------ */

.ub-lesson__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ub-space-8);
    align-items: start;
}

/* ---- Main Column ------------------------------------------------------ */

.ub-lesson__eyebrow {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-accent-700);
    margin: 0 0 var(--ub-space-1);
}

.ub-lesson__title {
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-2xl);
    font-weight: 800;
    line-height: var(--ub-leading-tight);
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
    margin: 0 0 var(--ub-space-6);
}

/* Video Frame */
.ub-lesson__video {
    margin-bottom: var(--ub-space-8);
    border-radius: var(--ub-radius-md);
    overflow: hidden;
    border: var(--ub-rule);
    box-shadow: var(--ub-shadow-soft);
    background: var(--ub-paper-sunken);
}

    /* The LessonVideo partial's own classes (.ls-video / .ls-video-frame) had no rules
   anywhere in the app, so the embed rendered at the browser's default iframe size
   (300x150) regardless of this wrapper's width. Sized here instead of inside the
   partial, since the partial is intentionally styling-agnostic (it only owns the
   Vimeo src/attrs — see its own file comment on why those are load-bearing). */
    .ub-lesson__video .ls-video {
        margin: 0;
    }

    .ub-lesson__video .ls-video-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

        .ub-lesson__video .ls-video-frame iframe {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }

/* Rendered Prose & Typography */
.ub-lesson__prose {
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-reading);
    color: var(--ub-ink);
    counter-reset: lesson-section; /* Prepares sequential numbering */
}

    /* Section Header styling with CSS counter trick for "01", "02" etc.
       Direct-child combinator (>) — see the matching comment on the first copy of this
       rule above for why: real content headings stay direct children of
       .ub-lesson__prose; ReflectionPanel/QuizPanel now nest inside it too. */
    .ub-lesson__prose > h2 {
        position: relative;
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-xl);
        font-weight: 700;
        color: var(--ub-ink);
        margin: var(--ub-space-9) 0 var(--ub-space-3);
        padding-left: var(--ub-space-8);
        counter-increment: lesson-section;
        scroll-margin-top: var(--ub-space-9);
    }

        .ub-lesson__prose > h2::before {
            /* decimal-leading-zero automatically turns "1" into "01" */
            content: counter(lesson-section, decimal-leading-zero);
            position: absolute;
            left: 0;
            top: -0.25rem;
            font-family: var(--ub-font-ui);
            font-size: 2.75rem;
            font-weight: 900;
            line-height: 1;
            color: var(--ub-line-strong);
            z-index: -1;
            letter-spacing: var(--ub-tracking-tight);
        }

    .ub-lesson__prose p {
        margin-bottom: var(--ub-space-4);
    }

    .ub-lesson__prose blockquote {
        margin: var(--ub-space-6) 0;
        padding: var(--ub-space-5) var(--ub-space-6);
        background: var(--ub-paper-sunken);
        border-left: 4px solid var(--ub-accent-500);
        border-radius: var(--ub-radius-sm);
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-lg);
        font-weight: 700;
        color: var(--ub-ink);
        box-shadow: var(--ub-shadow-soft);
    }

    .ub-lesson__prose a {
        color: var(--ub-accent-700);
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

        .ub-lesson__prose a:hover {
            color: var(--ub-accent-500);
        }

.ub-lesson__divider {
    border: 0;
    border-top: var(--ub-rule);
    margin: var(--ub-space-7) 0;
}

/* Bottom Actions */
.ub-lesson__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ub-space-4);
    margin-top: var(--ub-space-8);
}

    .ub-lesson__actions .is-complete {
        background: #16a34a;
        border-color: #16a34a;
        color: var(--ub-paper-raised);
        cursor: default;
    }

        .ub-lesson__actions .is-complete:hover {
            background: #16a34a;
        }

/* ---- Right Sidebar ---------------------------------------------------- */

.ub-lesson__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-6);
    position: sticky;
    top: calc(var(--ub-header-height) + var(--ub-space-6));
}

.ub-lesson__aside-title {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-ink-muted);
    margin: 0 0 var(--ub-space-4);
}

/* Stepper Sequence */
.ub-lesson__stepper {
    padding: var(--ub-space-5);
}

.ub-lesson__stepper-list {
    position: relative;
    margin-left: var(--ub-space-2);
    padding-left: var(--ub-space-4);
    border-left: 2px solid var(--ub-line);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-5);
}

.ub-lesson__step {
    position: relative;
    cursor: pointer;
}

.ub-lesson__step-icon {
    position: absolute;
    left: calc((var(--ub-space-4) * -1) - 11px);
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-paper-raised);
    border: 3px solid var(--ub-line-strong);
    box-shadow: 0 0 0 4px var(--ub-paper-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--ub-duration-fast) var(--ub-ease);
}

.ub-lesson__step.is-done .ub-lesson__step-icon {
    background: var(--ub-accent-500);
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
}

.ub-lesson__step.is-current .ub-lesson__step-icon {
    border-color: var(--ub-accent-500);
}

.ub-lesson__step-icon svg {
    width: 0.625rem;
    height: 0.625rem;
    fill: currentColor;
}

.ub-lesson__step-title {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 700;
    color: var(--ub-ink-muted);
    transition: color var(--ub-duration-fast) var(--ub-ease);
}

.ub-lesson__step.is-done .ub-lesson__step-title,
.ub-lesson__step.is-current .ub-lesson__step-title {
    color: var(--ub-ink);
}

.ub-lesson__step-desc {
    font-family: var(--ub-font-ui);
    font-size: 11px;
    color: var(--ub-ink-muted);
    margin-top: 2px;
}

.ub-lesson__step:hover .ub-lesson__step-icon {
    transform: scale(1.1);
}

.ub-lesson__step:hover .ub-lesson__step-title {
    color: var(--ub-accent-700);
}

.ub-lesson__stepper-action {
    margin-top: var(--ub-space-6);
    padding-top: var(--ub-space-4);
    border-top: var(--ub-rule);
}

    .ub-lesson__stepper-action .ub-button {
        width: 100%;
    }

/* Discussion Sneak Peek */
.ub-lesson__discussion {
    padding: var(--ub-space-5);
}

.ub-lesson__discussion-body {
    padding: var(--ub-space-3) 0;
    border-top: var(--ub-rule);
    margin-bottom: var(--ub-space-3);
}

    .ub-lesson__discussion-body p {
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-xs);
        color: var(--ub-ink);
        margin: 0 0 var(--ub-space-1);
        line-height: var(--ub-leading-snug);
    }

    .ub-lesson__discussion-body span {
        font-family: var(--ub-font-ui);
        font-size: 11px;
        color: var(--ub-ink-muted);
    }

.ub-lesson__discussion-btn {
    width: 100%;
}

/* ---- Responsive Breakpoints ------------------------------------------- */

@media (max-width: 60rem) {
    .ub-lesson__grid {
        grid-template-columns: 1fr;
    }

    .ub-lesson__sidebar {
        position: static;
        order: 2; /* Sidebar flows beneath main content */
    }
}

/* =========================================================================
   Reading size preference (design consideration #3, guilt-free re-entry's
   sibling item — reading comfort). [data-reading-size] lives on <html>,
   resolved server-side the same way [data-theme]/[data-motion] are (see
   Master.cshtml), so there's no flash and no fourth persistence mechanism
   invented for this one control.

   TWO steps, not three, and deliberately only using tokens that already
   exist in urhema_tokens.css:
     - Default: unchanged — .ub-lesson__prose's own --ub-text-lg (18px) /
       its h2's --ub-text-xl (22px) stand as written below, untouched here.
     - Large: body moves to --ub-text-xl (22px), h2 moves to --ub-text-2xl
       (28px), blockquote moves to --ub-text-xl to keep matching body per
       its original design (it's meant to read as "bold body text", not a
       separately-sized element).

   A third step was considered and deliberately dropped: --ub-text-2xl is
   already the largest token in the scale, so a third step would either
   reuse the same value as "Large" (no-op) or invent a new token outside
   the established scale — not a call to make unilaterally here. If a
   third step is wanted, it needs a new --ub-text-* token added to
   urhema_tokens.css first, not a bespoke rem value in this file.
   ========================================================================= */

[data-reading-size="large"] .ub-lesson__prose {
    font-size: var(--ub-text-xl);
}

[data-reading-size="large"] .ub-lesson__prose > h2 {
    font-size: var(--ub-text-2xl);
}

[data-reading-size="large"] .ub-lesson__prose blockquote {
    font-size: var(--ub-text-xl);
}

/* =========================================================================
   13.1 Immersive Reading Mode (Phase 13 Delight Layer)
   ========================================================================= */

/* Base transitions for animating into Immersive Mode */
.ub-lesson__grid {
    transition: grid-template-columns var(--ub-duration-slow, 0.5s) var(--ub-ease, ease), gap var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

.ub-lesson__main {
    max-width: 66ch; /* Comfortable reading measure, always on — not just inside Focus mode. Matches the immersive-mode value below so toggling Focus doesn't visibly resize the text, only hide/show chrome around it. Left-aligned (no margin-inline:auto) since the sidebar still sits beside this column here. */
    transition: max-width var(--ub-duration-slow, 0.5s) var(--ub-ease, ease), margin var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

.ub-lesson__sidebar,
.ub-lesson__breadcrumbs,
.ub-lesson__actions,
.ub-lesson__video,
.ub-lesson__eyebrow {
    transition: opacity var(--ub-duration-slow, 0.5s) var(--ub-ease, ease);
}

/* 
 * Active Immersive State: 
 * Re-flows the grid to collapse the sidebar and centers the reading pane.
 */
.is-immersive-active.ub-lesson .ub-lesson__grid {
    grid-template-columns: 1fr 0px;
    gap: 0;
}

.is-immersive-active.ub-lesson .ub-lesson__main {
    max-width: 66ch; /* Optimal reading measure */
    margin-inline: auto;
}

/* Hide surrounding chrome safely by stripping it from flow */
.is-immersive-active.ub-lesson .ub-lesson__sidebar,
.is-immersive-active.ub-lesson .ub-lesson__breadcrumbs,
.is-immersive-active.ub-lesson .ub-lesson__actions,
.is-immersive-active.ub-lesson .ub-lesson__video,
.is-immersive-active.ub-lesson .ub-lesson__eyebrow,
.is-immersive-active.ub-lesson #lesson-reflection-anchor,
.is-immersive-active.ub-lesson #lesson-quiz-anchor,
.is-immersive-active.ub-lesson .ub-biblestudy__floating-cta {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Typographic Delight: Drop-cap on the first paragraph */
.is-immersive-active.ub-lesson .ub-lesson__prose > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding-right: 0.1em;
    padding-top: 0.1em;
    color: var(--ub-accent-700);
    font-family: var(--ub-font-heading);
    font-weight: 900;
}

/* Floating Toggle Button */
.ub-immersive-toggle {
    position: fixed;
    bottom: var(--ub-space-6);
    right: var(--ub-space-6);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--ub-space-2);
    padding: var(--ub-space-3) var(--ub-space-4);
    background: var(--ub-paper-raised, #ffffff);
    border: 1px solid var(--ub-line-strong, #e5e7eb);
    border-radius: var(--ub-radius-pill, 9999px);
    box-shadow: var(--ub-shadow-soft, 0 4px 6px rgba(0,0,0,0.05));
    color: var(--ub-ink-muted, #6b7280);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow, 0.05em);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity var(--ub-duration-fast, 0.2s) var(--ub-ease, ease), color var(--ub-duration-fast, 0.2s) var(--ub-ease, ease), border-color var(--ub-duration-fast, 0.2s) var(--ub-ease, ease);
}

    .ub-immersive-toggle:hover,
    .is-immersive-active .ub-immersive-toggle {
        opacity: 1;
        color: var(--ub-accent-700);
        border-color: var(--ub-accent-500);
    }

/* On Scroll: Fade out the toggle and the global site header */
.is-immersive-scrolling .ub-immersive-toggle,
.is-immersive-scrolling .ub-site-header /* Targets Master layout header safely */ {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-100%);
}

.ub-site-header {
    transition: opacity var(--ub-duration-slow, 0.5s) var(--ub-ease), transform var(--ub-duration-slow, 0.5s) var(--ub-ease);
}

/* Accessibility: Disable transitions if motion is restricted */
@media (prefers-reduced-motion: reduce) {
    .ub-lesson__grid,
    .ub-lesson__main,
    .ub-lesson__sidebar,
    .ub-lesson__breadcrumbs,
    .ub-lesson__actions,
    .ub-lesson__video,
    .ub-lesson__eyebrow,
    .ub-immersive-toggle,
    .ub-site-header {
        transition: none !important;
    }
}