/* Cascade layers order from lowest to highest priority */
@layer reset, defaults, patterns, components, utilities, overrides;

@layer reset {
	/*
		Reset layer styles based on example from Chris Coyier:
		- https://frontendmasters.com/blog/the-coyier-css-starter/
	*/
	html {
		color-scheme: light dark;
		block-size: 100%;
		scrollbar-color: color-mix(in srgb, CanvasText, #0000 50%) #0000;
		tab-size: 2;
		hanging-punctuation: first allow-end last;
		word-break: break-word;
		overflow-y: scroll;
	}

	/*
		Stable Scrollbar Gutters
		- https://www.zachleat.com/web/stable-scrollbar-gutters/
		- https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
	*/
	@supports (scrollbar-gutter: stable) {
		html {
			overflow-y: auto;
			scrollbar-gutter: stable;
		}
	}

	body {
		min-block-size: 100%;
		margin: 0;
		padding: 2rem;
		@media (width < 500px) {
			padding: 1rem;
		}
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	h1,
	h2 {
		font-weight: 900;
		letter-spacing: -0.02rem;
	}

	h1,
	h2,
	h3 {
		line-height: 1.1;
	}

	h1,
  h2,
  h3,
  h4,
  h5,
  h6 /* FUTURE :heading */ {
		text-wrap: balance;
		margin-block-start: 0;
	}

	p,
	li,
	dd {
		text-wrap: pretty;
		max-inline-size: 88ch;
	}

	a {
		/*
			Color adjustments
			- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
		*/
		color: light-dark( oklch(35% 0.12017 227.292), oklch(86% 0.12017 227.292));
		text-underline-offset: 2px;
		&:not(:is(:hover, :focus)) {
			text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
		}
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}
	sub {
		inset-block-end: -0.25em;
	}
	sup {
		inset-block-start: -0.5em;
	}

	ul,
	ol,
	dl {
		margin: 0;
		padding: 0;
		list-style-position: inside;
		ul,
		ol,
		dl {
			padding-inline-start: 2ch;
		}
	}

	img,
	video,
	iframe {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		border-style: none;
	}

	figure {
		inline-size: fit-content;
		margin-inline: auto;
	}
	figcaption {
		contain: inline-size;
	}

	/* Form styles */
	input,
	select,
	textarea,
	button {
		font: inherit;
		/* FUTURE: appearance: base; */
	}

	label {
		display: block;
	}

	input:not(
			:where(
					[type="submit"],
					[type="checkbox"],
					[type="radio"],
					[type="button"],
					[type="reset"]
				)
		) {
		inline-size: 100%;
	}

	button,
	input:where([type="submit"], [type="reset"], [type="button"]) {
		background: CanvasText;
		color: Canvas;
		border: 1px solid transparent;
		border-radius: 0.3ex;
	}

	textarea {
		field-sizing: content;
		min-block-size: 5lh;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	pre,
	code,
	kbd,
	samp {
		font-family: ui-monospace, SFMono-Regular, monospace;
	}

	pre {
		white-space: pre-wrap;
		/* background: CanvasText;
		color: Canvas; */
		background-color: light-dark(#eee, #111);
		color: light-dark(black, white);
		padding: 1.5rem;
	}

	svg {
		fill: currentColor;
	}

	[aria-disabled="true" i],
	[disabled] {
		cursor: not-allowed;
	}
	[disabled],
	label:has(input[disabled]) {
		opacity: 0.5;

		[disabled] {
			opacity: 1;
		}
	}

	hr {
		border-style: solid;
		border-width: 1px 0 0;
		color: inherit;
		height: 0;
		overflow: visible;
		margin-block: 2.5rem;
	}

	:target {
		scroll-margin: 3rlh;
	}

	table {
		caption-side: bottom;
		border-collapse: collapse;
		td {
			font-size: 90%;
		}
		td,
		th {
			word-break: normal;
			border: 1px solid gray;
			padding: 0.5rem;
		}
	}
	[role="region"][aria-labelledby][tabindex] {
		overflow: auto;
	}
	caption {
		font-size: 90%;
	}

	/* Accessibility improvements */
	[hidden] {
		display: none !important;
	}
	.screenreader-only:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	:focus-visible {
		outline-offset: 2px;
	}

	/* Motion-related adjustments */
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}

		html {
			interpolate-size: allow-keywords;
			&:focus-within {
				scroll-behavior: smooth;
			}
		}
	}
}

@layer defaults {
	:root {
		color-scheme: light dark;
	}

	html {
		/*
			Color theme switcher
			- https://cascadiajs-2025.netlify.app/06-color-scheme/
			- https://codepen.io/argyleink/pres/QwjPWGe?editors=1100
			- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
		*/
		&:has(#optionAuto:checked) {
			color-scheme: light dark;
		}
		&:has(#optionLight:checked) {
			color-scheme: light;
		}
		&:has(#optionDark:checked) {
			color-scheme: dark;
		}
	}

	body {
		min-block-size: 100%;
		/* display: grid; */
		/* place-content: center; */
		font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua,
			Georgia, serif;
		/* font-family: system-ui, sans-serif; */
		color: light-dark(#000, white);
		background: light-dark(whitesmoke, black);
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 32px;
		font-style: normal;
		font-variant: normal;
	}

	h3 {
		font-size: 25px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
	}

	p {
		font-size: 20px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
	}

	figure {
		margin: 0;
		padding: 2ex 2ex 1.3ex;
		max-width: 50ex;
		background-color: light-dark(antiquewhite, #000);
		color: light-dark(black, white);
		display: grid;
		font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
			sans-serif;
		border: 0.1ex solid darkgrey;
		border-radius: 0.5ex;
		box-shadow: inset 0 0 2ex rgba(0, 0, 0, 0.04);
	}

	figcaption {
		font-weight: 400;
		text-align: end;
	}

	blockquote {
		margin: 0;
		font-size: 25px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
			Liberation Mono, Courier New, "Courier New", Courier, monospace;

		p {
			margin-block-start: 0;
			margin-block-end: 0;
			font-weight: 600;
			text-align: start;
		}
	}

	pre {
		font-size: 16px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
	}

	hr {
		border: 1px solid #1966a2;
	}

	header {
		border-top: 1ex solid rebeccapurple;
		padding-top: 1ex;
	}

	section {
		padding: 1rem 0;
	}
}

@layer patterns {
	/* Monospace typeface */
	.font-mono {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
			Liberation Mono, Courier New, monospace;
	}
}

@layer components {
	/* Output wrapper for assignments */
	section.exerciseOutput {
		--exerciseOutput-horizontal-border-size: 0.2ex;
		--exerciseOutput-horizontal-border-color: light-dark(#ddd, #333);

		--exerciseOutput-vertical-border-size: 0.3ex;
		--exerciseOutput-vertical-border-color: #1966a2;

		background-color: light-dark(#f2f2f2, #111);
		color: light-dark(black, white);
		box-shadow: inset 0 0 2ex light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.06));

		border-top: var(--exerciseOutput-horizontal-border-size) solid var(--exerciseOutput-horizontal-border-color);
		border-bottom: var(--exerciseOutput-horizontal-border-size) solid var(--exerciseOutput-horizontal-border-color);
		border-left: var(--exerciseOutput-vertical-border-size) solid var(--exerciseOutput-vertical-border-color);
		border-right: var(--exerciseOutput-vertical-border-size) solid var(--exerciseOutput-vertical-border-color);

		padding: 3ex 3ex;
		margin-left: -2rem;
		margin-right: -2rem;

		@media (width < 500px) {
			border: 0;
			padding: 3ex 2ex;
			margin-left: -1rem;
			margin-right: -1rem;
		}
	}

	.red-box {
		background: red;
		width: 50px;
		height: 50px;
	}

	.red,
	.error,
	.error textarea,
	.error input {
		border-color: red;
		color: red;
	}

	div.border {
		border: 1px solid black;
		padding: 5px;
		float: left;
	}

	table.display {
		width: 100%;
	}

	/*
		Color theme switcher
		- https://cascadiajs-2025.netlify.app/06-color-scheme/
		- https://codepen.io/argyleink/pres/QwjPWGe?editors=1100
		- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
	*/
	.color-theme-switcher {
		max-width: 12em;
	}

	.color-theme-list {
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: .5ch 1ch;

    > input {
      grid-column: 1;
    }

    > label {
      grid-column: 2;
    }
  }
}

@layer utilities {
	.clear {
		clear: both;
	}

	.no-border {
		border: 0;
		height: auto;
		padding: 0;
		margin: 0;
	}
}