/* =========================================================================
   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;
}

/* Every generated QR file has a white margin baked into it (the "quiet zone" —
   25px of white around a 400px image). Enlarging the image by exactly that
   amount and clipping what spills out makes the QR pattern itself reach the
   cell's borders, without drawing over them. */
.image #field-qr {
  transform: scale(1.14);
}

/* ---- 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;
  }
}