/*!
Theme Name: Write More Things
Theme URI: http://github.com/jeremyfelt/writemore
Author: Jeremy Felt
Author URI: https://jeremyfelt.com
Description: A theme to encourage more writing.
Version: 3.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: writemore

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what
you've learned with others.
*/

@font-face {
	font-family: inter;
	font-display: fallback;
	font-weight: 300 400 700 900;
	src: url(./fonts/Inter-VariableFont_slnt,wght.woff2) format("woff2");
}

@font-face {
	font-family: monaspace;
	font-display: fallback;
	font-weight: 300;
	src: url(./fonts/MonaspaceArgon-Regular.woff) format("woff");
}

:root {
	--sans-serif: inter, sans-serif;
	--monospace: monaspace, monospace;

	--font-size-small: 0.8rem;
	--font-size-base: 1rem;
	--font-size-default: 1.125rem;
	--font-size-content-heading: 1.5rem;

	--content-width: 640px;
	--content-width-wide: 1024px;

	--spacing-base: 1rem;
	--spacing-default: 3rem;
	--spacing-large: 6rem;

	--color-background: #fbfbfb;
	--color-foreground: #222;
	--color-faded: #666;
	--color-content-background: #f9f9f9;
	--color-code-background: #e3e3e3;
	--color-blockquote-background: #f2f7fb;
	--color-border-default: #ddd;
	--color-blockquote-border: #a6c2e7;
	--color-link: #2271b1;
	--color-context-reply: rgb(127, 255, 212);
}

@media (prefers-color-scheme: dark) {

	:root {
		--color-background: #222;
		--color-foreground: #f6f6f6;
		--color-faded: #a8a8a8;
		--color-content-background: #343434;
		--color-code-background: #434343;
		--color-blockquote-background: var(--color-background);
		--color-border-default: #888;
		--color-link: #00c2e1;
	}
}

@media screen and (max-width: 700px) {

	body {
		--content-width: 100%;
		--content-width-wide: 100%;
	}
}

html,
body {
	height: 100%;
}

body {
	background: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--sans-serif);
	line-height: 1.55;
	font-size: var(--font-size-default);
	margin: 0;
}

header {
	width: calc(100% - var(--spacing-default));
	max-width: var(--content-width-wide);
}

section {
	max-width: var(--content-width);
}

header,
section {
	margin: 0 auto;
}

main {
	max-width: calc(100% - var(--spacing-default));
	min-height: calc(100vh - var(--spacing-large) - 2rem - 325px);
	margin-left: auto;
	margin-right: auto;
}

article {
	margin-top: var(--spacing-large);
}

section article {
	margin-top: var(--spacing-base);
}

main > header {
	height: 175px;
	text-align: right;
}

article header {
	width: 100%;
	position: relative;
}

a {
	color: var(--color-link);
}

main ~ footer a {
	color: var(--color-content-background);
}

article header a {
	color: var(--color-foreground);
}

a:hover {
	color: var(--color-foreground);
}

article header a:hover {
	color: var(--color-link);
}

article header h1 {
	margin-bottom: 0;
	border-top: 1px solid var(--color-border-default);
	padding-top: var(--spacing-base);
}

article footer {
	max-width: var(--content-width);
	margin: var(--spacing-default) auto 0;
	width: 100%;
}

footer > * {
	max-width: 100%;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	list-style: none;
	margin: var(--spacing-base) 0 0;
	padding: 0;
}

nav ul li {
	padding: 0;
	margin: 0 var(--spacing-base) 0 0;
	font-weight: 700;
}

h2 {
	font-size: var(--font-size-content-heading);
	margin-top: var(--spacing-default);
	margin-bottom: var(--spacing-base);
	font-weight: 900;
}

h3 {
	margin-top: var(--spacing-base);
	margin-bottom: var(--spacing-base);
}

pre,
code {
	font-family: var(--monospace);
	font-size: 15px;
	background: var(--color-code-background);
	line-height: 1.4;
	padding: 0.25rem 0.25rem 0.15rem;
}

pre {
	background: var(--color-background);
	border-left: 6px solid var(--color-code-background);
	white-space: break-spaces;
	padding: var(--spacing-base) calc(var(--spacing-default) - 6px);
	margin: var(--spacing-default) 0;
}

cite {
	font-style: initial;
	font-weight: 600;
}

blockquote {
	font-size: 1rem;
	font-style: normal;
	background: var(--color-blockquote-background);
	border-left: 1.1rem solid var(--color-blockquote-border);
	border-radius: 5px;
	padding: var(--spacing-base) calc(var(--spacing-default) - 1.1rem) var(--spacing-base);
	margin: var(--spacing-default) 0;

	p {
		margin-bottom: 0;
	}

	p:first-of-type {
		margin-top: 0;
	}

	cite {
		display: inline-block;
		margin-top: var(--spacing-base);
	}
}

@media (prefers-color-scheme: dark) {

	blockquote {
		border: 2px solid var(--color-blockquote-border);
		border-left-width: 1.1rem;
	}
}

@media screen and (max-width: 700px) {

	blockquote {
		border-left-width: calc(var(--spacing-base) / 2);
		padding-left: var(--spacing-base);
		padding-right: var(--spacing-base);
	}
}

img {
	width: 100%;
	height: auto;
}

input[type="search"] {
	font-size: 1.5rem;
	padding: 0.5rem;
	font-weight: 300;
	line-height: 1;
}

button {
	padding: 0.875rem;
	font-size: var(--font-size-base);
	margin-left: 0.35rem;
	vertical-align: top;
	background: var(--color-foreground);
	color: var(--color-background);
	border: 1px solid var(--color-foreground);
	width: var(--spacing-large);
}

button:hover {
	background: var(--color-background);
	color: var(--color-foreground);
}

main ~ footer {
	height: 175px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: end;
	margin: var(--spacing-default) auto 0;
	padding-top: var(--spacing-base);
	padding-bottom: var(--spacing-default);
	font-size: var(--font-size-base);
	background: var(--color-link);
	color: var(--color-content-background);
}

main ~ footer div {
	margin-bottom: var(--spacing-base);
}

.day,
time {
	font-size: 0.9rem;
}

iframe {
	max-width: 100%;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--color-border-default);
	clip: auto !important;
	clip-path: none;
	color: var(--color-foreground);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.has-text-align-center {
	text-align: center;
}

.site-branding h1,
.site-branding p {
	font-size: var(--font-size-content-heading);
	font-weight: 700;
	margin-top: var(--spacing-default);
	margin-bottom: var(--spacing-base);
}

.entry-content > * {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

.entry-content > figure {
	margin-top: var(--spacing-default);
	margin-bottom: var(--spacing-default);
}

.entry-content .size-large {
	max-width: var(--content-width-wide);
	height: auto;
}

.wp-element-caption {
	font-style: italic;
	font-size: 0.9rem;
}

.wp-block-verse {
	font-style: italic;
	font-family: var(--sans-serif);
}

.published-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--content-width-wide);
	margin: 0 auto;
	color: var(--color-foreground);
}

.author-bio {
	display: flex;
	width: var(--content-width);
	max-width: 100%;
	margin: var(--spacing-base) auto 0 auto;
	padding-top: var(--spacing-default);
	border-top: 1px solid var(--color-border-default);
	justify-content: space-evenly;
}

.author-bio img {
	width: 150px;
	height: 100%;
}

.author-bio-content {
	padding: 0 var(--spacing-base);
	flex-basis: fit-content;
}

.author-bio-content p {
	margin-top: 0;
}

.reaction {
	display: flex;
}

.reaction img {
	width: 64px;
	height: 64px;
}

.reaction span {
	padding-left: var(--spacing-base);
	width: 100%;
}

.comment {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: 1px solid var(--color-border-default);
	padding: var(--spacing-base);
	margin-top: var(--spacing-base);
}

.comment img {
	width: 64px;
	height: 64px;
	margin-right: var(--spacing-base);
}

.comment > span {
	display: flex;
}

.comment-content {
	width: 100%;
}

.reaction time,
.comment time {
	font-size: var(--spacing-base);
}

.comment-respond {
	margin-top: var(--spacing-default);
	border-top: 1px solid var(--color-border-default);
	width: 100%;
}

.comment-form label {
	display: block;
	font-weight: 600;
}

.comment-form input,
.comment-form textarea {
	font-size: var(--font-size-base);
	line-height: 1.5;
	padding: var(--spacing-base);
	font-family: var(--sans-serif);
	width: calc(100% - (var(--spacing-base) * 2));
}

.comment-form input {
	padding: 0.5rem var(--spacing-base);
}

.comment-form .submit {
	margin: var(--spacing-base) 0;
	width: initial;
	background: var(--color-foreground);
	color: var(--color-background);
	border: 1px solid var(--color-foreground);
	padding-left: var(--spacing-default);
	padding-right: var(--spacing-default);
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--color-background);
	color: var(--color-foreground);
	border: 1px solid var(--color-foreground);
}

.edit-link {
	margin-right: var(--spacing-base);
}

.multiple .published-wrapper {
	margin-bottom: 0;
}

.type-page > * {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
}

.type-page > section {
	max-width: var(--content-width-wide);
}

.multiple .type-like,
.multiple .type-shortnote,
.multiple article.type-post {
	display: grid;
	grid-template-columns: [date] calc((var(--content-width-wide) - var(--content-width))/2) [content] var(--content-width);
	grid-template-rows: [first] min-content [second] auto;
	width: var(--content-width-wide);
	margin-left: auto;
	margin-right: auto;
}

.multiple .type-like,
.multiple .type-shortnote {
	grid-template-rows: [first] min-content;
}

.multiple .type-like {
	margin-top: var(--spacing-default);
}

.multiple .type-shortnote > header,
.multiple .type-post > header {
	grid-column: content;
	grid-row: first;
}

.multiple .type-shortnote > header h1,
.multiple .type-post > header h1 {
	margin-top: 0;
	border-top: 0;
	font-size: 1.4rem;
	padding-top: 0;
	align-self: start;
}

.multiple .type-like > p,
.multiple .type-shortnote > p,
.multiple .type-post > p {
	grid-column: date;
	grid-row: first;
	margin: 0;
	align-self: start;
	line-height: 2.2;
}

.multiple .type-like > p,
.multiple .type-shortnote > p {
	line-height: 1.1;
}

.multiple .type-like > .entry-content,
.multiple .type-shortnote > .entry-content,
.multiple .type-post > .entry-content {
	grid-column: content;
	grid-row: second;
	justify-self: start;
}

.multiple .type-like > .entry-content,
.multiple .type-shortnote > .entry-content {
	grid-row: first;
}

@media screen and (max-width: 1120px) {

	.multiple .type-like,
	.multiple .type-shortnote,
	.multiple article.type-post {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.multiple .type-shortnote {
		margin-top: var(--spacing-large);
	}

	.multiple .type-like > .entry-content,
	.multiple .type-shortnote > .entry-content,
	.multiple article.post > .entry-content {
		margin-top: var(--spacing-base);
	}

	.multiple article.type-post > p {
		order: -1;
	}

	form input,
	form button {
		width: 100%;
	}

	form button {
		margin-top: var(--spacing-base);
		margin-left: 0;
	}
}

.site-footer section {
	max-width: calc(100% - var(--spacing-default));
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.site-footer section > * {
	max-width: var(--content-width);
}

.multiple .type-shortnote > .entry-content > * {
	margin-left: 0;
	margin-right: 0;
}

.multiple .type-like .entry-content > p {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

.multiple .type-shortnote .entry-content > p:first-of-type {
	margin-top: 0;
}

.multiple .type-shortnote footer {
	width: var(--content-width-wide);
	border-top: 1px solid var(--color-border-default);
	margin-bottom: 0;
}

.shortnotes-reply-to {
	max-width: var(--content-width);
	margin: var(--spacing-base) auto var(--spacing-default);
	font-style: italic;
}

.multiple .type-shortnote .shortnotes-reply-to {
	padding-top: 0;
	margin-bottom: var(--spacing-default);
}

.type-like .more-likes ul,
.type-shortnote .more-notes ul {
	padding-left: 0;
	margin: 0;
}

.type-post .other-weeks li,
.type-like .more-likes li,
.type-shortnote .more-notes li {
	list-style: none;
	margin-bottom: 0.5rem;
	font-size: var(--font-size-base);
}

.type-like > p time,
.type-shortnote > p time,
.multiple .type-post > p time {
	font-size: var(--font-size-small);
	line-height: 1.55;
}

.type-like .like-of-domain {
	font-size: var(--font-size-small);
	padding-left: 0.5rem;
	color: var(--color-faded);
}

.type-like .more-likes li time,
.type-shortnote .more-notes li time {
	font-size: var(--font-size-base);
}

.more-likes,
.more-notes {
	margin-top: var(--spacing-base);
}

.other-weeks {
	margin-top: var(--spacing-large);
	border-top: 1px solid var(--color-border-default);

	~ .author-bio {
		border-top: 0;
	}
}

.more-likes h2,
.more-notes h2 {
	margin-top: 0;
	border-top: 1px solid var(--color-border-default);
	padding-top: var(--spacing-base);
}

.wp-block-latest-posts .type-post,
.weekly-preview {
	margin-bottom: var(--spacing-base);
}

.wp-block-latest-posts .type-shortnote:first-of-type {
	margin-top: var(--spacing-base);
}

ul.wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
}

.posts-navigation {
	max-width: var(--content-width);
	margin: var(--spacing-large) auto var(--spacing-default);
}