@layer reset, defaults, theme, extend, utilities, accessibility;



/* ====================================
	RESET
==================================== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
}
select, .text-input {
	display: block;
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background-color: unset;
	border: unset;
}
::marker {
	font-family: inherit;
}

/* ===================== END RESET */ }



/* ====================================
	THEME
==================================== */

@layer theme {

:root {
	--fore-colour: black;
	--back-colour: white;
	--hot-colour: blue;
	--cold-colour: purple;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: #eee;
		--back-colour: #181818;
		--hot-colour: #8df;
		--cold-colour: #aaf;
	}
}

/* ================= END THEME */ }



/* ====================================
	ACCESSIBILITY
==================================== */

@layer accessibility {

@media (prefers-reduced-motion) {
	*,
	::before,
	::after {
		transition: unset;
		animation-name: no-animation;
	}
}

/* ================= END ACCESSIBILITY */ }



/* ====================================
	UTILITIES
==================================== */

@layer utilities {

[hidden] {
	display: none;
}

/* ================= END UTILITIES */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

:root {
	--main-column-max-inline-size: 60ch;
	--gap-size: 1.5rem;
	--main-column-margin-block: calc(2 * var(--gap-size));
	--mid-back-colour: color-mix(in srgb, var(--fore-colour) 10%, var(--back-colour));
	--line-width: 0.1rem;
	--line: var(--line-width) solid var(--fore-colour);
	font-size: 100%;
	accent-color: var(--hot-colour);
}
body {
	margin: 0;
	line-height: 1.5;
	font-size: 1.2rem;
	color: var(--fore-colour);
	background-color: var(--back-colour);
}

/* -----------
	LAYOUT
----------- */

#banner {
	display: flex;
	align-items: center;
	padding: 1rem;
	& > * {
		flex-grow: 0;
	}
	& > nav {
		flex-grow: 1;
	}
}
main {
	max-inline-size: var(--main-column-max-inline-size);
	margin-block: var(--main-column-margin-block);
	margin-inline: auto;
	padding-inline: 1rem;
	& > :not(:first-child) {
		margin-block-start: var(--gap-size);
		margin-block-end: 0;
	}
}
header {
	margin-block-end: var(--gap-size);
	padding-block-end: var(--gap-size);
	border-block-end: var(--line);
}
footer {
	margin-block-start: var(--gap-size);
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
}

/* ------------
	GENERAL
------------ */

h1 {
	margin-block: 0;
	line-height: 1;
}
hr {
	max-inline-size: 50%;
	margin-block: 1em;
	margin-inline: auto;
	border: unset;
	border-block-end: var(--line);
}
svg {
	fill: var(--fore-colour);
	stroke: var(--fore-colour);
}
a {
	color: var(--hot-colour);
	text-underline-offset: 0.15em;
}
a:visited {
	color: var(--cold-colour);
}
a:active {
	color: var(--cold-colour);
}
a:visited:active {
	color: var(--hot-colour);
}

/* -------------
	CONTROLS
------------- */

#index-header {
	display: grid;
	gap: var(--gap-size);
	& p {
		margin-block: 0;
	}
}
#controls {
	display: grid;
	gap: 1rem;
	align-items: center;
	padding-block-start: var(--gap-size);
	border-block-start: var(--line);
}
.control-group {
	display: grid;
}
label {
	display: block;
	padding-block-end: 0.1rem;
	font-weight: bold;
}
select, .text-input {
	padding-block: 0.25em;
	padding-inline: 0.5em;
	line-height: 1;
	border: var(--line);
	border-radius: 0;
}
:is(select, .text-input):hover {
	background-color: var(--mid-back-colour);
}

/* ----------
	ITEMS
---------- */

#items {
	display: grid;
	gap: var(--gap-size);
	padding-inline-start: 0;
	& > li {
		list-style-type: "";
	}
	& a {
		text-underline-offset: 0.3em;
	}
}
.meta {
	display: grid;
	grid-template:
		"	title	title		"
		"	rating	review-date	" / max-content 1fr;
	gap: 1rem;
	align-items: center;
	& > .item-title {
		grid-area: title;
	}
	& > [data-rating] {
		grid-area: rating;
	}
	& > .review-date {
		grid-area: review-date;
	}
}
#items > .meta {
	gap: 0.5rem;
}

/* ================== END DEFAULTS */ }
/* ====================================
	EXTEND
==================================== */

@layer extend {

:root {
	--fore-colour: #000;
	--back-colour: #fea;
	--hot-colour: #a00000;
	--logo-colours: linear-gradient(
		to right,
		var(--hot-colour),
		var(--hot-colour)
	);
}
@media (prefers-color-scheme: light) {
	[data-rating] {
		text-shadow:
			0 calc(-1 * var(--line-width)) var(--hot-colour),
			var(--line-width) 0 var(--hot-colour),
			0 var(--line-width) var(--hot-colour),
			calc(-1 * var(--line-width)) 0 var(--hot-colour);
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--red: #ff7979;
		--yellow: #f7cc01;
		--purple: #ef70ff;

		--fore-colour: #fff;
		--back-colour: #14181c;

		--hot-colour: var(--red);

		--logo-colours: linear-gradient(
			to right,
			var(--red) 33.3%,
			var(--yellow) 33.3%,
			var(--yellow) 66.6%,
			var(--purple) 66.6%
		);
	}
	#items {
		& > :nth-child(3n+2 of :not([hidden])) {
			--hot-colour: var(--yellow);
			accent-color: var(--hot-colour);
		}
		& > :nth-child(3n+3 of :not([hidden])) {
			--hot-colour: var(--purple);
			accent-color: var(--hot-colour);
		}
	}
}
:root {
	--mid-fore-colour: color-mix(in srgb, var(--fore-colour), var(--back-colour) 25%);
	--line: var(--line-width) solid var(--mid-fore-colour);
	--cold-colour: var(--fore-colour);
	--title-font-stack: Georgia, Garamond, serif;
}
body {
	font-family: "Roboto Condensed", Roboto, system-ui, sans-serif;
}
h1 {
	font-family: var(--title-font-stack);
	letter-spacing: 0.05em;
}
#index-link {
	font-weight: bold;
	color: inherit;
	text-decoration-color: transparent;
	&:hover {
		text-decoration-color: var(--fore-colour);
	}
	&::before {
		content: "ᓚᘏᗢ" / "";
		display: inline-block;
		margin-inline-end: 0.5rem;
		font-family: monospace;
		color: transparent;
		background-image: var(--logo-colours);
		background-clip: text;
	}
}
.item-title {
	margin-block: 0;
	line-height: 1.2;
	font-size: 1.5rem;
	font-family: var(--title-font-stack);
}
main a:visited {
	text-decoration-color: var(--hot-colour);
}
select, .text-input {
	border-radius: 0.3rem;
}

/* ===================== END EXTEND */ }