/* HamGit — hamgit.com (BG7PBP)
 * Custom styles, loaded site-wide via templates/custom/header.tmpl.
 *
 * Design system
 *   Surfaces  The hero is a fixed dark ink so the brand reads identically in
 *             every Forgejo theme. The footer takes the platform footer
 *             palette (--color-footer and friends), so it stays coordinated
 *             in every theme; all other content sits on platform surfaces and
 *             uses Forgejo --color-* tokens.
 *   Color     One accent hue: var(--color-primary) for anything interactive on
 *             platform surfaces and for the footer's RF accents, --hg-warm as
 *             its light tint for text on the ink hero. --hg-signal (cyan) is
 *             reserved for the RF / Morse motif on the ink hero. No other hues.
 *   Type      14px platform base. Scale 42 / 20 / 16 / 14 / 12 px.
 *             Weights 400 / 500 / 600 only (platform guidance avoids 700+).
 *   Space     4px grid: 4 8 12 16 24 32 48 64.
 *   Shape     Platform radii only. Separation by 1px borders — no shadows,
 *             no gradient fills (the hero rings are a line motif), no motion
 *             except the CW keying, which honours prefers-reduced-motion.
 *
 * Every selector is prefixed hg-* / hamgit-* so nothing leaks into Forgejo.
 */

:root {
	/* station surfaces (theme-independent) */
	--hg-ink: #0e141b;
	--hg-fg: #dbe4ee;
	--hg-fg-muted: #8fa0b3;
	--hg-warm: #ffab73;
	--hg-signal: #38bdf8;
	/* type scale */
	--hg-fs-display: 42px;
	--hg-fs-title: 20px;
	--hg-fs-lead: 16px;
	--hg-fs-body: 14px;
	--hg-fs-meta: 12px;
	/* spacing, 4px grid */
	--hg-s1: 4px;
	--hg-s2: 8px;
	--hg-s3: 12px;
	--hg-s4: 16px;
	--hg-s5: 24px;
	--hg-s6: 32px;
	--hg-s7: 48px;
	--hg-s8: 64px;
	/* layout */
	--hg-container: 1280px;
}

@media (max-width: 767.98px) {
	:root {
		--hg-fs-display: 30px;
		--hg-fs-title: 18px;
		--hg-s7: 32px;
		--hg-s8: 40px;
	}
}

.hg-container {
	max-width: var(--hg-container);
	margin-inline: auto;
	padding-inline: var(--page-margin-x);
}

/* ============================== HERO ============================== */

/* sit flush under the navbar instead of inheriting default page spacing */
.hamgit-home.page-content > .hg-hero:first-child {
	margin-top: 0;
}

.hamgit-home .hg-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--hg-s8) var(--hg-s7);
	background: var(--hg-ink);
	color: var(--hg-fg);
	text-align: center;
}

/* concentric signal rings: the page's single decorative pattern */
.hamgit-home .hg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-radial-gradient(circle at 50% 20%, transparent 0 63px, rgba(56, 189, 248, 0.07) 63px 64px);
	mask-image: radial-gradient(closest-side at 50% 20%, #000 20%, transparent 95%);
	-webkit-mask-image: radial-gradient(closest-side at 50% 20%, #000 20%, transparent 95%);
}

.hamgit-home .hg-hero__in {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hamgit-home .hg-hero__logo {
	width: 112px;
	height: 112px;
}

.hamgit-home .hg-hero__title {
	margin: var(--hg-s5) 0 0;
	color: #fff;
	font-size: var(--hg-fs-display);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1.1;
}

.hamgit-home .hg-hero__slogan {
	margin: var(--hg-s2) 0 0;
	color: var(--hg-warm);
	font-size: var(--hg-fs-lead);
	font-weight: var(--font-weight-medium);
}

.hamgit-home .hg-hero__tagline {
	margin: var(--hg-s4) 0 0;
	max-width: 44em;
	color: var(--hg-fg-muted);
	font-size: var(--hg-fs-body);
	line-height: 1.7;
}

.hamgit-home .hg-hero__cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--hg-s3);
	margin-top: var(--hg-s6);
}

/* ---------- Morse (CW) strip: the site name in dits and dahs ---------- */

.hamgit-home .hg-cw {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--hg-s5);
	margin-top: var(--hg-s6);
}

.hamgit-home .hg-cw__ch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hg-s2);
	animation: hg-key 3.2s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.22s);
}

@keyframes hg-key {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.hamgit-home .hg-cw__mk {
	display: flex;
	align-items: center;
	gap: var(--hg-s1);
	height: 8px;
}

.hg-mk {
	display: block;
	height: 8px;
	border-radius: var(--border-radius-full);
	background: var(--hg-signal);
}

.hg-mk--t { width: 8px; }
.hg-mk--d { width: 22px; }

.hamgit-home .hg-cw__ch b {
	color: var(--hg-fg-muted);
	font-family: var(--fonts-monospace);
	font-size: var(--hg-fs-meta);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.1em;
}

/* ============================== SITE CARD ============================== */

.hamgit-home .hg-site {
	margin-top: var(--hg-s7);
}

.hamgit-home .hg-site__card {
	overflow: hidden;
	background: var(--color-card);
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius-medium);
}

.hamgit-home .hg-site__head {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hg-s2) var(--hg-s3);
	padding: var(--hg-s3) var(--hg-s5);
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	font-size: var(--hg-fs-meta);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
}

.hamgit-home .hg-site__body {
	display: grid;
	grid-template-columns: minmax(200px, 0.8fr) 1.6fr;
}

.hamgit-home .hg-site__name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--hg-s2);
	padding: var(--hg-s6) var(--hg-s5);
	border-inline-end: 1px dashed var(--color-secondary-dark-4);
	text-align: center;
}

.hamgit-home .hg-site__name b {
	color: var(--color-primary);
	font-family: var(--fonts-monospace);
	font-size: 32px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1;
}

.hamgit-home .hg-site__name small {
	color: var(--color-text-light-3);
	font-size: var(--hg-fs-meta);
	letter-spacing: 0.14em;
}

.hamgit-home .hg-site__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hg-s5) var(--hg-s6);
	align-content: center;
	padding: var(--hg-s5);
}

.hamgit-home .hg-site__fields dt {
	color: var(--color-text-light-3);
	font-size: var(--hg-fs-meta);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hamgit-home .hg-site__fields dd {
	margin: var(--hg-s1) 0 0;
	color: var(--color-text);
	font-size: var(--hg-fs-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
}

.hamgit-home .hg-site__fields dd a {
	color: var(--color-primary);
}

.hamgit-home .hg-site__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hg-s2) var(--hg-s3);
	padding: var(--hg-s3) var(--hg-s5);
	border-top: 1px solid var(--color-secondary);
	background: var(--color-box-header);
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-body);
}

.hamgit-home .hg-site__foot .hg-73 {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
}

/* ============================== REPOS ============================== */

.hamgit-home .hg-repos {
	margin-top: var(--hg-s7);
}

.hamgit-home .hg-repos__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--hg-s2) var(--hg-s3);
}

.hamgit-home .hg-repos__head h2 {
	margin: 0;
	color: var(--color-text);
	font-size: var(--hg-fs-title);
	font-weight: var(--font-weight-semibold);
}

.hamgit-home .hg-repos__count {
	margin-inline-start: var(--hg-s3);
	color: var(--color-text-light-3);
	font-size: var(--hg-fs-meta);
	font-weight: var(--font-weight-normal);
}

.hamgit-home .hg-repos__head a {
	color: var(--color-primary);
	font-size: var(--hg-fs-body);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

.hamgit-home .hg-repos__head a:hover {
	text-decoration: underline;
}

.hamgit-home .hg-repos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--hg-s4);
	margin-top: var(--hg-s4);
}

.hamgit-home .hg-repo {
	display: flex;
	flex-direction: column;
	gap: var(--hg-s2);
	padding: var(--hg-s4);
	background: var(--color-card);
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius-medium);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.hamgit-home a.hg-repo:hover {
	border-color: var(--color-primary);
}

.hamgit-home .hg-repo__name {
	color: var(--color-text);
	font-size: var(--hg-fs-body);
	font-weight: var(--font-weight-semibold);
	word-break: break-all;
}

.hamgit-home .hg-repo__desc {
	flex: 1;
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-body);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hamgit-home .hg-repo__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hg-s2) var(--hg-s3);
	color: var(--color-text-light-3);
	font-size: var(--hg-fs-meta);
}

.hamgit-home .hg-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hg-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--border-radius-full);
	background: var(--color-text-light-3);
}

.hamgit-home .hg-badge {
	padding: 0 var(--hg-s2);
	border: 1px solid var(--color-secondary-dark-4);
	border-radius: var(--border-radius-full);
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-meta);
}

.hamgit-home .hg-repos__empty {
	grid-column: 1 / -1;
	padding: var(--hg-s6) var(--hg-s4);
	border: 1px dashed var(--color-secondary-dark-4);
	border-radius: var(--border-radius-medium);
	color: var(--color-text-light-2);
	text-align: center;
}

/* ============================== FOOTER ============================== */

/* The built-in footer bar is switched off site-wide: version / powered-by /
   load-time come from app.ini, and the rest of the bar (language picker,
   licenses, API) is hidden here. The element itself stays in the DOM because
   the Actions full-screen toggle looks it up via querySelector('.page-footer'). */
.page-footer {
	display: none !important;
}

/* Content-to-footer breathing room is provided globally here, so every page
   (repo pages, the home page, auth pages) ends on the same rhythm. */
.full.height {
	padding-bottom: var(--hg-s8);
}

/* The Actions run view moves .action-view-right up to be a direct child of
   .full.height only in fullscreen mode, where the platform hides the navbar,
   content and .page-footer. Hide the custom footer and its spacing too. */
.full.height:has(> .action-view-right) {
	padding-bottom: 0;
}

.full.height:has(> .action-view-right) ~ .hg-footer {
	display: none;
}

/* Station nameplate: brand block on the start edge, link groups on the end
   edge, meta bar below. Background, rules and text all come from the platform
   footer palette, so light, dark and auto themes stay coordinated. */
.hg-footer {
	background: var(--color-footer);
	border-top: 1px solid var(--color-secondary);
	color: var(--color-text-light-2);
}

.hg-footer__in {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--hg-s6);
	padding-block: var(--hg-s6);
}

.hg-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hg-s2);
}

.hg-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--hg-s2);
	text-decoration: none;
}

.hg-footer__logo b {
	color: var(--color-text);
	font-size: var(--hg-fs-lead);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.06em;
}

.hg-footer__slogan {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--hg-fs-body);
	font-weight: var(--font-weight-medium);
}

/* 73 in Morse, echoing the hero's callsign strip at a smaller scale */
.hg-footer__cw {
	display: flex;
	align-items: center;
	gap: var(--hg-s4);
	margin-top: var(--hg-s2);
}

.hg-footer__cw-group {
	display: flex;
	align-items: center;
	gap: 3px;
}

.hg-footer__cw .hg-mk {
	height: 6px;
	background: var(--color-primary);
}

.hg-footer__cw .hg-mk--t { width: 6px; }
.hg-footer__cw .hg-mk--d { width: 16px; }

.hg-footer__nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hg-s6);
}

.hg-footer__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hg-s2);
}

.hg-footer__gt {
	margin: 0 0 var(--hg-s1);
	color: var(--color-text-light-3);
	font-size: var(--hg-fs-meta);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
}

.hg-footer__group a {
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-body);
	text-decoration: none;
}

.hg-footer__group a:hover {
	color: var(--color-primary);
}

.hg-footer__bar {
	border-top: 1px solid var(--color-secondary);
}

.hg-footer__bar-in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hg-s2) var(--hg-s4);
	padding-block: var(--hg-s3);
	font-size: var(--hg-fs-meta);
}

.hg-footer__73 {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
}

/* ============================== SIGN-IN BRAND ============================== */

.hamgit-signin {
	display: flex;
	align-items: center;
	gap: var(--hg-s3);
	margin: var(--hg-s4) 0 var(--hg-s1);
	padding: var(--hg-s3);
	background: var(--color-box-header);
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius-medium);
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-body);
	line-height: 1.6;
	text-align: start;
}

.hamgit-signin b {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}

/* ============================== ERROR PAGES ============================== */

/* The 404 keeps the platform layout but adds the station's SOS strip:
   three dots, three dashes, three dots — "signal lost". */

.hg-404__panel {
	max-width: 560px;
	margin: var(--hg-s8) auto var(--hg-s6);
	padding: var(--hg-s7) var(--hg-s6);
	background: var(--color-card);
	border: 1px solid var(--color-secondary);
	border-radius: var(--border-radius-medium);
}

.hg-404__cw {
	display: inline-flex;
	align-items: center;
	gap: var(--hg-s3);
}

.hg-404__cw-group {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.hg-404__cw .hg-mk {
	height: 6px;
	background: var(--color-primary);
}

.hg-404__cw .hg-mk--t { width: 6px; }
.hg-404__cw .hg-mk--d { width: 16px; }

.hg-404__code {
	margin: var(--hg-s5) 0 0;
	color: var(--color-text);
	font-family: var(--fonts-monospace);
	font-size: 48px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1;
}

.hg-404__title {
	margin: var(--hg-s3) 0 0;
	color: var(--color-primary);
	font-size: var(--hg-fs-title);
	font-weight: var(--font-weight-semibold);
}

.hg-404__desc {
	margin: var(--hg-s3) 0 0;
	color: var(--color-text-light-2);
	font-size: var(--hg-fs-body);
	line-height: 1.7;
}

.hg-404__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--hg-s3);
	margin-top: var(--hg-s5);
}

/* ============================== RESPONSIVE ============================== */

/* the footer stacks below the four-column breakpoint */
@media (max-width: 899.98px) {
	.hg-footer__in {
		grid-template-columns: 1fr;
		gap: var(--hg-s5);
		padding-block: var(--hg-s5);
	}

	.hg-footer__nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--hg-s5) var(--hg-s7);
	}
}

@media (max-width: 767.98px) {
	.hamgit-home .hg-hero__logo {
		width: 88px;
		height: 88px;
	}

	.hamgit-home .hg-cw {
		gap: var(--hg-s2);
	}

	.hamgit-home .hg-cw__mk {
		gap: 3px;
	}

	.hg-mk {
		height: 6px;
	}

	.hg-mk--t { width: 6px; }
	.hg-mk--d { width: 16px; }

	.hamgit-home .hg-site__body {
		grid-template-columns: 1fr;
	}

	.hamgit-home .hg-site__name {
		padding: var(--hg-s5) var(--hg-s4);
		border-inline-end: none;
		border-bottom: 1px dashed var(--color-secondary-dark-4);
	}

	.hamgit-home .hg-site__fields {
		grid-template-columns: 1fr;
		gap: var(--hg-s4);
		padding: var(--hg-s4);
	}

	.hamgit-home .hg-site__foot {
		justify-content: center;
		text-align: center;
	}

	.full.height {
		padding-bottom: var(--hg-s7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hamgit-home .hg-cw__ch {
		animation: none;
	}

	.hamgit-home a.hg-repo {
		transition: none;
	}
}