/* ============================================
   Mass Slides - Print / PDF stylesheet

   Linked with media="print", so every rule here
   only applies when printing (or exporting to PDF).

   The deck is laid out at a fixed 1280x720 design
   size (16:9). Two layouts are supported, switched
   by a class on <html> from js/export-pdf.js:

     .print-layout--slides   one slide per page, 16:9 landscape (default)
     .print-layout--handout  two slides per A4 portrait page

   The matching @page rule is injected at print time
   by export-pdf.js; the rule below is the fallback
   for a raw Cmd/Ctrl+P.
   ============================================ */

@page {
  size: 1280px 720px;
  margin: 0;
}

/* Force background colours and images to print. Chrome/Edge/Safari
   otherwise drop them unless "Background graphics" is ticked, which
   would render the dark slides as white-on-white. */
*,
*::before,
*::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html,
body {
  width: auto;
  height: auto;
  overflow: visible;
  background: #ffffff;
}

.presentation {
  display: block;
  width: auto;
  height: auto;
  background: none;
}

.slides-container {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

/* --- Screen-only chrome --- */
.slide-nav,
.progress-bar,
.pdf-modal,
.pdf-modal-backdrop,
.loading {
  display: none !important;
}

/* ============================================
   Slide as a page
   ============================================ */
.slide {
  position: relative !important;
  width: 1280px;
  height: 720px;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  pointer-events: auto;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
  break-after: page;
  page-break-after: always;
}

.slide:last-child {
  break-after: auto;
  page-break-after: auto;
}

/* Costs slides scroll on screen; in print they have to sit on one page. */
.slide--costs {
  overflow: hidden;
}

/* ============================================
   Fixed type scale

   On screen these sizes are vw-based. In print, vw
   resolves against the page box, which differs per
   browser and per paper size, so every vw value is
   pinned here.

   These are deliberately smaller than the on-screen
   equivalents. A page can't scroll: anything that
   doesn't fit is silently cut off, so print trades
   presentation-sized type for headroom.
   ============================================ */
:root {
  --slide-padding: 48px;
}

.slide--title .slide__title,
.slide--divider .slide__title {
  font-size: 52px;
}

.slide--title .slide__subtitle {
  font-size: 18px;
}

.slide--feature .slide__title {
  font-size: 42px;
}

.slide__bullets li {
  font-size: 15.5px;
  line-height: 1.5;
}

.slide__bullets {
  gap: 8px;
  margin-top: 16px;
}

.slide__bullets--nested li {
  font-size: 13.5px;
}

.slide__description {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.5;
}

.slide__description .slide__heading {
  margin: 22px 0 6px;
}

.slide__description h1.slide__heading {
  font-size: 22px;
}

.slide__description h2.slide__heading {
  font-size: 19px;
}

.slide__description h3.slide__heading {
  font-size: 17px;
}

.slide__description h4.slide__heading,
.slide__description h5.slide__heading,
.slide__description h6.slide__heading {
  font-size: 15px;
}

.costs__heading,
.slide--onboarding .slide__title {
  font-size: 26px;
}

.costs__timeline-value {
  font-size: 22px;
}

.slide--closing .closing__logo {
  height: 80px;
}

.slide--closing .closing__logo-container svg {
  width: 384px;
}

.slide__footer {
  bottom: 32px;
}

.slide__footer-logos img,
.slide--light .slide__footer-logos img {
  height: 26px;
}

/* ============================================
   Feature slides

   Screenshots are supporting evidence in a PDF, not
   the main event, so the image column gives up width
   to the copy. Images also need an explicit height
   cap: max-height:100% resolves against an auto-height
   grid row, so a tall screenshot would otherwise push
   straight off the page.
   ============================================ */
.slide--feature {
  padding-top: calc(var(--slide-padding) + 32px);
}

.slide--feature .slide__content {
  grid-template-columns: 1.4fr 0.6fr;
  gap: 0 40px;
}

.slide--feature .slide__image {
  max-height: 570px;
}

.slide--feature .slide__image img {
  max-height: 570px;
}

.slide--feature .slide__image--stacked img:first-child {
  max-height: 440px;
}

.slide--feature .slide__image--stacked img:nth-child(2) {
  max-height: 340px;
}

/* ============================================
   Costs slides

   Cost tables are the densest thing in the deck and
   the most damaging to lose rows from, so they get
   the tightest treatment.
   ============================================ */
.costs__info {
  gap: 14px;
}

.costs__rate,
.costs__timeline-label {
  font-size: 12px;
}

.costs__description,
.costs__notes li {
  font-size: 11.5px;
  line-height: 1.4;
}

.costs__notes {
  gap: 7px;
}

.costs__timeline {
  margin-top: 4px;
}

/* Sized so the largest table in the base (12 rows) still
   clears the page with room to spare. */
.costs__table thead th,
.costs__table tbody td {
  padding: 8px 14px;
  font-size: 11.5px;
}

.costs__table tbody tr.costs__row--total td {
  font-size: 12.5px;
}

.costs__item-subtitle {
  font-size: 9.5px;
  margin-top: 2px;
}

.costs__value-sub {
  font-size: 9px;
}

.costs__tables {
  gap: 20px;
}

.costs__table-section-title {
  font-size: 12.5px;
}

.costs__table-section-subtitle {
  font-size: 11.5px;
  margin-bottom: 8px;
}

/* ============================================
   Onboarding slides
   ============================================ */
.slide--onboarding .slide__title {
  margin-bottom: 24px;
}

.onboarding__cards {
  gap: 16px;
}

.onboarding__card {
  padding: 20px;
}

.onboarding__card-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.onboarding__card-items li {
  font-size: 11.5px;
  line-height: 1.45;
}

/* ============================================
   Handout layout — two slides per A4 portrait page

   `zoom` (rather than `transform: scale`) because it
   shrinks the layout box too, so the scaled slide
   actually fits the narrower page.
   1280px * 0.5727 = 733px = 194mm (A4 width less 8mm margins)
   ============================================ */
.print-layout--handout .slide {
  zoom: 0.5727;
  margin: 0 auto 48px;
  outline: 1px solid #d9d9e3;
  break-after: auto;
  page-break-after: auto;
}

.print-layout--handout .slide:nth-child(2n),
.print-layout--handout .slide:last-child {
  margin-bottom: 0;
}

.print-layout--handout .slide:nth-child(2n) {
  break-after: page;
  page-break-after: always;
}

.print-layout--handout .slide:last-child {
  break-after: auto;
  page-break-after: auto;
}