/* An Canach online reader
 *
 * Two-page spread on desktop, single page below 1024px. The text layer is
 * transparent text positioned over the canvas so content stays selectable and
 * screen-reader accessible — the styling here is what makes it invisible but
 * present.
 */

/* The full-bleed breakout below is 100vw, which includes the vertical scrollbar
   and so overflows by its width. Clip those few pixels — `clip` rather than
   `hidden`, because `hidden` would create a scroll container and break the
   sticky toolbar. Scoped with :has() so it only applies on reader pages. */
html:has(.newsletter-reader),
body:has(.newsletter-reader) {
    overflow-x: clip;
}

.newsletter-reader {
    background: var(--chs-parchment, #f7f4ed);
    border: 1px solid rgba(47, 82, 51, 0.15);
    border-radius: var(--chs-radius, 6px);
    padding: 1rem;

    /* Break out of the Bootstrap container. A newsletter page confined to a
       ~700px column is unreadable; the reader needs the full viewport width so
       a whole page — or a two-page spread — can be shown at a usable size. */
    width: 100vw;
    max-width: 100vw;
    margin: 2rem 0 2rem 50%;
    transform: translateX(-50%);
}

/* Toolbar -------------------------------------------------------------- */

.reader-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid rgba(47, 82, 51, 0.15);

    /* Stay reachable while reading. The site navbar is sticky at 64px with
       z-index 1030, so sit directly beneath it and below it in stacking order. */
    position: sticky;
    top: 64px;
    z-index: 1020;
    background: var(--chs-parchment, #f7f4ed);
}

.newsletter-reader:fullscreen .reader-controls {
    top: 0;           /* no site navbar in fullscreen */
}

.reader-controls__group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reader-controls button {
    min-width: 2.25rem;
    min-height: 2.25rem;      /* comfortable touch target */
}

.reader-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.reader-pageinput {
    width: 4rem;
    text-align: center;
    padding: 0.25rem;
    border: 1px solid rgba(47, 82, 51, 0.3);
    border-radius: 4px;
    background: #fff;
}

.reader-pagecount {
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--chs-text-muted, #5a6b5d);
}

/* Stage ---------------------------------------------------------------- */

.reader-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    min-height: 20rem;
    overflow: auto;
    /* Room for a full page plus the toolbar, so "fit page" has something to
       fit into rather than collapsing to the content height. */
    max-height: calc(100vh - 11rem);   /* navbar + sticky toolbar + padding */
    padding: 0 1rem;

    /* A stable reading frame. Without this, fit-width would stretch a page
       across an entire wide monitor while fit-page shows a much narrower one,
       so the layout jumps every time the mode is toggled. Capping the stage
       keeps the boundary in the same place in both modes — and a newsletter
       page is not more readable at 1900px than at 1400px. */
    max-width: 1400px;
    margin: 0 auto;

    /* Reserve the vertical scrollbar's space up front. Without this the page is
       measured before the scrollbar appears, then the scrollbar takes width the
       canvas has already claimed, leaving a permanent horizontal scroll. */
    scrollbar-gutter: stable;
}

.reader-page {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
}

.reader-page canvas {
    display: block;
}

.reader-status {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--chs-text-muted, #5a6b5d);
}

.reader-status--error {
    color: #8a1c1c;
    font-weight: 600;
}

/* Text layer ----------------------------------------------------------- */

.reader-text-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    opacity: 1;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 2;
}

.reader-text-layer span,
.reader-text-layer br {
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    color: transparent;      /* invisible, but selectable and readable by AT */
}

.reader-text-layer ::selection {
    background: rgba(26, 77, 107, 0.35);
}

.reader-text-layer .endOfContent {
    position: absolute;
    inset: 100% 0 0;
    display: block;
    cursor: default;
    user-select: none;
}

/* Fullscreen ----------------------------------------------------------- */

.newsletter-reader:fullscreen {
    overflow: auto;
    padding: 1.5rem;
}

.newsletter-reader:fullscreen .reader-stage {
    min-height: 80vh;
}

/* Narrow screens ------------------------------------------------------- */

@media (max-width: 1023px) {
    .newsletter-reader {
        padding: 0.5rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .reader-stage {
        padding: 0;
        max-height: none;   /* let the page scroll naturally on small screens */
    }

    .reader-stage {
        /* Pinch-zoom needs somewhere to pan */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reader-controls {
        gap: 0.35rem;
    }

    .reader-controls__group--optional {
        display: none;    /* zoom/fullscreen: pinch-zoom covers this on touch */
    }
}

@media print {
    .newsletter-reader {
        display: none;    /* printing the canvas is worse than printing the PDF */
    }
}