/* ---------------------------------------------------------------------
   print.css — applied only when printing / "Save as PDF".
   Goal: make the PDF look as close to the on-screen CV as possible.

   Layout strategy:
   - The sheet becomes a plain block (not flex) so the content column
     paginates predictably across A4 pages.
   - The navy sidebar background is painted by a `position: fixed`
     layer: a fixed element is repeated on every printed page, so the
     sidebar color runs full-height from the top of page 1 to the very
     bottom of the last page. The sidebar CONTENT stays a float so it
     appears once, at its natural position (it no longer repeats on
     page 2+, which was the old bug that motivated dropping fixed).
   - `print-color-adjust: exact` forces backgrounds and colors to
     render exactly, so the navy/yellow/white blocks and the muted
     text match the screen instead of being dropped or washed out.
   --------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 0;
}

/* Print colors exactly as styled on screen. Without this, browsers drop
   backgrounds (navy sidebar, yellow photo panel) unless the user ticks
   "Background graphics", and muted text comes out faint/blurry. */
*, *::before, *::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html, body {
  background: #fff !important;
  margin: 0 !important;
  -webkit-font-smoothing: auto !important;
}

.no-print,
.cv-toolbar,
.cv-photo-nav,
.cv-load-more-btn,
.cv-show-details-btn,
.cv-more-detail-btn {
  display: none !important;
}

/* Anything still marked js-hidden (i.e. the visitor never expanded it)
   stays hidden in the PDF too -- printing mirrors the live screen state. */
.js-hidden {
  display: none !important;
}

.print-only {
  display: block !important;
}

:root {
  --cv-print-sidebar: 200px;

  /* Vertical gap between consecutive entries in the PDF (web view is
     unaffected). Tune these two values to tighten/widen the spacing:
       --cv-print-entry-gap          plain lists (Publications, Awards…)
       --cv-print-entry-gap-timeline timeline lists (Education, Experience…)
     The timeline's connecting line uses the same variable, so it always
     fills the gap exactly regardless of what you set here. */
  --cv-print-entry-gap: .65rem;
  --cv-print-entry-gap-timeline: .91rem;
}

.cv-sheet {
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important; /* not flex/grid: those don't repaginate across pages */
}

/* Full-height sidebar background. position:fixed repeats on every page,
   so the navy strip reaches the bottom of the whole document, not just
   the first page. z-index 0 keeps it beneath the sidebar/content boxes.
   The strip bleeds 2px past the top/bottom page edges: the A4 page height
   is fractional (841.92pt), so an edge-exact strip anti-aliases into a
   faint hairline at the last pixel row — bleeding past removes it. */
.cv-sheet::before {
  content: "";
  position: fixed;
  top: -2px;
  left: 0;
  bottom: -2px;
  width: var(--cv-print-sidebar);
  background: var(--cv-sidebar-bg, #171f2e);
  z-index: 0;
}

.cv-sheet::after { content: ""; display: table; clear: both; }

.cv-sheet > .cv-sidebar {
  float: left;
  position: relative;
  z-index: 1;
  width: var(--cv-print-sidebar) !important;
  /* no min-height here: it would force the sheet to a full page and push
     trailing content (e.g. the print footer) onto an extra page. The
     fixed ::before background above already paints the navy strip
     full-height on every page. */
  box-sizing: border-box;
  padding-bottom: 8mm;
  /* Allow sidebar to fragment across pages like web — avoid large empty gap when block is too long */
  break-inside: auto;
  page-break-inside: auto;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cv-sheet > .cv-content {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: var(--cv-print-sidebar) !important;
  width: auto !important;
  padding: 10mm 11mm 4mm !important;
  box-sizing: border-box;
  /* A section flowing onto a new page starts as a fresh fragment of this
     box; "clone" makes every fragment repeat the original padding, so the
     continuation keeps the 10mm top offset instead of sitting flush
     against the top paper edge. Browsers without support simply fall back
     to the old (tight) behavior. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* display:block loses the flex gap — restore it as margins */
.cv-sheet > .cv-content > .cv-card + .cv-card { margin-top: 1.6rem; }

/* Entry lists become plain block flow for print: Chrome paginates block
   flow far more predictably than flex columns (flex can leave large gaps
   before a page break). Spacing previously provided by `gap` is restored
   with margins. */
.cv-entry-list { display: block; }
.cv-entry-list > .cv-entry + .cv-entry { margin-top: var(--cv-print-entry-gap); }
.cv-entry-list-timeline > .cv-entry + .cv-entry { margin-top: var(--cv-print-entry-gap-timeline); }

/* The web timeline draws one continuous absolutely-positioned line,
   which gets clipped at page breaks. Redraw it per entry instead so it
   survives pagination. */
.cv-entry-list-timeline::before { content: none; }
.cv-entry-list-timeline > .cv-entry::after {
  content: "";
  position: absolute;
  left: calc(4px - 1.5rem);
  top: calc(-1 * var(--cv-print-entry-gap-timeline)); /* fill the margin gap down from the previous entry */
  bottom: 0;
  width: 2px;
  background: #e8eaf0;
}
.cv-entry-list-timeline > .cv-entry:first-child::after { top: 6px; }
.cv-entry-list-timeline > .cv-entry:last-child::after { bottom: 6px; }
/* ::after (line) paints after ::before (dot) on the same element, so the
   line would cover the dot — lift the dot above the line. Its white
   box-shadow ring then also cuts the line around the dot, like on web. */
.cv-entry-list-timeline > .cv-entry::before { z-index: 1; }

/* Sidebar paddings mirror the web theme (the old 74px bottom padding on
   .cv-sidebar-top inflated the photo area and pushed Contact to page 2). */
[data-theme="theme01"] .cv-sidebar-top,
[data-theme="theme02"] .cv-sidebar-top { padding: 8mm 7mm 25px; }
[data-theme="theme01"] .cv-sidebar-namebox { padding: 84px 7mm 0 !important; }
[data-theme="theme01"] .cv-sidebar-body {
  padding: 1.5rem 7mm 1.6rem !important;
  gap: .2rem;
}
/* theme02 has no sidebar namebox: sidebar body itself must
   start low enough to clear the 74px photo overhang, and the name lives in
   a content-column header instead (kept larger than the sidebar name). */
[data-theme="theme02"] .cv-sidebar-body {
  padding: 84px 7mm 1.6rem !important;
  gap: .2rem;
}
[data-theme="theme02"] .cv-name { font-size: 1.6rem !important; }
[data-theme="theme02"] .cv-name-tagline { font-size: .72rem !important; letter-spacing: .24em; }
[data-theme="theme02"] .cv-name-rule { margin: .9rem 0; }

/* Gap now handled by .cv-sidebar-block itself (clone repeats on continuation) — keep + selector neutral to avoid double 8mm */
[data-theme="theme01"] .cv-sidebar-block + .cv-sidebar-block,
[data-theme="theme02"] .cv-sidebar-block + .cv-sidebar-block { padding-top: 4mm; }

/* Tighten the sidebar for the narrower 200px print column. */
.cv-photo-wrap { width: 110px !important; height: 110px !important; }
.cv-photo { width: 110px !important; height: 110px !important; }
.cv-name { font-size: 1.15rem !important; }
.cv-title { font-size: .78rem !important; }
.cv-tag-cloud li, .cv-contact-list li, .cv-sidebar-heading { font-size: .68rem !important; }
/* Heading → list jarak disamakan dengan jarak antar list (≈ gap .4–.55rem), sebelumnya .75rem + .6rem terlalu renggang */
.cv-sidebar-heading { margin: 0 0 .35rem !important; padding-bottom: .35rem !important; }
/* Bold / Bold R — cloud (Expertise/Research) sebelumnya terlalu dekat, kembalikan ke jarak semula khusus cloud */
[data-theme="theme01"] .cv-sidebar-heading + .cv-tag-cloud,
[data-theme="theme02"] .cv-sidebar-heading + .cv-tag-cloud { margin-top: .65rem !important; }
.cv-social-icon { width: 26px !important; height: 26px !important; }

/* ---------------- theme03 "Dark Sidebar Classic" ----------------
   The sidebar zone is painted full-height on every page with the light
   gray (mirroring the web tail's flex:1 stretch): a position:fixed layer
   repeats per page, so the strip never stops mid-page — hiding the social
   block (no-print) or ending the contacts would otherwise leave an abrupt
   gray remnant next to an otherwise blank strip. The dark education block
   keeps its own background on top of the strip (page 1). */
[data-theme="theme03"] .cv-sheet::before {
  content: "";
  position: fixed;
  top: -2px;
  left: 0;
  bottom: -2px;
  width: var(--cv-print-sidebar);
  background: #eceef1;
  z-index: 0;
}
[data-theme="theme03"] .cv-sheet > .cv-content { padding: 0 !important; }
[data-theme="theme03"] .cv-name-header {
  padding: 7mm 11mm 5mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="theme03"] .cv-content-body {
  padding: 5mm 11mm 4mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Full-width B&W photo inside the 200px print sidebar (overrides the
   110px square used by the other themes' circular photos). */
[data-theme="theme03"] .cv-photo-wrap { width: 100% !important; height: auto !important; }
[data-theme="theme03"] .cv-photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}
[data-theme="theme03"] .cv-name { font-size: 1.8rem !important; }
[data-theme="theme03"] .cv-title-badge { font-size: .58rem !important; letter-spacing: .22em; margin: -14px 0 0 7mm; }
[data-theme="theme03"] .cv-name-tagline { font-size: .56rem !important; letter-spacing: .2em; }
[data-theme="theme03"] .cv-sidebar-edu { padding: 5mm 7mm 0; }
[data-theme="theme03"] .cv-sidebar-light { padding: 5mm 7mm 4mm; background: transparent; flex: 0 0 auto; }
/* Compact the sidebar so the float comfortably fits page 1: the dark block
   ends right after the last education entry and the light tail after the
   contacts, instead of trailing visible empty background. */
[data-theme="theme03"] .cv-sidebar-dark { padding-bottom: 2mm; }
[data-theme="theme03"] .cv-edu-item { margin-bottom: 1rem; }
[data-theme="theme03"] .cv-edu-item:last-child { margin-bottom: 0; }
/* The sidebar float spans (almost) all of page 1, so the footer's generic
   clear:both would push it — and with it a whole extra page — onto page 2.
   Let it flow inside the content column instead (its margin-left already
   clears the sidebar horizontally). */
[data-theme="theme03"] .cv-print-footer { clear: none; margin-top: .6rem; }
[data-theme="theme03"] .cv-sidebar-block + .cv-sidebar-block { padding-top: 4mm; }
[data-theme="theme03"] .cv-edu-title { font-size: .74rem !important; }
[data-theme="theme03"] .cv-edu-sub,
[data-theme="theme03"] .cv-edu-period { font-size: .68rem !important; }
[data-theme="theme03"] .cv-skill-name { font-size: .68rem !important; flex-basis: 56%; }
[data-theme="theme03"] .cv-contact-ic { width: 26px !important; min-height: 26px !important; }
[data-theme="theme03"] .cv-contact-label { font-size: .66rem !important; }
[data-theme="theme03"] .cv-contact-txt a,
[data-theme="theme03"] .cv-contact-txt > span:not(.cv-contact-label) { font-size: .66rem !important; }
/* Keep the signature yellow period chip in print (the generic rule above
   grays out .cv-entry-period for the other themes). */
[data-theme="theme03"] .cv-entry-period { color: var(--cv-accent-ink) !important; }
/* Print lists become block flow (see above), so theme04's web flex gap is
   replaced by these margins — tightened because the print font (.74rem)
   makes the web-sized 1.15/1.3rem gaps look disproportionately wide. */
[data-theme="theme03"] .cv-entry-list > .cv-entry + .cv-entry { margin-top: -0.8rem; }
[data-theme="theme03"] .cv-entry-list-timeline > .cv-entry + .cv-entry { margin-top: -0.2rem; }

/* ---------------- theme04 "Light Sidebar Dots" ----------------
   Same full-height fixed-strip treatment as theme04, but in the theme's
   light sidebar gray; the photo arch scales down to the 200px column. */
[data-theme="theme04"] .cv-sheet::before {
  content: "";
  position: fixed;
  top: -2px;
  left: 0;
  bottom: -2px;
  width: var(--cv-print-sidebar);
  background: #eef0f2;
  z-index: 0;
}
[data-theme="theme04"] .cv-sheet > .cv-content { padding: 0 !important; }
[data-theme="theme04"] .cv-name-header {
  padding: 7mm 11mm 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* clone makes a fragment that continues onto a new page repeat this
   padding, so continuation text keeps the 5mm top offset instead of
   sitting flush against the top paper edge. */
[data-theme="theme04"] .cv-content-body {
  padding: 5mm 11mm 4mm;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Photo container mirrors the web design (no arch background; flat top,
   deep U-shaped bottom) scaled to the 200px print column (200/300 of the
   web sizes: 168x205 -> 112x137). */
[data-theme="theme04"] .cv-photo-arch {
  width: 127px !important;
  height: 137px !important;
  margin-top: 0;
}
[data-theme="theme04"] .cv-photo-wrap { width: 112px !important; height: 137px !important; }
[data-theme="theme04"] .cv-photo {
  width: 112px !important;
  height: 137px !important;
  border-radius: 0 0 999px 999px !important;
}
[data-theme="theme04"] .cv-name { font-size: 1.7rem !important; line-height: 1.1 !important; }
[data-theme="theme04"] .cv-name-tagline { font-size: .68rem !important; letter-spacing: .26em; }
[data-theme="theme04"] .cv-name-rule { margin-top: 4mm; }
[data-theme="theme04"] .cv-sidebar-body { padding: 5mm 7mm 4mm; }
[data-theme="theme04"] .cv-sidebar-block + .cv-sidebar-block { padding-top: 0; }
[data-theme="theme04"] .cv-sidebar-heading { font-size: .74rem !important; }
[data-theme="theme04"] .cv-card-title { margin: 0 0 .6rem !important; }
[data-theme="theme04"] .cv-contact-list { gap: .6rem; }
[data-theme="theme04"] .cv-contact-list li { font-size: .68rem !important; }
[data-theme="theme04"] .cv-contact-ic { width: 22px !important; height: 22px !important; border-radius: 6px !important; }
[data-theme="theme04"] .cv-contact-ic .cv-icon { width: 11px !important; height: 11px !important; }
[data-theme="theme04"] .cv-skill-name { font-size: .68rem !important; }
[data-theme="theme04"] .cv-skill-grid { gap: .55rem 1.4rem; }
[data-theme="theme04"] .cv-skill-dots { gap: 3px; }
[data-theme="theme04"] .cv-skill-dots i { width: 5px; height: 5px; }
[data-theme="theme04"] .cv-interest { font-size: .7rem !important; }
[data-theme="theme04"] .cv-entry-period { font-size: .68rem !important; }
[data-theme="theme04"] .cv-entry-quote { margin-top: .3rem; padding-left: .6rem; }
/* The sidebar float spans (almost) all of page 1, so the footer's generic
   clear:both would push it — and with it a whole extra page — onto page 2. */
[data-theme="theme04"] .cv-print-footer { clear: none; margin-top: .6rem; }
[data-theme="theme04"] .cv-entry-list > .cv-entry + .cv-entry { margin-top: -0.8rem; }
[data-theme="theme04"] .cv-entry-list-timeline > .cv-entry + .cv-entry { margin-top: -0.4rem; }

/* ---------------- theme05 "Minimal Mono" ----------------
   No sidebar and no photo, so the generic fixed navy strip must not paint
   and the generic content margins (200px sidebar offset) must not apply —
   theme05 uses its own .cv-columns layout instead of .cv-content. */
[data-theme="theme05"] .cv-sheet::before { content: none; }
/* No box-decoration-break here: Chrome's clone fragmentation drops this
   short header entirely in paged output (verified), and a header this
   small never splits across pages anyway. */
[data-theme="theme05"] .cv-name-header { padding: 7mm 11mm 0; }
/* A4 @ 96dpi is 794px wide, which falls under theme05's 860px mobile
   breakpoint, AND Chrome drops flex-row content that fragments across
   pages — so print switches the two columns to the proven float pattern
   used by the sidebar themes: left column floats, right column gets a
   matching margin-left. */
[data-theme="theme05"] .cv-columns {
  display: block;
  padding: 7mm 11mm 3mm;
  /* clone makes a fragment that continues onto a new page repeat this
     padding, so continuation text keeps the 7mm top offset instead of
     sitting flush against the top paper edge (previously 3mm was too
     tight — continuation text sat almost at the paper edge on page 2+). */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="theme05"] .cv-columns::after { content: ""; display: table; clear: both; }
[data-theme="theme05"] .cv-col-left {
  float: left;
  flex: none;
  width: 45mm;
  margin-right: 7mm;
}
[data-theme="theme05"] .cv-col-right { margin-left: 52mm; }
[data-theme="theme05"] .cv-col-left,
[data-theme="theme05"] .cv-col-right {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="theme05"] .cv-name { font-size: 1.4rem !important; }
[data-theme="theme05"] .cv-name-tagline { font-size: .66rem !important; letter-spacing: .24em; }
[data-theme="theme05"] .cv-header-site { font-size: .6rem !important; letter-spacing: .2em; }
[data-theme="theme05"] .cv-name-rule { margin-top: 3mm; }
[data-theme="theme05"] .cv-section-heading { font-size: .82rem !important; margin-bottom: .6rem; padding-bottom: .4rem; }
[data-theme="theme05"] .cv-hicon { width: 24px !important; height: 24px !important; }
[data-theme="theme05"] .cv-hicon .cv-icon { width: 12px !important; height: 12px !important; }
[data-theme="theme05"] .cv-left-block + .cv-left-block { margin-top: 1.4rem; }
[data-theme="theme05"] .cv-about-body,
[data-theme="theme05"] .cv-contact-item,
[data-theme="theme05"] .cv-interest-list li { font-size: .68rem !important; }
[data-theme="theme05"] .cv-skill-name { font-size: .66rem !important; }
[data-theme="theme05"] .cv-skill-list { gap: .5rem; }
[data-theme="theme05"] .cv-skill-dots { gap: 3px; }
[data-theme="theme05"] .cv-skill-dots i { width: 6px; height: 6px; }
[data-theme="theme05"] .cv-entry { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); line-height: 1.5; }
[data-theme="theme05"] .cv-entry-title { font-size: .7rem !important; }
[data-theme="theme05"] .cv-entry-period { font-size: .66rem !important; margin-top: .2rem; }
[data-theme="theme05"] .cv-entry-subtitle { font-size: .72rem !important; }
[data-theme="theme05"] .cv-entry-meta { font-size: .68rem !important; margin-top: .15rem; line-height: 1.5; }
[data-theme="theme05"] .cv-pub-simple .cv-entry-title { font-size: .74rem !important; }
[data-theme="theme05"] .cv-pub-venue { font-size: .66rem !important; }
/* No float sidebar exists, but keep the footer inside the content flow.
   Spacing is shaved thin so a full public CV + footer still fits page 1. */
[data-theme="theme05"] .cv-print-footer { clear: none; margin: .3rem 11mm 0; padding-top: .3rem; }
[data-theme="theme05"] .cv-entry-list > .cv-entry + .cv-entry { margin-top: -0.8rem ; }
[data-theme="theme05"] .cv-entry-list-timeline > .cv-entry + .cv-entry { margin-top: -0.2rem; }

/* ---------------- Pagination ----------------
   Sections may flow across pages (no more whole-card jumps that left big
   white gaps at the bottom of a page). Only small units stay atomic: an
   entry never splits, and a heading is never stranded at a page bottom.
   Sidebar blocks now flow like web — allow breaking to avoid large empty
   gaps when a block is too long for the remaining page. Clone ensures the
   block's padding is repeated on the continuation fragment, so text that
   continues to the next page starts with a proportional top margin. */
.cv-card { break-inside: auto; page-break-inside: auto; }
.cv-entry { break-inside: avoid; page-break-inside: avoid; }
.cv-card-title { break-after: avoid; page-break-after: avoid; }
.cv-sidebar-block,
.cv-sidebar-body,
.cv-sidebar-dark,
.cv-sidebar-light,
.cv-sidebar-edu {
  break-inside: auto;
  page-break-inside: auto;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  orphans: 2;
  widows: 2;
}
.cv-sidebar-heading { break-after: avoid; page-break-after: avoid; }
[data-theme="theme03"] .cv-edu-item,
[data-theme="theme03"] .cv-skill,
[data-theme="theme04"] .cv-skill,
[data-theme="theme05"] .cv-skill { break-inside: avoid; page-break-inside: avoid; }

/* ---------------- Text sizes ----------------
   The web sizes (.cv-entry .93rem / title 1rem ≈ 11–12pt) are tuned for
   screens and read large on A4 paper. Print-only step-down targets the
   usual 9–10pt CV body range; the web view is untouched.
   The [data-theme] prefix is REQUIRED: the theme files set these same
   sizes via [data-theme="…"] .cv-entry (specificity 0,2,0), which beats a
   plain .cv-entry (0,1,0) no matter the load order. With the prefix both
   are 0,2,0 and print.css — loaded last — wins the tie. */
[data-theme] .cv-entry { font-size: .74rem; }
[data-theme] .cv-entry-title { font-size: .83rem; }
[data-theme] .cv-pub-venue { font-size: .68rem; }

/* ---------------- Text clarity ----------------
   On screen .cv-entry-meta/.cv-entry-period are light gray AND reduced
   opacity; in print that combination renders faint and hard to read.
   Make them solid and darker (still muted, but crisp). */
.cv-entry-meta,
.cv-entry-period {
  opacity: 1 !important;
  color: #4d5566 !important;
}
.cv-pub-venue { color: #4d5566 !important; }
.cv-pub-sep { opacity: 1 !important; }

a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Flows naturally at the end of the document (rendered for the public
   view only), appearing once right below the content — like on the web.
   Aligned with the content column (right of the sidebar). */
.cv-print-footer {
  clear: both;
  margin: 1rem 11mm 0 calc(var(--cv-print-sidebar) + 11mm);
  padding-top: .5rem;
  border-top: 1px solid #ddd;
  font-size: 9px;
  color: #888;
  text-align: center;
}