/*
	Custom theme overrides — modern dark UI with gradient accents.
	Loaded after main.css / noscript.css; keeps HTML5 UP's structure & layout,
	restyles color, type, and adds motion/hover polish.
*/

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
	--accent-1: #7c5cff;
	--accent-2: #22d3ee;
	--gradient: linear-gradient(120deg, var(--accent-1), var(--accent-2));
	--bg-0: #080b14;
	--bg-1: #0d1220;
	--surface: #121a2c;
	--surface-alt: #161f35;
	--border: rgba(124, 92, 255, 0.18);
	--text: #e7ebf5;
	--text-muted: #93a0ba;
}

/* Base */

	body {
		background-color: var(--bg-0) !important;
		background-image:
			radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.16), transparent 42%),
			radial-gradient(circle at 88% 18%, rgba(34, 211, 238, 0.12), transparent 40%),
			radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.08), transparent 55%);
		background-attachment: fixed;
	}

	body, input, select, textarea {
		font-family: "Inter", "Source Sans Pro", Helvetica, sans-serif;
		font-weight: 400;
		color: var(--text);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
		letter-spacing: -0.01em;
		color: var(--text) !important;
	}

	a {
		color: var(--accent-2);
	}

		a:hover {
			color: var(--accent-1) !important;
		}

	strong, b {
		color: var(--text);
	}

/* Header / logo */

	#header {
		background: transparent;
	}

		#header .logo {
			border-color: rgba(124, 92, 255, 0.55) !important;
			background: rgba(18, 26, 44, 0.55);
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			border-radius: 999px;
			font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
			background-image: var(--gradient);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

			#header .logo:hover {
				border-color: var(--accent-2) !important;
				-webkit-text-fill-color: transparent;
				opacity: 0.85;
			}

		#header a:hover {
			color: var(--accent-2) !important;
		}

/* Nav */

	#nav {
		background: rgba(13, 18, 32, 0.65) !important;
		border: 1px solid var(--border);
		border-radius: 1rem;
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	}

		#nav ul.links {
			font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
			font-weight: 600;
		}

		#nav ul.links li a {
			position: relative;
		}

			#nav ul.links li a:hover {
				background-color: transparent !important;
				color: var(--accent-2) !important;
			}

		#nav ul.links li.active {
			background: transparent;
			background-image: var(--gradient);
			border-radius: 999px;
			margin: 0.6rem 0.15rem;
		}

			#nav ul.links li.active a {
				color: #ffffff !important;
			}

				#nav ul.links li.active a:hover {
					color: #ffffff !important;
				}

		#nav ul.icons li a.icon:hover:before {
			color: var(--accent-2);
		}

/* Intro (index hero) */

	#intro {
		background: transparent;
	}

		#intro h1 {
			font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
			background-image: var(--gradient);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		#intro .button {
			background-image: var(--gradient) !important;
			color: #ffffff !important;
		}

/* Main surface */

	#main {
		background-color: var(--surface) !important;
		border: 1px solid var(--border);
		border-radius: 1.5rem;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
		overflow: hidden;
	}

		#main > * {
			border-top-color: var(--border) !important;
		}

		#main > .post header.major > h1,
		#main > .post header.major h2 {
			background-image: var(--gradient);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		#main hr {
			border-bottom-color: var(--border) !important;
		}

/* Post cards / project grid */

	#main > .posts > article {
		border-color: var(--border) !important;
		transition: background-color 0.25s ease, transform 0.25s ease;
	}

		#main > .posts > article:hover {
			background-color: var(--surface-alt);
			transform: translateY(-4px);
		}

		#main > .posts > article h2 a,
		#main > .post header.major h2 a {
			color: var(--text);
		}

			#main > .posts > article h2 a:hover {
				color: var(--accent-2) !important;
			}

	.image, .image img {
		border-radius: 0.75rem;
	}

		.image.fit img {
			transition: transform 0.4s ease;
		}

		#main > .posts > article:hover .image.fit img {
			transform: scale(1.03);
		}

/* Buttons */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		background-image: var(--gradient);
		border-radius: 999px;
		color: #ffffff !important;
		font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
		box-shadow: 0 8px 24px rgba(124, 92, 255, 0.35);
		transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			transform: translateY(-2px);
			box-shadow: 0 14px 32px rgba(34, 211, 238, 0.4);
			opacity: 0.95;
		}

		.button.icon.solo:before {
			color: #ffffff;
		}

/* Body copy */

	#main p, #main li {
		color: var(--text-muted);
	}

	#main blockquote {
		border-left-color: var(--accent-1) !important;
		color: var(--text);
	}

	#main code {
		background: rgba(124, 92, 255, 0.12) !important;
		border-color: var(--border) !important;
		color: var(--accent-2);
	}

/* Mobile nav panel */

	#navPanelToggle {
		background-color: rgba(18, 26, 44, 0.85) !important;
		color: #ffffff !important;
		border-radius: 999px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	}

		#navPanelToggle.alt {
			background-color: rgba(18, 26, 44, 0.85) !important;
			color: #ffffff !important;
		}

	#navPanel {
		background: var(--bg-1) !important;
		color: var(--text) !important;
	}

		#navPanel .links li {
			border-top-color: var(--border) !important;
		}

		#navPanel .links li a {
			color: var(--text) !important;
		}

			#navPanel .links li a:hover {
				color: var(--accent-2) !important;
			}

		#navPanel h1, #navPanel h2, #navPanel h3,
		#navPanel h4, #navPanel h5, #navPanel h6 {
			color: var(--text) !important;
		}

/* Footer */

	#footer {
		background: var(--bg-1) !important;
		border-top: 1px solid var(--border);
	}

		#footer h3 {
			font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
			color: var(--text);
		}

		#footer a {
			color: var(--text-muted);
		}

			#footer a:hover {
				color: var(--accent-2) !important;
			}

		#footer ul.icons.alt li .icon:before {
			box-shadow: inset 0 0 0 2px var(--border) !important;
			transition: box-shadow 0.2s ease, color 0.2s ease;
		}

			#footer ul.icons.alt li a.icon:hover:before {
				box-shadow: inset 0 0 0 2px var(--accent-2) !important;
			}

	#copyright {
		background: var(--bg-1) !important;
		color: var(--text-muted);
	}

		#copyright a {
			color: var(--text-muted);
		}

/* Stat grid */

	.stat-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
		margin: 0 0 2rem 0;
	}

		@media screen and (max-width: 736px) {

			.stat-grid {
				grid-template-columns: repeat(2, 1fr);
			}

		}

		.stat-card {
			background: var(--surface-alt);
			border: 1px solid var(--border);
			border-radius: 1rem;
			padding: 1.5rem 1rem;
			text-align: center;
			transition: transform 0.25s ease, border-color 0.25s ease;
		}

			.stat-card:hover {
				transform: translateY(-4px);
				border-color: var(--accent-1);
			}

			.stat-card .stat-number {
				display: block;
				font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
				font-weight: 700;
				font-size: 2.25rem;
				line-height: 1.1;
				background-image: var(--gradient);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-bottom: 0.5rem;
			}

			.stat-card .stat-label {
				display: block;
				font-size: 0.75rem;
				letter-spacing: 0.04em;
				text-transform: uppercase;
				color: var(--text-muted);
				line-height: 1.5;
			}

/* Timeline */

	.timeline {
		position: relative;
		margin: 0 0 2rem 0;
		padding-left: 2rem;
		border-left: 2px solid var(--border);
	}

		.timeline-item {
			position: relative;
			padding-bottom: 2rem;
		}

			.timeline-item:last-child {
				padding-bottom: 0;
			}

			.timeline-item .timeline-marker {
				position: absolute;
				top: 0.3rem;
				left: -2.5rem;
				width: 0.85rem;
				height: 0.85rem;
				border-radius: 50%;
				background-image: var(--gradient);
				box-shadow: 0 0 0 4px var(--bg-1), 0 0 12px rgba(124, 92, 255, 0.6);
			}

			.timeline-item .timeline-date {
				display: inline-block;
				font-family: "Space Grotesk", "Source Sans Pro", Helvetica, sans-serif;
				font-size: 0.75rem;
				font-weight: 600;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				color: var(--accent-2);
				margin-bottom: 0.35rem;
			}

			.timeline-item h3 {
				margin: 0 0 0.5rem 0;
				font-size: 1.15rem;
			}

			.timeline-item p {
				margin: 0;
			}

/* Tag list */

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin: 0 0 2rem 0;
	}

		.tag-list .tag {
			display: inline-block;
			padding: 0.5rem 1.1rem;
			border-radius: 999px;
			border: 1px solid var(--border);
			background: var(--surface-alt);
			color: var(--text);
			font-size: 0.8rem;
			font-weight: 500;
			transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
		}

			.tag-list .tag:hover {
				border-color: var(--accent-2);
				color: var(--accent-2);
				transform: translateY(-2px);
			}

		.intro-tags {
			justify-content: center;
			margin: 0 0 1.75rem 0;
		}

			.intro-tags .tag {
				background: rgba(8, 11, 20, 0.55);
			}

		.card-tags {
			justify-content: center;
			margin: 0 0 1.5rem 0;
		}

			.card-tags .tag {
				padding: 0.35rem 0.85rem;
				font-size: 0.7rem;
			}

		#main > .post.featured .card-tags {
			justify-content: center;
		}

		.proj-tags {
			justify-content: flex-start;
			margin: 0.75rem 0 1.25rem 0;
		}