/* The certificate as a BROWSER draws it: the certificate page and its Print
 * button. The downloaded PDF uses css/certificate-pdf.css instead, so nothing in
 * here can move anything there, and the other way round.
 *
 * Laid out in normal flow with no fixed height, so a long name or a wide font
 * makes the certificate taller rather than making things collide.
 *
 * Georgia rather than the PDF's DejaVu: a browser only has DejaVu if the visitor
 * happens to have installed it, so naming it would give different visitors
 * different line breaks.
 */

/* ---- The page around the certificate ---------------------------------- */
#certificate #container { padding: 25px 16px 40px; box-sizing: border-box; }
#certificate #leadAd { width: 728px; max-width: 100%; min-height: 90px; margin: 0 auto 18px; }
#certificate #lgRectAd { width: 336px; max-width: 100%; min-height: 280px; margin: 24px auto 0; }

#certificateVerifyBanner {
	display: table;
	margin: 0 auto;
	padding: 7px 16px;
	border: 1px solid #9bd3ae;
	border-radius: 999px;
	background: #e7f6ec;
	color: #14633a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}
#afterCertificateDiv { max-width: 820px; margin: 0 auto; }
#certBtnContainer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 12px;
	margin-bottom: 18px;
}
#certBtnContainer > * { margin: 0; }   /* _b_menuGeneral.css's *{margin:0 auto} would spread them apart */
#certBtnContainer #certAllLink { margin-left: 6px; color: var(--text-primary, #222); font-size: 15px; font-weight: 600; }
#verifyNote {
	max-width: 660px;
	margin: 0 auto;
	color: var(--text-primary, #222);
	font-size: 15px;
	line-height: 1.55;
}

/* ---- The certificate -------------------------------------------------- */
.certificate-wrap {
	position: relative;
	max-width: 820px;
	margin: 20px auto 24px;
	padding: 22px;
	border: 3px double #a3792f;
	background: #fffdf7;
	color: #2b2b2b;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1.3;
	text-align: center;
	box-sizing: border-box;
}
.certificate-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 490px;
	padding: 24px 44px 16px;
	border: 1px solid #c9a24b;
}
.certificate-inner > * { width: 100%; }

.cert-corner { position: absolute; width: 26px; height: 26px; }
.cert-corner-tl { top: -3px; left: -3px; border-top: 3px solid #a3792f; border-left: 3px solid #a3792f; }
.cert-corner-tr { top: -3px; right: -3px; border-top: 3px solid #a3792f; border-right: 3px solid #a3792f; }
.cert-corner-bl { bottom: -3px; left: -3px; border-bottom: 3px solid #a3792f; border-left: 3px solid #a3792f; }
.cert-corner-br { bottom: -3px; right: -3px; border-bottom: 3px solid #a3792f; border-right: 3px solid #a3792f; }

/* Beside the heading, whose side padding keeps it centred and clear of this. */
.certificate-inner > .cert-logo { position: absolute; top: 18px; left: 18px; width: 72px; }
.cert-logo img { display: block; width: 72px; height: 72px; filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, .4)); }
.cert-brand {
	margin-bottom: 14px;
	color: #8a8a8a;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.cert-heading {
	margin: 0 0 10px;
	padding: 0 84px;
	color: #2b2b2b;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: .5px;
	line-height: 1.2;
}
.certificate-inner > .cert-divider { width: 60%; height: 3px; margin: 0 auto 22px; background: #c9a24b; }
.cert-presented, .cert-wpm-label {
	color: #857b66;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.cert-presented { margin-bottom: 6px; }
.certificate-inner > .cert-name {
	width: auto;
	min-width: min(400px, 100%);
	max-width: 100%;
	margin: 0 auto 18px;
	padding-bottom: 8px;
	border-bottom: 1px solid #d8c793;
	color: #7a5c1e;
	font-size: 36px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.cert-body { margin-bottom: 8px; color: #444; font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.cert-wpm { color: #2b2b2b; font-size: 54px; font-weight: bold; line-height: 1.15; }
.cert-wpm-label { margin-bottom: 20px; }

/* The bottom margin leaves room for the seal, which sits above the footer rule. */
.cert-stats-table {
	width: 100%;
	margin: 0 0 40px;
	border: 0;
	border-collapse: collapse;
	font-family: 'Open Sans', Arial, sans-serif;
}
.cert-stats-table td { width: 33.33%; padding: 0 6px; color: #666; font-size: 13px; text-align: center; }
.cert-stats-table .stat-value { display: block; margin-bottom: 2px; color: #2b2b2b; font-size: 18px; font-weight: 700; white-space: nowrap; }

/* margin-top:auto holds this to the bottom; the side padding keeps the text clear
   of the seal however long the URL is. */
.cert-footer {
	margin-top: auto;
	padding: 12px 100px 0;
	border-top: 1px solid #e0d6b8;
	color: #857b66;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 11px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.cert-footer .code { color: #7a5c1e; font-weight: bold; letter-spacing: 1px; }

.certificate-inner > .cert-seal {
	position: absolute;
	right: 18px;
	bottom: 14px;
	z-index: 1;
	width: 80px;
	height: 80px;
	border: 5px double #a3792f;
	border-radius: 50%;
	background: #fdf6e3;
	color: #a3792f;
	font-family: 'Open Sans', Arial, sans-serif;
	box-sizing: border-box;
}
.cert-seal-check { margin-top: 13px; font-size: 22px; font-weight: bold; line-height: 1; }
.cert-seal-label { margin-top: 2px; font-size: 8px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }

/* ---- Phones and narrow windows: stacked, nothing absolute ------------- */
@media screen and (max-width: 760px) {
	.certificate-wrap { padding: 8px; }
	.certificate-inner { min-height: 0; padding: 20px 14px 14px; }
	.certificate-inner > .cert-logo { position: static; width: 60px; margin: 0 auto 10px; }
	.cert-logo img { width: 60px; height: 60px; }
	.cert-heading { padding: 0; font-size: 22px; }
	.certificate-inner > .cert-divider { width: 70%; margin-bottom: 16px; }
	.certificate-inner > .cert-name { font-size: 27px; }
	.cert-wpm { font-size: 44px; }
	.cert-stats-table { margin-bottom: 16px; }
	.cert-stats-table, .cert-stats-table tbody, .cert-stats-table tr, .cert-stats-table td { display: block; width: 100%; }
	.cert-stats-table td { padding: 0; margin-bottom: 12px; }
	.certificate-inner > .cert-seal { position: static; margin: 0 auto 14px; }
	.cert-footer { margin-top: 0; padding: 12px 0 0; }
}

/* ---- Print: the certificate alone, on one landscape page --------------- *
 * display:none rather than the visibility:hidden trick _t_myResults.css uses: a
 * hidden element still takes up its space, which is how a page that hid
 * everything used to print as two pages of nothing.
 */
@media print {
	@page { size: landscape; margin: .4in; }
	html, body, body.readingLayout {
		width: auto;
		height: auto;
		min-width: 0;
		margin: 0;
		overflow: visible;
		background: #fff !important;
	}
	body > *:not(#container), body #container > *:not(.certificate-wrap) { display: none !important; }
	body #container {
		width: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}
	/* The cream paper and the gold lines are backgrounds, which browsers leave
	   out of a print unless told otherwise. */
	.certificate-wrap, .certificate-wrap * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.certificate-wrap {
		width: 820px;
		max-width: none;
		margin: 0 auto;
		zoom: 1.18;   /* fills a landscape page; a browser without zoom just prints it smaller */
		break-inside: avoid;
		page-break-inside: avoid;
	}
}