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

/* Hide interactive elements */
nav,
.ah,
.q,
.d,
.ac,
.av,
.bm,
.r,
#contact,
.a,
.ai,
.o {
  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 */
.aw {
  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;
  }

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

  .bj {
    margin: 0.08in 0;
  }

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

  .ao 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. */
.bd,
.ay {
  display: inline;
  margin: 0;
}

.ay li {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;

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

.be > article {
  padding-left: 0;
  border-left: 0;

  &::before {
    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 .ap {
  h3 > span,
  .bf,
  .az {
    display: inline;
  }
}