/* Version 0.15 */
/* Change log: 0.15
	- Introduced layers (not yet sure if this helps or only complicates things)
	- New scroll behaviour and scroll padding
*/
/* To do:
	- test a-grid
	- fix conflicts between disabled styles and browser defaults
*/

/*
 * Suggested layer management (see https://www.youtube.com/watch?v=zEPXyqj7pEA):
@layer standard, main, thirdparty, components, [unlayered]
 * Overrides for thirdparty rules that use !important can be appended to the main layer
 * e.g. @layer main { .third-party-component { border-width: 1px !important; } }
 */

@layer standard {

		/* VARIABLES */
:root {
	--a-width: 1px;
	--border-color: rgba(0,0,0,0.3);
	--border-style: solid;
	--border-width: var(--a-width);
	--transition: 0; }

		/* ACCESSIBILITY HELP */
@media (prefers-reduced-motion: no-preference) {
	:root {
		--transition: 0.1s; }
}

		/**
		* Highlight any images without an alt tag
		*/
img:not([alt]) {
	outline: 5px solid red !important;
	outline-offset: -2px; }

	/**
	 * screen-reader-only utility class for hiding an element visually but keeping it available.
	 * Taken from https://a11yproject.com/posts/how-to-hide-content/
	 * Example use-cases: the label for a search field; the skip-to-main-content link; a hidden h1.
	 * See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html for more use-cases.
	 */
.a-screen-reader-only {
	position: absolute !important;
	&:not(:focus, :active) { /* do we need to add :focus-within? */
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		white-space: nowrap; /* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
		width: 1px; } }

a {
		/* Make links more identifable */
	text-underline-offset: 0.225em;

	&:focus,
	&:hover {
		text-decoration-thickness: 0.167em; }

			/* Highlight non-secure links */
	&[href^="http://"]::after {
		content: " (non-secure link)"; }

			/* Initially I just used an icon, but this is more accessibile */
			/* (Conflicts with non-secure links, see above) */
	&[target="_blank"]::after {
		content: " (opens in a new tab)"; }
}

		/* Some more comfortable reading defaults */
body {
		/* macOS font-smoothing https://dbushell.com/2024/11/05/webkit-font-smoothing/ */
		/* This affects Safari and Firefox differently so I'm not using it */
	/* -webkit-font-smoothing: antialiased;  */
	background-color: floralwhite;
	color: #057;
		/* Sans-serif fonts are (probably) better for accessibility (https://adrianroselli.com/2018/08/variable-fonts-and-dyslexia.html, https://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf) */
	font-family: Verdana, Helvetica, sans-serif;
		/* Say no to faux-bold and faux-italic (https://alistapart.com/article/say-no-to-faux-bold/) */
	font-synthesis: none;
		/* Not sure what the minimum is for letter-spacing */
	letter-spacing: 0.02ch;
		/* line-height 1.5 is the minimum specified by WCAG 2.1.  1.618 is the golden ratio
		 * Should this use the body tag or include lists as well? */
	line-height: 1.618;
	word-spacing: 0.15ch; }

p {
		/* WCAG 2.1 required spacing after paragraphs at least twice the font-size. */
	margin-block-end: 1.7em; }

		/* PREFERENCES */
button,
input,
pre,
select,
textarea {
	font-family: inherit; /* optgroup/option doesn't inherit in Firefox */
	font-size: inherit; /* code, kbd, samp do not inherit */
	letter-spacing: inherit;
	line-height: inherit; }

h1 {
		/**
		 * override browser defaults :-webkit-any(article,aside,nav,section) h1
		 * and :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1
		 * and :-moz-any, etc...
		 * Update 16.4.2025 - see, I was right: https://developer.mozilla.org/en-US/blog/h1-element-styles/
		 */
	font-size: 2.62em; }

h2 {
		/* Golden ratio again */
	font-size: 1.62em; }

button:not([disabled]),
input[type="color"]:not([disabled]) {
	cursor: pointer; }

input[type="range"]:not([disabled]) {
	cursor: grab; }

input[type="range"]:active {
	cursor: grabbing; }

[disabled] {
		/* This doesn't work well with browser defaults like color:-internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3)); on buttons*/
	opacity: 0.65; }

button,
fieldset,
hr,
iframe,
input,
select,
textarea {
	border-color: var(--border-color);
	border-style: var(--border-style);
	border-width: var(--border-width); }

hr {
	border-bottom-style: none;
	border-left-style: none;
	border-right-style: none; }

@media not print {
	.a-print-only {
		display: none; }
}

		/**
		 * hide-on-mobile utility class.  Use it wisely.
		 * This break-point matches the one used by PrimeFaces Grid CSS
		 */
@media screen and (max-width: 40.062em) {
	.a-hide-on-mobile {
		display: none !important; }
}

		/* a-grid utility class thanks to Heydon Pickering */
.a-grid {
	display: flex;
	flex-wrap: wrap;
	margin: -0.5em; }
.a-grid > * {
	flex: 1 0 5em;
	margin: 0.5em; }

		/* a-framed-panel utility class.  Creates a white background and frame around a section */
.a-framed-panel {
	background-color: white;
	border: var(--border-width) solid var(--border-color);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05); }

		/* a-align-end utility class.  For aligning context options to the far side of a container */
.a-align-end {
	text-align: end; /* https://www.w3.org/TR/css-logical-1/#text-align */ }

		/*** MEDIA QUERIES ***/
@media (min-resolution: 2x) {
		/* Thinner borders for high-resolution displays */
	:root {
		--border-width: calc(var(--a-width) / 2); }
}

		/*** Ideas ***/

		/* Position centre */
.parent-centre {
	display: grid;
	margin-bottom: 2vh; /* Visual centre is higher than actual centre */
	place-items: center; }

		/* taken from https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ */
html {
	scroll-behavior: smooth;
	scroll-padding-block-start: 5vh; }

} /* END @layer standard */