/* Credential verification page.
   Follows the printed certificate's look. Spacing and type scale follow
   the CSAP design standard. No webfonts. */

:root {
  --cream:      #F6F1E4;
  --surface:    #FFFFFF;
  --green:      #1D9E75;
  --green-dark: #16835f;
  --gold:       #B8994F;
  --hairline:   #DDD5C2;
  --text-1:     #111827;
  --text-2:     #4B5563;

  --serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;

  --r-card: 8px;
  --r-full: 9999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

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

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
}

.status {
  margin: var(--sp-6) 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}

/* ── Card ─────────────────────────────────────────── */

.cert {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}

.cert__logo {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 auto var(--sp-5);
}

.cert__heading {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.cert__gold-rule {
  width: 64px;
  height: 0;
  margin: var(--sp-3) auto var(--sp-5);
  border: 0;
  border-top: 1px solid var(--gold);
}

.cert__certify {
  margin: 0 0 var(--sp-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-2);
}

.cert__name {
  display: inline-block;
  margin: 0 0 var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-1);
}

.cert__attestation {
  max-width: 32em;
  margin: 0 auto var(--sp-5);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-1);
}

/* ── Facts row ────────────────────────────────────── */

/* Two facts centred as a pair. Each fact never breaks mid-phrase; if the
   pair cannot fit on one line, the second wraps onto its own row. */
.cert__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-6);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.cert__fact dd {
  margin: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

/* ── Competencies ─────────────────────────────────── */

.cert__label {
  margin: 0 0 var(--sp-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}

.cert__competencies {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-5);
  max-width: 560px;
  margin: 0 auto var(--sp-5);
  padding: 0;
  list-style: none;
  text-align: left;
}

.cert__competencies li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: 14px;
  color: var(--text-1);
}

.cert__competencies li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--gold);
}

/* ── Issue and code ───────────────────────────────── */

.cert__issued {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  color: var(--text-2);
}

.cert__code {
  margin: 0 0 var(--sp-5);
  font-size: 12px;
  color: var(--text-2);
}

.cert__code-label { display: block; }

.cert__code-value {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
}

/* ── Button ───────────────────────────────────────── */

.cert__button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-radius: var(--r-full);
  background: var(--green);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.cert__button:hover,
.cert__button:active { background: var(--green-dark); }

.cert__button:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
}

/* ── Partners ─────────────────────────────────────── */

.cert__partners {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.cert__marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}

/* Marks are sized by height; widths follow. The UWI crest is a portrait
   mark, so it gets extra height to carry the same visual weight. */
.cert__marks { --mark-h: 48px; }
.cert__mark { display: block; width: auto; height: var(--mark-h); }
.cert__mark--uwi { height: calc(var(--mark-h) * 2.25); }

.cert__supporting {
  max-width: 34em;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── Foot link ────────────────────────────────────── */

.foot {
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-size: 12px;
}

.foot a {
  color: var(--text-2);
  text-underline-offset: 3px;
}

/* ── Not found ────────────────────────────────────── */

.cert--missing p {
  margin: 0;
  font-size: 16px;
  color: var(--text-1);
}

/* ── Wider screens ────────────────────────────────── */

@media (min-width: 600px) {
  .page { padding: 48px var(--sp-5); }
  .cert { padding: 48px var(--sp-6); }
  .cert__logo { width: 200px; }
  .cert__competencies { grid-template-columns: 1fr 1fr; }
  .cert__button { width: auto; display: inline-block; }
}

@media (max-width: 420px) {
  .cert__name { font-size: 22px; }
}