/* ==========================================================================
base.css: cascade order, reset, and default element styling.

The @layer declaration sets the priority order for layers in all other files. This file should be the first <link> after theme.css. Im bad at actually using layers consistently so oops if things bled into other files.
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Jersey+10&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Jersey+10&display=swap");

@layer reset, base, panels, components, utilities, transitions;

/* Just reset to some basic element styles */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4 {
		overflow-wrap: break-word;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}
}

@layer base {
	html {
		/* Accommodate header for sticky targets */
		scroll-padding-top: calc(var(--header-h) + var(--space-4));
		background: var(--color-bg);
	}

	body {
		color: var(--color-text);
		font-family: var(--font-display);
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		min-height: 100dvh;
		-webkit-font-smoothing: antialiased;

		background: var(--bg-pattern) repeat;
		background-size: var(--bg-pattern-size);
	}

	main {
		overflow-x: clip;
	}

	@media (max-width: 768px) {
		main {
			overflow-x: auto;
		}
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-display);
		line-height: var(--leading-tight);
		text-wrap: balance; /* avoids orphans */
		font-weight: 650;
		letter-spacing: 0.02em;
	}

	h1 {
		font-size: var(--text-3xl);
	}
	h2 {
		font-size: var(--text-2xl);
	}
	h3 {
		font-size: var(--text-xl);
	}
	h4 {
		font-size: var(--text-lg);
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: var(--color-accent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		transition: color var(--duration) var(--ease);

		&:hover {
			color: var(--color-text);
		}
	}

	/* Visible focus for keyboard users */
	:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 3px;
		border-radius: 3px;
	}

	::selection {
		background: var(--color-accent);
		color: var(--color-accent-ink);
	}

	/* Honour OS "reduce motion" setting */
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto !important;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}

@layer utilities {
	/* Centred page gutter, mostly for text stuff */
	.wrap {
		width: 100%;
		max-width: var(--content-max);
		margin-inline: auto;
		padding-inline: var(--space-5);
	}

	/* Keep body copy a readable width, though we may wanna tweak this */
	.measure {
		max-width: var(--measure);
	}

	.center {
		text-align: center;
		margin-inline: auto;
	}

	.m-auto {
		margin: auto;
	}

	.inline-flex {
		display: inline-flex;
	}

	.text-center {
		text-align: center;
	}

	.muted {
		color: var(--color-text-muted);
	}

	.subtitle {
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-accent);
	}

	/* Visually hidden but still read by screen readers (i.e. a label) */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	[hidden] {
		display: none !important;
	}
}