@charset "UTF-8";
/**
 * Accessable properties.
 * @see main.js Optimera.rootStyle
 */
:root {

	/**
	 * Dynamically updated.
	 * @see main.js Optimera.resizeObserver
	 */
	--header-height: 0px;

	--bg-color: white;
	--fg-color: rgb(65, 65, 66);

	--lowlight-color: rgb(222, 179, 12);

	--highlight-color: rgb(251, 210, 49); /* buttons */
	--highlighter-color: rgb(255, 252, 200); /* fields */
	--highlightest-color: rgb(255, 250, 229); /* denoted areas */

	--silverish-color: rgb(229, 231, 235); /* borders and such */

	--darkgreen-color: rgb(28, 106, 50);
	--lightgreen-color: rgb(163, 220, 179);

	--darkred-color: rgb(201, 45, 45);

	--bold-weight: 600;

	--max-width: 1200px;

}
@media screen {

	body {
		/*
		-apple-system and BlinkMacSystemFont (horrible names, both!) are installed on Apple platforms (Mac, iOS)
		Seguoe UI will likely be installed on Microsoft platforms (Windows)
		Roboto will likely be installed on Google platforms (Android, ChromeOS)
		Inter is an open source font imported from Google, if that proves problematic we can go through the motions to install locally but not super critical
		*/
		font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

		line-height: 1.25;

		background-color: var(--bg-color);
		color: var(--fg-color);

		display: flex;
		flex-direction: column;
		min-height: 100vh;

	}

	a {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	}
	main a {
		color: var(--lowlight-color);
	}
	main a:hover {
		color: var(--highlight-color);
		text-decoration: underline;
	}

	i, em {
		font-style: italic;
	}

	b, strong, em, dt, th {
		font-weight: var(--bold-weight);
	}

	p {
		margin: 0.5em 0em;
	}

	q {
		font-style: italic;
		quotes: auto;
	}


	h1, h2, h3, h4, h5, h6 {
		font-weight: var(--bold-weight);
	}
	h1 {
		font-size: xx-large;
	}
	h2 {
		font-size: x-large;
	}
	h3 {
		font-size: large;
	}
	h4 {
		font-size: small;
	}
	h5 {
		font-size: x-small;
	}
	h6 {
		font-size: xx-small;
	}

	hr {
		background-color: var(--silverish-color);
		height: 1px;
		border: none;
		margin: 1em 0em;
	}



	.flex-input {
		display: flex;
	}
	.flex-input > input,
	.flex-input > button,
	.flex-input > textarea,
	.flex-input > select {
		flex: auto;
	}

	.text-align-center {
		text-align: center;
	}
	.text-align-right {
		text-align: right;
	}


	fieldset.info {
		border: 1px solid var(--silverish-color);
		border-radius: 0.5em;
		padding: 0.5em;
	}
	fieldset.info > legend {
		font-size: smaller;
		margin: 0 auto;
		margin-bottom: -0.5em;
		padding: 0.25em 1em;
		width: 50%;
		text-align: center;
		background-color: var(--silverish-color);
		border-radius: 0.25em;
	}
	fieldset.info.notice {
		border-color: var(--lightgreen-color);
	}
	fieldset.info.notice > legend {
		background-color: var(--lightgreen-color);
		color: var(--darkgreen-color);
	}
	fieldset.info.warning {
		border-color: var(--highlight-color);
	}
	fieldset.info.warning > legend {
		background-color: var(--highlight-color);
		color: var(--lowlight-color);
	}
	fieldset.info.error {
		border-color: var(--darkred-color);
	}
	fieldset.info.warning > legend {
		background-color: var(--darkred-color);
		color: white;
	}

	.meter {
		background-color: var(--silverish-color);
	}
	.meter > div {
		background-color: var(--highlight-color);
	}
	.meter,
	.meter > div {
		height: 8px;
		border-radius: 16px;
	}

	/**
	 * Modal styles.
	 * @note we do this because <dialog> backdrops muck up error message display, this gives us some flexibility
	 */
	aside.modal {
		display: none;
	}
	aside.modal.open {
		display: block;
		position: fixed;
		z-index: 151;

		overflow: auto;
		width: 600px;
		max-width: 90vw;
		max-height: calc( 90vh - 2em );

		/* center the box */
		top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

		background-color: var(--bg-color);
		border-radius: 0.5em;
		padding: 1em;
		box-shadow: 2px 4px 3px 2px var(--fg-color);

	}
	#modal-backdrop {
		display: none;
	}
	body.modal-open {
		overflow: hidden; /* remove scrolling from body */
	}
	body.modal-open #modal-backdrop {
		display: block;
		z-index: 150;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		backdrop-filter: blur(0.5em) saturate(0.25);
	}


	/**
	 * Header nav styles.
	 * @see desktop.css, mobile.css for how <header> and sub-elements are transformed in different contexts.
	 */
	header {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: var(--bg-color);
		border-bottom: 2px solid var(--silverish-color);
		border-radius: 0 0 0.75rem 0.75rem;
	}
	header > * {
		padding: 0.5em 1em;
	}
	header > nav {
		display: flex;
	}
	header a {
		display: block;
		color: inherit;
		text-decoration: none;
		font-weight: var(--bold-weight);
	}

	#badge {
		display: flex;
		flex-direction: row;
		background-color: var(--highlightest-color);
		border-radius: 2.5em;
		align-items: center;
		gap: 0.5rem;
		padding: 0.25rem;
	}
	#badge:hover, #badge:active {
		background-color: var(--highlighter-color);
	}
	#badge strong, #badge span {
		display: block;
	}

	#logo,
	#cart,
	#badge {
		cursor: pointer;
	}

	#logo img {
		width: 200px;
		height: auto;
	}


	ul#messages {
		position: fixed;
		top: var(--header-height);
		right: 0px;
		z-index: 200;
		overflow: hidden;
		transition: all 0.1s;
	}
	ul#messages:empty {
		display: none;
	}
	ul#messages > li {

		--right-initial-position: calc( ( 200px + 2em + 10px ) * -1 );
		--duration: 6000ms; /* ms, this value is read by error filter in main.js */

		background-color: var(--bg-color);
		margin: 0.5em 0.5em 0.5em 0em;
		border: 1px solid var(--fg-color);
		border-radius: 0.5em;
		position: relative;
		font-weight: var(--bold-weight);
		box-shadow: 1px 1px 4px var(--fg-color);

		width: 200px;
		padding: 1em;
		border-left-width: 4px;

		animation-fill-mode: both;
		animation-duration: var(--duration);
		animation-name: message;

		cursor: pointer; /* click to destroy message */
	}
	ul#messages > li::after {
		position: absolute;
		bottom: 0px;
		right: 0px;
		display: block;
		width: 100%;
		height: 4px;
		content: "";
		border-radius: 0.5em;
		background-color: black;

		animation-duration: var(--duration);
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-name: message-bar;
	}
	ul#messages > li:hover,
	ul#messages > li:hover:after {
		animation-play-state: paused;
	}
	ul#messages .error {
		border-color: var(--darkred-color);
	}
	ul#messages .error::after {
		background-color: var(--darkred-color);
	}
	ul#messages .warning {
		border-color: var(--highlight-color);
	}
	ul#messages .warning::after {
		background-color: var(--highlight-color);
	}
	ul#messages .notice {
		border-color: var(--lightgreen-color);
	}
	ul#messages .notice::after {
		background-color: var(--lightgreen-color);
	}
	@keyframes message {
		0% {
			right: var(--right-initial-position);
		}
		5%, 95% {
			right: 0px;
		}
		100% {
			right: var(--right-initial-position);
		}
	}
	@keyframes message-bar {
		0%, 5% {
			width: 100%;
		}
		95%, 100% {
			width: 0px;
		}
	}


	main {
		margin-top: var(--header-height);
		flex: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	main > article {
		width: calc( 100% - 2em );
		max-width: var(--max-width);
		padding: 1em; /* horizontal padding does nothing?! hence the width calc - maddness!! */
	}

	footer {
		background-color: var(--highlightest-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 2rem;
		gap: 1rem;
	}
	footer nav {
		display: flex;
		flex-direction: row;
		width: 100%;
		max-width: var(--max-width);
		justify-content: center;
		gap: 2rem;
	}
	footer nav > * {
		flex: 1;
	}
	footer nav dl > * {
		margin-bottom: 1em;
	}
	footer cite {
		text-align: center;
		color: rgb(143, 143, 143);
		font-size: smaller;
	}

	/* collapse the empties when screen contracts */
	@media ( max-width: 1000px ) {
		footer {
			padding: 1rem;
		}
		footer nav {
			gap: 1rem;
			flex-wrap: wrap;
		}
		footer nav > :empty {
			flex: none;
		}
	}

	/**
	 * Combines a throbber and text element together in an element intended to be replaced when an async action has completed.
	 * @see index.html template#replaceholder
	 */
	.replaceholder {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/**
	 * Throbber animation element.
	 */
	.throbber {
		position: relative;
		width: 50px;
		height: 20px;
	}
	.throbber div {
		position: absolute;
		top: 40%;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #414142;
	}
	.throbber div:first-child {
		left: 0;
		animation: throbber1 .6s infinite;
	}
	.throbber div:nth-child(2) {
		left: 0;
		animation: throbber2 .6s infinite;
	}
	.throbber div:nth-child(3) {
		left: 20px;
		animation: throbber2 .6s infinite;
	}
	.throbber div:nth-child(4) {
		left: 40px;
		animation: throbber3 .6s infinite;
	}
	@keyframes throbber1 {
		0% {
			transform: scale(0)
		}
		to {
			transform: scale(1)
		}
	}
	@keyframes throbber3 {
		0% {
			transform: scale(1)
		}
		to {
			transform: scale(0)
		}
	}
	@keyframes throbber2 {
		0% {
			transform: translate(0)
		}
		to {
			transform: translate(20px)
		}
	}



	button,
	input[type=button],
	input[type=submit],
	input[type=reset] {
		background-color: var(--highlight-color);
		color: inherit;
		padding: 0.5em 1em;
		border: 1px solid var(--highlight-color);
		border-radius: 2em;
		font-weight: var(--bold-weight);
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
	}
	button[type=reset],
	input[type=reset] {
		background-color: transparent;
		color: var(--lowlight-color);
		border-color: var(--lowlight-color);
		border-width: 2px;
	}
	button:disabled,
	input[type=button]:disabled,
	input[type=submit]:disabled,
	input[type=reset]:disabled {
		background-color: var(--silverish-color);
		border-color: var(--silverish-color);
		color: inherit;
	}
	button[type=reset]:disabled,
	input[type=reset]:disabled {
		background-color: transparent;
	}

	select,
	textarea,
	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password] {
		background-color: var(--highlightest-color);
		border-radius: 0.2em 0.2em 0 0;
		border-style: solid;
		border-width: 0px 0px 1px;
		border-bottom-color: var(--silverish-color);
		vertical-align: bottom;
		padding: 0.375em 0.5em;
	}
	select {
		cursor: pointer;
	}
	select:hover,
	textarea:hover,
	input[type=text]:hover,
	input[type=email]:hover,
	input[type=url]:hover,
	input[type=password]:hover {
		border-bottom-color: var(--highlight-color);
	}
	select:focus,
	textarea:focus,
	input[type=text]:focus,
	input[type=email]:focus,
	input[type=url]:focus,
	input[type=password]:focus {
		background-color: var(--highlighter-color);
		border-bottom-color: var(--highlight-color);
	}
	select:disabled,
	textarea:disabled,
	input[type=text]:disabled,
	input[type=email]:disabled,
	input[type=url]:disabled,
	input[type=password]:disabled {
		background-color: var(--silverish-color);
		border-radius: 0.2em;
		border-bottom-width: 0px;
	}
	input:required:valid,
	textarea:required:valid,
	select:required:valid {
		border-bottom-color: green;
	}
	input:required:invalid,
	textarea:required:invalid,
	select:required:invalid {
		border-bottom-color: red;
	}

	/* password input */
	input.password + span {
		display: inline-block;
		width: 1em;
		height: 1em;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url(/img/password-hide.svg);
		cursor: pointer;
		position: relative;
		z-index: 1;
		margin: 0.3em 0.3em 0em -1.575em;
    	padding: 0.2em;
	}
	input[type=text].password + span {
		background-image: url(/img/password-show.svg);
	}


	input[type=checkbox],
	input[type=radio] {
		opacity: 0; /* opacity:0 rather than visibility:hidden or display:none so that invalid messages display properly */
		width: 0px;
		height: 0px;
		vertical-align: bottom; /* so that invalid messages appear below */
	}
	input[type=checkbox] + span,
	input[type=radio] + span {
		cursor: pointer;
		display: inline-flex;
		font-size: 110%;
		width: 1em;
		height: 1em;
		vertical-align: center;
		align-items: center;
		justify-content: center;
		background-color: var(--silverish-color);
		transition: background-color 0.1s;
		box-shadow: inset 1px 1px 2px silver;
	}
	/* checkbox input */
	input[type=checkbox] + span {
		border-radius: 3px;
	}
	input[type=checkbox]:checked + span {
		background-color: var(--highlight-color);
		box-shadow: 1px 1px 2px silver;
	}
	input[type=checkbox]:checked + span::before {
		content: "\2714"; /* heavy checkmark */
		color: var(--bg-color);
		line-height: 1;
	}
	/* radio input */
	input[type=radio] + span {
		border-radius: 1em;
	}
	input[type=radio]:checked + span {
		background-color: var(--highlight-color);
	}
	input[type=radio]:checked + span::before {
		display: block;
		width: 0.5em;
		height: 0.5em;
		content: "";
		border-radius: inherit;
		background: var(--bg-color);
		box-shadow: 0px 2px 2px silver;
	}
	/* toggle input */
	input[type=checkbox].toggle + span {
		background-color: var(--silverish-color);
		border-radius: 1em;
		height: 1em;
		width: 2em;
		justify-content: left;
		box-shadow: inset 1px 1px 2px silver;
	}
	input[type=checkbox].toggle + span::before {
		content: "";
		width: 0.5em;
		height: 0.5em;
		background-color: var(--bg-color);
		display: block;
		border-radius: 1em;
		margin: 0.3em;
		box-shadow: 1px 2px 2px silver;
	}
	input[type=checkbox].toggle:checked + span {
		justify-content: right;
		background-color: var(--highlight-color);
	}

}