/* Print-only stylesheet, loaded via <link media="print"> so it never
   affects the screen layout. Overrides the app's scoped component styles,
   which needs !important since Vue's scoped attribute selectors
   (e.g. .position-item[data-v-xxx]) otherwise outrank plain class
   selectors here. */

@page {
  margin: 16mm 14mm 10mm;
}

/* Fixed elements repeat on every printed page. Firefox clips anything
   outside a page's content area (and doesn't support @page margin boxes),
   so the footer sits at the bottom of the content area, and every page
   fragment of .page reserves room for it with its own bottom padding. */
.print-footer {
  display: block !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 8pt;
  text-align: center;
  color: #aaa;
}

.print-footer a {
  text-decoration: none;
}

.page {
  display: block !important;
  padding-bottom: 12mm !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html,
body {
  background: #fff !important;
}

/* Nothing animates on paper, and a transition caught mid-way (e.g. an item
   expanding) would otherwise print its in-between state. */
*,
*::before,
*::after {
  transition: none !important;
}

/* Strip every screen-only decorative surface: gradients, shadows, sticky
   positioning, scroll containers. */
.app-header,
.intro,
.position-item,
.cta {
  position: static !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.app-header {
  margin-inline: 0 !important;
  padding: 0 0 8mm !important;
}

.contact-button {
  display: none !important;
}

.print-link {
  display: inline-flex !important;
  /* Centered on the logo it looks too high, so it sits a little lower. */
  position: relative;
  top: 3px;
}

/* The inset bottom shadow is what makes the buttons read as buttons.
   Firefox counts shadows as backgrounds, which it drops by default. */
.button {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Page 1 is the header, intro, numbers and principles. The page is narrow
   enough to trigger the app's small-screen media queries, so the spacing
   and type sizes they set are overridden here with fixed print values. */
.intro {
  margin-top: 6mm !important;
}

.intro h1 {
  font-size: 40pt !important;
  margin-bottom: 3mm !important;
}

.intro p {
  font-size: 22pt !important;
  line-height: 1.05 !important;
  max-width: 75%;
}

.numbers {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4mm !important;
  margin-top: 10mm !important;
  padding-top: 0 !important;
}

/* Browsers drop backgrounds when printing unless told otherwise. */
.numbers > div {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  padding: 5mm 4mm !important;
  border-radius: 16px !important;
}

.numbers .value {
  font-size: 24pt !important;
}

.numbers .label {
  font-size: 9pt !important;
  line-height: 1.25;
}

.principles {
  padding-top: 14mm !important;
}

.principles > h2,
.cv > h2 {
  font-size: 28pt !important;
}

.principles > h2,
.principles > p,
.cv > h2,
.cv > p {
  max-width: 75% !important;
  margin-inline: 0 !important;
}

.principles > p,
.cv > p {
  font-size: 15pt !important;
  line-height: 1.15 !important;
}

.principles-container {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6mm !important;
  margin-top: 6mm !important;
}

.principles h3 {
  font-size: 11pt !important;
  margin-top: 0 !important;
}

.principles-container p {
  font-size: 9.5pt !important;
  line-height: 1.4;
  margin-top: 2mm !important;
}

/* Page 2 starts with the CV intro, directly followed by the positions. */
.cv {
  break-before: page;
  page-break-before: always;
  padding-top: 0 !important;
}

/* The timeline is an interactive overview of the positions below it; on
   paper the positions speak for themselves. */
.timeline,
.timeline-spacer {
  display: none !important;
}

/* Flex containers don't split across pages in every browser (Safari moves
   the whole block to the next page instead), so the position list becomes
   a plain block. */
.position-list {
  display: block !important;
  max-width: none !important;
  margin: 10mm 0 0 !important;
  padding: 0 !important;
}

.position-wrapper + .position-wrapper {
  margin-top: 6mm;
}

/* Description and achievements side by side, as on wide screens. */
.details-columns:not(.single-column) {
  grid-template-columns: 1fr 1fr !important;
  gap: 6mm !important;
}

/* Slightly smaller than on screen, so the positions take up fewer pages. */
.position-item .summary {
  font-size: 12pt !important;
}

.position-item .company,
.position-item .roles,
.position-item .description,
.position-item .achievements h4,
.position-item .achievements li {
  font-size: 9pt !important;
}

.position-item .description,
.position-item .achievements li {
  line-height: 1.4;
}

/* Position cards are collapsed by default in the app (height: 0 detail
   panes, driven by JS state) — print always shows every detail regardless
   of on-screen expanded/collapsed state. */
.position-item {
  /* On narrow screens the items reach into the page margins and inset
     their content by the same amount again, which on paper only adds to
     the page margins. */
  --bleed: 0px !important;
  --margin-x: 0px !important;
  height: auto !important;
  overflow: visible !important;
  border: none !important;
  border-bottom: 1pt solid #000 !important;
  margin: 0 !important;
  padding: 0 0 6mm !important;
  /* Keeps the header with its content. The description and achievements
     columns can't split across pages in every browser anyway, and every
     position fits on one page at print sizes. */
  break-inside: avoid;
  page-break-inside: avoid;
}

/* The list's gap already separates the items. */
.position-header {
  padding-top: 0 !important;
}

.position-wrapper:last-child .position-item {
  border-bottom: none !important;
}

.expand-toggle {
  display: none !important;
}

.details {
  margin-bottom: 0 !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Thumbnails are too small on paper to show anything readable. */
.image-gallery {
  display: none !important;
}

/* Side by side, as on wide screens, at the same size as the positions. */
.education {
  grid-template-columns: 1fr 1fr !important;
  gap: 6mm !important;
  padding-top: 10mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.education h2 {
  font-size: 14pt !important;
  margin-bottom: 3mm !important;
}

.education .ruled-list {
  font-size: 9pt !important;
}

.education .ruled-list li {
  grid-template-columns: 6.5em 1fr;
}

/* The screen version fills the window; on paper it just follows the
   positions, at the same sizes as the intro. */
.cta {
  min-height: 0 !important;
  padding: 10mm 0 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.cta h2 {
  font-size: 40pt !important;
}

.cta p {
  font-size: 22pt !important;
  line-height: 1.05 !important;
  max-width: 75%;
}

.cta-button {
  font-size: 22pt !important;
  margin: 6mm 0 0 !important;
}

.cta-button .screen-label {
  display: none !important;
}

.cta-button .print-label {
  display: inline !important;
}