/*
 * print.css — Calculixy Global Print Stylesheet
 * ==============================================
 * Loaded on all 38 calculator pages and 4 blog/guide pages.
 * Targets: Ctrl+P / browser print, Save as PDF (Chrome, Safari, Firefox).
 *
 * Architecture:
 *   1. RESET — strip screen chrome, fix layout to single column
 *   2. HIDE  — every interactive, ad, and navigation element
 *   3. TOKEN REMAP — map CSS vars to pure black/white/grey
 *   4. TYPOGRAPHY — ensure legible serif/monospace font sizing
 *   5. RESULT CARDS — high-contrast data readout boxes
 *   6. TABLES — amortization, tier, data-table, guide-table
 *   7. FORMULA / CODE BLOCKS — monospace, bordered
 *   8. BAR CHARTS / VISUAL METERS — graceful degradation
 *   9. BLOG / GUIDE ARTICLES — long-form print layout
 *  10. PAGE BREAKS — prevent awkward mid-element splits
 *  11. PRINT HEADER — inject calc name + URL as page context
 *  12. FOOTER — page numbers via CSS counters
 */

@media print {

  /* ─────────────────────────────────────────────────────────────
     1. RESET & SINGLE-COLUMN LAYOUT
     Force the two-column calc-area grid into a single printing
     column. The guide-sidebar is hidden entirely (see §2),
     so the calculator column gets full page width.
     ───────────────────────────────────────────────────────────── */

  *,
  *::before,
  *::after {
    /* Strip all box-shadows and text-shadows — they don't print
       well on B&W printers and bleed into adjacent ink */
    box-shadow:  none !important;
    text-shadow: none !important;
    /* Remove all CSS transitions/animations — irrelevant on print */
    animation:        none !important;
    transition:       none !important;
    animation-delay:  0s   !important;
  }

  html, body {
    width:  100%;
    margin: 0;
    padding: 0;
    /* Standard print paper width: 8.5in minus 0.75in margins each side */
    font-size: 11pt;
    line-height: 1.5;
    background: #fff !important;
    color: #000 !important;
    /* Prevent the dot-grid background from printing */
    background-image: none !important;
  }

  /* Disable the grid background pseudo-element (§ shared.css) */
  body::before { display: none !important; }

  /* Single-column layout: collapse the two-column calc grid */
  .calc-area {
    display: block !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .calculator-column {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    overflow: visible !important;
  }

  /* Full-width content for blog/guide pages */
  .guide-article,
  .article-body,
  .cx-guide-article {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  main,
  #main-content {
    padding: 0 !important;
    margin: 0 !important;
  }


  /* ─────────────────────────────────────────────────────────────
     2. HIDE NON-ESSENTIAL ELEMENTS
     Exhaustive list of every interactive, navigational, ad, and
     chrome element that must not appear in a printed data export.
     ───────────────────────────────────────────────────────────── */

  /* Navigation */
  nav,
  .nav-tools,
  .nav-group,
  .nav-menu,
  .nav-btn,
  .nav-logo,
  .cx-hamburger,

  /* Mobile drawer */
  .cx-drawer,
  .cx-drawer-overlay,
  .cx-drawer-cat,
  .cx-drawer-cat-btn,
  .cx-drawer-cat-chevron,
  .cx-drawer-cat-links,

  /* Ads — all slot types */
  .cx-ad-wrap,
  .cx-ad-slot,
  .cx-ad-box,
  .cx-sticky,
  .hp-ad-strip,
  .hp-ad-strip-inner,
  .ad-sidebar,
  .ad-slot,
  #cx-ad-wrap,

  /* Interactive calculator UI (not data) */
  .calc-btn-primary,
  .tab-btn,
  .tab-row,
  .cx-reset-btn,
  .cx-form-footer,
  .swap-btn,
  .btn-grid,
  .btn,

  /* Sidebar and cross-links */
  .guide-sidebar,
  .mini-related,
  .related-grid,
  .related-link,
  .guide-actions,

  /* Action bars (Print/Copy/Share buttons inside results) */
  .calc-action-bar,
  .result-actions,
  .result-action-btn,
  .share-modal,
  .share-modal-backdrop,

  /* UX chrome */
  .cx-cookie-banner,
  .cx-restore-notice,
  .cx-toast,
  .cx-validation-msg,
  .skip-link,
  .info-strip,
  #back-to-top,

  /* Hero block */
  .hero,
  .hero-tag,

  /* Page chrome */
  footer,

  /* FAQ section (interactive accordion — not data) */
  .faq-section,
  .faq-item,

  /* Input controls — keep .calc-form printable because many result panels live inside it */
  .form-row,
  .form-group,

  /* Visual-only interactive bars (replaced by table data below) */
  [id$="-bar-noi"],
  [id$="-bar-ds"],
  [id$="-bar-noi-wrap"],
  [id$="-bar-ds-wrap"],

  /* CX UX input chrome */
  .cx-input-wrap .cx-input-prefix,
  .cx-input-wrap .cx-input-suffix,
  .cx-input-hint {
    display: none !important;
  }

  /* Many calculator result panels are nested inside .calc-form. Do not hide
     the form wrapper in print; hide only its interactive controls so current
     computed results remain printable after a successful calculation. */
  .calc-form {
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .calc-form input,
  .calc-form select,
  .calc-form textarea,
  .calc-form label,
  .calc-form .section-label,
  .calc-form .tab-row,
  .calc-form .tab-btn,
  .calc-form .calc-btn-primary,
  .calc-form .btn,
  .calc-form .cx-form-footer {
    display: none !important;
  }


  /* ─────────────────────────────────────────────────────────────
     3. CSS TOKEN REMAP
     Map all screen-optimised colour tokens to pure B&W print
     values. Browsers do honour CSS variables in @media print so
     this override propagates through every component.

     Strategy:
     • Backgrounds → white (#fff) or very light grey (#f5f5f5)
     • Borders      → medium grey (#ccc or #999)
     • Text         → pure black (#000) or dark grey (#222)
     • Accent (green, purple) → black (for headings/labels)
     • Coloured result values → black (preserves readability)
     ───────────────────────────────────────────────────────────── */

  :root {
    --bg:       #f5f5f5 !important;
    --surface:  #ffffff !important;
    --surface2: #eeeeee !important;
    --border:   #cccccc !important;
    --accent:   #000000 !important;  /* green → black */
    --accent2:  #444444 !important;  /* purple → dark grey */
    --accent3:  #666666 !important;  /* pink → medium grey */
    --text:     #000000 !important;
    --text2:    #222222 !important;
    --text3:    #555555 !important;
    --red:      #000000 !important;  /* error red → black */
    /* Font stack: fall back to system serif for reliable print rendering */
    --font-display: 'Syne', 'Georgia', serif !important;
    --font-mono:    'DM Mono', 'Courier New', Courier, monospace !important;
  }


  /* ─────────────────────────────────────────────────────────────
     4. TYPOGRAPHY
     Scale headings for print. Screen sizes use clamp() with vw
     units that produce oversized type on paper. Reset to absolute
     pt values that reflect a proper document hierarchy.
     ───────────────────────────────────────────────────────────── */

  h1 { font-size: 20pt !important; margin: 0 0 6pt !important; letter-spacing: -0.5px; }
  h2 { font-size: 15pt !important; margin: 12pt 0 4pt !important; }
  h3 { font-size: 12pt !important; margin: 10pt 0 4pt !important; }
  h4 { font-size: 11pt !important; margin: 8pt  0 3pt !important; }

  p  { font-size: 10.5pt !important; line-height: 1.6 !important; margin: 0 0 6pt !important; }
  li { font-size: 10.5pt !important; line-height: 1.5 !important; }

  /* Links: show URL after anchor text so printed PDFs are navigable */
  a[href]:not([href^="#"]):not([href^="javascript"]):not(.result-action-btn):after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    font-weight: normal;
    word-break: break-all;
  }

  /* Don't expand external links on buttons/actions (already hidden) */
  .guide-actions a:after,
  .guide-actions button:after {
    content: none !important;
  }

  /* Calc panel header: strip border, let title breathe */
  .calc-header {
    padding: 0 0 8pt !important;
    border-bottom: 1.5pt solid #000 !important;
    margin-bottom: 12pt !important;
  }

  .calc-title  { font-size: 16pt !important; font-weight: 700 !important; color: #000 !important; }
  .calc-subtitle { font-size: 9pt !important; color: #555 !important; }
  .calc-panel  {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }


  /* ─────────────────────────────────────────────────────────────
     5. RESULT CARDS — High-contrast data readouts
     The primary value in a printed calc output. Must be:
     • Clearly boxed with visible border
     • Label in small-caps above
     • Value in large, legible monospace
     • Sub-text in grey below
     Result cards should NOT be coloured — pure B&W.
     ───────────────────────────────────────────────────────────── */

  .result-box {
    background:    #fff !important;
    border:        1.5pt solid #000 !important;
    border-radius: 4pt !important;
    padding:       10pt 12pt !important;
    text-align:    left !important;     /* left-aligned reads better in print */
    break-inside:  avoid !important;
    page-break-inside: avoid !important;
  }

  /* Primary result box (single large value) */
  [id$="-result"] > .result-box:first-child,
  [id$="-result"] > .result-box.accent,
  .result-box.accent {
    border-width: 2pt !important;
    border-color: #000 !important;
    background: #f5f5f5 !important;
  }

  .result-label {
    font-size:      7.5pt !important;
    font-weight:    700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color:          #555 !important;
    margin-bottom:  4pt !important;
  }

  .result-value,
  .display-val {
    font-family:  var(--font-mono) !important;
    font-size:    20pt !important;
    font-weight:  600 !important;
    color:        #000000 !important;
    letter-spacing: -0.5px !important;
    line-height:  1.2 !important;
  }

  /* Grid variant: secondary metric cards */
  .result-grid .result-box .result-value {
    font-size: 14pt !important;
    color:     #222 !important;
  }

  .result-sub {
    font-size:   8.5pt !important;
    color:       #555 !important;
    margin-top:  3pt !important;
    line-height: 1.4 !important;
  }

  /* Result grid: switch from CSS grid to 2-column table-like layout
     that prints predictably across all paper sizes */
  .result-grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   8pt !important;
    break-inside:          avoid !important;
    page-break-inside:     avoid !important;
  }

  /* Result summary grids (equity waterfall 3-col) */
  .result-summary-grid {
    display:           grid !important;
    gap:               8pt !important;
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }

  .result-summary-grid.three {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Interpretation text (cx-interpret) */
  .cx-interpret {
    border:        1pt solid #ccc !important;
    border-left:   3pt solid #000 !important;
    background:    #f9f9f9 !important;
    padding:       8pt 10pt !important;
    font-size:     9.5pt !important;
    color:         #222 !important;
    margin:        8pt 0 !important;
    border-radius: 0 !important;
    break-inside:  avoid !important;
    page-break-inside: avoid !important;
  }

  /* Scientific/standard calculator display */
  .display {
    background:    #f5f5f5 !important;
    border:        1pt solid #999 !important;
    border-radius: 3pt !important;
    padding:       8pt 12pt !important;
    margin-bottom: 8pt !important;
  }

  .display-expr { font-size: 9pt !important;  color: #555 !important; }
  .display-val  { font-size: 22pt !important; color: #000 !important; }


  /* ─────────────────────────────────────────────────────────────
     6. TABLES — Amortization, Tier, Data, Guide
     All table variants get consistent print styling:
     • Full-width, no overflow scroll
     • Clear thead with bottom border
     • Alternating row tint for legibility (light grey)
     • No colored borders or backgrounds
     • Numbers right-aligned, labels left-aligned
     ───────────────────────────────────────────────────────────── */

  /* Universal table reset for print */
  table,
  .amort,
  .tier-table,
  .data-table,
  .guide-table,
  .oil-table {
    width:          100% !important;
    border-collapse: collapse !important;
    border-spacing:  0 !important;
    font-size:       9pt !important;
    color:           #000 !important;
    background:      #fff !important;
    break-inside:    avoid !important;
    page-break-inside: avoid !important;
    margin:          8pt 0 !important;
    /* Remove horizontal scroll — force table to fit page width */
    overflow:        visible !important;
    display:         table !important;
  }

  table th,
  .amort th,
  .tier-table th,
  .data-table th,
  .guide-table th,
  .oil-table th {
    background:    #000 !important;
    color:         #fff !important;
    font-size:     8pt !important;
    font-weight:   700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding:       5pt 7pt !important;
    text-align:    left !important;
    border:        none !important;
  }

  /* Right-align numeric header columns */
  table th:not(:first-child),
  .amort th:not(:first-child),
  .tier-table th:not(:first-child),
  .data-table th:not(:first-child),
  .guide-table th:not(:first-child) {
    text-align: right !important;
  }

  table td,
  .amort td,
  .tier-table td,
  .data-table td,
  .guide-table td,
  .oil-table td {
    padding:       4pt 7pt !important;
    font-size:     9pt !important;
    color:         #000 !important;
    border-bottom: 0.5pt solid #ddd !important;
    background:    transparent !important;
    vertical-align: top !important;
  }

  /* Right-align numeric data cells */
  table td:not(:first-child),
  .amort td:not(:first-child),
  .data-table td:not(:first-child),
  .guide-table td:not(:first-child) {
    text-align:  right !important;
    font-family: var(--font-mono) !important;
    font-size:   8.5pt !important;
  }

  /* Zebra striping for readability on long tables */
  table tbody tr:nth-child(even) td,
  .amort tbody tr:nth-child(even) td,
  .tier-table tbody tr:nth-child(even) td,
  .data-table tbody tr:nth-child(even) td,
  .guide-table tbody tr:nth-child(even) td {
    background: #f5f5f5 !important;
  }

  /* Repeat table headers when table spans multiple pages */
  thead { display: table-header-group !important; }
  tfoot { display: table-footer-group !important; }
  tr    { break-inside: avoid !important; page-break-inside: avoid !important; }

  /* Overflow scroll wrappers must be removed for print */
  .tier-table-wrap,
  .guide-table-wrap,
  .table-wrap,
  [class*="table-wrap"] {
    overflow: visible !important;
    width:    100% !important;
  }

  /* Tier rows (equity waterfall distribution grid) */
  .tier-row,
  .tier-row-header,
  .tier-grid {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
    border:            0.5pt solid #ccc !important;
    background:        #fff !important;
  }

  .tier-input-group {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
    border:            0.5pt solid #ddd !important;
    padding:           6pt !important;
    margin-bottom:     6pt !important;
  }

  /* Amortization table: long — allow page breaks between rows
     but never split a single row. For very long schedules,
     the browser will naturally paginate between rows. */
  .amort {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .amort tr {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }

  /* Section labels above amortization groups */
  .mort-section-label {
    font-size:   8pt !important;
    font-weight: 700 !important;
    color:       #555 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-bottom: 1pt solid #ccc !important;
    padding-bottom: 3pt !important;
    margin: 10pt 0 6pt !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }


  /* ─────────────────────────────────────────────────────────────
     7. FORMULA / CODE BLOCKS
     The .formula class appears 21× across calc pages (guide panels).
     On print: remove the colored left-border accent, render as
     a clean monospace box with visible border.
     ───────────────────────────────────────────────────────────── */

  .formula,
  .guide-formula,
  .step-formula,
  pre,
  code {
    background:    #f8f8f8 !important;
    border:        1pt solid #bbb !important;
    border-left:   3pt solid #000 !important;  /* accent → black */
    border-radius: 0 !important;
    color:         #000 !important;
    font-family:   var(--font-mono) !important;
    font-size:     8.5pt !important;
    line-height:   1.7 !important;
    padding:       7pt 10pt !important;
    margin:        6pt 0 !important;
    /* Allow formula to break across pages if very long */
    white-space:   pre-wrap !important;
    word-break:    break-word !important;
    overflow:      visible !important;
    break-inside:  avoid !important;
    page-break-inside: avoid !important;
  }


  /* ─────────────────────────────────────────────────────────────
     8. VISUAL BARS / METERS (DSCR NOI vs Debt bars, etc.)
     These are CSS-width-animated divs — they render correctly
     as static grey bars in print. We add a text label fallback
     via the ::after pseudo-element on the wrapper.

     Bars are kept visible (not hidden) because they convey
     the ratio comparison even in B&W — just as greyscale fills.
     ───────────────────────────────────────────────────────────── */

  /* Bar track (the background container) */
  [style*="border-radius:100px"][style*="background:var(--surface2)"],
  [style*="border-radius: 100px"][style*="background: var(--surface2)"] {
    background: #ddd !important;
    border: 0.5pt solid #999 !important;
  }

  /* Bar fill (the coloured progress bar) */
  [id$="-bar-noi"],
  [id$="-bar-ds"],
  [id*="bar"][style*="background:var(--accent)"],
  [id*="bar"][style*="background: var(--accent)"] {
    background: #000 !important;  /* accent green → black fill */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Bar labels row */
  [id*="bar"] + div,
  [id*="-bar-noi"] + div {
    font-size: 8pt !important;
    color: #555 !important;
  }


  /* ─────────────────────────────────────────────────────────────
     9. BLOG / GUIDE ARTICLE CONTENT
     Long-form guide pages (dscr-loans guide, mortgage guide etc.)
     have their own class vocabulary. Style each for print.
     ───────────────────────────────────────────────────────────── */

  /* Callout boxes */
  .callout,
  .callout-info,
  .insight {
    background:    #f5f5f5 !important;
    border:        1pt solid #999 !important;
    border-left:   3pt solid #000 !important;
    color:         #000 !important;
    font-size:     9.5pt !important;
    padding:       8pt 10pt !important;
    margin:        8pt 0 !important;
    border-radius: 0 !important;
    break-inside:  avoid !important;
    page-break-inside: avoid !important;
  }

  .warning {
    border-left-color: #000 !important;
    background: #eee !important;
  }

  /* Step blocks (how-to guides) */
  .step-block {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
    margin-bottom:     10pt !important;
    padding-bottom:    6pt !important;
    border-bottom:     0.5pt solid #ddd !important;
  }

  .step-label {
    font-size:   7.5pt !important;
    font-weight: 700 !important;
    color:       #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }

  .step-title { font-size: 11pt !important; font-weight: 700 !important; }

  /* Compare boxes, myth blocks */
  .compare-box,
  .myth-block,
  .payout-card {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
    border:            1pt solid #ccc !important;
    padding:           7pt !important;
    margin-bottom:     6pt !important;
    background:        #fff !important;
    border-radius:     0 !important;
  }

  .busted { color: #000 !important; font-weight: 700 !important; }

  /* Guide list items */
  .guide-list li {
    background:    #f5f5f5 !important;
    border:        0.5pt solid #ccc !important;
    border-radius: 0 !important;
    font-size:     9pt !important;
    padding:       5pt 7pt !important;
    margin-bottom: 4pt !important;
  }

  /* Checklist */
  .checklist-title { font-weight: 700 !important; font-size: 10pt !important; }
  .checklist-desc  { font-size: 9pt !important; color: #444 !important; }


  /* ─────────────────────────────────────────────────────────────
     10. PAGE BREAKS
     Explicit break control to prevent the most common print
     defects on a data-dense calculator page.

     Rules:
     A) Never break inside a result block, card, or summary grid
     B) Never break between a heading and its following content
     C) Allow breaks between independent result sections
     D) Never break inside a table row or a formula block
     E) Force a new page before long amortization schedules
     ───────────────────────────────────────────────────────────── */

  /* A: Keep result blocks atomic */
  .result-box,
  .result-grid,
  .result-summary-grid,
  .cx-interpret,
  .tier-row,
  .tier-input-group,
  .refi-verdict-box,
  .savings-breakdown,
  .modifier-breakdown {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
  }

  /* B: Keep headings attached to the next element */
  h1, h2, h3, h4 {
    break-after:      avoid !important;
    page-break-after: avoid !important;
  }

  /* B: Don't orphan a heading at the bottom of a page */
  h2 + *,
  h3 + *,
  h4 + * {
    break-before:      avoid !important;
    page-break-before: avoid !important;
  }

  /* C: Allow breaks between separate result panels */
  [id$="-result"],
  [id$="-results"],
  [id$="-result-section"] {
    break-inside:  auto !important;
    page-break-inside: auto !important;
  }

  /* D: Table rows never split (set globally in §6) */

  /* E: Long amortization schedule starts on a fresh page */
  #mort-amort-section,
  [id*="amort-wrap"],
  [id*="amort-section"],
  [id*="schedule"] {
    break-before:      page !important;
    page-break-before: always !important;
  }

  /* Guide sidebar content — when sidebar IS printed (blog pages
     have no sidebar; some templates may include one): */
  .guide-panel {
    break-inside:      avoid !important;
    page-break-inside: avoid !important;
    border:            1pt solid #ccc !important;
    box-shadow:        none !important;
    margin-bottom:     12pt !important;
  }


  /* ─────────────────────────────────────────────────────────────
     11. PRINT HEADER — calculator name + site URL as page context
     Injected via ::before on <main> so every printed page shows
     the tool name and domain even if the browser header is off.
     ───────────────────────────────────────────────────────────── */

  main::before,
  #main-content::before {
    content:       "Calculixy.com  ·  Calculate Smarter. Decide Better.";
    display:       block;
    font-size:     7.5pt;
    color:         #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 0.5pt solid #ccc;
    padding-bottom: 4pt;
    margin-bottom:  12pt;
    font-family:   var(--font-display);
  }


  /* ─────────────────────────────────────────────────────────────
     12. PAGE SETUP & CSS COUNTERS
     @page sets paper size, margins, and page number footer.
     Separate @page rules for first page (no page number) and
     subsequent pages.
     ───────────────────────────────────────────────────────────── */
} /* end @media print */


/* ── Page margin / header / footer setup (must be outside @media print) ── */
@page {
  size: letter portrait;
  margin: 0.75in 0.75in 0.9in 0.75in;

  /* Bottom-centre page number */
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 8pt;
    color: #888;
    font-family: 'Syne', Georgia, serif;
  }

  /* Top-right: document URL */
  @top-right {
    content: url();   /* leave blank — handled by main::before */
    font-size: 7pt;
  }
}

@page :first {
  /* First page: no page number (the header acts as the cover) */
  @bottom-center { content: none; }
}

@page :left {
  margin-left: 0.85in;
}

@page :right {
  margin-right: 0.85in;
}