/* 1) Design tokens: colors, spacing, typography */

:root {
/* Color scheme hint */
--color-scheme: light;
color-scheme: var(--color-scheme, light);

/* TOKENS from theme.json
--wp--preset--color--dws-gray-100
--wp--preset--color--dws-gray-200
--wp--preset--color--dws-gray-300
--wp--preset--color--dws-gray-400
--wp--preset--color--dws-gray-500
--wp--preset--color--dws-gray-600
--wp--preset--color--dws-gray-700
--wp--preset--color--dws-gray-800
--wp--preset--color--dws-gray-900

/* Brand colors (light mode) */
--color-bg: var(--wp--preset--color--dws-gray-100);
--color-bg-light: var(--color-gray-200);
--color-bg-medium: var(--color-gray-600);
--color-bg-dark: var(--color-gray-800);
--color-surface: #ffffff;
--color-text: --wp--preset--color--dws-gray-900;
--color-muted: var(--color-gray-600);

/* Semantic tokens */
--color-link: light-dark(var(--wp--preset--color--dws-blue-500), var(--wp--preset--color--dws-blue-900));
--color-link-hover: light-dark(var(--wp--preset--color--dws-blue-700), var(--wp--preset--color--dws-blue-700));

/* Typography */
--font-base: "Noto Sans DWS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-root: 18px; /* mobile font size */
--font-weight-base: 440;
--line-height-base: 1.4;

/* Spacing scale */
--space-1: 0.25rem;
--space-2: calc(var(--space-1) * 2);
--space-3: calc(var(--space-1) * 3);
--space-4: calc(var(--space-1) * 4);
--space-5: calc(var(--space-1) * 6);
--space-6: calc(var(--space-1) * 8);

--radius-outer: 1rem;

--shadow-s:
	inset 0 1px 2px #ffffff30, /* top highlight */ 
	0 1px 2px #00000030, /* dark shadow */ 
	0 2px 4px #00000015; /* soft shadow */
--shadow-m:
	inset 0 1px 2px #ffffff50, /* top highlight */
	0 2px 4px #00000030, /* dark shadow */ 
	0 4px 8px #00000015; /* soft shadow */
--shadow-l:
	inset 0 1px 2px #ffffff70, /* top highlight */ 
	0 4px 6px #00000030, /* dark shadow */
	0 6px 10px #00000015; /* soft shadow */



	/* page preference is "dark" */
	&:has([name="toggle-color-scheme"]:checked) {
		--color-scheme: dark;
		--font-weight-base: 410; /* lighter base font weight for dark mode */
	}

	/* page preference is "system", and system preference is "dark" */
	@media (prefers-color-scheme: dark) {
		&:has([name="toggle-color-scheme"]:checked) {
			--color-scheme: dark;
			--font-weight-base: 410;
		}
	}

	@media (min-width: 770px) {
		--font-size-root: 20px; /* desktop font size */
	}

}

@supports (margin: 1lh) {
	:root {
		--space-1: 0.25lh;
	}
}

/* manual dark mode toggle on the page */
/*
@media (prefers-color-scheme: dark) {
	&:has([name="toggle-color-scheme"]:checked) {
		color-scheme: light;
	}
}

@media (prefers-color-scheme: light) {
	&:has([name="toggle-color-scheme"]:checked) {
		color-scheme: dark;
	}
}
*/

/* 2) Reset: normalize defaults */

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

*:focus-visible {
	outline-color: currentColor;
	outline-offset: 0.1em;
	outline-style: solid;
	outline-width: 2px;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	/* text-decoration: none; */
	color: currentColor;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style-position: inside;
}

.hidden-on-mobile {
	@media (max-width: 770px) { /* watch out, magic number from custom NAV styles! */
		display: none !important;
	}
}

.hidden-on-desktop {
	@media (min-width: 771px) { /* watch out, magic number from custom NAV styles! */
		display: none !important;
	}
}

/* Custom Theme styles */

html {
	hyphens: auto;
	text-wrap: pretty;
}

body {
	background-color: #ddd;
	color: #000;
	font-family: system-ui, sans-serif;
	font-size: 16px;
	font-weight: 460;
	line-height: 1.4;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: calc(var(--font-weight-base) + 160);
	line-height: 1.05;
	color: currentColor;
	text-wrap: balance;
	margin-block-start: 0;
	margin-block-end: var(--space-1);
}

h1 {
	margin-block-end: var(--space-3);
	font-size: clamp(1.4rem, 1.4vw + 1.05rem, 2rem);
}

h2 {
	font-size: clamp(1.2rem, 1.3vw + 0.9rem, 1.5rem);
}

h3 {
	font-size: clamp(1.1rem, 0.85vw + 0.9rem, 1.3rem);
}

* + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-4);
}

p {
	margin-top: 0;
	margin-bottom: var(--space-2);
}

code, pre {
	font-family: var(--font-mono);
}

pre {
	padding: var(--space-3);
	border-radius: 0.5rem;
	background-color: var(--color-surface);
	overflow-x: auto;
}

button,
.button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
	background-color: var(--color-primary);
	color: var(--color-primary-text);
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible {
	filter: brightness(1.05);
}

/* site logo */
header .logo-link {

}

.wp-site-blocks {
	width: min(96vw, 1300px);
	margin: 1rem auto 8rem;

	& > * {
		outline: 0px solid red;
	}
}

header {
	outline: 0px solid blue;
	margin-block-end: 5vh;
}

.wp-site-blocks .columns {
	flex: 3;
	align-items: start;
	gap: 2rem;


	.page-content {
		flex: 3;

		& .wp-block-post {

			&.category-thoughts article .post-content {
				/* special style for thought posts */
			}

		}
	}

	.sidebar-column {
		flex: 1;


		aside > .wp-block-group { /* sidebar widgets */
			padding: 1rem 1rem;
			background: #bbb;
			color: #000;
			border-radius: var(--radius-outer);
			corner-shape: squircle;
			margin-block-end: 1rem;

			a {
				color: currentColor;
				text-decoration: underline;
			}

			& > :is(h2,h3,h4) {
				font-size: 0.85rem;
				font-weight: 650;
				text-transform: uppercase;
				margin-block-end: 1rem;
			}

			& .wp-block-navigation {
				gap: 0;
			}

			& .wp-block-latest-posts li {
				display: flex;
				gap: 0.5rem;
				flex-flow: row-reverse;
				justify-content: start;
				border-block-start: 1px solid #999;
				padding: 0.25em 0;

				time {
					font-size: inherit;
					flex: 0 0 12ch;
				}
			}
		}
	}
}

article.post {
	--pad-x: 0.75rem;

	margin-block-end: 2rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 1rem;

	@media (min-width: 771px) {
		--pad-x: 1.5rem;
		flex-direction: row;
	}

	.post-meta {
		flex: 0 1 100%;
		padding-block-start: var(--pad-x, 1.5rem);

		@media (min-width: 1300px) {
			flex-basis: 12ch;
			padding-block-start: 1.5rem;
		}

		time {
			display: inline-block;

			font-size: 0.85rem;
			font-weight: 650;
			text-transform: uppercase;

			background: #888;
			color: #fff;
			padding: 0.25rem 0.5rem;
			border-radius: var(--radius-outer);
			corner-shape: squircle;
		}
	}

	.post-content {
		flex: 1;
		flex-basis: 0;
		background: #fff;
		padding: 1.5rem var(--pad-x);
		border-radius: var(--radius-outer);
		corner-shape: squircle;

		@media (max-width: 770px) {
			/* flex: 1;
			flex-basis: 60ch; */
		}

		@media (min-width: 1000px) {
			flex-basis: 55%;
		}

		h2 {
			margin-block-end: 1.25rem;

			a {
				color: currentColor;
			}
		}
	}

	.post-comments {
		--pad-x: 0.75rem;

		flex: 1 1 100%;
		
		background: #eee;
		padding: 1.5rem var(--pad-x);
		border-radius: var(--radius-outer);
		corner-shape: squircle;
		font-size: 0.85rem;

		@media (min-width: 771px) {
			flex-grow: 0;
			flex-basis: 25ch;
		}

		@media (min-width: 1300px) {
			flex: 0 1 25ch;
			align-self: start;
			max-width: 35ch; /* limit comment width on large screens */
			/* margin-inline-start: calc(12ch + 2.25rem); */ /* indent meta width + gap */
		}

		&:empty {
			/* display: none; */
			opacity: 0;
			visibility: hidden;
		}

		h3 {
			font-size: 1rem;
			margin-block-end: 1.25rem;

			a {
				color: currentColor;
			}
		}

		.wp-block-comment-template {


			.comment {
				background: #333;
				color: #fff;
				border-radius: 0.75rem;
				corner-shape: squircle;
				padding: 0.5em;
				margin-block-end: var(--pad-x, 1rem);

				&.by-author {
					background-color: #007aff;

					.wp-block-comment-author-name { color: currentColor !important; }
					.wp-block-comment-date { color: currentColor !important; }
					.wp-block-comment-content {
						border-color: currentColor !important;
					}
				}

				.wp-block-columns {
					margin: 0;

					& > .wp-block-column { /* single comment */
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-template-rows: 1rem 1fr;

						.wp-block-comment-author-name { grid-column-start: 1; color: #888; }
						.wp-block-comment-date { grid-column-start: 2; text-align: right; color: #888; }
						.wp-block-comment-content {
							grid-column-start: span 2;
							grid-row-start: 2;
							margin-block-start: 0.5rem;
							border-block-start: 1px solid #888;
							padding-block-start: 0.5rem;

							a { color: currentColor; }

							*:last-child {
								margin-block-end: 0;
							}
						}
						.wp-block-comment-edit-link {
							grid-column: 1 / -1;

							a {
								display: block;
								font-size: 0.85rem;
								font-weight: 650;
								text-decoration: none;
								text-align: center;
								background: #666;
								color: #222;
								padding: 0.25rem 0.5rem;
								border-radius: 0.35rem;
								corner-shape: squircle;
								margin-block-start: 0.5rem;

								&:is(:hover, :focus) {
									filter: brightness(1.05);
								}
							}
						}
					}
				}
			}
		}

		.wp-block-post-comments-form {

			.comment-reply-title {
				display: none;
			}

			.comment-notes { display: none; }
			.comment-form-comment {}
			.comment-form-author {}
			.comment-form-email {}
			.comment-form-url {}
			.comment-form-cookies-consent {}
			.form-submit {}

			form :is(.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url) label {
				display: block;
				font-size: 0.85rem;
				font-weight: 650;
				text-transform: uppercase;
				margin-block-end: 0.25rem;
			}

			form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
				padding: 0.5rem;
				font-size: 0.85rem;
				background: #fff;
				color: #000;
				border: none;
				border-radius: 0.75rem;
				corner-shape: squircle;
			}

			form textarea {
				resize: vertical;
				height: auto;
				field-sizing: content;
				min-height: 4lh;
			}

			form .logged-in-as a,
			form input[type="submit"] {
				background: #007aff;
				color: #fff;
				padding: 0.5rem;
				text-align: center;
				display: block;
				width: 100%;
				border-radius: 0.75rem;
				corner-shape: squircle;
				text-decoration: none;
			}

			form .logged-in-as a {
				background-color: #ccc;
				color: #555;

				&:is(:hover, :focus) {
					filter: brightness(1.05);
				}
			}
		}
	}

}

.wp-block-query-pagination {

	.page-numbers,
	.wp-block-query-pagination-next,
	.wp-block-query-pagination-previous {
		display: inline-block;
		font-size: 0.85rem;
		font-weight: 650;
		text-transform: uppercase;
		text-decoration: none;
		background: #888;
		color: #fff;
		padding: 0.25rem 0.5rem;
		border-radius: var(--radius-outer);
		corner-shape: squircle;

		&:is(:hover, :focus) {
			filter: brightness(1.05);
		}

		&.current {
			background-color: #007aff;
		}

		&.dots {
			background-color: transparent;
			color: #888;
		}
	}
}

footer {
	outline: 1px solid blue;
}