/* Basic Style Reset */
@layer reset {
	/* Box sizing */
	*,
	*::before,
	*::after {
		box-sizing: border-box; /* predictable sizing */
	}

	/* Remove default margins */
	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	body {
		line-height: 1.5; /* improves readability & accessibility */
	}

	/* No list decoration for role-based lists only */
	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	/* Responsive images and videos */
	img,
	picture,
	video {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Inherit fonts for form elements */
	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* Smooth scroll when focused */
	html:focus-within {
		scroll-behavior: smooth;
	}

	/* 
    Why include this: Honor user preference for reduced motion — a best practice 
    for accessibility in modern UIs. This isn’t a replacement for full reset, 
    but a recommended snippet to add to your base. (DEV Community)
    */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.001ms !important;
			transition-duration: 0.001ms !important;
			scroll-behavior: auto !important;
		}
	}

	dt {
		text-wrap: balance;
	}
	dd {
		text-wrap: pretty;
	}

	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}
	sub {
		bottom: -0.25em;
	}
	sup {
		top: -0.5em;
	}
	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}
}