/*
Print stylesheet - prints just the page content, in black on white, whatever the Light/Dark setting - hibbittsdesign.org
The same as in Quark Open Publishing, with Quark 2's layout (grid columns, side list and theme toggle).
Based on the Grav Helios Open Reader print stylesheet. To leave something out of print, add the no-print class (as in Helios).
*/

@page {
    margin: 1.5cm 2cm;
}

@media print {
    /* Hide the header, menus, hero image, sidebar, footer, page navigation, the Git Sync link and the Copy as Markdown button */
    #header,
    .mobile-menu,
    .mobile-container,
    .modular-hero,
    #sidebar,
    #sections-nav,
    .theme-toggle,
    #footer,
    #listing-footer,
    .prev-next,
    .reader-progress,
    .reader-prev-next,
    .reader-back-link,
    .reader-sections-link,
    .reader-prev-next-top,
    .reader-resume,
    .section-list-start,
    .reader-search,
    .gitrepo-link-note,
    .smb-wrapper,
    .markdown-link-note,
    .no-print {
        display: none !important;
    }

    /* Embedded content (slides, videos, PDFs, H5P) can't be printed and would leave a blank box, so leave it out */
    .video-responsive,
    iframe {
        display: none !important;
    }

    /* The blog's hero holds the blog and post titles (and a post's date), so print it as plain
       text instead of hiding it: no image, overlay, arrow or tags (#blog-hero is the blog and
       post hero; other heroes stay hidden) */
    #blog-hero {
        display: block !important;
        background: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 0 0.75rem !important;
        color: #000 !important;
    }

    #blog-hero .image-overlay,
    #blog-hero #to-start,
    #blog-hero .tags,
    #blog-hero::before,
    #blog-hero::after {
        display: none !important;
    }

    #blog-hero .container {
        text-align: left !important;
        padding: 0 !important;
    }

    #blog-hero h1,
    #blog-hero h2,
    #blog-hero .blog-date {
        color: #000 !important;
        text-shadow: none !important;
    }

    /* the size of a page title, rather than the hero's large display size */
    #blog-hero h1 {
        font-size: 1.75rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
    }

    #blog-hero h1 strong {
        font-weight: inherit !important;
    }

    #blog-hero h2:empty {
        display: none !important;
    }

    #blog-hero h2 {
        font-size: 1.15rem !important;
    }

    /* a post's subtitle (Quark 2's .lead) lines up under the title instead of being centred */
    #blog-hero .lead {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    /* Content fills the page (Quark 2's columns are a grid). columns: auto turns off the
       newspaper-style columns Quark 2's base CSS also gives .columns, which would otherwise
       split the printed text in two once it is no longer a grid */
    .columns {
        display: block !important;
        columns: auto !important;
    }

    /* Quark 2's base CSS also keeps each column in one piece, so a long blog post was pushed
       to page 2, leaving page 1 blank; let the content break across pages instead */
    .columns > * {
        break-inside: auto !important;
    }

    /* wide tables print in full, rather than inside their sideways scrolling box */
    .reader-table-scroll {
        overflow: visible !important;
    }

    #item,
    #sections-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #body-wrapper,
    #start {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Black on white, whatever the Dark Mode setting */
    html,
    body {
        background: #fff !important;
    }

    *,
    *::before,
    *::after {
        color: #000 !important;
        background-color: transparent !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /* With no background colours, outline callouts, cards and buttons */
    .md-alert,
    .card,
    .btn {
        border: 0.05rem solid #999 !important;
    }

    /* Show the address after links to other sites, but not on buttons or cards */
    main a[href^="http"]:not(.btn):not(.embedly-card):not(.section-card-link)::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    .link-preview-card a::after {
        content: none !important;
    }

    /* Keep callouts, cards, images and similar blocks in one piece */
    .md-alert,
    .card,
    .link-preview-card,
    img,
    figure,
    pre,
    blockquote,
    table {
        break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Keep headings with the content that follows, and avoid single stray lines */
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }

    /* Repeat a table's header row on each printed page */
    thead {
        display: table-header-group;
    }

    /* Wrap long code lines rather than cutting them off */
    pre,
    code {
        white-space: pre-wrap !important;
        word-wrap: break-word;
    }
}