/* ==========================================================================
  Print Rules
  Note: using named colors for clarity across applications
 ========================================================================= */

@media print {
    :root, * {
        --font-body: georgia, serif;
        --font-heads: 'proxima-nova', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
    }

    /* Hide non-essential elements --------------------------------------- */
    #debug-kit-toolbar,
    header,
    .header-wrap,
    .hero__img,
    aside,
    footer,
    button,
    nav,
    form,
    iframe,
    video,
    .visually-hidden--skip {
        display: none !important;
    }

    /* Add some page layout rules ---------------------------------------- */
    .cnm-main {
        margin: 0.25cm; /* for viewing in browser print rendering */
    }

    /* @page Rules ------------------------------------------------------- */
    @page {
        size: a4;
        margin: 1.75cm 1.25cm; /* for actual margins when printing or saving to print (combined with above) */
        counter-reset: page; /* Reset page counter to 1 */

        /* margin box at top right showing page number */
        @top-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 10pt;
        }
    }

    @page :first {
        margin-top: 3cm;
    }

    @page :left {
        margin-left: 3cm;
        margin-right: 2cm;
    }

    @page :right {
        margin-left: 2cm;
        margin-right: 3cm;
    }

    /* Typography, Links, Etc. ------------------------------------------- */
    body {
        margin: 0; /* Remove default body margins */
        padding: 0;
        font-family: var(--font-body), serif; /* Use a readable serif font */
        background: white;
        color: black; /* Black text is essential for print */
        font-size: 12pt; /* Standard readable print size */
        line-height: 1.6;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 18pt; }
    h4 { font-size: 16pt; }
    h5 { font-size: 14pt; }
    h6 { font-size: 12pt; }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heads), sans-serif;
    }

    /* Make links visible in printed page */
    a {
        color: blue;
        font-style: italic;
        text-decoration: none;
        word-wrap: break-word;
    }

    /* Print the URL for links */
    a::after {
        content: " (" attr(href) ")";
        color: dimgrey;
        word-wrap: break-word;
    }

    /* Don't print URLs for internal or JavaScript links */
    a[href^="/"]::after,
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Save ink */
    img {
        filter: grayscale(100%);
        max-width: 100%;
    }

    /* Sane page breaks */
    img, pre, blockquote {
        page-break-inside: avoid;
    }

    h1 {
        page-break-before: always;
    }

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

    pre {
        padding: 0.25cm;
        border: 1px solid gray;
        border-radius: 0.25cm;
    }

    code {
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* Simplify tables --------------------------------------------------- */
    table {
        width: 100%; /* Make table full width */
        border-collapse: collapse; /* Merge table borders */
        font-family: var(--font-heads),sans-serif;
    }

    th, td {
        margin-block-end: 1em;
        border: 1px solid black; /* Add borders to cells */
        padding: 8px; /* Add padding for clarity */
        page-break-inside: avoid;
    }

    th {
        background-color: whitesmoke; /* Light background for headers */
    }
}