/**
 * Steven Sheeley Author Platform
 * Excerpt / Sample Chapter Reader Styles
 * Version: 20250626
 */

.excerpt-main {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
}

.excerpt-topbar {
    max-width: 820px;
    margin: 0 auto var(--space-lg);
    padding: 0 var(--space-lg);
}

.excerpt-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.excerpt-back:hover {
    color: var(--color-accent);
}

.excerpt-series-tag {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: var(--space-md);
}

/* The "paper" reading panel — a fixed-height reading window (one screen tall).
   Only one section shows at a time; long sections overflow off the bottom edge. */
.reader-page {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    background: #f7f4ec;
    color: #1a1a1a;
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 6vw, 5.5rem) 0;
    /* Fallback height (JS overrides this with a precise per-viewport value so the
       window never runs past the bottom of the screen). */
    height: calc(100vh - var(--nav-height) - 160px);
    overflow: hidden;
    /* Small margin below so the bottom edge of the window is visible, not flush
       against the viewport bottom. */
    margin-bottom: var(--space-lg);
}

/* Soft fade at the bottom edge so overflowing text dissolves rather than hard-cuts */
.reader-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5rem;
    background: linear-gradient(to bottom, rgba(247, 244, 236, 0), #f7f4ec 85%);
    pointer-events: none;
    z-index: 2;
}

/* The stage that holds the head + the currently active section.
   Flex column: head takes its natural height, the active section fills the rest. */
.reader-stage {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reader-stage .chapter-head {
    flex: 0 0 auto;
}

.reader-stage .chapter-body {
    flex: 1 1 auto;
    min-height: 0; /* allow the flex child to shrink and enable inner scroll */
}

/* All body copy: Times New Roman, 12pt */
.reader-page,
.reader-page p {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 12pt;
    line-height: 1.7;
    color: #1a1a1a;
}

/* Centered heading block (first four lines) */
.chapter-head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.chapter-head .chapter-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 24pt;
    font-weight: 400;
    line-height: 1.2;
    /* Gap ONLY below the chapter title */
    margin: 0 0 1.4rem;
    color: #1a1a1a;
}

.chapter-head .chapter-subtitle {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 12pt;
    font-style: italic;
    font-weight: 400;
    /* No gap: subtitle, date, and location stay tight together */
    margin: 0;
    line-height: 1.5;
    color: #1a1a1a;
}

.chapter-head .chapter-meta {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 12pt;
    line-height: 1.5;
    margin: 0;
    color: #1a1a1a;
}

/* Body paragraphs: 0.30in first-line indent */
.reader-page .chapter-body p {
    text-indent: 0.30in;
    margin: 0 0 0.15rem;
}

/* Progressive-reveal segments — only ONE is "active" (in the window) at a time.
   Inactive segments are removed from flow entirely (display:none). */
.reveal-segment {
    display: none;
}

/* The active segment occupies the window and overflows off the bottom edge */
.reveal-segment.active {
    display: block;
}

/* Hide the inner scrollbar — advancing is gesture-driven, not raw scroll */
.reveal-segment {
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* old Edge/IE */
}
.reveal-segment::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                 /* Chrome/Safari */
}

/* --- Transition states applied to the active segment --- */

/* Fading/sliding IN (new section arriving from the bottom) */
.reveal-segment.enter {
    opacity: 0;
    transform: translateY(40px);
}
.reveal-segment.enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Sliding UP and OUT (current section leaving toward the top) */
.reveal-segment.leave {
    opacity: 1;
    transform: translateY(0);
}
.reveal-segment.leave-active {
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* First paragraph of each newly revealed section gets a small top offset for rhythm */
.reveal-segment > p:first-child {
    margin-top: 0;
}

/* "Continue reading" cue — floats at the bottom of the reading window */
.reveal-cue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 3;
    text-align: center;
    color: #8a7f6c;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    animation: cue-bounce 1.8s ease-in-out infinite;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

.reveal-cue.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes cue-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.65; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* Segment counter (e.g. "1 / 6") in the corner of the reading window */
.reveal-counter {
    position: absolute;
    top: 0.9rem;
    right: 1.1rem;
    z-index: 3;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: #b3a992;
}

/* End-of-chapter CTA (on the dark background, below the page) */
.excerpt-end-cta {
    max-width: 820px;
    margin: var(--space-xl) auto 0;
    padding: 0 var(--space-lg);
    text-align: center;
}

.excerpt-end-cta .cta-inner {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-xl) var(--space-lg);
}

.excerpt-end-cta h2 {
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

.excerpt-end-cta p {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    margin: 0 auto var(--space-lg);
    max-width: 520px;
    line-height: 1.7;
}

.excerpt-end-cta .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--color-accent);
    z-index: 1000;
    transition: width 120ms linear;
}

/* Extra spacing above the end CTA so it clearly sits "below the fold" */
.excerpt-end-cta {
    scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}

@media (max-width: 600px) {
    .reader-page {
        padding: 1.6rem 1.4rem 0;
        border-radius: 0;
    }
    .reader-page,
    .reader-page p,
    .chapter-head .chapter-subtitle,
    .chapter-head .chapter-meta {
        font-size: 13pt; /* slightly larger for small-screen legibility */
    }
    .reader-page .chapter-body p {
        text-indent: 0.28in;
    }
}

/* Reduced-motion: no fixed window, just show the whole chapter in normal flow */
@media (prefers-reduced-motion: reduce) {
    .reader-page {
        height: auto;
        overflow: visible;
        padding-bottom: clamp(2.5rem, 6vw, 5rem);
    }
    .reader-page::after { display: none; }
    .reader-stage { height: auto; overflow: visible; }
    .reveal-segment,
    .reveal-segment.active { display: block; }
    .reveal-cue { display: none; }
    .reveal-counter { display: none; }
}