/* 
 * Print styles for CAW Budget Quiz 
 * Used in conjunction with print.js which toggles the .quiz-printing class
 */

@media print {
  @page {
    /* Minimize margins to fit more content */
    margin: 1cm;
    size: auto;
  }

  /* Reset layout */
  html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    width: 100%;
    overflow: hidden; /* Prevent multi-page overflow if possible */
  }

  /* Hide elements that shouldn't be printed */
  #results-heading,
  #mail,
  #print,
  .diensten_article_icon,
  .diensten_img-wrap,
  .section_hero,
  .w-nav,          /* Webflow Nav */
  .footer,         /* Typical Footer */
  footer,
  aside,
  .spacer,
  .button-group,
  .asw-container,
  nav {
    display: none !important;
  }

  .section_wrap {
    border: 0px solid black;
    border-radius: 0px;
  }

  .section_wrap-padding {
    padding: 0 !important;
  }

  /* Ensure results are visible and forced to fit */
  [data-quiz="results"] {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    /* 
     * Scale down content to fit on one page. 
     * 0.75 is a safe bet for most A4/Letter pages given typical Webflow font sizes.
     * transform-origin: top center keeps it centered.
     */
    /* With this: */
    zoom: 0.75;
    margin: 0;
    padding: 0;
  }

  /* Compact spacing within results */
  [data-quiz="results"] .heading-style-h2,
  [data-quiz="results"] h2 {
    font-size: 18pt !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }
  
  [data-quiz="results"] .text-size-medium,
  [data-quiz="results"] p {
    font-size: 10pt !important;
    margin-bottom: 0.5rem !important;
  }

  [data-quiz="results"] .search_result_item,
  [data-quiz="results"] .diensten_item {
    margin-bottom: 0.5rem !important;
    page-break-inside: avoid;
  }

  [data-quiz="results"] .section_diensten-article {
    padding: 0 !important;
  }
}

/* Screen styles when print mode is active (for preview/debugging) */
body.quiz-printing .section_multi-form {
  display: none;
}