/* Print stylesheet for the /print/ view.

   The theme ships none, and Bulma's layout rules are scoped to `screen`, so on
   paper the page falls back to raw block flow: the first page keeps the card's
   padding and shadow, later pages don't, and nothing controls page breaks. */

/* A "universal" page box that fits inside BOTH US Letter and A4.

   Letter is 215.9 x 279.4mm, A4 is 210 x 297mm. A page laid out for one and
   printed at 100% on the other loses the difference off an edge — Letter
   content on A4 paper is 17.6mm too tall, which lands as a cut-off bottom.
   Sizing the page to the overlap (210 x 279mm) means the same output prints
   correctly on either, at actual size, with no shrink-to-fit.

   Margins on top of that: the bottom is deliberately the largest because the
   unprintable band a printer cannot reach is widest there — commonly 12-15mm
   on inkjets against 3-6mm on the sides. */
@page {
    size: 210mm 279mm;
    margin: 14mm 12mm 20mm;
}

/* A footer the page owns. The browser's own header/footer is drawn about 5mm
   from the paper edge, inside the band printers physically cannot reach, and
   no CSS can move it — there is no support for CSS page margin boxes. A
   position:fixed element instead repeats on every printed sheet and sits
   inside the @page margin, where the printer can actually put ink.

   So: turn the browser's "Headers and footers" OFF and this one takes over. */
.print-footer { display: none; }

@media print {
    .print-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 8pt;
        color: #666;
        text-align: center;
    }

    html, body {
        background: #fff;
        font-size: 11pt;
    }

    /* The card frame only ever draws on the first and last page, so the text
       inset changes partway through the document. Drop it and let @page own
       the margins. */
    .section { padding: 0 !important; }
    .section > .columns > .column,
    .section > .columns {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Keep the masthead — title, author, image, stat table — on one page. */
    .section > .columns > .column > .container:first-of-type,
    .columns.is-mobile { break-inside: avoid; page-break-inside: avoid; }

    /* A heading stranded at the foot of a page with its content overleaf is
       the main thing that made this read badly. */
    h1, h2, h3, h4, h5 {
        break-after: avoid-page;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Never split a single ingredient or step across two pages. */
    li, blockquote, pre, table, figure, img {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    p { orphans: 3; widows: 3; }

    ol, ul { padding-left: 1.2em; }

    /* Footnotes travel with the recipe; keep the block intact if it fits. */
    .footnotes {
        break-inside: avoid;
        page-break-inside: avoid;
        border-top: 1px solid #dbdbdb;
        padding-top: .5em;
        font-size: 9.5pt;
    }

    /* Links are dead on paper — print the target so a reference is usable. */
    .content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 85%;
        word-break: break-all;
    }
    .content a { text-decoration: none; color: inherit; }

    /* Chrome drops backgrounds by default; make sure nothing depends on one. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Printing a recipe page directly (Ctrl+P on /tavern_pickled_eggs/ rather than
   using the print button) would otherwise carry the nav bar, search box and
   print icon onto the paper. */
@media print {
    .navbar,
    #printButton,
    #searchResults,
    footer { display: none !important; }

    /* The hero image is sized for a screen and otherwise eats an entire sheet
       on its own before the recipe even starts. */
    figure.image img {
        max-height: 7cm;
        width: auto !important;
        height: auto !important;
    }
}