/*
Theme Name: MD21
Author: MD21
Description: A minimal custom block theme for academic writing, notes and tools.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.6.0
License: GNU General Public License v2 or later
Text Domain: md21blog
*/

html {
	background: var(--wp--preset--color--background);
	color-scheme: light dark;
	scroll-behavior: auto;
}

body {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--text);
	text-rendering: optimizeLegibility;
}

:root[data-md21-color-scheme="light"] {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-md21-color-scheme="light"]),
	:root:not([data-md21-color-scheme="light"]) body {
		--wp--preset--color--background: #111311;
		--wp--preset--color--surface: #1b1f1c;
		--wp--preset--color--text: #eef2ee;
		--wp--preset--color--muted: #a9b4ad;
		--wp--preset--color--border: #6d766e;
		--wp--preset--color--accent: #8bc7ad;
		color-scheme: dark;
	}
}

:root[data-md21-color-scheme="dark"],
:root[data-md21-color-scheme="dark"] body {
	--wp--preset--color--background: #111311;
	--wp--preset--color--surface: #1b1f1c;
	--wp--preset--color--text: #eef2ee;
	--wp--preset--color--muted: #a9b4ad;
	--wp--preset--color--border: #6d766e;
	--wp--preset--color--accent: #8bc7ad;
	color-scheme: dark;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.md21-main {
	flex: 1;
	padding-block: var(--wp--preset--spacing--large);
}

.md21-site-header,
.md21-site-footer {
	font-family: var(--wp--preset--font-family--system-sans);
}

.md21-site-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--small);
}

.md21-site-header__inner,
.md21-site-footer__inner {
	gap: var(--wp--preset--spacing--medium);
}

.md21-site-header__controls {
	gap: var(--wp--preset--spacing--medium);
}

.md21-site-header .wp-block-site-title,
.md21-site-footer .wp-block-site-title {
	margin: 0;
}

.md21-site-header .wp-block-site-title a,
.md21-site-footer .wp-block-site-title a,
.md21-primary-nav a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.md21-primary-nav a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-appearance {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--small);
	gap: 0;
	line-height: 1.2;
}

.md21-appearance__label {
	color: var(--wp--preset--color--muted);
	padding-inline: var(--wp--preset--spacing--x-small);
}

.md21-appearance__option {
	appearance: none;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	font: inherit;
	min-height: 2rem;
	padding: 0 var(--wp--preset--spacing--x-small);
}

.md21-appearance__option:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-appearance__option[aria-pressed="true"] {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--background);
	font-weight: 700;
}

.md21-site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--medium);
}

.md21-site-footer .wp-block-site-title a {
	color: var(--wp--preset--color--text);
}

.md21-site-footer p {
	margin: 0;
}

.md21-page-header {
	margin-bottom: var(--wp--preset--spacing--large);
}

.md21-page-header > * {
	max-width: var(--wp--style--global--content-size);
}

.md21-standard-page-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: var(--wp--preset--spacing--large);
	padding-bottom: var(--wp--preset--spacing--medium);
}

.md21-standard-page-header .wp-block-post-title {
	margin-block: 0;
}

.md21-standard-page-header + .md21-post-content {
	max-width: var(--wp--style--global--content-size);
	width: 100%;
}

.md21-standard-page-header + .md21-post-content > p:first-child {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.md21-page-header .wp-block-search {
	margin-top: var(--wp--preset--spacing--medium);
}

.md21-page-kicker,
.md21-article-meta,
.md21-article-footer,
.md21-post-nav,
.md21-copyright {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
}

.md21-article-list {
	display: grid;
	gap: 0;
	list-style: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: var(--wp--style--global--wide-size);
	padding: 0;
	width: 100%;
}

.md21-article-list > li {
	margin: 0;
}

.md21-article-card {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-left: 0;
	margin-right: auto;
	max-width: var(--wp--style--global--content-size);
	padding-block: calc(var(--wp--preset--spacing--large) * 0.9);
}

.md21-article-card:first-child {
	border-top-color: var(--wp--preset--color--text);
}

.md21-article-card .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--x-small);
}

.md21-article-card .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.md21-article-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-article-card .wp-block-post-date {
	margin-block: 0 var(--wp--preset--spacing--small);
}

.md21-article-card .wp-block-post-excerpt {
	max-width: var(--wp--style--global--content-size);
}

.md21-article-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	margin: 0;
	overflow: hidden;
}

.md21-article-card .wp-block-post-excerpt__more-link {
	display: none;
}

.md21-blog-index {
	max-width: min(100%, 760px);
	width: 100%;
}

.md21-blog-index .md21-page-header,
.md21-blog-index .md21-blog-query,
.md21-blog-index .md21-article-list,
.md21-blog-index .md21-article-card,
.md21-blog-index .md21-pagination,
.md21-blog-index .md21-empty-state {
	max-width: 100%;
	width: 100%;
}

.md21-blog-index .md21-page-header > *,
.md21-blog-index .md21-article-card .wp-block-post-excerpt {
	max-width: 100%;
}

.md21-blog-index .md21-article-card {
	margin-inline: 0;
}

.md21-blog-index .md21-pagination {
	box-sizing: border-box;
	justify-content: space-between;
}

.md21-front-page {
	font-family: var(--wp--preset--font-family--system-serif);
}

.md21-front-page .md21-front-intro,
.md21-front-page .md21-front-section {
	max-width: var(--wp--style--global--content-size);
	width: 100%;
}

.md21-front-intro {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: var(--wp--preset--spacing--medium);
}

.md21-front-intro .md21-post-content > :first-child,
.md21-front-section .wp-block-heading {
	margin-block-start: 0;
}

.md21-front-intro .md21-post-content > :first-child:is(h1, h2, h3) {
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 650;
	line-height: 1.12;
}

.md21-front-section {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--medium);
}

.md21-front-section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.md21-front-post-list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.md21-front-post-list > li,
.md21-front-post {
	margin: 0;
}

.md21-front-post {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--medium);
}

.md21-front-post:first-child {
	border-top-color: var(--wp--preset--color--text);
}

.md21-front-post .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--2-x-small);
}

.md21-front-post .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.md21-front-post .wp-block-post-title a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-front-post .wp-block-post-date {
	margin-block: 0 var(--wp--preset--spacing--x-small);
}

.md21-front-post .wp-block-post-excerpt__excerpt,
.md21-section-link,
.md21-directory-links p {
	margin: 0;
}

.md21-front-post .wp-block-post-excerpt__more-link {
	display: none;
}

.md21-section-link,
.md21-directory-links a {
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-section-link {
	margin-top: var(--wp--preset--spacing--small);
}

.md21-directory-links p + p {
	margin-top: var(--wp--preset--spacing--small);
}

.md21-article-header {
	margin-bottom: var(--wp--preset--spacing--large);
}

.md21-article-title {
	margin-block: 0 var(--wp--preset--spacing--medium);
}

.md21-post-content {
	font-family: var(--wp--preset--font-family--system-serif);
}

.md21-post-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.md21-post-content > .alignfull {
	max-width: none;
	width: auto;
}

.md21-post-content :where(p, ul, ol) {
	margin-block: 0 var(--wp--preset--spacing--medium);
}

.md21-post-content :where(h2, h3, h4, h5, h6) {
	margin-block: var(--wp--preset--spacing--large) var(--wp--preset--spacing--small);
}

.md21-post-content :where(ul, ol) {
	padding-inline-start: 1.35em;
}

.md21-post-content :where(p:empty) {
	display: none;
}

.md21-post-content li + li {
	margin-block-start: var(--wp--preset--spacing--2-x-small);
}

.md21-post-content :where(code, kbd) {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.2rem;
	font-family: var(--wp--preset--font-family--system-mono);
	font-size: 0.9em;
	padding: 0.05em 0.28em;
}

.md21-post-content pre {
	overflow-x: auto;
}

.md21-post-content blockquote {
	margin-inline: 0;
}

.md21-post-content figure {
	margin-block: var(--wp--preset--spacing--large);
}

.md21-post-content img {
	height: auto;
	max-width: 100%;
}

.md21-post-content figcaption {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin-top: var(--wp--preset--spacing--x-small);
}

.md21-post-nav {
	border-top: 1px solid var(--wp--preset--color--border);
	gap: var(--wp--preset--spacing--medium);
	margin-top: var(--wp--preset--spacing--large);
	padding-top: var(--wp--preset--spacing--medium);
}

.md21-post-nav a {
	color: var(--wp--preset--color--text);
	display: inline-block;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.md21-post-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.md21-pagination {
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--meta);
	gap: var(--wp--preset--spacing--small);
	margin-top: var(--wp--preset--spacing--medium);
	padding-top: var(--wp--preset--spacing--medium);
}

.md21-pagination a,
.md21-pagination .page-numbers {
	color: var(--wp--preset--color--text);
}

.md21-pagination .current {
	color: var(--wp--preset--color--muted);
}

.md21-search-form {
	font-family: var(--wp--preset--font-family--system-sans);
	max-width: var(--wp--style--global--content-size);
}

.md21-search-form .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--x-small);
}

.md21-search-form .wp-block-search__input {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	color: var(--wp--preset--color--text);
	font: inherit;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--small);
}

.md21-search-form .wp-block-search__button {
	background: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--text);
	color: var(--wp--preset--color--background);
	margin-left: 0;
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--medium);
}

.md21-empty-state {
	border-top: 1px solid var(--wp--preset--color--text);
	max-width: var(--wp--style--global--content-size);
	padding-top: var(--wp--preset--spacing--large);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--system-sans);
	outline: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--text) !important;
	padding: var(--wp--preset--spacing--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--text) !important;
}

.wp-block-navigation__responsive-container .md21-appearance--navigation {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--small);
}

.wp-block-navigation__responsive-container.is-menu-open .md21-appearance {
	display: inline-flex;
	margin-top: var(--wp--preset--spacing--medium);
}

@media (max-width: 599px) {
	.md21-site-header__inner {
		gap: var(--wp--preset--spacing--small);
	}

	.md21-site-header__controls {
		gap: var(--wp--preset--spacing--small);
	}

	.md21-site-header__controls > .md21-appearance {
		display: none;
	}

	.md21-main {
		padding-block: var(--wp--preset--spacing--large);
	}

	.md21-site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.md21-post-nav .post-navigation-link-next {
		margin-left: 0;
		text-align: left;
	}

	.md21-search-form .wp-block-search__inside-wrapper {
		flex-direction: column;
	}

	.md21-search-form .wp-block-search__button,
	.md21-search-form .wp-block-search__input {
		width: 100%;
	}
}