@layer reset, layout, theme;

@layer layout {
	:root {
		--container-width: 1000px;
	}

	.container {
		width: min(100%, var(--container-width));
		margin-inline: auto;
		padding-inline: 1em;
		container-name: tin;
		container-type: inline-size;
	}

	.fullwidth {
		/* @TODO */
	}

	li {
		padding-block: .2em;
	}

	label.block {
		display: block;
	}

	nav ul {
		display: flex;
		list-style: none;

		li {
			padding: 0;
			margin: 0;
		}

		a {
			display: block;
			padding: .5em 1.2em;
			text-decoration: none;
		}
	}

	header.siteheader {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-block: 1em;
		text-align: center;
	}
}
/* END layer:layout */

@layer theme {
	:root {
		--color-garnet: #881124;
		--color-garnet-dark: #53001f;
		--color-gray-light: hsl(120 1% 70%);
		--color-gray-dark: hsl(120 0 44%);
		--color-text: hsl(0 0% 0%);
	}

	body {
		font-family: arial, sans-serif;
		font-size: 18px;
		line-height: 1.25;
		color: #111;
		@media (prefers-color-scheme: dark) {
			color: #ddd;
		}
	}

	h1 {
		font-size: 2.1em
	}

	h2 {
		font-size: 1.8em
	}

	h3 {
		font-size: 1.3em
	}

	h4 {
		font-size: 1.15em
	}

	h5 {
		font-size: 1.08em
	}

	h6 {
		font-size: 1em
	}

	h1, h2, h3, h4, h5, h6 {
		margin-block: 1.1em .4em;
	}

	p {
		margin-block: .5em;
	}

	td {
		word-break: normal;
		border: 1px solid silver;
		padding: .5em;
		font-size: 90%;
	}

	a {
		color: var(--color-garnet);
		text-decoration-color: hsl(from currentColor h s l / .4);
		text-underline-offset: 3px;
		text-decoration-line: none;

		&:hover {
			text-decoration-line: underline;
		}

		@media (prefers-color-scheme: dark) {
			filter: invert(1);
			text-decoration-line: underline;
		}
	}

	nav a {
		text-decoration-line: none;
	}

	.button {
		display: inline-block;
		padding: .4em .8em;
		border-radius: 3px;
		text-decoration: none;
	}
} /* END layer:theme */


header.siteheader {
	.wordmark {
		width: min(230px, 55%);
		margin-block: 2.5em;

		img {
			@media (prefers-color-scheme: dark) {
				filter: invert(1);
				background: white;
				padding: .5em 1em;
			}
			@media ( prefers-color-scheme: dark) and ( width > 450px ) {
				padding: 1em 2.5em;
			}
		}
	}

	h1.site-title {
		margin-block: .5em;
	}

	.site-tagline {
		color: var(--color-gray-dark);
		font-size: .9em;
		@media (prefers-color-scheme: dark) {
			color: var(--color-gray-light);
		}
	}

	@media ( width <= 550px ) {
		.site-title {
			font-size: 1.6em;
		}
	}
	@media ( width > 550px) {
	}
}

/* override can't be in @layer */
.wp-block-post-title a:hover {
	text-decoration-line: underline;
	text-decoration-color: hsl(from currentColor h s l / .3);
	text-underline-offset: 3px;
}

nav.main-nav {
	margin-block: 1em 2.5em;
	background: hsl(0 0% 94%);
	@media (prefers-color-scheme: dark) {
		background: black;
	}

	ul {
		justify-content: center;
	}

	a {
		text-transform: uppercase;
		font-size: .9em;
	}

	.current_page_item a,
	a:hover {
		background: hsl(0 0% 0% / .1);
	}
}

main:has( aside.sidebar ) {
	display: grid;
	gap: 2em;

	@media ( width > 800px ) {
		grid-template-columns: min(80ch, 68%) auto;
	}
}


aside.sidebar {
	font-size: .9em;
}

.inter-post-navigation {
	display: flex;
	justify-content: space-between;
	margin-block: 2em 0;

	a {
		padding: .5em 1em;
		background: hsl(0 0% 96%);
		border-radius: 2px;
		font-weight: 700;
	}

	.label {
		font-size: .8em;
		font-weight: 400;
		opacity: .8;
		display: block;
		margin-bottom: .5em;
		text-transform: uppercase;
	}

	a[rel="next"] {
		margin-left: auto;
	}

	a[rel="previous"] {
		margin-right: auto;
	}
}

footer {
	margin-block-start: 4em;
	padding-block: 2em 0;

	& > .container {
		padding-block-start: 2em;
		display: grid;
		gap: 2em;
		border-top: 1px solid silver;


		@media ( width > 660px ) {
			grid-template-columns: 1fr 1fr;
		}
		@media ( width > 900px ) {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

	.widget > :is( h1, h2, h3, h4, h5, h6 ) {
		margin-top: 0;
	}

	h2.widgettitle {
		font-size: 1.25em;
	}

	.wp-block-loginout a {
		background: var(--color-garnet-dark);
		color: white;
		padding: .3em .8em;
		border-radius: 2px;
		text-decoration: none;

		&:hover {
			background: black;
		}
	}

	.wp-block-loginout.logged-out a {
		background: var(--color-gray-light);
		color: var(--color-text);
	}
}

.final-credits {
	color: white;
	background: hsl(0 0% 10%);
	padding: 2em 3em;
	margin-top: 3em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25em;
	justify-content: center;

	svg {
		width: 90px;
	}

	svg path {
		fill: white;
	}

	a {
		text-decoration-line: underline;
		@media (prefers-color-scheme: light) {
			color: white;
		}
	}

	.final-links {
		display: flex;
		gap: 1.4em;
		font-size: .9em;
	}
}


.wp-block-post {
	--margin-between: 1.4em;
	margin-left: 0;
	margin-bottom: var(--margin-between);
	padding: 1em;
	background: hsl(40, 79%, 96%); /* original color pre-2026: #f1f6f8 */;
	/* border-bottom: 4px solid hsl(40 70% 65%); */
	border-radius: 3px;
	position: relative;
	@media (prefers-color-scheme: dark) {
		background: hsl(38, 93%, 12%);
	}
}

.wp-block-post-date {
	color: hsl(0 0% 20%);
	font-size: .9em;
	font-weight: 300;
	@media (prefers-color-scheme: dark) {
		color: hsl(0 0% 90%);
	}
}

.wp-block-post + .wp-block-post:before {
	--line-height: 2px;
	display: block;
	height: var(--line-height);
	content: '';
	background: hsl(40 29% 69%);
	position: absolute;
	/* top: calc(-1 * 1.2em / 2 - 1.5px); */
	top: calc(var(--margin-between) / 2 * -1 - var(--line-height));
	width: 100%;
	left: 0;
}

.site-management-tools {
	margin-bottom: .8em;
	font-size: .8em;
	background: black;
	padding: .5em;

	a {
		background: hsl(0 0% 100% / .9);
		font-weight: 700;
	}
}