/* =========================================================================
   assets/certificate/css/style.css
   Styling for the digital apostille certificate card and the PDF preview
   underneath it. The size of the certificate (523 x 702) is set in the page
   markup itself — this file only centres it and keeps the text tidy.
   ========================================================================= */

/* The certificate card and the PDF preview box below it: both are fixed-width
   blocks, so they are centred horizontally on the page. */
.image {
  margin-left: auto;
  margin-right: auto;
}

/* The bordered card sitting on top of the decorative background. */
.image > div {
  background-color: transparent;
}

.image,
.image * {
  box-sizing: border-box;
}

/* Keep the "Certified" line and the certificate text from being selected as
   separate lines when printing / zooming. */
.image p {
  margin-bottom: 0;
}

/* The small print under the certificate. A slightly tighter line height keeps
   the disclaimer plus the verification link inside the decorative border, even
   when the document's web address is long. */
.image .disclaimer {
  line-height: 1.3;
}

/* The verification link at the bottom of the certificate. A long address wraps
   inside the card instead of pushing past the decorative border. */
#field-verifyLink {
  font-size: 12px;
  word-break: break-all;
}

/* Row 1's two values — the country and the document type. On the reference
   these sit smaller than the "Country" and "This Public Document" headings
   above them, unlike rows 2 to 8 where the value matches the heading. Measured
   off the reference: the value is 0.70 of the 17px heading, so 12px. The
   weight stays at 600, set beside the padding in index.html. */
#field-country,
#field-documentType {
  font-size: 12px;
}

/* ---- QR code cell ---- */
.qr-code-container {
  position: relative;
  display: inline-block;
}

.qr-code-container img {
  display: block;
}

/* The QR code fills its cell edge to edge — the wrappers have to carry the
   cell's full width and height for the image to be able to stretch into it. */
.image .qr-code-container {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  overflow: hidden;
}

/* The white border around a QR code (its "quiet zone") is part of the QR
   standard, not decoration — scanners rely on it to find where the pattern
   begins and ends. An earlier version enlarged the image and clipped that
   border away so the pattern reached the cell's edges. It looked tidier, but
   phones could no longer read the code. The image is now left at its natural
   size, white border intact. */
.image #field-qr {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Signature image ----
   object-fit keeps the uploaded signature at its own proportions, so it is
   never stretched or squashed no matter what size file the admin uploads. */
#field-signatureImage {
  max-width: 100%;
  object-fit: contain;
}

/* ---- The PDF preview box below the certificate ---- */
.pdf-preview-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.pdf-preview-link iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #d5d5d5;
  /* No background colour and no pointer-events block: on phones Chrome draws
     its own dark PDF panel with a filename and an "Open" button inside this
     frame, and that button has to stay tappable. */
}

/* ---- Small screens ----
   The certificate keeps its full 523px design size on phones as well. It is
   wider than a phone screen, so the page can be scrolled sideways / pinched
   out to see the whole card — the same behaviour as the reference site.

   On phones the certificate and the PDF box below it sit 29px in from the left,
   leaving a strip of white down that side. Measured off the reference: its gap
   is 5.3% of the screen width, which on a 523px-wide page works out at 29px.
   The right-hand side is untouched — both boxes still finish flush with the
   right edge of the page. */
@media (max-width: 575.98px) {
  .image {
    margin-left: 29px;
  }
}