/* ============================================================
   Canary Modern Theme — print.css
   Print-optimized styles for Canary Pilot Setup Guide
   Linked as: <link rel="stylesheet" media="print" href="css/print.css">
   ============================================================ */

@media print {

  /* ── Page Setup ──────────────────────────────────────────── */
  @page {
    size: letter portrait;
    margin: 0.75in 0.8in 0.75in 0.8in;
  }

  /* ── Reset Backgrounds & Colors for B&W printing ─────────── */
  *,
  *::before,
  *::after {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ── Typography Adjustments ──────────────────────────────── */
  body {
    font-size: 11pt;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* ── Content Area: Remove Screen Centering ───────────────── */
  .content-area {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Hide Interactive / Navigation Elements ──────────────── */
  .canary-header,
  .sticky-nav,
  .cta-next,
  .print-btn,
  .nav-flow,
  .choice-card:hover,    /* suppress hover states */
  .img-placeholder,
  .header-print-btn,
  .verification-block,
  .celebration,
  .action-row,
  .troubleshoot-panel {
    display: none !important;
  }

  /* ── Print Header ────────────────────────────────────────── */
  /* Shown only in print; hidden by default in main.css via display:none */
  .print-header {
    display: block !important;
    border-bottom: 2pt solid #000000;
    padding-bottom: 8pt;
    margin-bottom: 16pt;
  }

  .print-header .print-variant {
    font-size: 9pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555555 !important;
    margin-bottom: 2pt;
  }

  .print-header .print-title {
    font-size: 18pt;
    font-weight: 800;
    color: #000000 !important;
    margin-bottom: 3pt;
  }

  .print-header .print-source {
    font-size: 8pt;
    color: #555555 !important;
  }

  /* ── Step Labels & Titles ────────────────────────────────── */
  .step-label {
    font-size: 8pt;
    color: #555555 !important;
    letter-spacing: 0.08em;
  }

  .step-title {
    font-size: 14pt;
    font-weight: 700;
    color: #000000 !important;
    margin-bottom: 4pt;
  }

  .step-desc {
    font-size: 10pt;
    color: #333333 !important;
  }

  /* ── Step Sections: Page Breaks ──────────────────────────── */
  .step-section {
    page-break-before: always;
    padding: 0;
    border-bottom: 1pt solid #cccccc;
    margin-bottom: 12pt;
  }

  /* First step section should not force a page break */
  .step-section:first-of-type {
    page-break-before: avoid;
  }

  .step-header {
    margin-bottom: 8pt;
  }

  /* ── Instruction Cards ───────────────────────────────────── */
  .instruction-card {
    background: #ffffff !important;
    border-left: 2pt solid #000000 !important;
    border-radius: 0 !important;
    padding: 8pt 10pt;
    margin: 6pt 0;
    page-break-inside: avoid;
  }

  .instruction-card h4 {
    font-size: 10pt;
    font-weight: 700;
    margin-bottom: 4pt;
  }

  .instruction-card p,
  .instruction-card li {
    font-size: 9pt;
    color: #222222 !important;
    line-height: 1.4;
  }

  /* ── Warning Box ─────────────────────────────────────────── */
  .warning-box {
    background: #ffffff !important;
    border: 1pt solid #000000 !important;
    border-left: 3pt solid #000000 !important;
    border-radius: 0 !important;
    padding: 6pt 8pt;
    margin: 6pt 0;
    page-break-inside: avoid;
    font-size: 9pt;
    color: #000000 !important;
  }

  /* ── Success Box ─────────────────────────────────────────── */
  .success-box {
    background: #ffffff !important;
    border: 1pt solid #000000 !important;
    border-left: 3pt dashed #000000 !important;
    border-radius: 0 !important;
    padding: 6pt 8pt;
    margin: 6pt 0;
    page-break-inside: avoid;
    font-size: 9pt;
    color: #000000 !important;
  }

  /* ── Gather Box ──────────────────────────────────────────── */
  .gather-box {
    background: #ffffff !important;
    border: 1pt solid #888888 !important;
    border-radius: 0 !important;
    padding: 6pt 8pt;
    margin: 6pt 0;
    page-break-inside: avoid;
  }

  .gather-label {
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #444444 !important;
    margin-bottom: 4pt;
  }

  .gather-item {
    background: #ffffff !important;
    border: 1pt solid #888888 !important;
    border-radius: 0 !important;
    padding: 2pt 6pt;
    font-size: 9pt;
    color: #000000 !important;
  }

  /* ── Choice Cards ────────────────────────────────────────── */
  .choice-card {
    background: #ffffff !important;
    border: 1pt solid #888888 !important;
    border-radius: 0 !important;
    padding: 8pt 10pt;
    margin: 4pt 0;
    page-break-inside: avoid;
    cursor: default !important;
  }

  /* ── Check Items — strip interactivity ───────────────────── */
  .check-circle {
    border: 1pt solid #000000 !important;
    background: #ffffff !important;
    cursor: default !important;
  }

  .check-circle.checked::after,
  .check-item.checked .check-circle::after {
    color: #000000 !important;
  }

  .check-item-text {
    font-size: 10pt;
    color: #000000 !important;
  }

  /* ── Links: show URLs inline ─────────────────────────────── */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 8pt;
    color: #555555 !important;
    word-break: break-all;
  }

  /* Suppress URL display for # anchors and javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  /* ── Section Divider ─────────────────────────────────────── */
  .section-divider {
    border-top: 1pt solid #cccccc;
    margin: 10pt 0;
  }

  /* ── Prevent Orphans & Widows ────────────────────────────── */
  p {
    orphans: 3;
    widows: 3;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

} /* end @media print */

/* ── Print Header: hidden on screen ─────────────────────────── */
/* Ensure .print-header is never visible on screen */
.print-header {
  display: none;
}