/* ==========================================================================
   certificate.css — WHNF 2026 Certificate of Participation

   Served only by certificate.php, which renders its own standalone document.
   No theme CSS is present, so this file declares everything it needs.

   Palette — the same five brand tokens the report page uses, nothing else:
     Divine Blue #1E4DB7 · deep navy #0b2a4d · Saffron Gold #F5A623
     Ivory #FFF9F0 · Sky #E3F2FD

   Contrast on the ivory sheet:
     deep navy on ivory ........... 13.9:1
     Divine Blue on ivory .......... 7.1:1
     muted #4b5563 on ivory ........ 7.2:1
   Saffron Gold is 1.9:1 on ivory and is therefore NEVER text here — only
   rules, the frame and the ornament.

   PRINT TARGET: A4 landscape, 297mm x 210mm, zero page margin. The sheet is
   sized in millimetres so the browser's own "Save as PDF" produces a true
   vector A4 landscape page. Screen simply scales the same sheet down.
   ========================================================================== */

:root {
  --c-blue: #1E4DB7;
  --c-navy: #0b2a4d;
  --c-gold: #F5A623;
  --c-ivory: #FFF9F0;
  --c-sky: #E3F2FD;

  --c-ink: #1f2937;
  --c-muted: #4b5563;

  --c-hair: rgba(11, 42, 77, .16);
  --c-gold-soft: rgba(245, 166, 35, .38);

  --c-font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* A serif for the honouree's name only — it is the one line that should read
     as inscribed rather than typed. Every fallback here ships with the OS, so
     nothing is fetched over the network and "dāsa" / "devī dāsī" / "Śrī" all
     render correctly whichever one wins. */
  --c-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

.cert-body {
  background: #eef1f6;
  font-family: var(--c-font);
  color: var(--c-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* --------------------------------------------------------------------------
   1) Screen-only action bar
   -------------------------------------------------------------------------- */

.cert-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  justify-content: center;
  padding: 16px 20px;
  background: var(--c-navy);
  color: var(--c-sky);
  font-size: 14px;
}

.cert-bar__btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--c-gold);
  color: var(--c-navy);
}

.cert-bar__btn:hover,
.cert-bar__btn:focus-visible {
  background: #ffb944;
}

.cert-bar__hint {
  color: rgba(227, 242, 253, .82);
}

.cert-bar__hint strong { color: var(--c-sky); }

/* --------------------------------------------------------------------------
   2) The sheet — exactly one A4 landscape page
   -------------------------------------------------------------------------- */

.cert-sheet {
  width: 297mm;
  height: 210mm;
  margin: 24px auto;
  padding: 10mm;
  background: var(--c-ivory);
  box-shadow: 0 14px 38px rgba(11, 42, 77, .18);

  /* The gold hairline border of the certificate itself. */
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(30, 77, 183, .07) 0%, rgba(30, 77, 183, 0) 60%);
}

.cert-frame {
  height: 100%;
  border: 1.5pt solid var(--c-gold-soft);
  outline: 3pt solid var(--c-ivory);
  box-shadow: inset 0 0 0 1pt var(--c-gold-soft);
  padding: 12mm 16mm 10mm;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3) Head — emblem | title | Srila Prabhupada

   One row, vertically centred. Flanking the title rather than stacking above
   it means the imagery costs the page almost nothing in height: the row is as
   tall as the photograph (45.7mm) against the title block's own ~37mm, so the
   sheet still prints as a single A4 landscape page.
   -------------------------------------------------------------------------- */

.cert-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8mm;
}

.cert-head__mid {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Left: the Ministry emblem ---
   The logo artwork is WHITE line-art on transparency and there is no
   dark-on-light variant anywhere on this server, so it can only be shown on a
   dark ground — on the ivory sheet it would otherwise be invisible. This panel
   is therefore structural, not ornamental.

   print-color-adjust keeps the panel when the devotee leaves the browser's
   "Background graphics" box unticked; without it the panel would drop out and
   take the white logo with it. .cert-body sets it too, this repeats it on the
   one element that genuinely cannot survive losing it. */
.cert-emblem {
  flex: 0 0 auto;
  width: 46mm;
  padding: 4mm;
  border-radius: 2mm;
  background: var(--c-navy);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cert-emblem__img {
  display: block;
  width: 100%;
  height: auto;   /* 524x166 -> 38mm x 12mm, about 350dpi in print */
}

/* --- Right: Srila Prabhupada ---
   The slot's ratio is the photograph's own 1408:2146, so height:auto crops
   nothing. No filter, tint, opacity, blur or overlay is applied to this image
   anywhere in this stylesheet, and nothing is ever positioned on top of it. */
.cert-founder {
  flex: 0 0 auto;
  margin: 0;
}

.cert-founder__img {
  display: block;
  width: 30mm;
  height: auto;   /* -> 45.7mm, the whole frame, uncropped */
  border-radius: 1.5mm;
  border: 1pt solid var(--c-gold-soft);
}

.cert-eyebrow {
  margin: 0;
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-blue);
}

/* Decorative only, and a <span> in the markup — an empty <p> in this document
   would mean a field had failed to render. Hence the explicit display. */
.cert-rule {
  display: block;
  width: 40mm;   /* proportioned to the flanked title column, not the full sheet */
  height: 0;
  margin: 4mm auto 5mm;
  border-top: 1pt solid var(--c-gold);
  position: relative;
}

/* A small lozenge centred on the rule — the only ornament on the page. */
.cert-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3mm;
  height: 3mm;
  margin: -1.5mm 0 0 -1.5mm;
  transform: rotate(45deg);
  background: var(--c-gold);
}

/* 26pt, not 30pt: the title column is ~153mm once the emblem and the
   photograph take their places, and "Certificate of Participation" set in a
   wide fallback serif (Palatino) would wrap to two lines at 30pt. */
.cert-h1 {
  margin: 0;
  font-family: var(--c-serif);
  font-size: 26pt;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--c-navy);
  text-wrap: balance;
}

.cert-fest {
  margin: 4mm 0 0;
  font-size: 13pt;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-blue);
}

.cert-dates {
  margin: 1.5mm 0 0;
  font-size: 10.5pt;
  color: var(--c-muted);
  letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   4) Body — the citation
   -------------------------------------------------------------------------- */

.cert-body-block {
  margin-top: 7mm;
  max-width: 210mm;
}

.cert-lead {
  margin: 0;
  font-size: 10.5pt;
  font-style: italic;
  color: var(--c-muted);
}

.cert-name {
  margin: 3mm 0 0;
  font-family: var(--c-serif);
  font-size: 26pt;
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-navy);
}

/* Temple / place lines. Rendered only when the devotee supplied them, so this
   rule never has to cope with an empty string. */
.cert-sub {
  margin: 2mm 0 0;
  font-size: 12pt;
  font-weight: 500;
  color: var(--c-blue);
}

.cert-sub + .cert-sub {
  margin-top: 1mm;
  font-weight: 400;
  color: var(--c-muted);
  font-size: 11pt;
}

.cert-cite {
  margin: 5mm auto 0;
  max-width: 175mm;
  font-size: 11pt;
  line-height: 1.65;
  color: var(--c-ink);
}

.cert-detail {
  margin: 4mm 0 0;
  font-size: 10.5pt;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: .02em;
}

.cert-dot { color: var(--c-gold); font-weight: 700; }

/* --------------------------------------------------------------------------
   5) Figures — the whole block is omitted server-side when nothing was given
   -------------------------------------------------------------------------- */

.cert-figs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin-top: 7mm;
}

.cert-fig {
  padding: 0 12mm;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
}

.cert-fig + .cert-fig {
  border-left: 1pt solid var(--c-hair);
}

.cert-fig__n {
  font-family: var(--c-serif);
  font-size: 20pt;
  line-height: 1;
  color: var(--c-blue);
}

.cert-fig__l {
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.cert-figs__note {
  margin: 3mm 0 0;
  font-size: 8.5pt;
  font-style: italic;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   6) Foot — attestation and reference
   -------------------------------------------------------------------------- */

.cert-foot {
  margin-top: auto;
  padding-top: 6mm;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10mm;
}

/* --- the replaceable signature slot (see certificate.php) --- */
.cert-sign {
  text-align: left;
  min-width: 60mm;
}

.cert-sign__art {
  display: block;
  width: 46mm;
  height: auto;
  margin: 0 0 1mm;
}

.cert-sign__rule {
  display: block;
  width: 56mm;
  height: 0;
  margin: 0 0 2mm;
  border-top: 1pt solid var(--c-hair);
}

.cert-sign__name {
  margin: 0;
  font-size: 11pt;
  font-weight: 600;
  color: var(--c-navy);
}

.cert-sign__title {
  margin: .5mm 0 0;
  font-size: 9pt;
  color: var(--c-muted);
}

.cert-sign__body {
  margin: 0;
  font-size: 11pt;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-navy);
}

.cert-sign__note {
  margin: 1mm 0 0;
  font-size: 8.5pt;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.cert-ref {
  text-align: right;
  font-size: 8pt;
  color: var(--c-muted);
}

.cert-ref p { margin: 0; }
.cert-ref__id { font-weight: 600; letter-spacing: .1em; }
.cert-ref__url { margin-top: .8mm; word-break: break-all; }

/* --------------------------------------------------------------------------
   7) Print — one A4 landscape page, no browser chrome, no action bar
   -------------------------------------------------------------------------- */

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

@media print {
  .cert-body {
    background: #fff;
  }

  .cert-bar {
    display: none !important;
  }

  .cert-sheet {
    width: 297mm;
    height: 210mm;
    margin: 0;
    box-shadow: none;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Chrome prints href="..." after links by default in some configs; there are
     no links on the sheet, but guard anyway. */
  a[href]::after { content: none !important; }
}

/* --------------------------------------------------------------------------
   8) Screen fallback for narrow viewports

   The sheet keeps its exact A4 landscape proportions and is scaled down whole,
   so what the devotee sees on a phone is precisely what will print. Discrete
   steps rather than a fluid calc: dividing a length by a length is not legal
   inside calc(), and a transform cannot be fluid without it.

   The sheet is 297mm x 210mm ~= 1123px x 794px at 96dpi. transform does not
   affect layout, so each step also pulls the following margin up by
   794px * (1 - scale) to close the gap the scaled sheet leaves behind.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1180px) {
  .cert-sheet { transform-origin: top center; transform: scale(.82); margin-bottom: -119px; }
}
@media screen and (max-width: 980px) {
  .cert-sheet { transform: scale(.70); margin-bottom: -214px; }
}
@media screen and (max-width: 820px) {
  .cert-sheet { transform: scale(.58); margin-bottom: -309px; }
}
@media screen and (max-width: 680px) {
  .cert-sheet { transform: scale(.46); margin-bottom: -405px; }
}
@media screen and (max-width: 560px) {
  .cert-sheet { transform: scale(.38); margin-bottom: -468px; }
}
@media screen and (max-width: 440px) {
  .cert-sheet { transform: scale(.30); margin-bottom: -532px; }
}

/* A scaled sheet still occupies its full unscaled width in the layout box,
   so the page would scroll sideways without this. */
@media screen and (max-width: 1180px) {
  .cert-body { overflow-x: hidden; }
}

/* ==========================================================================
   Round medallion for Srila Prabhupada (owner's request).

   A circle means a square crop of a 1408:2146 portrait, so the framing is
   chosen rather than left to the default centre: his face sits at roughly
   50% across and 25% down the full frame, so `object-position: 50% 24%`
   keeps face, garland and karatalas inside the circle and crops only the
   floor and the devotees behind him. Still no filter, tint, blur or overlay,
   and nothing is placed on top of him.

   `print-color-adjust` is repeated on the ring so the gold hairline survives
   a devotee printing with "Background graphics" unticked.
   ========================================================================== */
.cert-founder__img {
	width: 34mm;
	height: 34mm;
	object-fit: cover;
	object-position: 50% 24%;
	border-radius: 50%;
	border: 1.2pt solid var(--c-gold-soft);
	box-shadow: 0 0 0 0.8mm #fff, 0 0 0 1.1mm var(--c-gold-soft);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* The emblem is now a navy recolour of the mark, so the navy backing panel it
   used to need is gone. That panel was the one element that could vanish when
   a devotee printed with "Background graphics" unticked, taking the white
   logo with it. Dark-on-light survives any print setting. */
.cert-emblem {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
.cert-emblem__img { width: 40mm; height: auto; }