/* Gold certificate layout based on the supplied A4 landscape design. */
.certificate {
  aspect-ratio: 297 / 210;
  min-height: 0;
  padding: 8px;
  border: 10px solid #b58122;
  border-radius: 0;
  outline: 2px solid #d5b75a;
  outline-offset: -4px;
  background: #fffdf6;
  box-shadow: inset 0 0 0 1px #d6ad35, inset 0 0 0 5px #fffdf6;
}

.certificate::before {
  z-index: 0;
  inset: 13px;
  border: 1px solid #d9a82a;
  background: url("visual-eyes-watermark.svg") center / 180px no-repeat;
  opacity: .07;
}

.certificate::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 13px;
  right: 13px;
  bottom: 13px;
  height: 18%;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 68%, #e0b22d 68% 72%, #153d70 72%) left bottom / 42mm 25mm no-repeat,
    linear-gradient(225deg, transparent 0 68%, #e0b22d 68% 72%, #153d70 72%) right bottom / 42mm 25mm no-repeat;
}

.certificate-content {
  width: 100%;
  gap: 2px;
  padding: 12px 14px 26px;
  text-align: center;
}

.certificate-logo {
  width: min(27%, 150px);
  max-height: 44px;
  margin: 0 auto 2px;
}

.certificate-eyebrow {
  font-size: clamp(7px, 1vw, 11px);
  letter-spacing: .03em;
  color: #9f6b12;
}

.certificate h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2px 0 5px;
  color: #161616;
  font-size: clamp(20px, 3.3vw, 42px);
  font-style: italic;
  line-height: 1;
}

.certificate h2 small {
  margin: 5px 0 0;
  color: #a97715;
  font-size: .48em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
}

.certificate p {
  margin: 3px 0;
  color: #45556b;
  font-size: clamp(8px, 1.2vw, 14px);
}

.certificate h3 {
  margin: 3px 0;
  color: #a97715;
  font-size: clamp(13px, 2.4vw, 28px);
  line-height: 1.15;
}

.certificate h3.certificate-name {
  width: min(68%, 440px);
  padding: 0 4px 3px;
  border-bottom: 1px solid #9c9c9c;
  color: #b17b19;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 3.6vw, 40px);
  font-style: italic;
  font-weight: 400;
}

.certificate h3.certificate-course {
  max-width: 80%;
  font-size: clamp(13px, 2.5vw, 29px);
}

.certificate small {
  margin-top: 5px;
  color: #4d5c70;
  font-size: clamp(7px, 1vw, 11px);
}

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

@media print {
  html,
  body {
    width: 297mm;
    height: 210mm;
    margin: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #printCertificate {
    position: fixed;
    inset: 0;
    width: 297mm;
    height: 210mm;
    min-height: 210mm;
    padding: 7mm;
    gap: 0;
    border: 8mm solid #b58122;
    outline: 2mm solid #d5b75a;
    outline-offset: -3mm;
    box-shadow: inset 0 0 0 .35mm #d6ad35, inset 0 0 0 2mm #fffdf6;
    background: #fffdf6;
  }

  #printCertificate,
  #printCertificate * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #printCertificate::before {
    inset: 4mm;
    border-width: .35mm;
    background-size: 56mm;
    opacity: .06;
  }

  #printCertificate::after {
    left: 4mm;
    right: 4mm;
    bottom: 4mm;
    height: 18%;
    background-size: 48mm 28mm, 48mm 28mm;
  }

  .certificate-content {
    gap: 1.1mm;
    padding: 3mm 12mm 7mm;
  }

  .certificate-logo {
    width: 38mm;
    max-height: 16mm;
    margin-bottom: 1mm;
  }

  .certificate-eyebrow {
    font-size: 12pt;
    letter-spacing: .02em;
  }

  .certificate h2 {
    margin: 2mm 0 2.5mm;
    font-size: 36pt;
  }

  .certificate h2 small {
    margin-top: 2mm;
    font-size: 17pt;
  }

  .certificate p {
    margin: 1.4mm 0;
    font-size: 13pt;
  }

  .certificate h3 {
    margin: 1.5mm 0;
    font-size: 23pt;
  }

  .certificate h3.certificate-name {
    font-size: 34pt;
  }

  .certificate h3.certificate-course {
    font-size: 25pt;
  }

  .certificate small {
    margin-top: 4mm;
    font-size: 11pt;
  }
}