/** Print styles */

@media print {
    :root {
        font-size: 10pt; /* 16px -> 12pt */
        box-sizing: border-box;
        float: none;
    }

    @page { 
        margin: 2cm;
    }

    /**********************************************************
     * Layout.
     **********************************************************/

    /* page-break properties don't work inside of CSS Grid. */
    body {
        display: block;
    }

    body > header,
    body > article {
        width: 85%;
        margin: 0 auto;
        position: relative;
    }

    body > header > *,
    body > article > * {
        padding-right: 0;
    }

    header > #byline,
    article aside,
    figcaption {
        position: static;
        width: 100%;
    }

    /**********************************************************
     * Minor styling overrides.
     **********************************************************/

    header > #byline {
        margin-top: -2rem; /* -3.5rem is a bit too much overlap with single-column layout. */
    }

    article aside {
        padding: calc(var(--padding) / 2);
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .move-up {
        margin-top: auto; /* Override the minute positioning. */
    }

    .actors {
        flex-direction: row;
    }

    .actors > div:first-child {
        margin-right: 15px;
        margin-bottom: 0;
    }

    .alice,
    .bob {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /**********************************************************
     * Page breaks.
     **********************************************************/

    #table_of_contents {
        page-break-before: always;
    }

    /* Keep commentary close to its referent. */
    /* TODO: This doesn't seem to be working for code blocks. */
    article p + aside,
    article p + .highlight {
        page-break-before: avoid;
        break-before: avoid;
    }

    article figure, 
    article figcaption,
    article aside,
    article img,
    article blockquote,
    article pre {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    article h1,
    article h2,
    article h3,
    article h4 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /**
     * Hack to keep header and content together.
     * https://stackoverflow.com/questions/9238868/how-do-i-avoid-a-page-break-immediately-after-a-heading/68268825#68268825
     */
    article h1::before,
    article h2::before,
    article h3::before,
    article h4::before {
        content: "";
        display: block;
        height: 8rem;
        margin-bottom: -8rem;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /**********************************************************
     * Demo.
     **********************************************************/

    .peritext-demo,
    .peritext-demo + figcaption {
        display: none; /* TODO: Get this working nicely. */
    }

    .peritext-demo .play-pause {
        display: none;
    }
}