@layer reset, design;

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

	/* Remove inconsistent default margins, paddings, borders. Make everything inherit font styles. */
	* {
		margin: 0; padding: 0; border-width: 0;
		font-size: 100%; font: inherit;
		background-repeat: no-repeat;
	}

	html {
		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) */
	}

	/* 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 only allow visually removing a bullet if the markup explicitly adds back the list semantics through having a role='list' property value */
	: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) {
		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]) { /* if anything is marked as disabled, the cursor should reflect that status */
		cursor: not-allowed;
	}

	/* 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;
		}
	}

	/* Don't collapse these into one ruleset. When a browser doesn't recognise a selector it discards the whole ruleset.
	   By using vendor selectors in one ruleset you guarantee nothing will be applied */
		::-webkit-selection { background-color: hsl( var(--highlight, 100 20% 20%) ); }
		::-moz-selection    { background-color: hsl( var(--highlight, 100 20% 20%) ); }
		::selection         { background-color: hsl( var(--highlight, 100 20% 20%) ); }

		::-webkit-input-placeholder { font-size: 1em; }
		input:-moz-placeholder      { font-size: 1em; }
		::placeholder               { font-size: 1em; }

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

@layer design {
	/* # Font Imports */
		@font-face {
			font-family: 'AkkuratStd';
			src: url('AkkuratStd.woff2') format('woff2');
			font-weight: normal; font-style: normal;
			font-display: swap;
		}

	/* # Anchor state styling */
		a:link    { -webkit-tap-highlight-color: hsl( var(--highlight) ); text-decoration: none; }
		a:link,
		a:visited { color: inherit; }
		a:focus,
		a:active  { outline-color: transparent; } /* Not "0 outline" as that wouldn't be accessible for high contrast etc */

	/* # Focus management */
		*:focus { /* fallback for older browsers that don't support 'focus-visible' */
			outline: max(2px, 0.2em) solid currentColor !important;
			outline-offset: 0.25em; z-index: 1000;
		}

		@supports selector(:focus-visible) {
			*:focus { /* Do nothing with 'focus', as that activates on click as well as keyboard */
				outline: none !important;
				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 currentColor !important;
				outline-offset: 0.25em; z-index: 1000;
			}
		}

	/* # CSS Custom Properties */
		:root {
			/* Generic measures */
			--gap:            var(--font-size-base);
			--letter-spacing: -0.055em;

			/* measures intended for "row" layout rather than component layout */
			--row-width-max     : 1280px;
			--row-padding-block : var(--gap);
			--row-padding-inline: var(--gap);

			/* Animation speeds */
			--very-fast: 0.15s;
			--fast     : 0.3s;
			--slow     : 0.6s;
			--very-slow: 1.3s;

			/*
				Text sizes based on the Modular Scale, with fluid base size.
				See https://modern-fluid-typography.vercel.app/ for the fluid base generation.
				This is set so that it's 16px at 320px, to 20px at 1280px.
			*/
			--font-size-root: 14px; /* Required for the font-size base. Goes from 16px at mobile to 20px desktop */
			--font-size-base: clamp(1.143rem, 0.5vw + 1rem, 1.429rem);

			--font-family-primary: AkkuratStd, "Helvetica Neue", Helvetica, Arial, sans-serif;

			/* Colour / theme related (hsl). I can't wait for Color Module Level 5 so this can be re-worked.
				WAITING FOR... https://12daysofweb.dev/2022/css-color-spaces-relative-color-syntax/
			*/
			--brand-colour: 120 40% 40%;
			--background  : 40  25% 95%;
			--highlight   : 120 10% 85%;
		}

	/* # Base Elements */
		html {
			accent-color    : var(--brand-colour, auto); /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
			font-size       : var(--font-size-root);
			min-height: 100svh; overflow-x: hidden;
		}

		:where(body) {
			padding-block-start: var(--gap); min-height: 100svh;
			font-size: var(--font-size-base, 100%); font-family: var(--font-family-primary);
			line-height: 1.375; hyphens: none;
			display: grid; place-items: center;
			overflow-x: hidden; background-color: hsl( var(--background) );
		}

	/* # Design */
		:where(main, footer) {
			padding-inline: var(--gap); margin-inline: auto;
			max-width: var( --row-width-max );
		}

		h1 {
			border-block-start: 2px solid currentColor;
			padding-block: var(--gap);
		}

		.products {
			display: flex; justify-content: center; align-items: stretch;
			padding-block-end: var(--gap);
			max-width: calc(100vw - 2 * var( --row-padding-inline ) );
		}
		.products img {
			width: 1280px; height: auto;
		}

		footer .wrapper {
			display: flex; justify-content: space-between; align-items: center;
			border-block-start: 2px solid currentColor;
			padding-block: var(--gap);
		}
		footer a {
			text-transform: uppercase; letter-spacing: var(--letter-spacing, 0);
			display: block; padding: 0.25em; border-radius: 0.25em;
			background-color: hsl( var(--highlight) / 0 );
			transition: background-color var(--fast, 0.3s);
		}
		footer a:hover {
			background-color: hsl( var(--highlight) / 1 );
		}
		footer .wrapper > a::after {
			content: " >";
		}

		.social-media {
			display: flex; gap: calc( 0.25 * var(--gap) );
		}
		.social-media svg {
			display: block; width: 2em; height: auto;
		}

		@media screen and (max-width: 480px) {
			.products img {
				transform: translateX(7%);
			}
		}

		@media screen and (min-width: 680px) {
			h1 svg {
				opacity: 0;
				transition: opacity var(--very-slow);
				transition-delay: 0.2s; /* Only here because it seems to be loading too fast for the animation to play */
			}
			html.load-complete h1 svg {
				opacity: 1;
			}

			.products {
				clip-path: ellipse(0% 0% at 50% 0%);
				transition: clip-path var(--very-slow);
				transition-delay: var(--slow);
			}
			html.load-complete .products {
				clip-path: ellipse(160% 160% at 50% 100%);
			}
		}

		@media screen and (min-width: 1280px) { /* Client wants things to get huge */
			:root {
				--row-width-max: none;
			}
			.products img {
				width: 100%;
			}
		}
}