/* ==========================================================================
   print.css — print / "Save as PDF" layout

   Loaded with media="print", so it only ever applies to the printed document.

   Goals
     - Print exactly the page the user is looking at, nothing else
     - Ink-efficient: white background, black text, no shadows or gradients
     - Amortisation tables print in full with repeating headers across pages
     - Every printed page carries the disclaimer
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 14mm 12mm;
}

/* Landscape suits the wide amortisation and comparison tables better, but
   forcing it would surprise the user, so it is offered as a hint only via
   the browser's own print dialog. */

* {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body {
  opacity: 1 !important;
  font-size: 10.5pt;
  line-height: 1.45;
  background: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   Hide everything that is navigation, control or decoration
   -------------------------------------------------------------------------- */
.site-header,
.primary-nav,
.nav-toggle,
.theme-switch,
.skip-link,
.site-footer__links,
.form-actions,
.action-bar,
.table-controls,
.pagination,
.modal-backdrop,
.toast,
.tooltip__trigger,
.tooltip__bubble,
.slider,
.chip-row,
.btn,
.chip-btn,
.quick-card__cta,
.tip-card__cta,
.saved-card__actions,
.compare-card__remove,
#chart-library-warning,
.accordion__icon,
/* Ads never print — they waste ink and mean nothing on paper. */
.ad-slot,
.ad-slot[data-ad-active],
/* Marketing / lead-generation UI means nothing on a printed calculation
   either — a PDF of results should be the numbers, not a WhatsApp CTA. */
.trust-section,
.hero-cta-row,
.lead-capture,
.lead-nudge,
.header-whatsapp {
  display: none !important;
}

/* Only the page currently on screen is printed. */
.page[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Document header — printed once, at the top
   -------------------------------------------------------------------------- */
.site-main::before {
  content: "Kaithi Finance — Loan & EMI Calculator";
  display: block;
  font-size: 15pt;
  font-weight: bold;
  border-bottom: 2px solid #000;
  padding-bottom: 4pt;
  margin-bottom: 10pt;
  font-family: Arial, Helvetica, sans-serif;
}

.site-main { max-width: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: Arial, Helvetica, sans-serif;
  page-break-after: avoid;
  break-after: avoid;
}
.page__title { font-size: 16pt; margin-bottom: 6pt; }
.page__lede { font-size: 10pt; font-style: italic; margin-bottom: 10pt; }
.section__title { font-size: 12.5pt; margin-top: 12pt; }
.card__title { font-size: 11.5pt; }

/* --------------------------------------------------------------------------
   Cards flatten into plain blocks with hairline rules
   -------------------------------------------------------------------------- */
.card,
.stat,
.accordion,
.compare-card,
.scenario-card,
.winner-card,
.saved-card,
.glossary-item,
.mini-stat {
  border: 0.5pt solid #999 !important;
  border-radius: 0 !important;
  padding: 6pt !important;
  margin-bottom: 6pt !important;
  page-break-inside: avoid;
  break-inside: avoid;
}

.card--hero {
  border: 1.5pt solid #000 !important;
  padding: 8pt !important;
  text-align: center;
}
.hero__label { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.05em; }
.hero__value { font-size: 22pt; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.hero__meta { font-size: 9pt; }

/* Grids collapse to columns that actually fit A4. */
.calc-layout { display: block !important; }
.calc-column, .card--inputs { position: static !important; }
.stat-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4pt !important; }
.chart-pair,
.scenario-grid,
.compare-inputs,
.quick-grid,
.tip-grid,
.winner-grid,
.glossary-list { display: block !important; }

.stat__label { font-size: 8pt; }
.stat__value { font-size: 11pt; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.stat__note { font-size: 7.5pt; }

/* --------------------------------------------------------------------------
   Tables — the most important thing on the printed page
   -------------------------------------------------------------------------- */
.table-scroll { overflow: visible !important; }

.data-table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse;
  font-size: 8.5pt;
  font-family: Arial, Helvetica, sans-serif;
}
.data-table thead { display: table-header-group; } /* repeat headers on every page */
.data-table tfoot { display: table-footer-group; }
.data-table th, .data-table td {
  border: 0.5pt solid #999 !important;
  padding: 3pt 4pt !important;
}
.data-table thead th {
  background: #e8e8e8 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-size: 8pt;
  position: static !important;
}
.data-table tr { page-break-inside: avoid; break-inside: avoid; }
.data-table .row--emphasis th,
.data-table .row--emphasis td { font-weight: bold; }
.cell--best::after { content: " ★"; }
.best-badge { display: none !important; }

/* --------------------------------------------------------------------------
   Charts do not print usefully at low colour fidelity — the tables carry
   the same information, so the canvases are replaced by a short note.
   -------------------------------------------------------------------------- */
.chart-holder { display: none !important; }
canvas { display: none !important; }
.chart-fallback { display: none !important; }

.split-bar { display: none !important; }
.split__legend { display: block !important; font-size: 9.5pt; }
.split__item { display: inline !important; margin-right: 12pt; }
.split__swatch { display: none !important; }

/* --------------------------------------------------------------------------
   Guide content
   -------------------------------------------------------------------------- */
.accordion__panel[hidden] { display: block !important; } /* print collapsed sections too */
.accordion__trigger { font-size: 11pt; font-weight: bold; padding: 4pt 0 !important; }
.accordion__body { padding: 0 0 6pt !important; }
.guide-list { font-size: 9.5pt; }
.guide-list li { padding-left: 10pt; }
.callout {
  border: 0.5pt solid #999 !important;
  border-left: 2pt solid #000 !important;
  padding: 5pt !important;
  page-break-inside: avoid;
  break-inside: avoid;
}
.callout__label { font-weight: bold; font-size: 8.5pt; }

.flag { border: 0.5pt solid #999 !important; padding: 4pt !important; font-size: 9pt; }
.flag__icon { border: 0.5pt solid #000 !important; }

.pill, .chip, .badge { border: 0.5pt solid #666 !important; padding: 0 3pt !important; font-size: 8pt; }

/* --------------------------------------------------------------------------
   Links — show the destination, since a printed link cannot be clicked
   -------------------------------------------------------------------------- */
a { text-decoration: none; }
.link-list__link[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 8pt;
  font-weight: normal;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   Footer — the disclaimer must appear on the printed output
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1pt solid #000;
  margin-top: 10pt;
  padding-top: 6pt;
  page-break-inside: avoid;
  break-inside: avoid;
}
.site-footer__inner { padding: 0; max-width: none; }
.site-footer__brand { font-size: 10pt; font-weight: bold; }
.site-footer__tagline { font-size: 8.5pt; }
.site-footer__legal { font-size: 7.5pt; border-top: 0.5pt solid #999; padding-top: 4pt; }
.site-footer__copy { font-size: 7.5pt; }

.disclaimer-inline { font-size: 7.5pt; border-top: 0.5pt solid #999; padding-top: 4pt; margin-top: 8pt; }

/* Keep sections from splitting awkwardly. */
.page__header, .section__title, .empty-state { page-break-inside: avoid; break-inside: avoid; }