/* ============================================================
   Certificate verification page + printable certificate
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cert-page { background: var(--bg-alt); min-height: 100vh; }

.cert-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--border);
}
.cert-header .brand-logo { height: 34px; width: auto; }

.cert-main { max-width: 1160px; margin: 0 auto; padding: 48px 24px 80px; }

/* ---------- Lookup ---------- */
.lookup { max-width: 560px; margin: 0 auto; text-align: center; }
.lookup h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 12px; }
.lookup-sub { margin-bottom: 30px; }

.lookup-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lookup-form input {
  flex: 1 1 260px; padding: 14px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff; color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  text-align: center; text-transform: uppercase;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.lookup-form input::placeholder { font-weight: 500; letter-spacing: 0.05em; color: #94A3B8; }
.lookup-form input:focus {
  outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 4px rgba(245,137,59,0.14);
}
.lookup-form .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.lookup-msg { margin-top: 18px; font-size: 0.95rem; font-weight: 600; min-height: 1.4em; }
.lookup-msg.is-error { color: #B91C1C; }

/* ---------- Result bar ---------- */
.result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; max-width: 1100px; margin: 0 auto 24px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 24px;
}
.result-valid {
  display: flex; align-items: center; gap: 8px;
  color: #15803D; font-weight: 800; font-size: 1rem; margin-bottom: 2px;
}
.result-valid svg { width: 18px; height: 18px; }
.result-meta { font-size: 0.88rem; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* horizontal scroll container so the fixed-width certificate never breaks mobile */
.cert-scroll { overflow-x: auto; padding-bottom: 8px; }

/* ============================================================
   The certificate — fixed A4 landscape geometry (297 x 210 mm)
   ============================================================ */
.certificate {
  width: 1122px;            /* 297mm at 96dpi */
  height: 793px;            /* 210mm at 96dpi */
  flex: 0 0 auto;           /* never let a flex parent shrink these fixed dimensions */
  margin: 0 auto;
  background: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transform-origin: top center;
}

.cert-border {
  position: absolute; inset: 16px;
  border: 2px solid var(--navy-700);
  outline: 6px solid var(--orange-500); outline-offset: 6px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* decorative corner wedges */
.cert-corner { position: absolute; width: 58px; height: 58px; border: 0 solid var(--orange-500); }
.cert-corner.tl { top: 14px; left: 14px; border-top-width: 4px; border-left-width: 4px; }
.cert-corner.tr { top: 14px; right: 14px; border-top-width: 4px; border-right-width: 4px; }
.cert-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 4px; border-left-width: 4px; }
.cert-corner.br { bottom: 14px; right: 14px; border-bottom-width: 4px; border-right-width: 4px; }

.cert-watermark {
  position: absolute; width: 460px; height: 460px;
  top: 50%; left: 50%; transform: translate(-50%, -48%);
  color: var(--navy-700); opacity: 0.045; pointer-events: none;
}

.cert-inner {
  position: relative; z-index: 1; width: 100%; height: 100%;
  padding: 44px 78px 34px; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.cert-logo { height: 62px; width: auto; margin-bottom: 20px; }

.cert-kicker {
  font-size: 1.55rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-700); margin: 0;
}

.cert-rule { display: flex; align-items: center; gap: 10px; margin: 12px 0 26px; }
.cert-rule span { display: block; width: 90px; height: 2px; background: var(--orange-500); }
.cert-rule i { width: 9px; height: 9px; background: var(--orange-500); transform: rotate(45deg); }

.cert-presented { font-size: 0.98rem; color: #64748B; letter-spacing: 0.04em; margin: 0 0 10px; }

.cert-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  /* font-size is fitted in JS so long names stay on one or two lines */
  font-size: 56px; font-weight: 700; line-height: 1.12; color: var(--navy-700);
  margin: 0 0 6px; letter-spacing: 0.01em;
  width: 100%; box-sizing: border-box;
  border-bottom: 2px solid var(--border); padding: 0 40px 14px;
  overflow-wrap: break-word;
}

.cert-body {
  font-size: 1.02rem; line-height: 1.85; color: #334155;
  max-width: 810px; margin: 22px 0 0;
}
.cert-body strong { color: var(--navy-700); font-weight: 700; }

/* ---------- footer row ---------- */
.cert-foot {
  margin-top: auto; width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px;
}

.cert-sign { text-align: center; }
.cert-sign-img { height: 62px; display: flex; align-items: flex-end; justify-content: center; }
.cert-sign-img img { max-height: 62px; width: auto; display: none; }
.cert-sign-img img.is-loaded { display: block; }
.cert-sign-line { width: 230px; height: 2px; background: var(--navy-700); margin: 6px auto 8px; }
.cert-sign-name { font-size: 0.98rem; font-weight: 800; color: var(--navy-700); margin: 0; }
.cert-sign-title { font-size: 0.82rem; color: #64748B; margin: 2px 0 0; }

.cert-seal {
  width: 118px; height: 118px; border-radius: 50%;
  border: 2px dashed var(--orange-500); color: var(--orange-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin-bottom: 6px;
}
.cert-seal svg { width: 42px; height: 42px; }
.cert-seal span {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em;
  text-align: center; line-height: 1.4; color: var(--navy-700);
}

.cert-meta { text-align: right; }
.cert-meta-label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #94A3B8; margin: 0;
}
.cert-meta-id {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 1rem; font-weight: 700; color: var(--navy-700); margin: 2px 0 10px; letter-spacing: 0.04em;
}
.cert-meta-value { font-size: 0.9rem; font-weight: 700; color: var(--navy-700); margin: 2px 0 10px; }
.cert-verify { font-size: 0.7rem; color: #94A3B8; margin: 0; }

.print-hint { text-align: center; font-size: 0.85rem; margin-top: 22px; }

/* Narrow screens are handled by the JS scale in certificate.js plus the
   overflow-x on .cert-scroll — deliberately no flex here, since a flex parent
   would shrink the certificate's fixed A4 dimensions. */

/* ============================================================
   Print — exactly one A4 landscape page
   ============================================================ */
@page { size: A4 landscape; margin: 0; }

@media print {
  .no-print, .cert-header, .lookup, .print-hint, .result-bar { display: none !important; }

  html, body {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
    width: 297mm; height: 210mm; overflow: hidden;
  }
  .cert-main { padding: 0 !important; max-width: none !important; }
  .cert-scroll { overflow: visible !important; padding: 0 !important; }

  .certificate {
    width: 297mm !important; height: 210mm !important;
    margin: 0 !important; box-shadow: none !important;
    /* clear the on-screen fit-to-viewport scale set in certificate.js —
       belt and braces, since beforeprint doesn't fire everywhere */
    transform: none !important; margin-bottom: 0 !important;
    page-break-after: avoid; page-break-inside: avoid; break-inside: avoid;
  }

  /* keep the fills and rules that make it look like a certificate */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}