/* Document
======================================== */

/*
Use border box sizing by default, globally.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
1. Use a sans serif font by default.
2. The default `normal` line-height is tightly spaced, but takes font-metrics into account, which is important for many fonts. Looser spacing may improve readability in latin type, but may cause problems in some scripts -- from cursive/fantasy fonts to Javanese, Persian, and CJK languages.
3. Breaks words to prevent text overflow.
4. Use a 4-space tab width instead of the default 8.
5. Prevent WebKit-based browsers on iOS (all iOS browsers) from automatically increasing the default text size in landscape orientation. Reference:
- https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
- https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/
6. Prevent unwanted layout shifts caused by scrollbars when text get longer.
*/
html {
	font-family: sans-serif; /* 1 */
	line-height: 1.5; /* 2 */
	overflow-wrap: break-word; /* 3 */
	tab-size: 4; /* 4 */
	-webkit-text-size-adjust: none; /* 5 */
	scrollbar-gutter: stable; /* 6 */
}

/*
Smooth scrolling, but only when focused in the page to prevent unnaturally scrolling when tabbing though the results of a search.
*/
html:focus-within {
	scroll-behavior: smooth;
}

/*
When users prefer reduced motion:
1. Remove animations/immediately jump any animation to the end point.
2. Remove fixed background attachment.
3. Remove timed scrolling behaviors.
4. Remove transitions.
*/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-delay: -1ms !important; /* 1 */
		animation-duration: 1ms !important; /* 1 */
		animation-iteration-count: 1 !important; /* 1 */
		background-attachment: initial !important; /* 2 */
		scroll-behavior: auto !important; /* 3 */
		transition-delay: 0s !important; /* 4 */
		transition-duration: 0s !important; /* 4 */
	}
	html:focus-within {
		scroll-behavior: auto; /* 3 */
	}
}

/*
Add scroll margin to all elements which can be targeted.
*/
[id] {
	scroll-margin-block-start: 2ex;
}

/* Sections
======================================== */

/*
1. Remove the tiny space around the edge of the page.
*/
body {
	margin: 0; /* 1 */
}

/*
Allow percentage-based heights.
*/
html {
	block-size: 100%;
}
body {
	min-block-size: 100%;
}

/*
Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Edge, Firefox, and Safari.
*/
h1 {
	font-size: 2em;
	margin-block: 0.67em;
}

/*
The default `normal` line-height is tightly spaced, but takes font-metrics into account, which is important for many fonts. Looser spacing may improve readability in latin type, but may cause problems in some scripts -- from cursive/fantasy fonts to Javanese, Persian, and CJK languages.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25;
}

/*
Switch to rem units for headings.
*/
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.17rem;
}
h4 {
	font-size: 1rem;
}
h5 {
	font-size: 0.83rem;
}
h6 {
	font-size: 0.67rem;
}

/* Grouping content
======================================== */

/*
1. Correct the inheritance and scaling of font size in all browsers.
2. Correct the odd `em` font sizing in all browsers.
3. Prevent overflow of the container.
*/
pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
	white-space: pre-wrap; /* 3 */
}

/*
1. Correct the inheritance of border color in Firefox (it removes `color: gray`). Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=190655.
2. Consistent appearance (solid, thin border).
*/
hr {
	color: inherit; /* 1 */
	border-style: solid; /* 2 */
	border-width: 1px 0 0; /* 2 */
}

/* Remove the margins on all nested lists in Chrome, Edge, and Safari (Firefox already does it). */
:is(ol, ul) :is(dl, menu),
:is(dl, menu) :is(ol, ul, dl, menu) {
	margin-block: 0;
}

/*
The default `normal` line-height is tightly spaced, but takes font-metrics into account, which is important for many fonts. Looser spacing may improve readability in latin type, but may cause problems in some scripts -- from cursive/fantasy fonts to Javanese, Persian, and CJK languages.
*/
figcaption {
	line-height: 1.375;
}

/*
Replace `40px` indents with `2.5em` indents.
*/
blockquote,
figure {
	margin-inline: 2.5em;
}
ul,
ol,
menu {
	padding-inline-start: 2.5em;
}
dd {
	margin-inline-start: 2.5em;
}

/* Text-level semantics
======================================== */

/*
Add the correct text decoration in Safari.
*/
abbr[title] {
	-webkit-text-decoration: underline dotted;
}

/*
Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
	font-weight: bolder;
}

/*
Add the correct font size in all browsers.
*/
small {
	font-size: 80%;
}

/*
1. Correct the inheritance and scaling of font size in all browsers.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/*
Prevent `sub` and `sup` elements from affecting the line height.
*/
sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}
sub {
	inset-block-end: -0.25em;
}
sup {
	inset-block-start: -0.5em;
}

/* Embedded content
======================================== */

/*
1. Block display is usually what we want.
2. The `vertical-align` removes strange space-below in case authors overwrite the `display` value.
3. Responsive by default.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block; /* 1 */
	vertical-align: middle; /* 2 */
	max-inline-size: 100%; /* 3 */
}

/*
The display is inline by default, but that's not the expected behavior. This can interfere with proper layout and aspect-ratio handling.
1. Remove the unnecessary wrapping `picture`, while maintaining contents.
2. Source elements have nothing to display, so we hide them entirely.
*/
picture {
	display: contents; /* 1 */
}
source {
	display: none; /* 2 */
}

/*
Maintain intrinsic aspect ratios when `max-inline-size` is applied (`iframe`, `embed, and `object` are also embedded, but have no intrinsic ratio, so their `block-size` needs to be set explicitly).
*/
img,
svg,
video,
canvas {
	block-size: auto;
}

/*
There is no good reason elements default to 300px, and audio files are unlikely to come with a width attribute.
*/
audio {
	inline-size: 100%;
}

/*
Change the fill color to match the text color.
*/
svg:not([fill]) {
	fill: currentColor;
}

/*
Change the border appearance.
*/
iframe {
	border-style: solid;
	border-color: currentColor;
}

/* Tabular data
======================================== */

/*
1. Remove text indentation from table contents in Chrome, Edge, and Safari.
2. Correct table border color inheritance in Chrome, Edge, and Safari.
3. Collapse border spacing.
*/
table {
	text-indent: 0; /* 1 */
	border-color: currentColor; /* 2 */
	border-collapse: collapse; /* 3 */
}

/*
The default `normal` line-height is tightly spaced, but takes font-metrics into account, which is important for many fonts. Looser spacing may improve readability in latin type, but may cause problems in some scripts -- from cursive/fantasy fonts to Javanese, Persian, and CJK languages.
*/
caption {
	line-height: 1.375;
}

/*
Make `th` alignment consistent with `td` alignment.
*/
th {
	text-align: start;
}

/*
Add paddings and borders to table cells.
*/
th,
td {
	padding-block: 0.25em;
	padding-inline: 0.5em;
	border: 1px solid;
}

/* Forms
======================================== */

/*
1. Remove the margin on controls in all browsers.
2. Add typography inheritance.
*/
button,
input,
select,
textarea {
	margin: 0; /* 1 */
	font: inherit; /* 2 */
	letter-spacing: inherit; /* 2 */
	word-spacing: inherit; /* 2 */
}

/*
Correct the inability to style buttons in iOS and Safari.
*/
button,
[type="button" i],
[type="reset" i],
[type="submit" i] {
	-webkit-appearance: button;
}

/*
Correct the odd appearance in Chrome, Edge, and Safari.
*/
[type="search" i] {
	-webkit-appearance: textfield;
}

/*
Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.54;
}

/*
1. Correct the inability to style upload buttons in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
1. Remove the margin.
2. Change the border appearance.
*/
fieldset {
	margin-inline: 0; /* 1 */
	border-style: solid; /* 2 */
	border-color: currentColor; /* 2 */
}

/*
The default `normal` line-height is tightly spaced, but takes font-metrics into account, which is important for many fonts. Looser spacing may improve readability in latin type, but may cause problems in some scripts -- from cursive/fantasy fonts to Javanese, Persian, and CJK languages.
*/
label,
legend {
	line-height: 1.375;
}

/*
Responsive by default by restricting sizing to the page width.
*/
input,
select,
textarea {
	max-inline-size: 100%;
}

/*
Set `vertical-align` to middle.
*/
[type="color" i],
[type="range" i] {
	vertical-align: middle;
}

/*
Maintain `hidden` behavior when overriding `display` values.
*/
[hidden] {
	display: none;
}

/*
Change the cursor on busy elements.
*/
[aria-busy="true" i] {
	cursor: progress;
}

/*
Change the cursor on disabled, not-editable, or otherwise inoperable elements.
*/
[disabled],
[aria-disabled="true" i] {
	cursor: not-allowed;
}

/*
Change the display on visually hidden accessible elements.
*/
[aria-hidden="false" i][hidden] {
	display: initial;
}
[aria-hidden="false" i][hidden]:not(:focus) {
	/* Visually hidden styles */
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* Interactive elements
======================================== */

/*
1. Add the correct display in Safari.
2. Change the cursor to feel it's interactive.
*/
summary {
	display: list-item; /* 1 */
	cursor: default; /* 2 */
}