/* AfterFoster.org — print.css
 * Clean print / PDF stylesheet for resource cards.
 * Linked with media="print" — does not affect screen rendering.
 */

@media print {

  /* ── RESET / BASE ──────────────────────────────────────────────────────── */
  * { box-sizing: border-box; }

  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11pt;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }

  /* ── HIDE NON-CONTENT UI ───────────────────────────────────────────────── */
  header,
  nav,
  .skip-link,
  .crisis-strip,
  .hero,
  .timeline-section,
  .filters-bar,
  .stage-bar,
  .stage-recommended,
  #state-banner,
  .results-count,
  .card-actions,
  .card-arrow,
  .card-footer,
  .btn-details,
  .btn-link,
  .report-link,
  footer,
  .decoder-section,
  .eligibility-decoder,
  .age-nav,
  .hero-search,
  .state-note,
  #pills,
  #count { display: none !important; }

  /* ── PAGE LAYOUT ───────────────────────────────────────────────────────── */
  #main-content {
    display: block;
    margin: 0;
    padding: 0.5in 0.75in;
  }

  #output {
    display: block;
  }

  /* ── SECTION HEADS ─────────────────────────────────────────────────────── */
  .section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #000;
    padding-bottom: 4pt;
    margin: 18pt 0 8pt;
    page-break-after: avoid;
  }

  .section-head h2 {
    font-size: 14pt;
    font-weight: bold;
    color: #000;
  }

  .section-dot,
  .count-badge { display: none; }

  /* ── CARD GRID → BLOCK ─────────────────────────────────────────────────── */
  .cards {
    display: block;
  }

  /* ── INDIVIDUAL CARDS ──────────────────────────────────────────────────── */
  .card {
    display: block;
    border: 1px solid #aaa;
    border-radius: 4pt;
    margin-bottom: 10pt;
    padding: 8pt 10pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Force card bodies open (they are hidden by JS) */
  .card-body { display: block !important; visibility: visible !important; }

  /* Remove top color bar */
  .card-top { display: none; }

  /* Card header — show icon + title + description */
  .card-header {
    display: flex;
    align-items: flex-start;
    gap: 8pt;
    cursor: default;
    margin-bottom: 6pt;
  }

  .card-icon {
    width: 28pt;
    height: 28pt;
    font-size: 16pt;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f0f0f0 !important;
    border: 1px solid #ccc;
  }

  .card-title {
    font-size: 12pt;
    font-weight: bold;
    color: #000;
    margin-bottom: 2pt;
  }

  .card-subtitle {
    font-size: 10pt;
    color: #333;
    font-style: italic;
  }

  /* ── TAGS → TEXT LABELS ────────────────────────────────────────────────── */
  .tags { margin-top: 4pt; }

  .tag {
    display: inline-block;
    border: 1px solid #888;
    border-radius: 3pt;
    padding: 1pt 4pt;
    font-size: 8pt;
    color: #000;
    background: transparent !important;
    margin-right: 3pt;
    margin-bottom: 2pt;
  }

  /* ── BULLETS ───────────────────────────────────────────────────────────── */
  .card-body ul {
    margin: 6pt 0 6pt 14pt;
    padding: 0;
  }

  .card-body li {
    font-size: 10pt;
    color: #000;
    margin-bottom: 3pt;
    line-height: 1.4;
  }

  /* ── TIP BOX ───────────────────────────────────────────────────────────── */
  .tip-box {
    border: 1px solid #888;
    border-left: 3pt solid #000;
    background: transparent !important;
    padding: 5pt 8pt;
    margin-top: 6pt;
    font-size: 10pt;
    color: #000;
    border-radius: 3pt;
  }

  /* ── URL — print the href ──────────────────────────────────────────────── */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #444;
    word-break: break-all;
  }

  /* Suppress href echo for non-content links */
  .card-header a::after,
  .card-icon a::after { content: none; }

  /* ── PAGE BREAKS ───────────────────────────────────────────────────────── */
  .section-head { page-break-before: auto; }

  /* ── PRINT HEADER (page title via CSS) ────────────────────────────────── */
  @page {
    margin: 0.75in;
    size: letter;
  }

} /* end @media print */