/* ============================================================
   print.css — PDF / Print Styles
   Hides nav, formats results cleanly for print & PDF export
   MoneyMaths
   ============================================================ */

@media print {

  /* ── 1. Page Setup ───────────────────────────────────────── */

  @page {
    size: A4 portrait;
    margin: 20mm 18mm 20mm 18mm;
  }

  @page :first {
    margin-top: 15mm;
  }

  /* ── 2. Base Overrides ───────────────────────────────────── */

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.5;
  }

  /* ── 3. Hide Non-Essential UI ────────────────────────────── */

  .site-header,
  .primary-nav,
  .menu-toggle,
  .mobile-nav-overlay,
  .mobile-nav-panel,
  .site-footer,
  .breadcrumb,
  .calc-panel__reset,
  .optional-toggle,
  .optional-fields,
  .calc-panel__footer .btn--secondary,
  .chart-card__controls,
  .amort-view-btn,
  .table-pagination,
  .related-tools,
  .faq-section,
  .pdf-btn,
  .skip-link,
  .toast-container,
  .result-placeholder,
  .nav-dropdown,
  .calc-panel,
  .print-hidden {
    display: none !important;
  }

  /* ── 4. Layout Reset for Print ───────────────────────────── */

  .page-wrapper {
    display: block;
  }

  .main-content {
    padding-top: 0 !important;
  }

  .calc-page {
    padding-block: 0 !important;
  }

  .calc-page__header {
    padding-top: 0 !important;
    border-bottom: 2pt solid #000 !important;
    margin-bottom: 12pt !important;
    padding-bottom: 8pt !important;
  }

  .container {
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  .calc-shell {
    display: block !important;
  }

  .calc-inputs-col {
    display: none !important;
  }

  .result-panel {
    width: 100% !important;
  }

  /* ── 5. Print Header (Branding) ──────────────────────────── */

  body::before {
    content: 'MoneyMaths.net';
    display: block;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    color: #1a6b55;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4pt;
  }

  body::after {
    content: 'Free finance calculators at MoneyMaths.net · Printed on ' attr(data-print-date);
    display: block;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: #666;
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: 0.5pt solid #ccc;
    text-align: center;
  }

  /* ── 6. Typography for Print ─────────────────────────────── */

  h1 {
    font-size: 20pt !important;
    color: #000 !important;
    margin-bottom: 4pt !important;
    font-family: Arial, sans-serif !important;
    page-break-after: avoid;
  }

  h2 {
    font-size: 14pt !important;
    color: #000 !important;
    margin-top: 12pt !important;
    margin-bottom: 4pt !important;
    font-family: Arial, sans-serif !important;
    page-break-after: avoid;
  }

  h3 {
    font-size: 12pt !important;
    color: #000 !important;
    margin-top: 8pt !important;
    margin-bottom: 3pt !important;
    font-family: Arial, sans-serif !important;
    page-break-after: avoid;
  }

  p {
    font-size: 10pt !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin-bottom: 6pt !important;
  }

  a {
    color: #000 !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  /* ── 7. Result Hero ──────────────────────────────────────── */

  .result-hero {
    background: #f0f7f4 !important;
    border: 2pt solid #1a6b55 !important;
    border-radius: 4pt !important;
    padding: 12pt !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
    color: #000 !important;
  }

  .result-hero::before,
  .result-hero::after {
    display: none !important;
  }

  .result-hero__label {
    font-size: 8pt !important;
    color: #1a6b55 !important;
    font-family: Arial, sans-serif !important;
    letter-spacing: 0.08em !important;
  }

  .result-hero__value {
    font-size: 28pt !important;
    color: #1a6b55 !important;
    font-family: Arial, sans-serif !important;
  }

  .result-hero__sub {
    font-size: 9pt !important;
    color: #333 !important;
  }

  .result-hero__badges {
    display: none !important;
  }

  /* ── 8. Result Stats Grid ────────────────────────────────── */

  .result-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6pt !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
  }

  .result-stat {
    border: 0.5pt solid #ccc !important;
    border-radius: 3pt !important;
    padding: 6pt !important;
    background: #fafafa !important;
  }

  .result-stat__label {
    font-size: 7pt !important;
    color: #666 !important;
    font-family: Arial, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .result-stat__value {
    font-size: 13pt !important;
    color: #000 !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
  }

  .result-stat__value--positive { color: #15803d !important; }
  .result-stat__value--negative { color: #dc2626 !important; }
  .result-stat__value--primary  { color: #1a6b55 !important; }

  /* ── 9. Breakdown Bar ────────────────────────────────────── */

  .breakdown-bar {
    border: 0.5pt solid #ccc !important;
    border-radius: 3pt !important;
    padding: 8pt !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
  }

  .breakdown-bar__track {
    height: 8pt !important;
    border-radius: 2pt !important;
  }

  .breakdown-bar__title {
    font-size: 10pt !important;
    font-family: Arial, sans-serif !important;
    color: #000 !important;
  }

  .breakdown-bar__legend-item {
    font-size: 9pt !important;
    color: #333 !important;
  }

  .breakdown-bar__legend-value {
    font-family: 'Courier New', monospace !important;
    font-size: 9pt !important;
  }

  /* ── 10. Chart Area ──────────────────────────────────────── */

  .chart-card {
    border: 0.5pt solid #ccc !important;
    border-radius: 3pt !important;
    padding: 8pt !important;
    margin-bottom: 12pt !important;
    page-break-inside: avoid;
  }

  .chart-card__title {
    font-size: 11pt !important;
    font-family: Arial, sans-serif !important;
    color: #000 !important;
    margin-bottom: 6pt !important;
  }

  .chart-canvas-wrapper {
    height: 200pt !important;
  }

  /* ── 11. Amortization Table ──────────────────────────────── */

  .amort-card {
    border: 0.5pt solid #ccc !important;
    border-radius: 3pt !important;
    margin-bottom: 12pt !important;
  }

  .amort-card__header {
    padding: 6pt 8pt !important;
    border-bottom: 0.5pt solid #ccc !important;
  }

  .amort-card__title {
    font-size: 11pt !important;
    font-family: Arial, sans-serif !important;
    color: #000 !important;
  }

  .table-scroll {
    overflow: visible !important;
  }

  .amort-table {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 8pt !important;
    font-family: 'Courier New', monospace !important;
  }

  .amort-table thead tr {
    background: #f0f0f0 !important;
  }

  .amort-table th {
    font-size: 7pt !important;
    padding: 4pt 6pt !important;
    color: #333 !important;
    font-family: Arial, sans-serif !important;
    border-bottom: 0.5pt solid #999 !important;
  }

  .amort-table td {
    font-size: 8pt !important;
    padding: 3pt 6pt !important;
    color: #000 !important;
    border-bottom: 0.25pt solid #e0e0e0 !important;
  }

  .amort-table tbody tr:hover td {
    background: none !important;
  }

  .amort-table .year-row td {
    background: #eee !important;
    font-size: 7pt !important;
    font-family: Arial, sans-serif !important;
    padding: 3pt 6pt !important;
  }

  .amort-table .totals-row td {
    background: #f0f7f4 !important;
    font-weight: bold !important;
    border-top: 1pt solid #1a6b55 !important;
    color: #1a6b55 !important;
  }

  /* ── 12. Page Breaks ─────────────────────────────────────── */

  .result-hero,
  .result-stats,
  .breakdown-bar,
  .chart-card {
    page-break-inside: avoid;
  }

  .amort-card {
    page-break-before: always;
  }

  tr {
    page-break-inside: avoid;
  }

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

  /* ── 13. Print-Only Elements ─────────────────────────────── */

  .print-block {
    display: block !important;
  }

  .print-inputs-summary {
    border: 0.5pt solid #ccc;
    border-radius: 3pt;
    padding: 8pt;
    margin-bottom: 12pt;
    background: #fafafa;
    page-break-inside: avoid;
  }

  .print-inputs-summary__title {
    font-size: 9pt;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6pt;
  }

  .print-inputs-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4pt;
  }

  .print-inputs-summary__item {
    display: flex;
    flex-direction: column;
    gap: 1pt;
  }

  .print-inputs-summary__label {
    font-size: 7pt;
    color: #666;
    font-family: Arial, sans-serif;
  }

  .print-inputs-summary__value {
    font-size: 9pt;
    font-weight: bold;
    color: #000;
    font-family: 'Courier New', monospace;
  }

  /* Privacy note in print */
  .print-privacy-note {
    font-size: 7pt;
    color: #888;
    text-align: center;
    margin-top: 8pt;
    font-family: Arial, sans-serif;
    font-style: italic;
  }
}