/* Printed-only full-height sidebar strip that spans every page */
.print-sidebar-strip {
  display: none;
}

/* Print stylesheet for A4 export */

@page {
  size: A4;
  /* digital delivery: use zero page margins so the PDF uses full page area */
  margin: 0;
}

html, body {
  background: white !important;
  color: #222 !important;
  /* tighter base font for denser layout */
  font-size: 9pt;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  /* Ask supporting browsers to preserve background colors/images when printing */
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

@media print {
  html, body {
    position: relative;
  }

  body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 60mm;
    height: 100%;
    background: var(--sidebar);
    z-index: 0;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .container, .top-header {
    position: relative;
    z-index: 1;
  }
}

/* Hide interactive controls that are unnecessary on print */
.hamburger-menu, .overlay, .toggle-indicator {
  display: none !important;
}

/* Ensure the container fits within A4 and is centered */
.container {
  display: flex !important;
  flex-direction: row !important;
    /* Use full A4 width (210mm). Remove left padding so the left sidebar
      background sits flush with the page edge; keep right padding as a
      visual gutter. */
    max-width: 210mm !important;
    margin: 0 auto !important;
    background: white !important;
    padding: 0 8mm !important;
}

/* Make the sidebar and main content display in proportion on paper */
.left {
  position: static !important;
  /* Further reduce sidebar to fit its contents on the first page */
  width: 60mm !important;
  flex: 0 0 60mm !important;
  transform: none !important;
  /* Restore the sidebar background so the printed PDF shows the grey
     sidebar column consistently. */
  background: var(--sidebar) !important;
  border-right: 0px;
  margin-left:-8mm;
  height:200vh;
  font-size: 8.5pt !important;
  line-height: 1.15 !important;
  padding: 5mm 6mm 4mm 6mm !important;
}

.right {
  width: calc(100% - 42mm) !important;
  flex: 1 1 auto !important;
  /* Add a little extra top padding so section titles at the top of
     pages are not flush against the edge. */
  padding: 5mm 6mm 4mm 6mm !important;
  background: transparent !important;
}

/* Fixed left-column background repeated on every printed page. Using a
   positioned pseudo-element on the body (position:fixed) causes many
   browsers to repeat it per page when printing. This gives a continuous
   sidebar appearance on all pages. */
/* Remove the fixed pseudo-element approach (some print engines don't
   repeat fixed pseudo-elements per page). The sidebar now has its own
   background which prints on each page where it appears. */

/* Ensure profile picture prints at reasonable size */
.profile-pic-container {
  /* Make photo smaller so sidebar content fits on page 1 */
  height: 50mm !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  margin-bottom: 6px !important;
}
.profile-pic {
  /* Apply the same crop/zoom behaviour as the site version so the
     printed photo focuses on the same area. Use full-width/height and
     preserve transform-origin and object-position used on-screen. */
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  transform: scale(1.8) translateX(-8%) !important;
  transform-origin: center !important;
}

/* Expand all collapsed sections for print */
.section-content {
  opacity: 1 !important;
  transform: none !important;
  max-height: none !important;
  transition: none !important;
}

.section-title {
  cursor: default !important;
  /* use flex to vertically center the text inside the colored bar */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 6px !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: bold !important;
  background: var(--accent) !important;
  color: #fff !important;
  text-align: center !important;
  border-radius: 2px !important;
}

/* Reduce vertical spacing around section titles on print so they don't
   force large gaps that trigger page breaks. */
.right .section-title,
.left .section-title {
  margin: 2px 2px !important;
  margin-bottom: 2mm !important;
}

/* Add spacing to elements marked with break-element to create breathing
   room at the top of page breaks. This overrides the tight margin above. */
.right .section-title.break-element {
  margin-top: 8mm !important;
  page-break-before: always;
}

/* Prevent section titles from being left alone at the bottom of a page.
   Keep the title and the immediately following content together where
   possible. */
.section-title {
  page-break-after: avoid;
  break-after: avoid;
  widows: 2;
  orphans: 2;
}

/* Ensure the block immediately following a section title does not start
   on a new page if there is space available. Targets common following
   elements: .section-content, paragraphs, and work-item blocks. */
.section-title + .section-content,
.section-title + p,
.section-title + .work-item {
  page-break-before: avoid;
  break-before: avoid;
}

/* Preserve block integrity where useful, but allow large work items to
   break if necessary so the renderer can use leftover space on the
   previous page instead of pushing an entire section to the next page. */
.role, .work-summary, .achievements, .content-section {
  break-inside: avoid-column;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}



.work-summary {
    margin-bottom: 3mm;
}

/* Allow individual work items to split across pages when needed to
   avoid large jumps to the next page. */
.work-item {
  break-inside: auto;
  page-break-inside: auto;
  -webkit-column-break-inside: auto;
  margin-bottom: 3mm !important;
}

/* Keep the Key Skills list on the same page where possible to avoid
   inconvenient splits between pages. This targets lists in the sidebar. */
.left .section-title + ul,
.left ul {
  /* Try to keep the sidebar list together where possible. If it still
     cannot fit, the reduced font/margins above should make it fit on
     a single page. */
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Make headings a little larger on paper */
.top-header h1 {
  font-size: 12pt !important;
  margin: 4px 0 !important;
}

.role h3 {
  font-size: 10pt !important;
}

.date {
  font-size: 9.5pt !important;
}

/* Keep lists readable */
ul, p {
  orphans: 3;
  widows: 3;
}

/* Ensure list items are smaller than body text */
li {
  font-size: 8.5pt !important;
}

.small li,
.small ul {
  font-size: 8.5pt !important;
}

.left ul,
.left li {
  font-size: 8pt !important;
}

/* Reduce spacing for lists and paragraphs in print */
ul {
  margin-bottom: 2mm !important;
}

li {
  margin-bottom: 0.5mm !important;
}

p {
  margin: 0.7mm 0 !important;
}

.work-summary strong {
  margin-top: 2mm !important;
}

.work-summary em {
  margin: 0.5mm 0 !important;
}

.work-summary .role-desc {
  margin-top: 0.5mm !important;
}

.work-summary hr {
  margin: 2mm 0 !important;
}

/* Ensure link URLs are visible in print (optional) */
/* Show URL references only for links inside the main content area to
   avoid adding URLs to header/social links. */
.right a::after {
  content: " \00A0(" attr(href) ")";
  font-size: 9pt;
}

/* If the document is longer than 1 page, allow natural breaks.
   We aim for the content to fit into two A4 pages; depending on content
   density you may need to slightly adjust font-size or margins. */

/* Utility to reduce scale slightly for perfect two-page fit — commented out
   by default. Uncomment to apply a small scale to the whole page on print. */
/*
@media print {
  html { transform: scale(0.98); transform-origin: top left; }
}
*/