/* Print stylesheet — converts the dark on-screen theme to a light,
   high-contrast layout for paper review and hand markup. */

@media print {

  /* --- Blanket reset: every element gets a white background and dark
     text. The site's dark theme uses many hardcoded hex colors instead
     of the CSS variables, so overriding the variables alone would miss
     most of them — this brute-force reset is the reliable fix. */
  * {
    background: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* --- Hide screen-only UI chrome that means nothing on paper --- */
  .cart-button,
  .cart-sidebar,
  .overlay,
  .menu-toggle,
  .hero-buttons a[href="#contact"],
  .btn,
  .back-link {
    display: none !important;
  }

  /* Always show the full nav list on paper — no hamburger to reveal it */
  .nav-menu {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
  }

  /* --- Force single-column layout so cards never split awkwardly
     across a page break --- */
  .hero-grid,
  .two-col,
  .hero-stats,
  .feature-grid,
  .product-grid,
  .product-grid.full,
  .steps-grid,
  .fip-grid,
  .protocol-grid,
  .contact-grid,
  .footer-grid,
  .review-grid,
  .product-hero-layout,
  .product-highlight-list,
  .instruction-placeholder {
    display: block !important;
  }

  .hero-stats > *,
  .feature-grid > *,
  .product-grid > *,
  .steps-grid > *,
  .fip-grid > *,
  .protocol-grid > *,
  .review-grid > *,
  .product-highlight-list > *,
  .instruction-placeholder > * {
    margin-bottom: 16px !important;
  }

  /* --- Give every card/box a visible border — the on-screen versions
     rely on a near-invisible rgba(255,255,255,0.1) border meant for a
     dark background --- */
  .feature-card,
  .step-card,
  .fip-card,
  .protocol-card,
  .contact-card,
  .info-box,
  .product-card,
  .review-card,
  .spec-row,
  .instruction-block,
  .mini-highlight,
  .stat-card,
  .warning-box,
  .specs-box,
  .cart-item {
    border: 1px solid #999999 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* --- Keep a touch of brand color so structure is still scannable
     at a glance, printed on top of the blanket reset above --- */
  .product-tag,
  .price-box,
  .price,
  .psi,
  section-title span,
  .section-title > span,
  .fip-card h3 {
    color: #4C6B00 !important;
    font-weight: 700 !important;
  }

  .product-tag.red {
    color: #B02A37 !important;
  }

  a {
    color: #1a1a1a !important;
    text-decoration: underline !important;
  }

  /* Same block-link problem: the header logo and a product card are
     each one giant <a> — underlining the whole thing would underline
     the title/description/logo text too, which reads like a glitch
     rather than a link. */
  .link-card,
  .link-card *,
  .brand,
  .brand * {
    text-decoration: none !important;
  }

  .link-card .price {
    text-decoration: underline !important;
  }

  /* --- Form fields: make the inputs/textareas visible as fillable
     boxes rather than invisible dark-on-dark fields --- */
  .contact-form input,
  .contact-form textarea,
  .checkout-fields input,
  .checkout-fields textarea {
    border: 1px solid #999999 !important;
    padding: 8px !important;
  }

  /* --- Images: keep them, but never let one overflow the page width --- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .product-img,
  .product-hero-image,
  .hero-logo {
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
  }

  /* --- Section spacing: tighter than on screen, but still room to
     write a note in the margin --- */
  .section {
    padding: 24px 0 !important;
  }

  .container {
    width: 100% !important;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* Page numbers and the page URL are added by the browser's own
     print header/footer — leave "Headers and footers" on in the
     print dialog for that. */
}