/*
 * Site chrome only. Engine rules stay in home-scroll-story.css.
 * Do not override --ers-scene-opacity, --ers-copy-opacity, or --ers-video-opacity.
 */

.ers-compact-header .ers-story {
    --ers-brand: var(--color-brand, #1d4ed8);
    --ers-brand-ink: var(--color-brand-ink, #1e3a8a);
    --ers-ink: var(--color-ink, #111827);
    --ers-ink-2: var(--color-ink-2, #374151);
    --ers-muted: var(--color-muted, #6b7280);
    --ers-hairline: var(--color-hairline, #e5e7eb);
    --ers-success: var(--color-success, #16a34a);
    --ers-initial-header-height: 65px;
}

/* Six scenes / five clips: clamp(5*800px, 5*115svh, 5*1400px). */
html.ers-compact-header.ers-scroll-pending .ers-story {
    height: calc(100svh - var(--ers-initial-header-height) + clamp(4000px, 575svh, 7000px));
    min-height: calc(100svh - var(--ers-initial-header-height) + clamp(4000px, 575svh, 7000px));
}

@media (min-width: 768px) {
    .ers-compact-header .ers-story.is-enhanced .ers-progress {
        right: max(calc(7.5rem + 200px), calc(6.5rem + 200px + env(safe-area-inset-right, 0px)));
    }
}

@media (max-width: 767.98px) {
    .ers-compact-header .ers-story {
        --ers-initial-header-height: 61px;
    }
}

/* Match header Login / Free consultation buttons. */
.ers-compact-header .ers-story .ers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 2.375rem;
    white-space: nowrap;
    border-radius: var(--radius-sm, 4px);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.ers-compact-header .ers-story .ers-button--primary {
    border: 1px solid transparent;
    padding: 0.5rem 0.875rem;
    color: #fff;
    background: var(--color-brand, var(--ers-brand));
}

.ers-compact-header .ers-story .ers-button--primary:hover {
    background: var(--color-brand-ink, var(--ers-brand-ink));
}

.ers-compact-header .ers-story .ers-button--secondary {
    border: 1px solid var(--color-hairline, var(--ers-hairline));
    padding: 0.5rem 0.75rem;
    color: var(--color-ink, var(--ers-ink));
    background: var(--color-surface, #f9fafb);
}

.ers-compact-header .ers-story .ers-button--secondary:hover {
    color: var(--color-brand, var(--ers-brand));
    border-color: var(--color-brand, var(--ers-brand));
}

@media (max-width: 767.98px) {
    .ers-compact-header .ers-story .ers-button {
        min-height: 2.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /*
     * Engine copy pane is overflow-y:auto + overscroll-behavior:contain.
     * That eats wheel/touch when the cursor is on the text half, so the
     * playhead never moves. Keep CTAs clickable; let gestures hit the stage.
     */
    html.ers-compact-header .ers-scroll-pending .ers-story .ers-scene-copy,
    html.ers-compact-header .ers-story.is-enhanced .ers-scene-copy {
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: auto;
        touch-action: pan-y;
    }

    html.ers-compact-header .ers-scroll-pending .ers-story .ers-scene-copy,
    html.ers-compact-header .ers-story.is-enhanced .ers-scene.is-interactive .ers-scene-copy {
        pointer-events: none;
    }

    html.ers-compact-header .ers-story .ers-scene-copy a,
    html.ers-compact-header .ers-story .ers-scene-copy button {
        pointer-events: auto;
    }
}