/* Print-specific styles for Vibe Emergency Comic Deck */
@page {
  size: landscape;
  margin: 0.5in; /* standard margin for 8.5x11 paper */
}

html, body {
  height: auto !important;
  overflow: visible !important;
  background: white !important;
  font-family: 'Roboto Mono', monospace !important;
}

.app {
  height: auto !important;
  overflow: visible !important;
}

.toolbar {
  display: none !important;
}

.viewport {
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
}

.slide {
  display: block !important;
  position: relative !important;
  inset: 0 !important;
  height: 7.5in !important; /* for 8.5x11 landscape, leaving room for margins */
  margin: 0 !important;
  page-break-after: always !important;
  page-break-inside: avoid !important;
  background: white !important;
  border: 8px solid var(--black) !important; /* reduced from 12px */
  box-shadow: none !important;
  padding: 24px !important; /* ensure consistent internal spacing */
}

/* Make sure all slides are visible when printing */
.slide:not(.active) {
  display: block !important;
}

/* Preserve fonts */
h1 { font-family: 'Bangers', cursive !important; }
h2 { font-family: 'Bebas Neue', Impact, sans-serif !important; }
h3 { font-family: 'Bangers', cursive !important; }

/* Ensure all colors and backgrounds print */
* {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

/* Maintain panel styles */
.panel {
  border: 8px solid var(--black) !important;
  background-color: var(--yellow) !important;
}

.step {
  border: 8px solid var(--black) !important;
}

/* Ensure footer brand stays at bottom */
.footer-brand {
  position: absolute !important;
  bottom: 16px !important;
  right: 24px !important;
  font-family: 'Bebas Neue', Impact, sans-serif !important;
}

/* Fix specific components */
.burst svg, .speech svg {
  display: block !important;
  visibility: visible !important;
}

.label {
  border: 8px solid var(--black) !important;
  background: var(--white) !important;
}