/* ═══════════════════════════════════════════════════════════════════════
   TaxClue — site-wide print stylesheet
   Added 2026-09-06. Loaded from templates/layouts/main.php with
   media="print", so it costs a non-blocking fetch and never touches the
   screen rendering.

   Goal: any page — a blog article, a checklist, a resource guide, a
   calculator result — prints (or "Save as PDF"s) as a clean, readable
   document with a TaxClue watermark and a source line, instead of the
   screenshot-of-a-website that browsers produce by default.

   Companion: assets/js/print-watermark.js builds the watermark tiles and
   the document header/footer on `beforeprint`. The CSS here styles them;
   without the JS the page still prints cleanly, just unwatermarked.

   ── ONE THING TO KNOW BEFORE EDITING ────────────────────────────────
   Browsers print with "Background graphics" OFF by default, so anything
   built from background-color / background-image / box-shadow simply is
   not on the paper. Everything that MUST appear on the page — the
   watermark, table header shading, callout boxes — is therefore drawn
   with text and `border`, which always print. Do not "simplify" a border
   back into a background.
   ═══════════════════════════════════════════════════════════════════════ */

@page {
    size: A4 portrait;
    /* Top margin is generous because print-watermark.js puts the running
       TaxClue header in the flow at the top of the document, and Chrome's
       own header/footer strip lives in this margin too. */
    margin: 14mm 12mm 16mm 12mm;
}

/* ═══ 1. Page chrome that must never reach the paper ═══════════════════ */
.tc-tricolor,
.tc-hdr,
.tc-mh,
.tc-mega,
.tc-nav,
.tcf,                      /* site footer                         */
.tc-tools-crumb,
#tc-loader,
#tc-progress,
#btt,                      /* back to top                         */
.wa-f, .wa-c,              /* WhatsApp FAB + chat panel           */
.veda-fab, #veda-fab, .veda-panel,
.bg-canvas, .bg-grid, .orb,
.skip-link,
.bp-progress, .bp-sidebar, .bp-share, .bp-lead, .bp-veda,
/* Sidebar cards ("Related Services", "Popular Articles"). Hiding
   .bp-sidebar alone is not enough: single.php absorbs the sidebar into
   .bp-main on narrow layouts, so the cards outlive their wrapper. */
.bp-sb-card, .bp-sb-card-hd, .bp-sb, .bp-sb-wrap,
/* The whole post-article discovery block — "Related Guides", "Most
   Viewed Articles", "Explore Services". Matched as a family rather than
   named one class at a time: hiding .bp-sb-card first still left a full
   printed page of unrelated headlines on the end of every article,
   because the visible list was .bp-disc-popular, a second render of the
   same data further down the page. */
[class^="bp-disc"], [class*=" bp-disc"],
.bp-back-top, .bp-smart-actions, .bp-rail, .bp-rail-action-cta,
.bp-inline-cta, .bp-bottom-cta, .bp-helpful, .bp-also-section,
.bp-calc-bridge, .bp-resource, .bp-hero-badges, .bp-hero-calc,
.bp-voice,                 /* read-aloud player — printed as an empty box */
/* The article's cover art is a generated 1200×630 OG card — a full-width
   dark navy slab that eats a third of page 1 and a lot of toner, and
   carries no information the printed header does not already give. */
.bp-featured, .bp-featured-placeholder,
.bp-hero-img-wrap, .bp-hero-right--img, .bp-hero-img-overlay,
.kq-ad, .sp-exit-overlay, #spExitOverlay,
.tc-popup, .tc-popup-overlay,
.rc-cta, .rc-share, .rc-toc-float,
.gs-cta, .gs-sticky-cta, .gs-form, .sp-form, .lead-form,
.cw-actions, .lc-actions,
[data-noprint],
nav[aria-label="Breadcrumb"], nav[aria-label="breadcrumb"],
audio, video, iframe, .social-carousel {
    display: none !important;
}

/* Any element the JS marks as chrome for this print run. */
.tc-print-hide { display: none !important; }

/* ═══ 2. Reset the page shell to plain paper ═══════════════════════════ */
html, body {
    background: #fff !important;
    color: #000 !important;
    /* main.php pushes body down by the fixed header's height. On paper
       there is no fixed header, so that padding is a blank band at the
       top of page 1. */
    padding-top: 0 !important;
    margin: 0 !important;
    width: auto !important;
    font-size: 11pt;
    line-height: 1.55;
}

/* Grid/flex page layouts collapse to a single column — a 2-column
   article + sidebar layout prints as two narrow ribbons otherwise. */
.bp-layout, .rc-layout, .gs-layout, .sp-layout, .lc-layout,
main, #main-content, .container, .tc-container {
    display: block !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Cards/panels: keep their shape as a hairline border (which prints),
   drop the fill and radius (which do not).

   The :not(#…) chain is not decoration. blog/single.php loads
   blog-article-styles.css and blog-light.css from the page BODY, i.e.
   after this file, and those rules are themselves !important on a
   two-part selector — `html[data-theme="light"] .bp-hero { background:
   #E7EDF3 !important }` is (0,2,1) and beat a plain `.bp-hero` here, so
   the article hero printed as a solid grey slab. Three phantom-id
   :not()s score (3,0,0) and settle it for good. */
.bp-main:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.bp-hero:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.bp-hero-inner:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.bp-content:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.rc-cl-wrap:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.rc-card:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.rc-panel:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.gs-card:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.sp-card:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.lc-card:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
.cw-card:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c) {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 12pt !important;
    max-width: 100% !important;
}

/* Same reason, for the page as a whole — several themes paint the article
   canvas from a `html[data-theme=…]` selector. */
html:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
body:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c) {
    background: #fff !important;
    color: #000 !important;
}

/* ═══ 3. Typography ════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.bp-h1, .rc-h1, .gs-h1 {
    color: #0A132B !important;
    font-family: Georgia, 'Times New Roman', serif;
    /* Never leave a heading stranded as the last line of a page. */
    break-after: avoid-page;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
}
h1, .bp-h1 { font-size: 20pt !important; margin: 0 0 6pt; }
h2 { font-size: 15pt !important; margin: 16pt 0 5pt; }
h3 { font-size: 12.5pt !important; margin: 12pt 0 4pt; }
h4, h5, h6 { font-size: 11pt !important; margin: 10pt 0 4pt; }

p, li, td, th, dd, dt {
    color: #000 !important;
    orphans: 3;   /* never push 1–2 lines of a paragraph to the next page */
    widows: 3;
}

.bp-content, .rc-body, .gs-body {
    font-size: 11pt !important;
    line-height: 1.55 !important;
    color: #000 !important;
}

blockquote {
    border-left: 2pt solid #C01530 !important;
    background: none !important;
    padding: 2pt 0 2pt 10pt !important;
    margin: 8pt 0 !important;
    font-style: italic;
    break-inside: avoid;
    page-break-inside: avoid;
}

code, pre, .rc-mono {
    font-family: 'Courier New', monospace;
    font-size: 9.5pt;
    background: none !important;
    border: 1px solid #CCC !important;
}
pre { white-space: pre-wrap !important; word-wrap: break-word; break-inside: avoid; }

/* ═══ 4. Links — the URL has to survive onto paper ═════════════════════ */
a, a:visited {
    color: #000 !important;
    text-decoration: underline !important;
}
/* Start by taking every printed href away, then hand it back only where
   it earns its place.

   This reset is doing real work, not tidying: assets/css/mobile.css has
   an older @media print block whose `a[href]::after { content: ' ('
   attr(href) ')' }` fires on EVERY link on the page — which is why the
   category chip above the headline printed as
   "GST (/BLOG/CATEGORY/GST)". blog-article-styles.css carries a second
   copy of the same idea scoped to .bp-content, and it loads from the
   page body, i.e. after this file. Neither can be edited away safely
   without touching pages that predate this stylesheet, so both are
   overridden here instead. */
a::after,
a[href]::after {
    content: "" !important;
}

/* Prose links, and only prose links, print their destination. A reader
   holding the paper cannot click, so the URL is the whole point — but
   navigation furniture (chips, pills, buttons, breadcrumbs) just
   becomes unreadable when its path is spelled out. Class-level
   specificity puts these back above the reset. */
.bp-content a[href^="http"]::after,
.rc-body a[href^="http"]::after,
.gs-body a[href^="http"]::after,
article a[href^="http"]::after {
    content: " (" attr(href) ")" !important;
    font-size: 8.5pt;
    color: #444;
    word-break: break-all;
}
a[href^="#"]::after,
a[href^="tel:"]::after,
a[href^="mailto:"]::after,
a[href^="javascript:"]::after { content: "" !important; }
/* Chips, pills, buttons and headings that happen to be links. */
.bp-content a.bp-chip::after,
.bp-content h1 a::after, .bp-content h2 a::after,
.bp-content h3 a::after, .bp-content h4 a::after,
[class*="chip"] a::after, [class*="pill"] a::after,
[class*="badge"] a::after, [class*="btn"] a::after,
a[class*="chip"]::after, a[class*="pill"]::after,
a[class*="badge"]::after, a[class*="btn"]::after { content: "" !important; }

/* ═══ 5. Tables — the format checklists and calendars actually use ═════ */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9.5pt !important;
    margin: 8pt 0 !important;
    break-inside: auto;
    page-break-inside: auto;
}
/* A table that spills over a page break repeats its header row, so the
   second half is still readable. */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr    { break-inside: avoid; page-break-inside: avoid; }

th, td {
    border: 0.5pt solid #999 !important;
    padding: 4pt 6pt !important;
    text-align: left;
    vertical-align: top;
    color: #000 !important;
    background: none !important;
}
/* Header rows must be forced back to ink-on-white, and the :not(#…)
   chain is load-bearing. blog/single.php emits, from a <style> block in
   the page body:

     html[data-theme="light"] .bp-content thead th {
         background:#0A132B!important; color:#FBFAF7!important }

   White text on a navy fill. Browsers print with "Background graphics"
   OFF by default, so the fill does not print — the white text does, onto
   white paper, and every table on the site loses its header row. It
   looked fine in the headless PDF above only because --print-to-pdf
   turns backgrounds ON, which is not what a person clicking Print gets.
   (0,2,2) needs beating, hence the three phantom ids. */
th:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
thead th:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
thead td:not(#_tcp_a):not(#_tcp_b):not(#_tcp_c) {
    font-weight: 700;
    color: #0A132B !important;
    background: none !important;
    /* A heavier bottom rule reads as a header row on any printer, with
       no dependence on the background setting. */
    border-bottom: 1.5pt solid #0A132B !important;
}

/* Zebra striping has the same problem in reverse — it is invisible with
   backgrounds off and pure noise with them on. The row borders already
   separate the rows. */
tbody tr:nth-child(even):not(#_tcp_a):not(#_tcp_b):not(#_tcp_c),
tbody tr:nth-child(odd):not(#_tcp_a):not(#_tcp_b):not(#_tcp_c) {
    background: none !important;
}

/* ═══ 6. Checklists ═══════════════════════════════════════════════════
   The checklist is the thing people actually print, so it gets real
   tick-boxes: an empty square drawn with a border, which prints, in
   place of the on-screen SVG tick, which is decorative. */
.rc-cl-wrap, .bp-checklist, .tc-checklist, ul.checklist {
    break-inside: avoid;
    page-break-inside: avoid;
}
.rc-cl-item, .bp-checklist li, .tc-checklist li, ul.checklist li {
    break-inside: avoid;
    page-break-inside: avoid;
    list-style: none !important;
    position: relative;
    padding: 3pt 0 3pt 18pt !important;
    margin: 0 !important;
    border-bottom: 0.25pt solid #DDD !important;
}
.rc-cl-item::before, .bp-checklist li::before,
.tc-checklist li::before, ul.checklist li::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 5pt;
    width: 8pt;
    height: 8pt;
    border: 0.75pt solid #0A132B;
    background: none !important;
}
/* Hide the screen tick/icon inside a checklist row — the printed square
   is there to be ticked by hand. */
.rc-cl-item svg, .bp-checklist li svg, .tc-checklist li svg { display: none !important; }

.rc-cl-section {
    break-after: avoid-page;
    page-break-after: avoid;
    color: #C01530 !important;
    border-bottom: 0.5pt solid #999 !important;
    margin: 12pt 0 5pt !important;
}

/* ═══ 7. Images and figures ═══════════════════════════════════════════ */
img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
}
figure { margin: 8pt 0 !important; break-inside: avoid; page-break-inside: avoid; }
figcaption { font-size: 9pt; color: #555 !important; }

/* ═══ 8. Watermark (built by print-watermark.js) ═══════════════════════
   One position:fixed layer, repeated by the browser on every sheet. The
   earlier version tiled the marks down the document and sized the column
   from the on-screen height — which is far taller than the print layout —
   and the article came out with four blank watermarked pages on the end.
   See the note in print-watermark.js.

   The layer sits ON TOP of the content, not behind it. Behind was the
   first attempt and the watermark did not appear at all: the article's
   own panels paint an opaque background over it, so a z-index:-1 mark
   shows only in the gaps between cards. On top at 7% ink it reads as a
   watermark and leaves the text fully legible — which is how
   watermarking tools do it. */
#tc-print-wm {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    overflow: hidden;
}
#tc-print-wm .tc-wm-tile {
    position: absolute;
    transform: rotate(-32deg);
    transform-origin: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 30pt;
    letter-spacing: 3pt;
    white-space: nowrap;
    /* Light enough to read straight through. Text colour prints without
       the background-graphics option; a background image would not. */
    color: rgba(10, 19, 43, .07) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ═══ 9. Document header + footer (built by print-watermark.js) ═══════ */
#tc-print-head {
    display: block !important;
    border-bottom: 1.5pt solid #C01530;
    padding-bottom: 5pt;
    margin-bottom: 12pt;
    font-family: Georgia, 'Times New Roman', serif;
}
#tc-print-head .tc-ph-brand {
    font-size: 15pt;
    font-weight: 700;
    color: #0A132B !important;
    letter-spacing: .5pt;
}
#tc-print-head .tc-ph-tag {
    font-size: 8.5pt;
    color: #5C6A80 !important;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .4pt;
    text-transform: uppercase;
}

#tc-print-foot {
    display: block !important;
    border-top: 0.75pt solid #999;
    margin-top: 16pt;
    padding-top: 6pt;
    font-size: 8.5pt;
    color: #333 !important;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    break-inside: avoid;
    page-break-inside: avoid;
}
#tc-print-foot .tc-pf-url { font-weight: 700; color: #0A132B !important; word-break: break-all; }
#tc-print-foot .tc-pf-legal { color: #666 !important; }

/* ═══ 9b. Keep the PDF a document, not a photo album ═══════════════════
   Measured on /blog/gst-rate-chart-…: printing this page produced a
   22-page, 152 MB PDF containing 497 embedded bitmaps — while the HTML
   has exactly 5 <img> tags. The bitmaps are Chrome rasterising every
   layer it cannot express as vectors: blur() on the ambient orbs,
   backdrop-filter on the glass panels, blend modes, masks. Each of those
   layers is re-rasterised at print DPI, per page.

   None of it means anything on paper, so all of it is switched off. This
   is what takes the file from ~150 MB to something you can actually
   email. Do not remove this block to "keep the design" in the PDF —
   the effects are invisible in print anyway; only their weight survives. */
*, *::before, *::after {
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    mask: none !important;
    -webkit-mask: none !important;
    clip-path: none !important;
    background-image: none !important;
    opacity: 1 !important;
    text-fill-color: currentColor;
    -webkit-text-fill-color: currentColor;   /* undo gradient-clipped headings */
}
/* The watermark is the one thing that must keep its faint tone. It is set
   after the reset above so the opacity:1 does not turn it solid black. */
#tc-print-wm .tc-wm-tile {
    color: rgba(10, 19, 43, .07) !important;
    -webkit-text-fill-color: rgba(10, 19, 43, .07) !important;
}

/* ═══ 10. Kill motion and reveal states ═══════════════════════════════
   Scroll-reveal leaves elements at opacity:0 until they scroll into
   view. In a print run nothing scrolls, so anything below the fold
   would print blank. */
*, *::before, *::after {
    animation: none !important;
    transition: none !important;
}
.reveal, .sp-reveal, .bp-reveal, .tc-reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Collapsed accordions/FAQ answers print open — a printed FAQ with the
   answers hidden is just a list of questions.
   <details> cannot be forced open from CSS (the closed state is a UA
   internal, not a display rule), so print-watermark.js sets .open on
   every <details> before the print and restores it afterwards. The rules
   below handle the site's own JS-driven accordions, which DO hide with
   max-height/opacity and so can be reopened here. */
details > summary { list-style: none; font-weight: 700; }
.tc-acc-body, .bp-faq-a, .gs-faq-a, .rc-faq-a {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
}