/* ============================================================
   PRINT STYLESHEET — Hunter-Finch Family Reunion Branch Guide
   ============================================================
   This file only affects how the page looks when printed
   (or exported to PDF via the browser's print dialog).
   It has no effect on the on-screen appearance.

   HOW TO CUSTOMIZE:
   - Each section below is labeled with what it controls.
   - Colors are removed for print by default to save ink —
     search "REMOVE COLOR" if you want to restore them.
   - To change page margins, edit the @page rule.
   - To change what's hidden when printing, edit the
     "ELEMENTS TO HIDE" section.
   ============================================================ */

@media print {

  /* ---- PAGE SETUP ---- */
  /* Margins for the printed page. Change "0.6in" to taste
     (e.g. 1in for wider margins, 0.4in for tighter). */
  @page {
    size: letter portrait;
    margin: 0.6in;
  }

  /* ---- BASE COLORS & BACKGROUND ---- */
  /* Strip the cream background and decorative glow so the
     page prints on plain white and doesn't waste ink.
     Delete this rule (or comment it out) if you'd rather
     print with the tan background colors intact. */
  html, body {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
  }

  .wrap {
    max-width: 100%;
    padding: 0;
  }

  /* ---- ELEMENTS TO HIDE WHEN PRINTING ---- */
  /* Add any other selector to this list (comma-separated)
     to hide it from the printed page. */
  .back-btn,
  .print-btn,
  .branch-card .arrow,
  #picker,
  header.masthead,
  .suggest-box {
    display: none !important;
  }

  /* When a branch detail view is open, always show it on
     print regardless of its on-screen display state. */
  #detail {
    display: block !important;
  }

  /* ---- MASTHEAD ---- */
  header.masthead {
    margin-bottom: 20px !important;
  }

  .eyebrow {
    color: #000000 !important;
  }

  h1.title {
    color: #000000 !important;
    font-size: 26px !important;
  }

  .subtitle {
    color: #333333 !important;
  }

  .divider {
    background: #999999 !important;
  }

  /* ---- BRANCH DETAIL HEADER ---- */
  .detail-head {
    margin-bottom: 18px !important;
  }

  .detail-head .code {
    color: #000000 !important;
  }

  .detail-head h2 {
    color: #000000 !important;
    font-size: 28px !important;
  }

  .detail-head .tagline {
    color: #333333 !important;
  }

  /* ---- TREE CONTAINER ---- */
  /* Removes the card background/border so the tree sits
     directly on the white page. */
  .tree {
    background: #ffffff !important;
    border: none !important;
    padding: 0;
  }

  /* ---- PERSON ROWS & CONNECTOR LINES ---- */
  .person-name,
  .root-row .person-name {
    color: #000000 !important;
  }

  .spouse {
    color: #333333 !important;
  }

  .person-code {
    color: #555555 !important;
  }

  .dot,
  .root-row .dot {
    background: #000000 !important;
  }

  .twig,
  .branch-line {
    background: #999999 !important;
  }

  .children-list {
    border-left: 1px solid #999999 !important;
  }

  /* ---- AVOID AWKWARD PAGE BREAKS ---- */
  /* Keeps a parent and their immediate children from being
     split across two pages whenever the browser can help it. */
  li.person {
    break-inside: avoid;
  }

  .person-row {
    break-after: avoid;
  }

  footer.note {
    color: #555555 !important;
    margin-top: 24px !important;
  }

  /* ---- REMOVE COLOR: restore original palette ----
     Uncomment the block below (delete the /* and *_/ markers)
     to print in full color instead of black & white.

  html, body { background: var(--paper) !important; color: var(--ink); }
  .tree { background: var(--paper-deep) !important; border: 1px solid var(--rule); }
  .eyebrow, .detail-head .code, .person-code { color: var(--gold); }
  h1.title, .detail-head h2, .person-name { color: var(--walnut); }
  .dot, .root-row .dot { background: var(--gold); }
  .root-row .dot { background: var(--walnut); }

  */

}