/* deploy/quiz/print.css — DES-048 (2026-07-16)
 * The quiz shipped with NO print rules at all. Printing the results screen
 * (the only screen worth printing — the question steps are a live form, not
 * a document) came out with:
 *   1. the full app chrome still in the page: progress dots, sticky "Get my
 *      full report" bar, the €10 buy rail, the floating offer bar;
 *   2. several pieces set as WHITE TEXT ON A DARK BACKGROUND (.sc-open,
 *      .chip.dark, .m1-badge, the buy rail) — most browsers don't print
 *      background colours by default, so that text renders as invisible
 *      white-on-white. This is very likely the actual "sai destruído" bug.
 * Only linked from deploy/quiz/index.html via
 *   <link rel="stylesheet" href="/quiz/print.css" media="print">
 * — scoped to the quiz only, independent of the site-wide /assets/print.css
 * (whose selectors — .site-header, .container, .article-body — don't exist
 * on this page at all).
 */

@page {
  margin: 1.6cm;
}

@media print {

  /* ---- 1. Baseline: black text on white paper, no shadows/animation ---- */
  * {
    color: #111 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  html, body {
    background: #fff !important;
    font-size: 11.5pt;
    line-height: 1.5;
  }

  /* ---- 2. Hide everything that isn't the verdict itself ---- */
  header,                                   /* dark masthead + trustbar */
  .pages, #counterBar, #unlock, #stepError, /* quiz-taking progress chrome */
  .redoQuiz, .restart,
  #mirrorBox,                               /* "your window" upsell nudge */
  .vrail2,                                  /* whole €10 buy rail: railcard, buyBtn, mock, guarantee */
  .offerbar,                                /* floating "your full report €10" bar */
  #stickyBuy,                               /* fixed bottom buy button */
  .door.locked,                             /* paywall teaser cards — country withheld, nothing to print */
  button, [role="button"],
  input, select, label, .field-error,
  script, noscript, iframe, datalist {
    display: none !important;
  }

  /* ---- 3. Layout: single column, no app padding, real page margins ---- */
  .wrap { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .vpage { display: block !important; }
  .vmain { min-width: 0 !important; }
  .m1 { display: block !important; } /* drop the 2-col photo layout so the card can't split mid-print */
  .m1-photo { max-height: 130pt; margin-top: 8pt; }
  .cards3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8pt; }

  /* ---- 4. A masthead the paper needs, since the app header is gone ---- */
  body.res::before {
    content: "whereTOemigrate — Your Eligibility Verdict";
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 16pt;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
  }

  /* ---- 5. Cards keep a real border (background is gone by rule 1) + sane page breaks ---- */
  .sc, .m1, .door, .cards3, .gate, .verdict-trust {
    border: 1pt solid #000 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3, .va-title, .va-h {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* ---- 6. Sources: keep every link AND print the real URL next to it ---- */
  .chips, .chip { page-break-inside: avoid; }
  a { color: #111 !important; text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #333 !important;
  }
}