/* Print styles */
@page {
  margin: 2cm;
  size: a4;
}

/* Hide interactive elements */
nav,
.at,
.t,
.d,
.an,
.bo,
.ch,
.v,
#contact,
.a,
.ay,
.r {
  display: none !important;
}

/* Print closed sections too (docs/css.md) */
details::details-content {
  display: block;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- Safari 17: main.js beforeprint */
  content-visibility: visible;
}

/* stylelint-disable defensive-css/no-list-style-none -- print-only rule to hide native disclosure triangle */
summary {
  list-style: none !important;
}
/* stylelint-enable defensive-css/no-list-style-none */

summary::marker,
summary::-webkit-details-marker {
  display: none !important;
}

/* Base styles */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

html,
body {
  font-size: 10pt;
  line-height: 1.2;
  background: #fff !important;
}

main {
  font-size: 9pt;
  line-height: 1.5;
}

/* CV Header */
.bp {
  position: relative;
  margin-bottom: 0.15in;
  break-after: avoid;

  /* QR code to the online CV (https://joseobregon.me), top right. Print-only, so it costs the page nothing. */
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.9in;
    height: 0.9in;
    background: url("/images/qr.svg") center / contain no-repeat;
    content: "";
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  h1 {
    margin: 0 0 0.1in;
    font-size: 18pt;
    font-weight: 600;
  }

  .bq {
    margin: 0 0 0.08in;
    font-size: 11pt;
    font-weight: 400;
  }

  .ce {
    margin: 0.08in 0;
  }

  /* "Add to contacts" only works on a screen. */
  .bh p:has(a[href$=".vcf"]) {
    display: none;
  }

  .bh p {
    margin: 0.04in 0;
    font-size: 9pt;

    a {
      text-decoration: underline;
    }
  }
}

/* Sections */
section {
  margin-bottom: 0.1in;

  h2 {
    margin: 0.2in 0 0.05in;
    padding: 0.02in 0;
    font-size: 11pt;
    font-weight: 600;
    border-bottom: 0.5pt solid #ccc;
    break-after: avoid;
  }
}

/* Articles */
article {
  margin-bottom: 0.06in;

  /* A job may span two pages, but its title stays with its first bullet. */
  > header,
  h3 {
    break-after: avoid;
  }

  /* Education and award entries, and a job's footer, stay with the line above them. */
  > p,
  > footer {
    break-before: avoid;
  }

  > footer {
    break-inside: avoid;
  }

  h3 {
    margin: 0.1in 0 0.05in;
    font-size: 9pt;
    font-weight: 600;
  }

  li {
    margin-bottom: 0.04in;
    padding-left: 0.05in;
    break-inside: avoid;
  }
}

/* Text elements */
p {
  margin: 0.04in 0;
  font-size: 9pt;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

/* Technologies print as a plain comma-separated line, jobs without the timeline. The screen rules
   come later (the inlined \3c style>), so `main` outranks them here too. */
main .bx,
main .br {
  display: inline;
  margin: 0;
}

/* The job rows need .tech-row too: the screen rule `.tech-row .tech-list li` (0,2,1) sets their margins. */
main .br li,
main .bx .br li {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  background: none;

  &:not(:last-child)::after {
    content: ", ";
  }
}

main .by > article {
  padding-left: 0;
  border-left: 0;

  &::before {
    content: none;
  }
}

/* No accent on paper: plain black bullets, no bar under the section titles. */
main ul li::before {
  color: #000;
}

main section summary h2::after {
  content: none;
}

/* Job header on two lines, as on desktop. `main` outranks the phone layout in cv-sections.css,
   which the inlined \3c style> puts after this file. */
main .bi {
  h3 > span,
  .bz,
  .bs {
    display: inline;
  }
}

/* Update date on the meta line, as on desktop. `main` outranks the phone layout in cv-header.css. */
main .bp .ce {
  > span:last-child,
  > .bs:nth-last-child(2) {
    display: inline;
  }
}