/* Self-hosted certificate font (bundled in Task 6) */
@font-face {
	font-family: "IMSF Cert";
	src: url("../fonts/montserrat-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "IMSF Cert";
	src: url("../fonts/montserrat-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}

.imsf-wrap { max-width: 1000px; margin: 0 auto; font-family: Lato, Helvetica, Arial, sans-serif; color: #666; }
.imsf-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.25rem; }
.imsf-form label { flex: 1 1 100%; font-weight: 700; color: #2c6e6a; }
.imsf-form input {
	padding: .7rem .9rem; font-size: 1rem; flex: 1 1 auto;
	border: 1px solid #cfd8d7; border-radius: 5px;
}
.imsf-btn {
	padding: .7rem 1.4rem; font-size: .95rem; cursor: pointer;
	font-family: Alata, Helvetica, Arial, sans-serif;
	text-transform: uppercase; letter-spacing: 1px;
	border: none; border-radius: 5px;
	background: #71C9BD; color: #fff;
}
.imsf-btn:hover { filter: brightness(0.95); }
.imsf-btn--accent { background: #F7DD66; color: #1a1a1a; }
.imsf-message { flex: 1 1 100%; margin: .25rem 0 0; }
.imsf-message.error { color: #b32d2e; }

.imsf-cert-viewport { position: relative; width: 100%; aspect-ratio: 2000 / 1414; overflow: hidden; }
.imsf-cert {
	position: absolute; top: 0; left: 0;
	width: 2000px; height: 1414px;
	transform-origin: top left;
	background-size: 2000px 1414px; background-repeat: no-repeat;
	font-family: "IMSF Cert", Arial, sans-serif;
}
.imsf-field { position: absolute; white-space: nowrap; transform: translateY(-50%); }

.imsf-actions { margin-top: 1rem; display: flex; gap: .6rem; }

/* Printing is handled in lookup.js: it snapshots the certificate to a single
   image and prints that on one landscape page (reliable across browsers, and the
   background prints without the "Background graphics" option). No @media print
   rules here on purpose — the old ones printed multiple, unscaled pages. */