/**
 * Magazine Shortcodes — online reader.
 *
 * The reader is served as a standalone document, so this file cannot lean on
 * anything the theme resets and has to set its own baseline.
 */

:root {
    --mag-reader-bar: #16181d;
    --mag-reader-bar-text: #ffffff;
    --mag-reader-stage: #33363d;
    --mag-reader-accent: #0b74ff;
    --mag-reader-control: rgba(255, 255, 255, 0.12);
    --mag-reader-bar-height: 56px;
}

* {
    box-sizing: border-box;
}

html,
body.magazine-reader-page {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.magazine-reader-page {
    background: var(--mag-reader-stage);
    color: var(--mag-reader-bar-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mag-reader {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---------------------------------------------------------------
 * Toolbar
 * --------------------------------------------------------------- */
.mag-reader-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    min-height: var(--mag-reader-bar-height);
    padding: 8px 16px;
    background: var(--mag-reader-bar);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mag-reader-back {
    flex: 0 0 auto;
    color: var(--mag-reader-bar-text);
    font-size: 14px;
    text-decoration: none;
    opacity: 0.85;
    white-space: nowrap;
}

.mag-reader-back:hover,
.mag-reader-back:focus {
    opacity: 1;
}

/* The title yields before the controls do: losing a few characters of the
   issue name is far better than losing the pager. */
.mag-reader-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mag-reader-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.mag-reader-pager,
.mag-reader-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mag-reader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: var(--mag-reader-control);
    color: var(--mag-reader-bar-text);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.mag-reader-btn:hover,
.mag-reader-btn:focus {
    background: rgba(255, 255, 255, 0.22);
}

.mag-reader-download {
    font-size: 14px;
    font-weight: 600;
    background: var(--mag-reader-accent);
    white-space: nowrap;
}

.mag-reader-download:hover,
.mag-reader-download:focus {
    background: #2f8bff;
}

.mag-reader-pageno {
    margin: 0;
}

.mag-reader-pageno input {
    width: 44px;
    height: 32px;
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--mag-reader-bar-text);
    font-size: 14px;
    text-align: center;
}

.mag-reader-total {
    font-size: 14px;
    opacity: 0.7;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Stage
 * --------------------------------------------------------------- */
.mag-reader-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0 40px;
}

.mag-reader-status {
    margin: 0;
    padding: 60px 16px;
    text-align: center;
    font-size: 15px;
    opacity: 0.8;
}

.mag-reader-status[hidden] {
    display: none;
}

/* min-content keeps the container at least as wide as the widest page, so a
   zoomed-in page can be scrolled to instead of having its left edge clipped by
   the centring. */
.mag-reader-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: min-content;
    padding: 0 16px;
}

.mag-reader-pages[hidden] {
    display: none;
}

/* The placeholder carries the page's height until its canvas arrives, so the
   scrollbar is the right length from the start and lazy rendering does not
   make the page jump under the reader's thumb. */
.mag-page {
    position: relative;
    flex: 0 0 auto;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* No max-width here on purpose: a zoomed-in page is meant to overflow the
   stage and be panned, not be squashed back to the viewport width. */
.mag-page canvas {
    display: block;
}

/* ---------------------------------------------------------------
 * Fallback embed
 * --------------------------------------------------------------- */
.mag-reader.is-embedded .mag-reader-stage {
    display: flex;
    padding: 0;
    overflow: hidden;
}

.mag-reader-fallback {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mag-reader-fallback iframe,
.mag-reader-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 60vh;
    border: 0;
    background: #ffffff;
}

.mag-reader-fallback p {
    margin: 0;
    padding: 12px 16px;
    text-align: center;
}

.mag-reader-fallback a {
    color: #ffffff;
}

/* ---------------------------------------------------------------
 * Narrow screens
 * --------------------------------------------------------------- */
@media (max-width: 782px) {
    .mag-reader-bar {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    /* The title is the one thing that can be read off the page itself, so it
       is what gets dropped when the bar runs out of room. */
    .mag-reader-title {
        display: none;
    }

    .mag-reader-tools {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .mag-reader-zoom {
        display: none;
    }

    .mag-reader-stage {
        padding: 8px 0 24px;
    }

    .mag-reader-pages {
        gap: 8px;
    }
}

@media (max-width: 420px) {
    .mag-reader-download {
        padding: 0 8px;
        font-size: 13px;
    }
}