/**
 * Print stylesheet for Scribbli coloring pages.
 * Hides all UI chrome and maximizes the coloring page image for print output.
 * Apply via: <link rel="stylesheet" href="/css/print.css" media="print">
 * On dynamic /page/:id pages, inject this as a <style> block in the server-rendered HTML.
 */

/* ============================================
   GLOBAL: WHITE BACKGROUND, BLACK TEXT
   ============================================ */

* {
  background: white !important;
  color: black !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background: white !important;
  font-family: serif !important;
}

/* ============================================
   HIDE NAVIGATION, FOOTER, ALL UI CHROME
   ============================================ */

/* Nav bars */
site-nav, .site-nav,
nav, header, .breadcrumb,
.nav-logo, .nav-links,
.nav-cta, .nav-active {
  display: none !important;
}

/* Hero, sections, cards */
.hero, .browse-all, .info-section,
.categories-section, .section-label,
.categories-grid, .cat-card,
.cat-preview, .cat-body, .cat-btn,
.cat-tag, .cat-desc, .cat-count,
.email-cta-compact, .email-cta-form,
.compact-email-form, .compact-email-success,
.email-cta-success, .footer-links {
  display: none !important;
}

/* Page chrome on coloring page views */
.page-header, .page-label, .page-sub,
.coloring-card, .cta-section, .btn-cta {
  display: none !important;
}

/* Result/action area chrome */
.result-prompt-bar, .result-ready-banner,
.result-actions, .action-row, .action-btn,
.result-card, .result-comparison {
  display: none !important;
}

/* Comparison panels (upload mode) */
.comparison-panel, .comparison-label,
.arrow-icon, .label-original, .label-coloring {
  display: none !important;
}

/* Download and print buttons */
.btn-download, .btn-print, .gallery-btn-download,
.gallery-btn-print, .btn-pinterest, .btn-copy {
  display: none !important;
}

/* Footer */
footer, .footer-brand {
  display: none !important;
}

/* Lightbox */
.lightbox, .lightbox-content, .lightbox-info,
.lightbox-actions, .lightbox-close {
  display: none !important;
}

/* Loading/empty/error states */
.loading-section, .empty-state, .error-section,
.gallery-count, .load-more-wrapper {
  display: none !important;
}

/* Email capture forms */
.email-cta-form, .compact-email-form {
  display: none !important;
}

/* ============================================
   PRINT THE COLORING PAGE IMAGE
   ============================================ */

/* The main image container — center it on the page */
.gallery-card img,
.coloring-img,
.comparison-img,
.result-image,
.lightbox-content img,
.gallery-card-info {
  display: block !important;
}

/* Force the image to fill the page */
img[alt*="coloring page"],
img[alt*="Coloring page"] {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100vh !important;
  height: auto !important;
  object-fit: contain !important;
  page-break-inside: avoid !important;
}

/* Center the image on the printed page */
.gallery-card,
.coloring-img-wrapper,
.result-image-wrapper {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   PAGE MARGINS & SIZING
   ============================================ */

/* Use full page with small margins */
@page {
  margin: 0.5in;
  size: letter portrait;
}

/* Landscape orientation support */
@page landscape {
  size: letter landscape;
}

/* Prevent page breaks inside the image */
img {
  page-break-inside: avoid !important;
}

/* ============================================
   REMOVE ALL DECORATIVE GRADIENTS/BACKGROUNDS
   ============================================ */

.main-content,
.page-container,
.gallery-grid,
.coloring-img-wrapper,
.result-image-wrapper {
  background: white !important;
}

/* ============================================
   LIGHTBOX IMAGE PRINTING
   ============================================ */

/* When lightbox is open and printing, show the image */
.lightbox.active .lightbox-content {
  display: block !important;
}

.lightbox.active .lightbox-content img {
  display: block !important;
  width: 100% !important;
  max-height: 100vh !important;
  object-fit: contain !important;
}