/* 
    Version: 2.0.4
	Last Updated: 2025-04-24
*/

/* Set box-sizing model and remove default margin */
:where(*, *::before, *::after) {
	box-sizing: border-box; /*  Use a more-intuitive box-sizing model. */

	@media (prefers-reduced-motion: reduce) {
		animation-duration: 0.01ms !important; /* Remove all animations, transitions for people that prefer not to see them */
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- */

html {
	block-size: 100%; /* Allow percentage-based heights in the application.  */
	tab-size: 2;
	scrollbar-gutter: stable;  /* Prevent the page from “jumping” when switching from a long to a short page. */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none; /* Prevent adjustments of font size after orientation changes in iOS. - https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
	-webkit-tap-highlight-color: transparent; /* Disable tap highlights on iOS */

	/* Respect user motion preference */
	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords; /* Enables transitions between fixed and intrinsic sizes like auto or max-content */
		scroll-behavior: smooth; /* Enable Smooth scroll all users */
	}
}

/* General font settings wh accessible line-height and better text rendering */
body {
	font-size-adjust: from-font; /* Make the all fonts (height of lowercase letters) consistent */
	line-height: 1.5; /* Add accessible line-height */
	min-block-size: 100dvb; /* 100% height regardless of address bar on mobile or top bar. */
	-webkit-font-smoothing: antialiased; /* Improve text rendering */
	-moz-osx-font-smoothing: grayscale;
	text-autospace: normal; /* CSS text-autospace: normal automatically adds space between Japanese and Roman text, improving readability. */
	text-rendering: optimizespeed;
}

:where(body, h1, h2, h3, h4, h5, h6 p, figure, blockquote, dl, dd) {
	margin-block: unset; /* Remove default margin in favour of better control in authored CSS */
}

/* Set shorter line heights on headings and interactive elements */
:where(h1, h2, h3, h4, h5, h6, button, input, label) {
	line-height: round(nearest, 1.1em, 8px); /* 8px Round it to nearest 8th number (baseline grid) */
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance; /* Balance text wrapping on headings */
}

:where(h1, h2, h3, h4, h5, h6, p) {
	overflow-wrap: anywhere; /* Avoid text overflows */
}

:where(p, li, figcaption, dd) {
	hyphens: auto;
	text-wrap: pretty; /* Prevent orphans (a single word on its own line) at the end of a text block */
}

/* Relatively sized thickness and offset */
:where(a, u, ins, abbr, s, del) {
	text-decoration-thickness: max(0.08em, 1px);
}

/* Baseline for default links */
:where(a, u, ins, abbr):not([class]) {
	text-underline-offset: 0.15em;
}

/* Improve abbreviations with titles */
:where(abbr[title]) {
	cursor: help;

	/* LEGACY Until Safari Support un-prefixed text-decoration shorthand */
	text-decoration-line: underline;
	text-decoration-style: dotted;
}

:is(ul, ol, menu)[class] {
	/* 	1. Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
		- https://piccalil.li/blog/removing-list-styles-without-affecting-semantics/ */
	list-style-type: '';
	padding-inline-start: 0;
}

/*  Improve media defaults. */
:where(img, picture, svg, canvas, video) {
	block-size: auto;
	display: block flow;
	max-inline-size: 100%;
}

/* Form controls should inherit parent font */
:where(button, input, textarea, select, datalist) {
	color: inherit;
	/* Avoid this auto-zoom behavior, the inputs need to have a font-size of at least 1rem / 16px. 
	   Here's one way to address the issue  - https://www.joshwcomeau.com/css/custom-css-reset */
	font: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

/* 1. Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-block-size: 3.5rlh;
	resize: block
}

:where(td, math, time[datetime*=':']) {
	font-variant-numeric: tabular-nums lining-nums; /* 	Improve readability of all the numbers take up the same space and align on the baseline  - https://textlab.dev/posts/font-variant-numeric */
}

/* Scroll margin allowance above anchor links */
:target {
	scroll-padding-block-start: var(--scroll-block-start, 2rem);
}

/* :focus-visible - Only apply to modern browsers March 2023 and newer */
:focus-visible {
	--outline-size: max(2px, 0.15em); /* Relatively sized thickness and offset */

	border-radius: var(--outline-radius, 0.25rem);
	outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
	outline-offset: var(--outline-offset, var(--outline-size));
}

:focus {
	scroll-padding-block: 8vh; /* Scroll margin allowance below focused elements to ensure they are clearly in view */
}

[hidden]:not([hidden="until-found"]) {
	display: none !important; /* Increase specificity of [hidden] */
}