.cv-render { position: relative; }
.cv-page {
  width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #222;
  font-family: 'Inter', Arial, sans-serif; font-size: 10.5pt; line-height: 1.45;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 16mm 16mm;
}
.cv-page h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 24pt; margin: 0 0 2px; color: var(--cv-accent); }
.cv-title { font-size: 12pt; color: #555; margin-bottom: 6px; }
.cv-contact { font-size: 9pt; color: #666; }
.cv-section { margin-top: 16px; }
.cv-section-title { font-size: 10.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-accent); border-bottom: 1.5px solid var(--cv-accent); padding-bottom: 3px; margin: 0 0 8px; }
.cv-summary { margin: 0; color: #333; }
.cv-item { margin-bottom: 10px; }
.cv-item-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.cv-item-date { font-weight: 400; color: #777; font-size: 9pt; white-space: nowrap; }
.cv-item-sub { font-size: 9pt; color: #777; margin-bottom: 3px; }
.cv-bullets { margin: 4px 0 0 16px; padding: 0; }
.cv-bullets li { margin-bottom: 2px; }
.cv-plain-list { margin: 0; padding: 0 0 0 16px; }
.cv-plain-list li { margin-bottom: 2px; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tag { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; padding: 2px 10px; font-size: 8.5pt; }
.cv-hr { border: none; border-top: 1.5px solid var(--cv-accent); margin: 10px 0; }
.cv-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cv-photo { object-fit: cover; flex-shrink: 0; }
.cv-photo-inline { width: 26mm; height: 26mm; border-radius: 8px; margin-right: 6mm; }
.cv-photo-round { width: 24mm; height: 24mm; border-radius: 50%; margin-bottom: 8px; border: 2px solid rgba(255,255,255,0.5); }
.cv-photo-center { margin: 0 auto 8px; display: block; }
.cv-photo-inline-light { border-color: rgba(255,255,255,0.6); }
.cv-header-minimal { display: flex; align-items: flex-start; }
.cv-watermark {
  position: absolute; top: 45%; left: 0; right: 0; text-align: center; transform: rotate(-30deg);
  font-size: 22pt; font-weight: 700; color: rgba(150,150,150,0.28); letter-spacing: 0.1em; pointer-events: none;
}

/* Minimal */
.cv-minimal .cv-header-minimal { text-align: left; margin-bottom: 6px; }
.cv-minimal .cv-section-title { border-bottom: 1px solid #ddd; color: #333; }
.cv-minimal h1 { color: #222; }

/* Modern — teal sidebar */
.cv-modern { display: flex; padding: 0; overflow: hidden; }
.cv-modern .cv-sidebar { background: var(--cv-accent); color: #fff; width: 68mm; padding: 16mm 10mm; }
.cv-modern .cv-sidebar h1 { color: #fff; font-size: 18pt; }
.cv-modern .cv-sidebar .cv-title { color: rgba(255,255,255,0.85); }
.cv-modern .cv-contact-stack { font-size: 8.5pt; color: rgba(255,255,255,0.85); margin-bottom: 10px; }
.cv-modern .cv-sidebar .cv-section-title { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.cv-modern .cv-plain-list, .cv-modern .cv-sidebar li { color: rgba(255,255,255,0.9); }
.cv-modern .cv-main { padding: 16mm 12mm; flex: 1; }

/* Classic — centered serif */
.cv-classic .cv-header-classic { text-align: center; }
.cv-classic h1 { color: #222; }
.cv-classic .cv-section-title { text-align: left; }

/* Executive — banner header */
.cv-executive { padding: 0; overflow: hidden; }
.cv-header-exec { background: var(--cv-accent); color: #fff; padding: 14mm 16mm 10mm; }
.cv-header-exec h1 { color: #fff; }
.cv-header-exec .cv-title { color: rgba(255,255,255,0.85); }
.cv-header-exec .cv-contact { color: rgba(255,255,255,0.75); }
.cv-exec-body { display: flex; padding: 12mm 16mm; gap: 16mm; }
.cv-exec-body .cv-main { flex: 1.6; }
.cv-exec-body .cv-sidebar-light { flex: 1; border-right: 1px solid #eee; padding-right: 16px; }
.cv-exec-body .cv-sidebar-light .cv-tag { background: rgba(0,0,0,0.05); border-color: #ddd; color: #333; }

/* Compact */
.cv-header-compact { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.cv-compact .cv-section { margin-top: 10px; }
.cv-compact .cv-item { margin-bottom: 6px; }
.cv-contact-right { text-align: right; }

/* Timeline */
.cv-timeline { position: relative; padding-left: 18px; border-left: 2px solid var(--cv-accent); }
.cv-timeline-item { position: relative; margin-bottom: 14px; }
.cv-timeline-dot { position: absolute; left: -23px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cv-accent); }

/* Balanced — two equal white columns */
.cv-balanced-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 10px; }
.cv-balanced .cv-header-classic { text-align: left; border-bottom: 2px solid var(--cv-accent); padding-bottom: 10px; }

/* Bold header block */
.cv-header-bold { background: var(--cv-accent); color: #fff; padding: 14mm 16mm 8mm; margin: -16mm -16mm 0; display: flex; align-items: center; gap: 12px; }
.cv-header-bold h1 { color: #fff; font-size: 22pt; }
.cv-header-bold .cv-title { color: rgba(255,255,255,0.85); }
.cv-contact-bold { text-align: center; padding: 8px 0 4px; color: #666; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.cv-boldheader { padding-top: 16mm; }

/* Elegant */
.cv-elegant { font-family: 'Playfair Display', Georgia, serif; }
.cv-header-elegant { text-align: center; margin-bottom: 8px; }
.cv-header-elegant h1 { letter-spacing: 0.05em; }
.cv-elegant .cv-title { letter-spacing: 0.08em; text-transform: uppercase; font-size: 10pt; }
.cv-elegant .cv-section-title { border-bottom: none; border-top: 1px solid var(--cv-accent); padding-top: 8px; text-align: center; letter-spacing: 0.15em; }
.cv-elegant .cv-item-head { font-family: 'Inter', Arial, sans-serif; }

/* Newspaper */
.cv-news-body { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 12mm; margin-top: 10px; }
.cv-news-col-narrow { border-right: 1px solid #ddd; padding-right: 6mm; }

/* Matric / bursary-applicant template */
.cv-matric { display: flex; padding: 0; overflow: hidden; font-family: 'Century Gothic', 'Poppins', Arial, sans-serif; }
.cv-matric-sidebar { background: #646464; color: #fff; width: 68mm; padding: 16mm 10mm; }
.cv-matric-sidebar h1 { color: #fff; font-family: inherit; font-size: 16pt; }
.cv-matric-sidebar .cv-title { color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.cv-matric-heading { font-size: 9.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border-bottom: 1.5px solid rgba(255,255,255,0.5); padding-bottom: 3px; margin-bottom: 6px; }
.cv-matric-sidebar .cv-contact-stack { font-size: 8.5pt; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.cv-matric-sidebar .cv-section-title { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.cv-matric-sidebar .cv-plain-list, .cv-matric-sidebar li { color: rgba(255,255,255,0.9); }
.cv-matric .cv-main { padding: 16mm 12mm; flex: 1; font-family: inherit; }
.cv-matric .cv-section-title { color: #343434; border-bottom-color: #7D7D7D; }

/* Text on the dark coloured sidebars (Matric, Modern, Sidebar Blue/Rust):
   headings, referee details and paragraph sections such as Interests would
   otherwise inherit dark body colours and disappear into the background. */
.cv-matric .cv-matric-sidebar .cv-section-title { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
:is(.cv-matric-sidebar, .cv-modern .cv-sidebar, .cv-hubside-bar) :is(.cv-summary, .cv-item-title) { color: #fff; }
:is(.cv-matric-sidebar, .cv-modern .cv-sidebar, .cv-hubside-bar) :is(.cv-item-sub, .cv-item-date) { color: rgba(255,255,255,0.8); }

/* ---- Career Hub designs (12–16): fixed colours, as supplied ---- */
.cv-photo-square { width: 100%; aspect-ratio: 1 / 0.85; border-radius: 0; margin-bottom: 10px; display: block; }
.cv-dated { display: grid; grid-template-columns: 26mm 1fr; gap: 4mm; margin-bottom: 12px; }
.cv-dated-date { font-size: 9pt; color: #555; }
.cv-dated-title { font-weight: 700; font-size: 11.5pt; color: #222; }
.cv-dated-sub { font-style: italic; font-size: 9.5pt; color: #555; margin-bottom: 3px; }
.cv-contact-label { font-weight: 700; font-size: 8.5pt; }
.cv-contact-value { font-size: 8.5pt; margin-bottom: 7px; word-break: break-word; }
.cv-icon-row { font-size: 9pt; margin-bottom: 5px; }
.cv-icon-glyph { display: inline-block; width: 16px; margin-right: 6px; text-align: center; }
/* The site CSS reset (Tailwind) strips list bullets. Templates 6–16 show skills,
   responsibilities and education modules in point form, so put the bullets back. */
:is(.cv-compact, .cv-timeline-tpl, .cv-balanced, .cv-boldheader, .cv-elegant, .cv-newspaper,
    .cv-hubside, .cv-maroon, .cv-navybanner, .cv-bluetimeline) :is(.cv-bullets, .cv-plain-list, .cv-bt-skills) { list-style: disc; }
.cv-modules-label { font-size: 8.5pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #777; margin-top: 4px; }
.cv-hubside-bar .cv-modules-label { color: rgba(255,255,255,0.8); }
:is(.cv-hubside, .cv-maroon, .cv-bluetimeline) .cv-section-title { font-family: 'Inter', Arial, sans-serif; font-weight: 700; }
:is(.cv-hubside-bar, .cv-maroon-body aside, .cv-navy-body aside) .cv-item-head { flex-direction: column; gap: 0; }

/* 12 & 14: Sidebar Blue / Sidebar Rust */
.cv-hubside { display: flex; padding: 0; overflow: hidden; }
.cv-hubside-bar { width: 64mm; padding: 10mm 7mm; color: #fff; background: var(--hub-main); flex-shrink: 0; }
.cv-hubside-bar h1 { color: #fff; font-family: 'Inter', Arial, sans-serif; font-weight: 700; font-size: 21pt; line-height: 1.15; }
.cv-hubside-bar .cv-title { color: var(--hub-muted); font-size: 10.5pt; }
.cv-hubside-bar .cv-section-title { background: var(--hub-band); color: #fff; border: none; text-transform: none; letter-spacing: 0; font-size: 12pt; padding: 3px 7mm; margin: 0 -7mm 8px; }
.cv-hubside-bar .cv-plain-list, .cv-hubside-bar li, .cv-hubside-bar .cv-item-sub, .cv-hubside-bar .cv-item-date { color: rgba(255,255,255,0.92); }
.cv-hubside-main { flex: 1; padding: 10mm 9mm; }
.cv-hubside-main .cv-section-title { color: var(--hub-main); text-transform: none; letter-spacing: 0; font-size: 13pt; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 8px 0 5px; margin: 14px 0 10px; }
.cv-hub-blue { --hub-main: #234e70; --hub-band: #1b3b55; --hub-muted: #8fa9c4; }
.cv-hub-rust { --hub-main: #8e3a22; --hub-band: #72301c; --hub-muted: #d9ae9f; }

/* 13: Maroon */
.cv-maroon { --hub-main: #7b3b4e; }
.cv-maroon h1 { color: var(--hub-main); font-family: 'Inter', Arial, sans-serif; font-weight: 700; font-size: 28pt; }
.cv-maroon > .cv-title { color: #5a6478; font-size: 12.5pt; }
.cv-maroon > .cv-summary { font-size: 9.5pt; margin: 6px 0 12px; }
.cv-maroon-body { display: grid; grid-template-columns: 52mm 1fr; gap: 8mm; }
.cv-maroon .cv-section-title { color: var(--hub-main); text-transform: none; letter-spacing: 0; font-size: 12.5pt; border-bottom: 1px solid #ddd; display: flex; align-items: center; gap: 8px; }
.cv-section-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--hub-main); color: #fff; font-size: 10pt; display: inline-flex; align-items: center; justify-content: center; }
.cv-maroon .cv-dated { grid-template-columns: 24mm 1fr; }
.cv-maroon .cv-dated-date { font-weight: 700; color: #333; }

/* 15: Navy Banner */
.cv-navybanner { padding: 10mm; font-family: 'Times New Roman', Georgia, serif; }
.cv-navy-header { background: #3e4e6e; color: #fff; text-align: center; padding: 8mm 10mm 7mm; }
.cv-navy-initials { display: inline-block; border: 1.5px solid #fff; padding: 6px 12px; font-size: 10pt; letter-spacing: 0.15em; margin-bottom: 10px; }
.cv-navy-header h1 { color: #fff; font-family: inherit; font-style: italic; font-size: 25pt; }
.cv-navy-header .cv-title { color: #a9b4cb; font-size: 13pt; margin: 0; }
.cv-navy-body { display: grid; grid-template-columns: 1fr 62mm; min-height: 240mm; font-size: 9.5pt; color: #444; }
.cv-navy-body > main { padding: 4mm 7mm 0 3mm; }
.cv-navy-body > aside { background: #f2f2f2; padding: 6mm 5mm; }
.cv-navybanner .cv-section { border-top: 1px solid #ccc; padding-top: 10px; }
.cv-navybanner .cv-section:first-child { border-top: none; }
.cv-navybanner .cv-section-title { color: #444; font-family: inherit; font-weight: 700; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 11.5pt; border: none; }
.cv-navy-job { font-weight: 700; color: #333; }
.cv-navy-date { font-style: italic; margin-bottom: 3px; }
.cv-navy-contact { margin-bottom: 12px; }

/* 16: Blue Timeline */
.cv-bluetimeline { --hub-main: #4a90d9; }
.cv-bt-header { display: flex; gap: 12mm; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 8mm; margin-bottom: 7mm; }
.cv-bt-initials { width: 24mm; height: 24mm; border-radius: 50%; border: 1.5px solid var(--hub-main); color: #3a6fa8; font-size: 18pt; display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; }
.cv-bt-initials span { width: 1px; height: 11mm; background: var(--hub-main); }
.cv-bt-header .cv-photo-round { width: 24mm; height: 24mm; margin: 0; }
.cv-bluetimeline h1 { color: var(--hub-main); font-family: 'Inter', Arial, sans-serif; font-weight: 400; font-size: 26pt; }
.cv-bluetimeline .cv-title { color: #5a6478; }
.cv-bt-contact { display: flex; flex-wrap: wrap; column-gap: 16px; }
.cv-bt-contact .cv-icon-glyph { color: var(--hub-main); width: auto; margin-right: 4px; }
.cv-bt-row { display: grid; grid-template-columns: 34mm 1fr; }
.cv-bt-label { text-align: right; padding-right: 7mm; color: var(--hub-main); font-weight: 700; font-size: 9.5pt; text-transform: uppercase; }
.cv-bt-content { border-left: 1.5px solid #bfbfbf; padding: 0 0 8mm 7mm; position: relative; }
.cv-bt-content::before { content: ''; position: absolute; left: -5px; top: 2px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #bfbfbf; background: #fff; }
.cv-bt-role { color: var(--hub-main); text-transform: uppercase; }
.cv-bt-company { font-weight: 700; font-size: 10pt; margin: 2px 0 3px; }
.cv-bt-skills { columns: 2; margin: 0; padding-left: 16px; }
.cv-bt-skills li { margin-bottom: 3px; }

/* Cover letters */
.cl-formal, .cl-modern { font-family: 'Inter', Arial, sans-serif; }
.cl-sender-name { font-family: 'Playfair Display', Georgia, serif; font-size: 15pt; color: var(--cv-accent); font-weight: 600; }
.cl-date { margin: 16px 0; color: #555; }
.cl-recipient { margin-bottom: 16px; color: #333; }
.cl-greeting { margin-bottom: 12px; font-weight: 600; }
.cl-para { margin: 0 0 12px; color: #333; }
.cl-signoff { margin-top: 16px; }
.cl-modern-header { background: var(--cv-accent); color: #fff; padding: 14mm 16mm 10mm; }
.cl-modern-header .cl-sender-name { color: #fff; }
.cl-modern-body { padding: 12mm 16mm; }

@media print {
  /* Without this, Chrome/most browsers silently drop background colours and
     mute text colours on print/"Save as PDF" — this is what made the sidebar
     fills, accent headings and banners disappear or shift colour in the PDF
     even though the on-screen preview looked correct. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  /* The on-screen preview is shrunk with a CSS transform so it fits the
     panel (see .cv-preview-scale in builder/cl-builder). A `transform` on
     an ancestor creates a new containing block for absolutely-positioned
     descendants, so #printArea's `position: absolute; left:0; top:0` below
     was positioning (and scaling) it relative to that shrunk wrapper
     instead of the page — the actual content ended up scaled to 62% and
     shifted off the printable page, which is what rendered as "blank".
     Resetting the transform for print removes that containing block so
     #printArea is positioned at the real page origin, full size. */
  .cv-preview-scale { transform: none !important; }
  .cv-page { box-shadow: none; margin: 0; }
  @page { size: A4; margin: 0; }

  /* `visibility: hidden` above still leaves the builder's form taking up
     space, and `print-color-adjust: exact` prints the page's cream body
     background — so everything after the CV came out as several extra cream
     pages (worst on imported CVs, whose forms are long). Remove everything
     that isn't the CV or one of its wrappers from the print layout entirely,
     flatten the wrappers, and print on white. */
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; }
  body *:not(:has(#printArea)):not(#printArea):not(#printArea *) { display: none !important; }
  body *:has(#printArea) {
    display: block !important; position: static !important; transform: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: transparent !important;
  }
  #printArea { position: static !important; }
  /* Bottom padding only pushes a blank page when content ends at a page edge. */
  #printArea :is(.cv-page, .cv-exec-body, .cv-main, .cv-hubside-main, .cv-navy-body > main) { padding-bottom: 0 !important; }
}