/*
 * Print stylesheet — loaded with media="print" from header.php.
 *
 * The screen design (dark sections, fixed header, sticky Book bar,
 * scroll-in animations) printed as ~20 mostly-blank, ink-flooded pages.
 * For paper: black text on white, no chrome that repeats on every page,
 * everything revealed (animations + collapsed FAQ answers), photos
 * capped in size, and embeds that can't print dropped.
 */

@page {
  margin: 12mm;
}

/* Ink: black on white everywhere (the usual h5bp print reset). This also
 * drops the hero / page-title gradients and background photos. */
*,
*::before,
*::after {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Scroll-in animations: anything never scrolled into view is still at
 * opacity 0, which is what left whole pages blank. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Chrome that is useless on paper or would repeat on every page (maps,
 * video embeds and the contact form can't do anything on paper). */
.header .navmenu,
.header .mobile-nav-toggle,
.header .header-social,
.header .btn-getstarted,
.mobile-book-cta,
.scroll-top,
iframe,
lite-youtube,
.video-embed,
.dock-card-map,
.contact-form,
.carousel-control-prev,
.carousel-control-next,
.carousel-indicators,
.faq-toggle,
.footer .footer-about .logo,
.footer .social-links,
.footer .footer-links {
  display: none !important;
}

/* Footer on paper: just the phone / email and the copyright line. */
.footer .footer-top,
.footer .copyright {
  padding: 0 !important;
  margin-top: 8px !important;
}

/* The fixed header prints once, in flow, as just the logo. */
.header,
.fixed-top {
  position: static !important;
  padding: 0 0 8px !important;
}
.header .header-container {
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Chrome won't split a Bootstrap flex .row across pages — it pushes the
 * whole row to the next sheet, which left a single fish report with an
 * almost-empty first page. Floats fragment cleanly and keep the column
 * widths, so lay the grid out the Bootstrap 3 way for print. */
.row {
  display: block !important;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row > * {
  float: left;
}

/* Section spacing is sized for screens; tighten it for paper. */
section,
.section {
  padding: 16px 0 !important;
  min-height: 0 !important;
}

/* Expand every FAQ answer. */
.faq .faq-container .faq-item .faq-content {
  grid-template-rows: 1fr !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 6px !important;
}
.faq .faq-container .faq-item {
  padding: 10px 0 !important;
}

/* Photos: keep aspect ratio but cap the height so one picture doesn't
 * eat a whole sheet. */
img {
  max-width: 100% !important;
  max-height: 70mm !important;
  width: auto !important;
  height: auto !important;
}

/* Cards and buttons lost their fills above; keep a thin outline so they
 * still read as boxes. */
.card,
.btn,
.report-list-item,
.video-card,
.faq-item {
  border: 1px solid #bbb !important;
}

/* Keep headings with what follows, and don't split small blocks. */
h1, h2, h3, h4, h5, h6 {
  break-after: avoid;
}
img,
.card,
.report-list-item,
.faq-item,
.video-card,
tr {
  break-inside: avoid;
}

/* Trips page: cards have a fixed 4:3 photo frame, so the generic img cap
 * above shrank the photo and left an empty box. Fill the frame instead,
 * and lay the cards out 3-up (print width falls below Bootstrap's md
 * breakpoint, which stacked them one per row and split them across
 * sheets). "Learn more" is a link, useless on paper. */
.trip-grid .row > * {
  width: 33.333% !important;
}
.trip-card-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}
.trip-card-more {
  display: none !important;
}
.trip-card {
  break-inside: avoid;
  border: 1px solid #bbb !important;
}