/*
 * Print / PDF stylesheet.
 *
 * Two things have to be undone before the resume prints usefully:
 *
 * 1. .sidebar-wrapper is position:absolute at full height on screen, which
 *    cannot span pages — Chrome clips it to the first one. Here it is
 *    flattened into a header band and the content below runs full width.
 * 2. Bootstrap 3 ships its own @media print reset that flattens every colour
 *    and background to black/transparent with !important, and appends the raw
 *    href after every link. Both are reverted below, which is why so many of
 *    these rules need !important of their own.
 */

@page {
  size: A4;
  margin: 12mm 13mm;
}

/* ======= Undo the Bootstrap print reset ======= */

/* Bootstrap forces `color:#000!important` on every element. Restoring normal
   inheritance lets the theme colours re-declared further down take effect. */
*,
*::before,
*::after {
  color: inherit !important;
}

/* Bootstrap prints " (http://...)" after each link. */
a[href]::after,
abbr[title]::after {
  content: "" !important;
}

a {
  color: #2d7788 !important;
  text-decoration: none !important;
}

body {
  padding: 0;
  background: #fff;
  color: #545E6C !important;
  font-size: 10.5pt;
}

/* Chrome drops backgrounds when printing unless asked not to. */
.wrapper,
.sidebar-wrapper,
.sidebar-wrapper .profile-container,
.main-wrapper,
.main-wrapper .section-title .fa,
.skillset .level-bar,
.skillset .level-bar-inner {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* On screen .wrapper supplies the teal behind the absolute sidebar. In print
   the band paints its own, and leaving this set bleeds a teal sliver down the
   edge of every page the content does not cover exactly. */
.wrapper {
  max-width: none;
  box-shadow: none;
  background: transparent !important;
}

/* ======= Sidebar -> header band ======= */
.sidebar-wrapper {
  position: static;
  width: auto;
  height: auto;
  min-height: 0;
  font-size: 9.5pt;
  background: #42A8C0 !important;
  color: #fff !important;
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
  align-items: start;
}

.sidebar-wrapper a {
  color: #fff !important;
}

.sidebar-wrapper .profile-container {
  grid-column: 1 / -1;
  background: rgba(0, 0, 0, 0.2) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  padding: 16px 20px;
}

.sidebar-wrapper .profile {
  flex: none;
  width: 76px;
  height: 76px;
  margin-bottom: 0;
}

.sidebar-wrapper .name {
  font-size: 21pt;
  margin-bottom: 3px;
}

/* The screen uses 0.6 alpha here; on paper that reads as washed out. */
.sidebar-wrapper .tagline,
.sidebar-wrapper .education-container .meta,
.sidebar-wrapper .education-container .time,
.sidebar-wrapper .language-container .lang-desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

.sidebar-wrapper .tagline {
  font-size: 10.5pt;
}

.sidebar-wrapper .container-block {
  padding: 14px 20px 18px;
}

.sidebar-wrapper .container-block-title {
  font-size: 10pt;
  margin-bottom: 8px;
}

.sidebar-wrapper .contact-list li,
.sidebar-wrapper .interests-list li,
.sidebar-wrapper .languages-list li {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.sidebar-wrapper .contact-list .fa {
  font-size: 13px;
}

.sidebar-wrapper .education-container .item {
  margin-bottom: 10px;
}

/* ======= Main content ======= */
.main-wrapper {
  background: #fff !important;
  padding: 26px 20px 0;
  page-break-before: auto; /* screen CSS forces a break before this block */
  break-before: auto;
}

.main-wrapper .section {
  margin-bottom: 26px;
  /* Experiences is taller than a page, so it has to be allowed to split. */
  page-break-inside: auto;
  break-inside: auto;
}

/* These two are short enough to keep whole. Skills is deliberately left to
   flow — forcing it onto its own page costs an extra sheet, and its rows
   already break cleanly one at a time. */
.main-wrapper .summary-section,
.main-wrapper .projects-section {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Split between entries instead, never through the middle of one. */
.main-wrapper .item,
.skillset .item {
  page-break-inside: avoid;
  break-inside: avoid;
}

.main-wrapper .section-title {
  color: #2d7788 !important;
  font-size: 14pt;
  margin-bottom: 16px;
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* The theme nudges this icon with position:relative/top. When the heading is
   pushed to the next page by break-after, Chrome paints the relatively
   positioned circle at its pre-fragmentation spot too, leaving a sliced arc at
   the foot of the previous page. Static positioning avoids the double paint. */
.main-wrapper .section-title .fa {
  background: #2d7788 !important;
  color: #fff !important;
  position: static;
  top: auto;
  vertical-align: middle;
}

.main-wrapper .job-title {
  color: #3F4650 !important;
}

.main-wrapper .time,
.main-wrapper .company {
  color: #97AAC3 !important;
}

/* Chrome resolves print media queries against the page area (~696px on A4,
   not the 794px sheet), so the theme's `@media (max-width: 767px)` block is
   live here and drops the dates onto their own line. Put them back beside the
   job title, the way the screen layout has them. */
.main-wrapper .time {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  margin-top: 0;
}

.main-wrapper .upper-row {
  margin-bottom: 2px;
}

.main-wrapper p {
  orphans: 3;
  widows: 3;
}

.main-wrapper .experiences-section .item {
  margin-bottom: 20px;
}

/* The side-by-side label/bar layout lives in the theme's `@media (min-width:
   992px)` block, which never matches in print, so the rows stack. Restore it.
   `top: 1px` from the theme is a margin here to keep the bar out of relative
   positioning, for the same fragmentation reason as the section icon. */
.skillset .item {
  margin-bottom: 12px;
}

.skillset .level-title {
  display: inline-block;
  float: left;
  width: 30%;
  margin-bottom: 0;
}

.skillset .level-bar {
  display: inline-block;
  float: left;
  width: 70%;
  margin-top: 1px;
}

.footer {
  padding: 18px 20px;
}