/*
 * The look of posts and pages, shared by the front end and the block editor.
 * The front end enqueues it after style.css, and add_editor_style() loads it
 * into the editor canvas, where WordPress puts every selector under
 * .editor-styles-wrapper. So the rules here must work in both places: the post
 * content is .entry-content on the front end and .is-root-container in the
 * editor.
 */

/**
 * Custom properties
 *
 * The colours and the font that the rules below, in style.css and in the other
 * stylesheets share, in one place so that a colour scheme can switch them. In
 * the editor canvas, :root is the canvas document, so the properties apply
 * there too.
 *
 * The light set is the default. The dark set below it applies when the
 * visitor's system asks for a dark scheme, and only on screens: print always
 * stays light. There is no toggle and nothing is stored (docs/adr/0016).
 * The terminal styles and the callout accents set their own colours further
 * down and are not part of the dark set.
 */

:root {
	color-scheme: light;
	--font-mono: Inconsolata, Consolas, "Courier 10 Pitch", Courier, monospace;

	/* Page and text */
	--color-page: #1a1a1a;
	--color-bg: #fff;
	--color-text: #1a1a1a;
	--color-on-text: #fff;
	--color-muted: #686868;
	--color-border: #d1d1d1;
	--color-link: #007acc;
	--color-on-link: #fff;

	/* Form fields, inline code, the skip link */
	--color-field-bg: #f7f7f7;
	--color-field-border: #d1d1d1;
	--color-code-bg: #d1d1d1;
	--color-skip-bg: #f1f1f1;
	--color-skip-fg: #21759b;

	/* Preformatted text, callouts and tables */
	--pre-bg: #ffffcc;
	--callout-bg: #f2f2f2;
	--table-border: black;
	--table-head-bg: #595959;
	--table-head-fg: white;
	--table-stripe-bg: #f2f2f2;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--color-page: #0d0d0d;
		--color-bg: #1a1a1a;
		--color-text: #e8e8e8;
		--color-on-text: #1a1a1a;
		--color-muted: #a9a9a9;
		--color-border: #4a4a4a;
		--color-link: #5cb8ff;
		--color-on-link: #0d0d0d;
		--color-field-bg: #262626;
		--color-field-border: #8c8c8c;
		--color-code-bg: #333;
		--color-skip-bg: #2b2b2b;
		--color-skip-fg: #7cc7ff;
		--pre-bg: #2a2a1c;
		--callout-bg: #262626;
		--table-border: #6b6b6b;
		--table-head-bg: #3f3f3f;
		--table-head-fg: #fff;
		--table-stripe-bg: #242424;
	}

	/* Screenshots stay as they are; a thin border keeps white dialogs from bleeding into the page. */
	:is(.entry-content, .is-root-container) img {
		outline: 1px solid var(--color-border);
		outline-offset: -1px;
	}
}

/**
 * Preformatted text
 */

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

pre {
	background: var(--pre-bg);
	border: 1px solid var(--color-border);
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.625em;
	max-width: 100%;
	overflow: auto;
	padding: 0.75em 1.625em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/**
 * Posts and pages
 *
 * Kept after the rules of style.css so that they still win, as they did when
 * they were its last section.
 */

/* The external-link marker is generated in functions.php, adcslabor_ng_external_link_css(). */

.entry-title {
	font-size: 1.8em;
}

.entry-content {
	font-size: 1em;
}

:is(.entry-content, .is-root-container) h2 {
	font-size: 1.6em;
}

:is(.entry-content, .is-root-container) h3 {
	font-size: 1.4em;
}

:is(.entry-content, .is-root-container) h4 {
	font-size: 1.2em;
}

:is(.entry-content, .is-root-container) ul,
:is(.entry-content, .is-root-container) ol {
	list-style-position: outside;
	padding-left: 1.5em;
}

:is(.entry-content, .is-root-container) table {
	border: 1px solid var(--table-border);
}

:is(.entry-content, .is-root-container) th,
:is(.entry-content, .is-root-container) td {
	vertical-align: top;
	text-align: left;
}

:is(.entry-content, .is-root-container) th {
	background-color: var(--table-head-bg);
	border: 1px solid var(--table-head-bg);
	color: var(--table-head-fg);
	font-weight: bold;
}

:is(.entry-content, .is-root-container) tr:nth-child(even) {
	background-color: var(--table-stripe-bg);
}

/* Terminal styles for preformatted text; the box itself is the pre rule in 3.0. */
.is-style-vscodedark,
.is-style-vscodelight,
.is-style-powershell,
.is-style-ubuntu-terminal,
.is-style-cmd {
	background: var(--terminal-bg);
	color: var(--terminal-fg);
}

.is-style-vscodedark {
	--terminal-bg: #4c4c4c;
	--terminal-fg: #569cd6;
}

.is-style-vscodelight {
	--terminal-bg: #ffffff;
	--terminal-fg: #800000;
	--terminal-border: #4c4c4c;
	border: 2px solid var(--terminal-border);
}

.is-style-powershell {
	--terminal-bg: #012456;
	--terminal-fg: #ffffff;
}

.is-style-ubuntu-terminal {
	--terminal-bg: #481036;
	--terminal-fg: #ffffff;
}

.is-style-cmd {
	--terminal-bg: #000000;
	--terminal-fg: #ffffff;
}

/* Callouts for paragraphs; they differ in the accent colour only. */
.is-style-hint,
.is-style-introduction,
.is-style-warning,
.is-style-term-definition {
	background: var(--callout-bg);
	border-left: 6px solid var(--callout-accent);
	padding: 0.75em;
}

.is-style-hint {
	--callout-accent: #00b0f0;
}

.is-style-introduction {
	--callout-accent: #70ad47;
}

.is-style-warning {
	--callout-accent: #ff0000;
}

.is-style-term-definition {
	--callout-accent: #ffd966;
}

.is-style-table-eventlist th:nth-child(1),
.is-style-table-eventlist td:nth-child(1) {
	width: 50px;
}

.is-style-table-eventlist th:nth-child(2),
.is-style-table-eventlist td:nth-child(2) {
	width: 120px;
}

.is-style-table-eventdetails td:nth-child(1) {
	background-color: var(--table-head-bg);
	color: var(--table-head-fg);
	font-weight: bold;
}

@media print {
	body,
	blockquote cite,
	blockquote small,
	pre,
	.entry-content h4,
	.entry-content h5,
	.entry-content h6,
	.entry-summary h4,
	.entry-summary h5,
	.entry-summary h6,
	.comment-content h4,
	.comment-content h5,
	.comment-content h6,
	.entry-content .author-title,
	.wp-block-preformatted {
		font-size: 10pt;
	}

	.entry-content {
		margin-top: 1.5em;
	}

	.comments-area {
		display: none;
	}
}

/*
 * The post's author, date and categories sit in one line under the title (and
 * in the footer of the lists) on wide screens.
 */
@media screen and (min-width: 61.5625em) {
	body:not(.search-results) article:not(.type-page) .entry-footer,
	body:not(.search-results) article:not(.type-page) .entry-meta,
	body:not(.search-results) article:not(.type-page) .entry-content {
		margin-top: 1.5em;
	}

	body:not(.search-results) article:not(.type-page) .entry-footer .avatar,
	body:not(.search-results) article:not(.type-page) .entry-meta .avatar {
		display: inline;
		height: auto;
		margin: 0 0.3em 1em 0;
		width: 27px;
	}
}