@import "./catppuccin.css";
@import "./base.css";

/* styles */
.navigation-bar {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	background-color: hsla(var(--mantle) / 0.8);
	backdrop-filter: blur(1rem);
	border-bottom: 2px solid hsla(var(--surface0) / 0.5);

	.navigation-bar__inner {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.5rem 1rem;

		max-width: 768px;
		margin: 0 auto;
		width: 100%;
	}

	.navigation-bar__brand {
		display: flex;
		align-items: flex-end;
		gap: 0.5rem;
		color: inherit;
		text-decoration: none;
		border-radius: 0.5rem; /* for the outline */

		.navigation-bar__icon {
			width: 2.25rem;
			height: 2.25rem;
			background-color: hsla(var(--surface0) / 1);
			border-radius: 0.5rem;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.navigation-bar__title {
			font-size: 1.25rem;
			font-weight: 600;
			color: hsl(var(--text));
		}
	}

	.navigation-bar__nav {
		display: flex;
		gap: 0.75rem;

		a {
			position: relative;
			border-bottom: 2px solid transparent;
			text-decoration: none;
			color: hsl(var(--subtext0));
			border-radius: 0.2rem;
			padding: 0 0.25rem;

			&::before {
				content: "";
				position: absolute;
				bottom: -2px;
				left: 0;
				width: 100%;
				height: 2px;
				opacity: 0;
				background-color: hsl(var(--blue));
				transform: scaleX(0);
				border-radius: 0.25rem;
				transition:
					background-color var(--transition),
					opacity var(--transition),
					transform var(--transition);
			}

			&.active {
				color: hsl(var(--text));
				&::before {
					transform: scaleX(1);
					opacity: 1;
					background-color: hsl(var(--flamingo));
				}
			}

			&:hover,
			&:focus {
				color: hsl(var(--text));
				&::before {
					transform: scaleX(1);
					opacity: 1;
					background-color: hsl(var(--blue));
				}
			}
		}
	}
}

/* */
.layout {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.main-content {
	flex: 1;
	max-width: 768px;
	margin: 0 auto;
	width: 100%;
	padding: 2rem 1rem;

	.page {
		width: 100%;

		.page-header {
			position: relative;
			display: flex;
			flex-direction: column;
			margin-bottom: 2rem;
			padding: 0.75rem;

			border-radius: 0.5rem;
			border: 2px solid hsla(var(--surface0) / 1);
			overflow: hidden;

			/*
			  stupid hack.
			  if i had the background on the page-header directly, on some zoom levels
			  there'd be a small gap at the bottom, showing the page background.
			*/
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					to top,
					hsla(var(--surface0) / 1) 0%,
					hsla(var(--surface0) / 0) 100%
				);
				z-index: -1;
				transition: background-color var(--transition);
			}

			.page-title {
				font-size: 2rem;
				font-weight: 700;
				color: hsl(var(--text));
				margin-bottom: 0.5rem;
			}

			.page-subtitle {
				font-size: 1rem;
				color: hsl(var(--subtext0));
				margin: 0;
			}

			.page-cta {
				margin-top: 1rem;
				display: flex;
				gap: 0.5rem;

				.button__pill:hover,
				.button__pill:focus {
					background-color: hsla(var(--blue) / 1);
					color: hsl(var(--crust));
				}

				.button__pill:active {
					background-color: hsla(var(--blue) / 0.8);
				}
			}
		}

		section {
			margin-bottom: 2rem;
			padding: 1rem;
			border-radius: 0.5rem;
			background-color: hsla(var(--surface0) / 0.25);

			h2 {
				font-size: 1.5rem;
				font-weight: 700;
				color: hsl(var(--text));
				margin-bottom: 0.5rem;
			}
		}

		p {
			line-height: 1.6;
			color: hsl(var(--subtext0));
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}

		nav {
			display: flex;
			gap: 1rem;
			margin-top: 2rem;
		}

		nav a {
			padding: 0.5rem 1rem;
			background-color: hsl(var(--surface0));
			border-radius: 0.375rem;
			text-decoration: none;
			color: hsl(var(--text));
			transition: background-color var(--transition);
		}

		nav a:hover {
			background-color: hsl(var(--surface1));
		}
	}
}
/* */

.error {
	h1 {
		color: hsl(var(--red));
		font-size: 2rem;
		margin-bottom: 1rem;
	}

	p {
		color: hsl(var(--subtext0));
		margin-bottom: 2rem;
	}

	.error__actions {
		display: flex;
		gap: 0.25rem;
	}
}

.button__pill {
	display: inline-block;
	border-radius: 5rem;
	border: 1px solid transparent;
	color: hsl(var(--subtext0));
	text-decoration: none;
	background-color: hsl(var(--surface0));
	padding: 0.5rem 1rem;

	&:hover,
	&:focus {
		color: hsl(var(--text));
		background-color: hsl(var(--surface1));
	}
	&:active {
		border-color: hsl(var(--surface2));
		background-color: hsla(var(--surface1) / 0.8);
	}
}

footer {
	background-color: hsl(var(--crust));
	padding: 1rem;
	max-width: 768px;
	border-radius: 1rem;
	margin: 1rem auto;
	width: calc(100% - 2rem);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

	gap: 1rem;
	grid-gap: 1rem;

	.footer__column {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		h2 {
			font-size: 1.75rem;
			font-weight: 900;
			color: hsl(var(--pink));
		}
		h3 {
			font-size: 1.25rem;
			font-weight: 600;
			color: hsl(var(--subtext1));
		}
		p,
		a {
			font-size: 0.75rem;
			font-weight: 400;
			color: hsl(var(--subtext0));
		}
		a {
			color: hsl(var(--blue));
			text-decoration: none;
		}
	}

	.footer__column-links {
		display: flex;
		flex-direction: column;

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;

			border: 2px solid hsl(var(--surface0));
			border-radius: 0.5rem;
			overflow: hidden;

			li {
				font-size: 1rem;
				font-weight: 400;
				padding: 0;
				width: 100%;

				&:not(:last-child) {
					border-bottom: 2px solid hsl(var(--surface0));
				}

				.footer__link {
					width: 100%;
					display: flex;
					flex-direction: column;
					padding: 0.5rem 0.5rem;
					outline-offset: -2px;

					&:hover,
					&:focus {
						background-color: hsla(var(--blue) / 0.05);
					}

					.footer__link-container {
						display: flex;
						align-items: center;
					}

					.hint {
						color: hsl(var(--subtext0));
						font-size: 0.7rem;
					}
				}

				&:last-child .footer__link {
					border-radius: 0 0 0.5rem 0.5rem;
				}
				&:first-child .footer__link {
					border-radius: 0.5rem 0.5rem 0 0;
				}
			}

			&:focus-within,
			&:hover {
				a:not(:focus-visible):not(:hover) {
					filter: brightness(0.85);
				}
			}
		}
	}
}

.projects-page {
	--card-radius: 1rem;

	.projects-header {
		margin-bottom: 1.5rem;

		h1 {
			margin-bottom: 0.25rem;
		}
		.projects-subtitle {
			font-size: 0.9rem;
			color: hsl(var(--subtext0));
			margin: 0;
		}
	}

	.projects {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}

	.project {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		border: 1px solid hsla(var(--accent) / 0.1);
		background: hsla(var(--surface0) / 1);
		border-radius: var(--card-radius);
		padding: 0.5rem;
		overflow: hidden;

		--accent: var(--blue);
		&[data-accent-lang="typescript"] {
			--accent: var(--blue);
		}
		&[data-accent-lang="rust"] {
			--accent: var(--peach);
		}
		&[data-accent-lang="nix"] {
			--accent: var(--sapphire);
		}
		&[data-accent-lang="bash"] {
			--accent: var(--green);
		}
		&[data-accent-lang="css"] {
			--accent: var(--pink);
		}

		&:hover,
		&:focus-within {
			background: hsla(var(--surface0) / 0.75);
			border-color: hsla(var(--accent) / 0.2);
		}

		.project__header {
			display: flex;
			gap: 0.5rem;
			align-items: center;

			.project__avatar {
				height: 100%;
				aspect-ratio: 1;
				border-radius: 0.5rem;
				background: hsla(var(--accent) / 1);

				display: flex;
				align-items: center;
				justify-content: center;

				font-weight: 700;
				font-size: 1rem;
				color: hsl(var(--crust));
				user-select: none;
			}

			.project__title-block {
				display: flex;
				flex-direction: column;
				gap: 0.15rem;

				h2 {
					font-size: 1.05rem;
					font-weight: 700;
					margin: 0;
					line-height: 1.2;
					color: hsl(var(--text));
				}
				.project__meta {
					display: flex;
					gap: 0.4rem;
					flex-wrap: wrap;

					.meta-item {
						background: hsl(var(--surface0));
						color: hsl(var(--subtext1));
					}

					.status {
						&.status--active {
							background: hsla(var(--green) / 0.2);
							color: hsl(var(--green));
						}
						&.status--wip {
							background: hsla(var(--yellow) / 0.25);
							color: hsl(var(--yellow));
						}
						&.status--archived {
							background: hsla(var(--overlay0) / 0.3);
							color: hsl(var(--overlay1));
						}
					}
				}
			}
		}

		.project__description {
			color: hsl(var(--subtext0));
			font-size: 0.75rem;
			margin: 0;
			overflow: hidden;
		}

		.project__languages {
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			gap: 0.35rem;
			padding: 0;

			.language-tag {
				--lang-bg: var(--surface1);
				--lang-colour: var(--subtext1);

				background: hsl(var(--lang-colour));
				color: hsla(var(--crust));

				&[data-lang="typescript"] {
					--lang-colour: var(--blue);
				}
				&[data-lang="rust"] {
					--lang-colour: var(--peach);
				}
				&[data-lang="nix"] {
					--lang-colour: var(--sapphire);
				}
				&[data-lang="bash"] {
					--lang-colour: var(--green);
				}
				&[data-lang="css"] {
					--lang-colour: var(--pink);
				}
			}
		}

		.project__meta .meta-item,
		.project__languages .language-tag {
			padding: 0.15rem 0.45rem;
			letter-spacing: 0.05em;
			font-size: 0.5rem;
			font-weight: 600;
			border-radius: 1rem;

			user-select: none;
		}

		.project__links {
			margin-top: auto;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;

			.project-link {
				display: flex;

				align-items: center;
				text-decoration: none;
				font-size: 0.75rem;
				font-weight: 600;
				gap: 0.25rem;

				padding: 0.25rem 0.75rem;
				border-radius: 0.25rem;

				background: hsla(var(--accent) / 0.05);
				color: hsl(var(--text));
				border: 1px solid hsla(var(--accent) / 0.25);

				&:hover,
				&:focus-visible {
					background: hsla(var(--accent) / 0.2);
					border-color: hsla(var(--accent) / 0.1);
				}
				&:active {
					background: hsla(var(--accent) / 0.1);
					border-color: hsla(var(--accent) / 0.2);
				}
			}
		}
	}
}

.theme-picker {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dropdown {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;

	.dropdown__label {
		font-size: 0.75rem;
		font-weight: 600;
	}

	.dropdown__select {
		color: hsl(var(--subtext0));
		border: 2px solid hsl(var(--surface0));
		background-color: transparent;

		border-radius: 0.5rem;
		padding: 0.5rem;
		font-size: 0.75rem;
	}
}

.checkbox-container {
	display: flex;
	flex-direction: row;

	color: hsl(var(--subtext0));
	border: 2px solid hsl(var(--surface0));
	background-color: transparent;

	border-radius: 0.5rem;
	font-size: 0.75rem;
	justify-content: space-apart;
	overflow: hidden;

	.checkbox-label {
		padding: 0.5rem 0.25rem 0.5rem 0.5rem;
		flex: 1;
	}

	.checkbox {
		position: relative;
		height: calc(100% - 0.4rem);
		aspect-ratio: 1;
		appearance: none;

		background-color: hsl(var(--surface0));
		border-radius: 0.25rem;
		margin: 0.2rem;
		cursor: pointer;
		outline-offset: 2px;

		&::after {
			content: "✓";
			position: absolute;
			top: 50%;
			left: 50%;
			color: hsl(var(--crust));
			opacity: 0;
			font-size: 1.25rem;
			font-weight: 700;
			transform: translate(-50%, -50%) scale(0.8);
		}

		&:hover,
		&:focus-visible {
			background-color: hsl(var(--surface1));
			border-color: hsl(var(--surface1));
		}
		&:active {
			background-color: hsl(var(--surface2));
			border-color: hsl(var(--surface2));
		}
		&:checked {
			background-color: hsl(var(--blue));
			border-color: hsl(var(--blue));
			&::after {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
			&:hover,
			&:focus-visible {
				background-color: hsla(var(--blue) / 0.8);
				border-color: hsl(var(--blue));
			}
			&:active {
				background-color: hsla(var(--blue) / 0.6);
				border-color: hsl(var(--blue));
			}
		}
	}
}

.input-container {
	/* display: flex; */
	/* flex-direction: row; */

	color: hsl(var(--subtext0));
	/* border: 2px solid hsl(var(--surface0)); */
	background-color: transparent;

	border-radius: 0.5rem;
	font-size: 0.75rem;
	justify-content: space-apart;
	overflow: hidden;

	* {
		outline: none;
	}

	&:hover,
	&:focus-visible,
	&:has(:focus-visible) {
		background-color: hsla(var(--blue) / 0.05);
		border-color: hsl(var(--surface1));
		color: hsl(var(--text));
	}

	&:focus-visible,
	&:has(:focus-visible) {
		outline-color: hsl(var(--blue));
	}
}

html.boxy * {
	border-radius: 0 !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}