/* ==========================================================================
   Print / PDF stylesheet

   These pages get printed to PDF and sent to affiliate programs as evidence
   that required disclosures are present, so the priority here is that nothing
   required is missing, covered, or illegible. Visual polish is secondary.

   LOADED LAST, deliberately. `nav { position: fixed }` is redefined in eight
   page stylesheets (card, cards, best-category, landing, faq, howitworks,
   pricing, plus styles.css), all of which load after styles.css. A media query
   adds no specificity, so a print rule placed in styles.css would lose to
   every one of them and silently work on only the two pages that don't
   redefine nav. Linking this file after the page stylesheet in header.ejs
   makes source order do the work instead of !important.

   Wrapped in @media print as well as carrying media="print" on the link, so
   the rules stay scoped even if the attribute is ever dropped.
   ========================================================================== */

@media print {

    /* ---------------------------------------------------------------------
       1. Colour

       The design puts white text on dark gradients in a lot of places -- every
       page header, the comparison table's header row (which names both cards),
       every footer, the badges. Browsers drop background colours when printing
       by default, which would render all of that white-on-white: present in the
       DOM, invisible on the page. That's the worst possible failure for a
       compliance artifact, because it looks fine on screen.

       print-color-adjust: exact forces those surfaces to print and, unlike
       relying on the reader to tick "Background graphics" in the print dialog,
       it doesn't depend on how the PDF happened to be generated.
       --------------------------------------------------------------------- */
    html {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page {
        margin: 0.5in;
    }

    /* ---------------------------------------------------------------------
       2. Site furniture

       The fixed nav is what overlaps content on every sheet, and body's 5rem
       top padding exists only to clear it. Unpinned rather than hidden: the
       logo and tagline identify the publisher on page one, which is worth
       keeping on something sent to an affiliate. The menu links aren't.
       --------------------------------------------------------------------- */
    body {
        padding-top: 0;
    }

    nav {
        position: static;
        box-shadow: none;
        padding: 0 0 1rem;
    }

    .nav-links,
    .hamburger,
    .floating-compare-bar,
    .sticky-apply-bar {
        display: none;
    }

    /* Sticky rather than fixed, so it only needs unpinning. */
    .category-nav {
        position: static;
    }

    /* ---------------------------------------------------------------------
       3. Interactive-only controls

       Things that do nothing on paper and only add noise. Apply buttons stay:
       an affiliate reviewing how their card is presented should see the CTA.
       --------------------------------------------------------------------- */
    #input-form,
    .hero-calculator h2,
    .hero-calculator-note,
    .compare-toggle,
    .info-tooltip {
        display: none;
    }

    /* Source order alone isn't enough here: cards.css sets
       `.card-list .compare-toggle { display: flex }`, a two-class selector that
       outranks the single class above whatever the order. Matched, not overridden
       with !important, so the next person can still reason about it. */
    .card-list .compare-toggle {
        display: none;
    }

    /* ---------------------------------------------------------------------
       4. Required disclosures

       These render at --neutral-400 on screen, which is correct there -- fine
       print shouldn't shout. In a PDF someone is reading specifically to
       confirm the attribution exists, 40%-grey 10pt type is the wrong call.
       Same words, same placement, just legible.
       --------------------------------------------------------------------- */
    .issuer-attribution,
    .card-required-phrases,
    .card-terms-link,
    .compare-legal-name,
    .compare-disclaimer,
    .card-disclaimer p,
    .advertiser-disclosure {
        color: var(--neutral-800);
    }

    /* Print the destination of the terms link. On screen the anchor text is
       enough; in a flattened PDF the href is the only evidence that the current
       T&C document was linked rather than a superseded one -- which is exactly
       the defect the Aug 10 matrix refresh introduced. Scoped to this class so
       the dozens of other links on a compare page stay clean. */
    .card-terms-link::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        word-break: break-all;
    }

    /* ---------------------------------------------------------------------
       5. Page breaks

       Not cosmetic. A compare-page legal block splitting mid-way puts a card's
       name on one sheet and its required phrases on the next, so a reviewer
       checking which phrases belong to which product has to reassemble it.
       --------------------------------------------------------------------- */
    .compare-legal,
    .compare-legal-card,
    .card-required-phrases,
    .issuer-attribution,
    .card-earn-terms,
    .advertiser-disclosure {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .contender-card,
    .card-result,
    .compact-card,
    .faq-item,
    .credit-row,
    .restriction-row,
    tr,
    img {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Repeat the comparison table's header row on each sheet it spans, so the
       columns stay attributable to the right card. */
    thead {
        display: table-header-group;
    }
}