/* GTHU Badges — credential verification page
   Brand palette (sampled from brand icon):
   teal #24A4A8 · teal-light #43C2CC · teal-deep #157378 · amber #FDBE3F · green #03825E
   Base: paper #F7F4ED · ink #182D3A · rule #E2DDD3
   Type: Newsreader (display) / Archivo (utility). */

:root {
	--paper: #f7f4ed;
	--ink: #182d3a;
	--teal: #24a4a8;
	--teal-light: #43c2cc;
	--teal-deep: #157378;
	--amber: #fdbe3f;
	--amber-deep: #e8a723;
	--gold: #24a4a8;        /* frame + accent rules → teal */
	--green: #03825e;       /* verified seal → brand green */
	--red: #9c3a2e;
	--soft: #6c757d;
	--rule: #e2ddd3;
	--card: #fffdf8;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Archivo", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.gthu-masthead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 20px 28px;
	border-bottom: 1px solid var(--rule);
}
.gthu-wordmark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.gthu-logo {
	height: 44px;
	width: auto;
	display: block;
}
@media (max-width: 560px) {
	.gthu-logo { height: 34px; }
}
.gthu-masthead-label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--soft);
}

.gthu-wrap {
	max-width: 720px;
	margin: 40px auto 64px;
	padding: 0 20px;
}

/* Certificate card */
.gthu-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--rule);
	outline: 1px solid var(--gold);
	outline-offset: -9px;
	padding: 56px 48px 44px;
	text-align: center;
}

/* Signature element: the verification seal — a rotated circular stamp */
.gthu-seal {
	position: absolute;
	top: -26px;
	right: -18px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(9deg);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 3px 10px rgba(24, 45, 58, 0.18);
}
.gthu-seal::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1.5px dashed rgba(255, 255, 255, 0.75);
	border-radius: 50%;
}
.gthu-seal--valid   { background: var(--green); }
.gthu-seal--revoked,
.gthu-seal--invalid { background: var(--red); }
.gthu-seal--expired { background: var(--soft); }

.gthu-badge-art img {
	max-width: 420px;
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
}
.gthu-badge-art { margin: 0 0 32px; }
/* Hex SVG badge: no border box, natural drop shadow, capped width */
.gthu-badge-art--hex img {
	max-width: 260px;
	border: none;
	filter: drop-shadow(0 6px 14px rgba(16, 34, 44, 0.22));
}

.gthu-eyebrow {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--teal-deep);
	margin: 0 0 10px;
	font-weight: 600;
}
.gthu-course {
	font-family: "Newsreader", serif;
	font-weight: 600;
	font-size: clamp(26px, 4.5vw, 38px);
	line-height: 1.15;
	margin: 0 0 26px;
}
.gthu-awarded {
	font-size: 13px;
	color: var(--soft);
	margin: 0 0 4px;
}
.gthu-recipient {
	font-family: "Newsreader", serif;
	font-size: clamp(22px, 3.5vw, 30px);
	font-weight: 500;
	margin: 0 0 8px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--amber);
	display: inline-block;
}
.gthu-desc {
	max-width: 52ch;
	margin: 20px auto 0;
	color: var(--soft);
	font-size: 15px;
}

.gthu-skills {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.gthu-skills li {
	font-size: 13px;
	padding: 4px 12px;
	border: 1px solid var(--rule);
	border-radius: 100px;
	background: var(--paper);
}

.gthu-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 24px;
	margin: 36px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--rule);
	text-align: left;
}
.gthu-facts dt {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--soft);
	margin-bottom: 2px;
}
.gthu-facts dd { margin: 0; font-size: 14px; font-weight: 500; }
.gthu-uuid { font-family: ui-monospace, monospace; font-size: 12px !important; word-break: break-all; }

.gthu-alert {
	margin: 28px 0 0;
	padding: 12px 16px;
	background: #f7e9e6;
	border: 1px solid #e3c4be;
	color: var(--red);
	font-size: 14px;
	font-weight: 500;
}

.gthu-notfound {
	font-family: "Newsreader", serif;
	font-weight: 600;
	margin: 0 0 12px;
}
.gthu-sub { color: var(--soft); margin: 0; }

/* Share panel */
.gthu-share {
	margin-top: 36px;
	background: var(--card);
	border: 1px solid var(--rule);
	padding: 32px;
}
.gthu-share h2 {
	font-family: "Newsreader", serif;
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 18px;
}
.gthu-share-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.gthu-downloads { padding-top: 18px; border-top: 1px solid var(--rule); }

.gthu-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.gthu-btn:hover, .gthu-btn:focus-visible { background: var(--ink); color: var(--card); }
.gthu-btn--primary { background: var(--ink); color: var(--card); }
.gthu-btn--primary:hover, .gthu-btn--primary:focus-visible { background: var(--green); border-color: var(--green); }
.gthu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.gthu-snippet { margin-bottom: 20px; }
.gthu-snippet label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--soft);
	margin-bottom: 6px;
	font-weight: 600;
}
.gthu-copyrow { display: flex; gap: 8px; align-items: stretch; }
.gthu-copyrow input,
.gthu-copyrow textarea {
	flex: 1;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	padding: 10px;
	border: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink);
	resize: vertical;
}
.gthu-copy { white-space: nowrap; align-self: flex-start; }

.gthu-openbadges { font-size: 13px; color: var(--soft); margin: 6px 0 0; }
.gthu-openbadges a { color: var(--teal-deep); }

.gthu-foot {
	max-width: 720px;
	margin: 0 auto 48px;
	padding: 0 20px;
	font-size: 13px;
	color: var(--soft);
	text-align: center;
}
.gthu-foot a { color: var(--ink); }

/* Embed mode: compact card only */
body.gthu-embed { background: transparent; }
body.gthu-embed .gthu-wrap { margin: 8px auto; max-width: 420px; padding: 0 6px; }
body.gthu-embed .gthu-card { padding: 40px 24px 28px; }
body.gthu-embed .gthu-seal { width: 72px; height: 72px; font-size: 11px; top: -14px; right: -8px; }

@media (max-width: 560px) {
	.gthu-card { padding: 44px 22px 32px; }
	.gthu-seal { width: 76px; height: 76px; font-size: 11px; top: -18px; right: -6px; }
	.gthu-copyrow { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.gthu-btn { transition: none; }
}