/* The certificate sheet is A4 landscape, and it is the same sheet in the
   preview, in the reveal and in the PDF that Chromium prints: one look to
   maintain.

   The measurements in mm are those of the reference model (1280 x 905 px)
   converted at the ratio 297mm / 1280px, so the drawing lands in the same
   place on A4. */

/* Jost, from Google Fonts (SIL Open Font License 1.1), latin subset. It is
   versioned in the repo so the PDF does not change face depending on what
   happens to be installed on the server.

   Static instances, one per weight, and not the variable font: Chromium's PDF
   backend converts a variable font into Type 3, which draws each glyph as a
   procedure instead of embedding the TrueType. The certificate still looks
   similar on screen, but prints worse at a print shop and text extraction
   starts depending on the reader. With the static font, a real /FontFile2
   comes out. */
@font-face {
  font-family: "Jost Certificate";
  src: url("/assets/jost-400-a5420d6f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Jost Certificate";
  src: url("/assets/jost-700-f90d6f09.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Jost Certificate";
  src: url("/assets/jost-800-5865b33b.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

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

/* Print fix (ticket 03): the margins the browser gives <p> and <h1> for free
   added up to more than the 210mm of the sheet and pushed the last line onto a
   second page of the PDF. The :where() leaves this rule with zero specificity —
   it only beats the browser default, and loses to any spacing the template
   declares. */
:where(.certificate p, .certificate h1) {
  margin-block: 0;
}

:root {
  --paper: #e8e4e3;
  --ink: #0d0d0d;
  --ornament: #9c1420;
  --rule: #a6a5a3;
}

* { box-sizing: border-box; }

.certificate-body {
  margin: 0;
  background: #4a4a4a;
  /* Jost is versioned in the repo and has to be first in the stack, otherwise a
     font installed on the server would beat it and the PDF would come out
     different depending on the machine that printed it. */
  font-family: "Jost Certificate", "Century Gothic", "URW Gothic", sans-serif;
  color: var(--ink);
}

.certificate {
  position: relative;
  width: 297mm;
  height: 210mm;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The background and the red of the frame have to survive printing. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.certificate > * { margin: 0; }

.certificate__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ornament);
}

.certificate__coat-of-arms {
  position: absolute;
  left: 21.3mm;
  top: 19.7mm;
  width: 29.7mm;
}

.certificate__logo {
  width: 45.2mm;
  margin-top: 7.4mm;
}

.certificate__title {
  margin-top: 10.4mm;
  font-size: 19.4mm;
  font-weight: 800;
  /* The model's title is tighter than Jost's natural tracking. */
  letter-spacing: -0.035em;
  line-height: 1;
}

.certificate__issuer {
  margin-top: 4.6mm;
  font-size: 7.9mm;
  font-weight: 700;
  line-height: 1;
}

.certificate__certifies {
  margin-top: 3.1mm;
  font-size: 7.9mm;
  font-weight: 700;
  line-height: 1;
}

.certificate__name {
  max-width: 92%;
  margin-top: 9.9mm;
  font-size: 10.9mm;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.certificate__cpf {
  margin-top: 3mm;
  font-size: 6.5mm;
  font-weight: 700;
  line-height: 1;
}

.certificate__rule {
  width: 221.3mm;
  height: 0.7mm;
  margin-top: 2mm;
  border: 0;
  background: var(--rule);
}

.certificate__body {
  max-width: 187mm;
  margin-top: 6mm;
  font-size: 6.05mm;
  line-height: 8.7mm;
}

.certificate__footer {
  margin-top: auto;
  margin-bottom: 20.4mm;
}

.certificate__signature-name {
  width: fit-content;
  margin: 0 auto;
  padding: 0 4.5mm 0.3mm;
  border-bottom: 0.55mm dotted var(--ink);
  font-size: 4.9mm;
  font-weight: 700;
  line-height: 1;
}

.certificate__signature-role {
  margin-top: 0.3mm;
  font-size: 5.2mm;
  line-height: 1;
}

.certificate__place {
  margin-top: 10.5mm;
  font-size: 5.6mm;
  line-height: 1;
}

@media print {
  .certificate-body { background: none; }
  .certificate { margin: 0; }
}