/*
 * Layer order for the whole theme. Later layers win regardless of specificity,
 * so blocks never need !important to adjust a component.
 */
@layer reset, base, components, blocks;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
	}

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

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

	button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		padding: 0;
	}
}

@layer base {
	html {
		-webkit-text-size-adjust: 100%;
		scroll-padding-top: calc(var(--header-height) + var(--topbar-height) + var(--space-6));
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}

	body {
		min-height: 100dvh;
		overflow-x: clip;
		display: flex;
		flex-direction: column;
		font-family: var(--font-body);
		font-size: var(--type-body-size);
		line-height: var(--type-body-line);
		font-variant-numeric: lining-nums;
		-webkit-font-smoothing: antialiased;
	}

	/* Every themed scope paints its own surface (header, footer, each block). */
	body,
	[data-theme] {
		background-color: var(--background);
		color: var(--foreground);
	}

	h1,
	h2,
	h3,
	h4 {
		font-weight: inherit;
		font-size: inherit;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}

	a {
		color: inherit;
	}

	:focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: 3px;
	}

	::selection {
		background: var(--primary);
		color: var(--primary-foreground);
	}

	.site-main {
		flex: 1;
	}

	.skip-link {
		position: fixed;
		top: 1rem;
		left: 1rem;
		z-index: 100;
		padding: 0.75rem 1.25rem;
		background: var(--background);
		color: var(--foreground);
		translate: 0 -200%;
	}

	.skip-link:focus {
		translate: 0 0;
	}

	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}