/* =============================================================================
   HelpSite TK — Print / PDF Stylesheet
   ============================================================================= */

@media print {
  /* ── Hide non-content elements ── */
  .site-header,
  .site-footer,
  .docs-layout__sidebar,
  .docs-page-header__actions,
  .docs-breadcrumb,
  .docs-pagination,
  .docs-toc,
  .site-header__menu-toggle,
  .nav-menu,
  button,
  .feedback-form-wrapper,
  .button {
    display: none !important;
  }

  /* ── Reset layout to single column ── */
  .docs-layout,
  .docs-reference-body {
    display: block !important;
  }

  .docs-layout__main {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* ── Typography ── */
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11pt;
    color: #000;
    line-height: 1.6;
    background: #fff;
  }

  h1 { font-size: 22pt; page-break-after: avoid; }
  h2 { font-size: 16pt; page-break-after: avoid; margin-top: 1.5em; }
  h3 { font-size: 13pt; page-break-after: avoid; }
  h4 { font-size: 11pt; font-weight: bold; page-break-after: avoid; }

  /* Avoid widows/orphans */
  p, li { orphans: 3; widows: 3; }

  /* ── Links ── */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
  /* Don't print anchors/internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  /* ── Images ── */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* ── Code ── */
  pre, code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 9pt;
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1px solid #ddd;
  }
  pre {
    padding: 0.75em;
    page-break-inside: avoid;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* ── Tables ── */
  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: avoid;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 0.4em 0.6em;
  }
  th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Annotated Image Block ── */
  /* Positioned pills use CSS transforms which don't print reliably.
     Hide them; the numbered step list below carries the same information. */
  .annotated-image__container { display: block; }
  .annotated-image__pill      { display: none !important; }

  .annotated-image__steps { list-style: none; padding: 0; margin: 0.8em 0 0; }
  .annotated-image__step  { display: flex; gap: 8pt; margin-bottom: 6pt; page-break-inside: avoid; }
  .annotated-image__step-pill {
    flex-shrink: 0;
    width: 20pt; height: 20pt;
    border-radius: 50%;
    background: #0057ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #fff !important;
    font-size: 8pt; font-weight: bold;
    text-align: center; line-height: 20pt;
  }
  .annotated-image__step-title { font-weight: bold; display: block; }
  .annotated-image__step-desc  { margin: 0; color: #444; }

  /* ── Page breaks ── */
  .page-break-before { page-break-before: always; }
  .page-break-after  { page-break-after: always; }
  .no-page-break     { page-break-inside: avoid; }

  /* ── Page margins ── */
  @page {
    margin: 1.5cm 2cm;
  }
  @page :first {
    margin-top: 3cm;
  }
}