@layer reset, defaults, utilities, design;
/*
	# SCREEN-CORE.CSS

		- This file is _always_ loaded, it's referenced in the <head> of all pages.
		- It should therefor contain styles that are _very likely_ to be used on the majority of pages, and should avoid styles for things that are unlikely to appear on many pages. _Those_ styles belong in their own stylesheet, and should be loaded on a page only when needed.
		- This is meant to strike something of a balance between practicality and the theoretical goodness of "critical CSS" - which is almost never worth the effort or build steps required.

	# CSS Cascade Layers

		NOTES:
		Layers should be declared before all other CSS.

		REFERENCES:
		- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers
		- https://css-tricks.com/css-cascade-layers/

		Reset:
			Undo inconsistent default browsers styles, so there are no differences between them.

		Defaults:
			Styles for "default" elements and "core level" markup. E.g., Fonts, Headings, how a <p> or <em> etc look by default, or how a basic form looks - without any component or page specific design over-rides.

		Design:
			The actual design of the site. How components look, how things are laid out, page specific styling, etc.

		Utilities:
			For the rare case where it makes sense, utility classes should override everything else. e.g., heading styles should _not_ be mapped to HTML heading level, but it's handy to map to a utility class.
*/

@layer reset {
	/* Use a sensible CSS box model */
		*, *::before, *::after {
			box-sizing : border-box;
			margin: 0; padding: 0;
		}

	/* Ensure consistent default margins, paddings, borders.
	   Make everything inherit font styles.
	   Background-repeat should by default not repeat.
	   Use more modern text wrap to help ensure no typographic widows */
		* {
			border-width: 0;
			font: inherit;
			background-repeat: no-repeat;
			text-wrap: pretty;
		}

		html {
			-webkit-text-size-adjust: none;      /* Safari is special */
			text-size-adjust: none;              /* Text size only controlled by font-size */
			-webkit-font-smoothing: antialiased; /* This is a good default in a modern Retina world */
			scroll-behavior: smooth;             /* Default to smooth scrolling (disabled conditionally later, for a11y) */
			hanging-punctuation: first allow-end last;
		}

	/* Any CSS that would remove the bullet or number indicators of a list’s items will also remove the semantics.
	   REFERENCE: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

	   So here we allow visually removing a bullet only if the markup explicitly adds back the list semantics through having a role='list' property value.

	   TL:DR;
	   To get rid of a bullet, add `role="list"` to the UL or OL element.

	   MORE MODERN
	   You can just set list-style-type="" and get the same result.
	*/
		:where(ul, ol)[role='list'] {
			list-style: none;
		}
		:where(ul, ol):not([role='list']) { /* Ensure any lists without an explicit role attribute display their default bullet styling */
			margin-inline-start: 2em;
		}

	/* form resets */
		:where(button, input, select, textarea) {
			color: inherit;
			font-family: inherit;
			font-style: inherit;
			font-weight: inherit;
		}
		:where(button) {
			all: unset;
			appearance: none;                         /* Don't use the OS's theming */
			display: inline-block;
			cursor: pointer;
			touch-action: manipulation;               /* faster taps as long as we're not zooming etc */
			-webkit-tap-highlight-color: transparent; /* No, Safari */
		}
		:where([disabled]),
		:where([disabled]) * { /* if anything is marked as disabled, the cursor should reflect that status */
			cursor: not-allowed;
			filter: grayscale(1);
		}

	/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
		@media (prefers-reduced-motion) {
			html:focus-within {
				scroll-behavior: auto;
			}

			*,
			*::before,
			*::after {
				animation-duration:        0.01ms !important;
				animation-iteration-count: 1      !important;
				transition-duration:       0.01ms !important;
				scroll-behavior:           auto   !important;
			}
		}

	/* Because :is() and :where() are forgiving selectors, we can add multiple rules that might be unrecognised by the browser - and if a selector matches the rules are applied to that selector match.

		Without using :is(), when a browser doesn't recognise a single selector in a selector list the browser will discards the whole ruleset.

		:where has no specificity, :is takes the specificity of the most specific selector within the group.
		:is vs :where examples - https://developer.mozilla.org/en-US/docs/Web/CSS/:where#examples
	*/
		:where(
			::-webkit-selection,
			::-moz-selection,
			::selection
		) {
			background-color: var(--colour-brand);
			color: #fff;
		}

		:where(
			::-webkit-input-placeholder,
			input:-moz-placeholder,
			::placeholder
		) {
			font-size: 1em;
		}

		/* kill default HTML5 styling on webkit */
		input[type=search],
		input[type=submit] {
			-webkit-appearance : none; appearance : none;
		}
		input[type="search"]:where(
			::-webkit-search-decoration,
			::-webkit-search-cancel-button
		),
		::-webkit-details-marker {
			display: none;
		}

		/* Sensible defaults for dialog and popover, as I agree with Mayank - the built-in styles are terrible...
		   https://mayank.co/notes/dialog-default-styles/
		*/
		:where(dialog, [popover]) {
			border: none;
			background: none;
			color: inherit;
			inset: unset;
			max-width: unset;
			max-height: unset;
		}
		:where(
			dialog:not([open], [popover]),
			[popover]:not(:popover-open)
		) {
			display: none !important;
		}
		/* Stop the page being scrollable when a modal dialog is open */
		html:has(dialog:modal[open]) {
			overflow: clip;
		}
		/* Stabilise the window to prevent layout shift if the scroll-bar may appear and disappear on interactions */
		:where(html) {
			scrollbar-gutter: stable;
		}
}

@layer defaults {
	:root {
		/* Allow interpolation to and from keywords
		REFERENCE: https://developer.chrome.com/docs/css-ui/animate-to-height-auto/
	 */
		interpolate-size: allow-keywords;
	}
	* {
		/* And also allow transitioning "discrete" properties like `display` */
		transition-behavior: allow-discrete;
	}
	:where(input, textarea) {
		/* Hanging punctuation may be placed outside the line box, except on input and textarea elements */
		hanging-punctuation: none;
	}

	/* Stop transitions from running until AFTER page load.
		(I got sick of watching .uc_button links animate into buttons from just text)
	*/
		html:not([data-dom-ready-state="complete"]) {
			* {
				transition: none !important;
			}
		}

	/* # Focus management */
		*:focus { /* fallback for older browsers that don't support 'focus-visible' */
			outline: max(2px, 0.2em) solid black;
			outline-offset: 0.25em; z-index: 1000;
			scroll-padding-block-end: 10vh; /* ensure it's in the viewport */
		}

		@supports selector(:focus-visible) {
			*:focus { /* Do nothing with 'focus', as that activates on click as well as keyboard */
				outline: none;
				text-decoration: none;
			}

			*:focus-visible { /* Let the browser decide when things "should" have focus - e.g., keyboard, not click */
				outline: max(2px, 0.2em) solid black;
				outline-offset: 0.25em; z-index: 1000;
			}
		}

		:target { /* ensure it's clearly in the viewport */
			scroll-margin-block: 2rem 10vh;
		}

	/* Base Elements */
		html {
			background-color: var(--c-white, #fff);
			color           : var(--c-black, #000);
			accent-color    : var(--c-brand); /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
		}

		body {
			font-size: var(--font-size-base, 100%);
			line-height: 1.375;
			font-family: var(--font-family-primary);
			hyphens: none;
		}

		sup       { vertical-align: top; font-size: .75em; }
		sub       { vertical-align: bottom; font-size: .75em; }
		strong    { font-weight: bold; }
		em        { font-style: italic; }
		code      { font: .85em/1 Courier, monospace; }

		a:link    {
			-webkit-tap-highlight-color: var(--c-ui-good, #0f0);
			text-decoration: underline;
			text-decoration-thickness: 0.1em;
			text-underline-offset: 0.2em;
			text-decoration-color: transparent;
			transition: text-decoration-color var(--fast);
		}
		a:link,
		a:visited { color: inherit; }
		a:hover   {
			text-decoration-color: var(--colour-brand);
		}
		:where(a:focus, a:active)  { outline-color: transparent; } /* Not "0 outline" as that wouldn't be accessible for high contrast etc */

	/* # HTML "Components" - some basic HTML stuff is now more mark-up pattern than individual elements */
		/* ## Details */
			details > summary {
				list-style-type: none;
				padding: 0.5em var(--gap) 0.25em 0; border: 1px solid transparent; border-bottom-color: currentColor;
				background: transparent url(/dist/images/plus.svg) calc(100% + 0.1em) 0.5em / 1.2em auto no-repeat;
				cursor: pointer;
				font-weight: bold;
				font-size: var(--font-size-diminished);
			}
			details > summary:focus {
				text-decoration: none;
			}
			details[open] {
				> summary {
					background: transparent url(/dist/images/minus.svg) 100% 0.5em / 1em auto no-repeat;
				}
			}
			.content {
				padding: 0.5em 0 1em 1em;
			}
			::details-content {
				transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
				height: 0;
				overflow: clip;
			}
			[open]::details-content {
				height: auto;
			}

		/* ## popover */
			:where([popover]) {
				/* Don't be divorced from the page scroll (which is default) */
				position: absolute; inset: 0;

				opacity: 0;
				transition:
					display var(--fast),
					overlay var(--fast),
					opacity var(--fast);
				transition-behavior: allow-discrete; /* MUST come after the transition or it'll get over-ridden */

				&:popover-open {
					opacity: 1;
					display: grid;

					&:not(dialog) {
						overlay: auto !important;
					}
				}

				/* We need to set the "starting values" on transitioned properties, so they animate properly in AND out */
				@starting-style {
					/* e.g., "when animating the opening of a popover, opacity starts at 0 for the transition" */
					&:popover-open {
						opacity: 0;
					}
				}
			}
			/* Example anchor-positioning */
			:where([popovertarget="popover-content"]) { /* define an element to be an anchor */
				anchor-name: --thisAnchorName;

				/* purely so I can see the bounds while working */
				outline: 1px solid pink;
			}
			:where(#popover-content) { /* the content we're positioning relative to the named anchor element */
				position-anchor: --thisAnchorName;
				position-area: start span-all;
				top: calc( anchor(top) + 0.5em ); /* The TOP of this positioned element should be where the BOTTOM of the anchor is (nudged down by half an em) */
				left: anchor(center); /* The LEFT of this element should be at the CENTER of the anchor */

				padding: 0.5em 1em; border-radius: 0.3em;
				background: pink;
			}

		/* ## Tables */
			figure:has( > table ) {
				overflow-x: auto;

				table {
					width: 100%;
				}
			}
			table {
				border-collapse: collapse; /* Make it behave like every other HTML element */
			}
			caption, th, td {
				padding: 0.5rem;
				text-align: left;
			}
			tr:nth-of-type(2n) td {
				background-color: oklch(from var(--colour-black) l c h / 0.1);
			}
			caption {
				text-transform: uppercase; font-size: 0.875em; letter-spacing: var(--ls-expanded); font-weight: bold;
			}
			thead {
				border-block-end: 1px solid currentColor;
			}
			tbody th {
				border-inline-end: 1px solid currentColor;
			}
			tfoot {
				border-block-start: 1px solid currentColor;
			}

	/* # Image management */
		img                           { max-width: 100%; }
		a img                         { margin: 0; }
		img[data-object-fit="contain"] { object-fit: contain; }
		img[data-object-fit="cover"]   { object-fit: cover; }

		picture {
			display: flex;
		}
		picture > img {
			width: 100%; height: 100%;
		}

		/* Only render images when in the viewport, we can assume any image inside <header> is already in the viewport
			REFERENCE: https://www.industrialempathy.com/posts/image-optimizations/
		*/
			main img,
			footer img {
				content-visibility: auto;
			}

	/* Fix a weird bug with Google Maps, where if you drag the map once, it stops responding to all future clicks... */
		[aria-label="Map"] {
			z-index: 0; pointer-events:none;
		}
}

@layer design {
	/*
		This is where you would add the CSS for your design.

		There is nothing here, so that the file can be duplicated easily as a starting point for other projects.

		The styles for the demo site are stored in `screen-demo.css` and are slotted into the design layer.
		Just removing that file brings things back to a "standard" blank starting position ready for any project.
	*/

	/* No, actually, FS Lightbox, we do not want that. It causes a jump. */
	body[style="margin-right: 15px;"] {
		margin-right: 0 !important;
	}
}

@layer utilities {
	/* Utility classes start with a uc_ prefix, so they're obvious in markup */

	/* Utilities for hiding content */
		:where(.uc_hide-visually):not(:focus):not(:active) { /* screen readers still get the content */
			/* Source:
				 https://www.tpgi.com/the-anatomy-of-visually-hidden/
				 https://www.a11yproject.com/posts/how-to-hide-content/ */
			position: absolute;
			height: 1px; width: 1px; clip-path: inset(50%);
			overflow: clip; white-space: nowrap;
		}
		:where(.uc_hide-for-everyone) { /* screen readers also get the content hidden */
			display: none !important;
		}

	/* Utility for text alignment on number based content, where alignment in columns matters */
		:where(
				.uc_currency,
				.uc_numeric
			) {
			font-variant-numeric: tabular-nums;
			text-align: end;
		}
}