/* ==========================================================
   CONTEXT READER — continuous two-column flow (shell only)
   ----------------------------------------------------------
   Typography stays entirely with Elementor's own Text Editor
   widget styling — nothing here touches font, colour, or
   spacing. This file only defines: the two-pane grid, each
   pane's fixed-height clipping window (position is driven by
   `top` on an absolutely-positioned box inside it, not by
   native scrolling), and the ::highlight() colour reader.js
   uses to dim the top-of-pane-1 / bottom-of-pane-2 edge lines
   as you scroll.
   ========================================================== */

:root {
    --sp-height: 620px;  /* pane height */
    --sp-gap:    3%;     /* space between the two panes */
}

.sp-reader-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-gap);
}

.sp-reader-pane {
    position: relative;
    overflow: hidden;
}

/* The actual edge-fade colour. reader.js registers CSS Custom Highlight
   ranges named sp-ghost-top / sp-ghost-bottom over the real rendered text
   nearest each edge — this just says what colour that highlighted text
   should turn. No highlight registered = no visual effect at all. */
::highlight(sp-ghost-top),
::highlight(sp-ghost-bottom) {
    color: #8A8A8A;
}

/* ==========================================================
   MOBILE — reader.js never wraps the widget below 768px,
   so nothing here needs to override anything.
   ========================================================== */