/* Morph — Pico CSS extension */

/* ── Transitions & Micro-interactions ── */

button,
[role="button"] {
	transition: all 0.15s ease-out;
}

a {
	transition: color 0.15s ease;
}

input,
select,
textarea {
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

/* Button hover lift */
button:hover,
[role="button"]:hover {
	transform: translateY(-1px);
}

/* Button press */
button:active,
[role="button"]:active {
	transform: translateY(0) scale(0.98);
}

/* ── Focus states ── */

:focus-visible {
	outline: 2px solid var(--pico-primary-focus, var(--pico-primary));
	outline-offset: 2px;
}

/* ── Typography ── */

h1,
h2,
h3 {
	letter-spacing: -0.02em;
}

/* ── Hero ── */

.hero {
	text-align: center;
	padding: 3rem 0 2rem;
}

.hero h1 {
	font-size: 2.5rem;
	max-width: 720px;
	margin: 0 auto 1rem;
}

.hero p {
	font-size: 1.15rem;
	color: var(--pico-muted-color);
	max-width: 600px;
	margin: 0 auto 2rem;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Card grids ── */

section > .grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

section > .grid > article {
	margin-bottom: 0;
}

section > .grid > article > nav {
	margin-top: 1rem;
}

/* ── Site logo ── */

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.site-logo img {
	height: 32px;
	width: auto;
}

/* ── Tables ── */

.overflow-auto {
	overflow-x: auto;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

table th,
table td {
	border: none;
}

table thead {
	border-bottom: 2px solid var(--pico-muted-border-color);
}

table tbody tr {
	border-bottom: 1px solid
		color-mix(in srgb, var(--pico-muted-border-color), transparent 50%);
}

table tbody tr:last-child {
	border-bottom: none;
}

/* ── Code blocks ── */

pre code {
	font-size: 0.875rem;
}

/* ── Morph syntax highlight palette ── */

:root {
	--morph-hl-keyword: #cf222e;
	--morph-hl-string: #0a3069;
	--morph-hl-comment: #6e7781;
	--morph-hl-type: #8250df;
	--morph-hl-primitive: #953800;
	--morph-hl-number: #0550ae;
	--morph-hl-boolean: #0550ae;
	--morph-hl-tag: #116329;
	--morph-hl-label: #8250df;
	--morph-hl-punctuation: #6e7781;
	--morph-hl-operator: #cf222e;
}

@media (prefers-color-scheme: dark) {
	:root {
		--morph-hl-keyword: #ff7b72;
		--morph-hl-string: #a5d6ff;
		--morph-hl-comment: #8b949e;
		--morph-hl-type: #d2a8ff;
		--morph-hl-primitive: #ffa657;
		--morph-hl-number: #79c0ff;
		--morph-hl-boolean: #79c0ff;
		--morph-hl-tag: #7ee787;
		--morph-hl-label: #d2a8ff;
		--morph-hl-punctuation: #8b949e;
		--morph-hl-operator: #ff7b72;
	}
}

.hl-keyword {
	color: var(--morph-hl-keyword);
	font-weight: 600;
}
.hl-keyword-clause {
	color: var(--morph-hl-keyword);
}
.hl-keyword-control {
	color: var(--morph-hl-keyword);
}
.hl-keyword-relationship {
	color: var(--morph-hl-keyword);
}
.hl-keyword-extension {
	color: var(--morph-hl-keyword);
}
.hl-string {
	color: var(--morph-hl-string);
}
.hl-comment {
	color: var(--morph-hl-comment);
	font-style: italic;
}
.hl-type-primitive {
	color: var(--morph-hl-primitive);
}
.hl-type-extension {
	color: var(--morph-hl-primitive);
}
.hl-type-reference {
	color: var(--morph-hl-type);
}
.hl-number {
	color: var(--morph-hl-number);
}
.hl-boolean {
	color: var(--morph-hl-boolean);
}
.hl-tag {
	color: var(--morph-hl-tag);
}
.hl-label {
	color: var(--morph-hl-label);
}
.hl-punctuation {
	color: var(--morph-hl-punctuation);
}
.hl-operator {
	color: var(--morph-hl-operator);
}

/* ── Footer ── */

footer {
	margin-top: 4rem;
	padding: 2rem 0;
	text-align: center;
	border-top: 1px solid var(--pico-muted-border-color);
}

/* ── Nav active state ── */

header nav a[aria-current="page"] {
	font-weight: 700;
	border-bottom: 2px solid var(--pico-primary);
}