/*
Theme Name: Datenschauer
Theme URI: https://datenschauer.de
Description: Child theme of Twenty Twenty-Five for datenschauer.de. Org-mode aesthetics on a Modus Operandi (light) / Modus Vivendi (dark) palette — Literata for prose, Fira Code for structure. Code blocks are dark so the htmlized Modus Vivendi colors exported by org2blog render as they look in Emacs.
Author: Stefan Böhringer
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: datenschauer
*/

/* ------------------------------------------------------------------ */
/* Palette plumbing — light = Modus Operandi, dark = Modus Vivendi    */
/* ------------------------------------------------------------------ */

:root {
	color-scheme: light dark;
	/* org timestamps */
	--ds-date: #005e8b;
	/* code blocks stay dark in BOTH modes: org2blog exports htmlize
	   spans with Modus Vivendi colors, which need a dark background */
	--ds-code-bg: #1e1e1e;
	--ds-code-fg: #ffffff;
	--ds-code-border: #444444;
	--ds-code-label: #8d8d8d;
	/* inline <code> */
	--ds-inline-code: #8f0075;
	--ds-inline-code-bg: #f0f0f0;
	/* Emacs modeline footer */
	--ds-ml-bg: #c8c8c8;
	--ds-ml-fg: #000000;
	--ds-ml-border: #757575;
	--ds-quote: #595959;
	--ds-border: #c4c4c4;
	--ds-select: #bdbdbd;
}

@media (prefers-color-scheme: dark) {
	html body {
		/* flip the theme.json presets to Modus Vivendi */
		--wp--preset--color--base: #000000;
		--wp--preset--color--contrast: #ffffff;
		--wp--preset--color--accent-1: #79a8ff; /* blue-warmer */
		--wp--preset--color--accent-2: #b6a0ff; /* magenta-cooler */
		--wp--preset--color--accent-3: #44bc44; /* green */
		--wp--preset--color--accent-4: #989898; /* dim fg */
		--wp--preset--color--accent-5: #1e1e1e; /* bg-dim */

		--ds-date: #00bcff;
		--ds-code-border: #646464;
		--ds-inline-code: #f78fe7;
		--ds-inline-code-bg: #1e1e1e;
		--ds-ml-bg: #2a2a2a;
		--ds-ml-fg: #ffffff;
		--ds-ml-border: #646464;
		--ds-quote: #989898;
		--ds-border: #646464;
		--ds-select: #5a5a5a;
	}
}

::selection {
	background: var(--ds-select);
}

/* ------------------------------------------------------------------ */
/* Site header — buffer name with a blinking Emacs cursor             */
/* ------------------------------------------------------------------ */

.wp-block-site-title a {
	text-decoration: none;
}

.wp-block-site-title a::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 1.05em;
	margin-left: 0.12em;
	background: currentColor;
	vertical-align: text-bottom;
	/* blink-cursor-mode: 10 blinks, then steady — like Emacs */
	animation: ds-blink 1.06s steps(1) 10;
}

@keyframes ds-blink {
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-site-title a::after { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Post titles & headings — org outline                               */
/* ------------------------------------------------------------------ */

.single .wp-block-post-title::before {
	content: "#+title:";
	display: block;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.42em;
	font-weight: 400;
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.4em;
}

.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before {
	font-family: var(--wp--preset--font-family--fira-code);
	font-weight: 600;
}

.entry-content h2::before { content: "** ";   color: var(--wp--preset--color--accent-1); }
.entry-content h3::before { content: "*** ";  color: var(--wp--preset--color--accent-2); }
.entry-content h4::before { content: "**** "; color: var(--wp--preset--color--accent-3); }

/* ------------------------------------------------------------------ */
/* Post meta — org timestamps and :tags:                              */
/* ------------------------------------------------------------------ */

.wp-block-post-date {
	color: var(--ds-date);
}

.wp-block-post-date::before { content: "<"; }
.wp-block-post-date::after  { content: ">"; }

.wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-terms .wp-block-post-terms__separator {
	font-size: 0;
}

.wp-block-post-terms a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	margin-right: 0.35em;
}

.wp-block-post-terms a::before,
.wp-block-post-terms a::after {
	content: ":";
}

.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* "Weiterlesen" on the blog index — looks like a raw org link */
.wp-block-post-excerpt__more-link {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.85em;
	text-decoration: none;
}

.wp-block-post-excerpt__more-link::before { content: "[["; }
.wp-block-post-excerpt__more-link::after  { content: "]]"; }

.wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Source blocks — a dark Emacs window inside the page                */
/* (org2blog/htmlize exports Modus Vivendi colors as inline spans)    */
/* ------------------------------------------------------------------ */

.org-src-container {
	margin: 2em 0;
}

.org-src-container pre.src,
.entry-content pre,
.wp-block-code {
	background: var(--ds-code-bg);
	color: var(--ds-code-fg);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.875rem;
	line-height: 1.55;
	border: 1px solid var(--ds-code-border);
	border-radius: 0;
	padding: 0.9em 1.25em;
	overflow-x: auto;
}

.org-src-container pre.src::before,
.wp-block-code::before {
	content: "#+begin_src";
	display: block;
	color: var(--ds-code-label);
	font-size: 0.8em;
	margin-bottom: 0.8em;
	user-select: none;
}

.org-src-container pre.src::after,
.wp-block-code::after {
	content: "#+end_src";
	display: block;
	color: var(--ds-code-label);
	font-size: 0.8em;
	margin-top: 0.8em;
	user-select: none;
}

pre.src-emacs-lisp::before { content: "#+begin_src emacs-lisp" !important; }
pre.src-python::before     { content: "#+begin_src python" !important; }
pre.src-sh::before,
pre.src-bash::before       { content: "#+begin_src sh" !important; }
pre.src-sql::before        { content: "#+begin_src sql" !important; }
pre.src-js::before         { content: "#+begin_src js" !important; }
pre.src-typescript::before { content: "#+begin_src typescript" !important; }
pre.src-java::before       { content: "#+begin_src java" !important; }
pre.src-R::before          { content: "#+begin_src R" !important; }
pre.src-yaml::before       { content: "#+begin_src yaml" !important; }
pre.src-json::before       { content: "#+begin_src json" !important; }
pre.src-conf::before       { content: "#+begin_src conf" !important; }

label.org-src-name {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.8em;
	color: var(--wp--preset--color--accent-4);
}

/* inline code keeps the light-theme prose-code look */
.entry-content :not(pre) > code {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.85em;
	color: var(--ds-inline-code);
	background: var(--ds-inline-code-bg);
	border: 1px solid var(--ds-border);
	border-radius: 0;
	padding: 0.05em 0.35em;
}

/* ------------------------------------------------------------------ */
/* Quotes, rules, tables                                              */
/* ------------------------------------------------------------------ */

.entry-content blockquote {
	border-left: 3px solid var(--wp--preset--color--accent-2);
	margin-left: 0;
	padding-left: 1.25em;
	font-style: italic;
	color: var(--ds-quote);
}

.entry-content blockquote::before {
	content: "#+begin_quote";
	display: block;
	font-family: var(--wp--preset--font-family--fira-code);
	font-style: normal;
	font-size: 0.75em;
	color: var(--ds-code-label);
	margin-bottom: 0.6em;
}

.entry-content blockquote::after {
	content: "#+end_quote";
	display: block;
	font-family: var(--wp--preset--font-family--fira-code);
	font-style: normal;
	font-size: 0.75em;
	color: var(--ds-code-label);
	margin-top: 0.6em;
}

.entry-content hr {
	border: none;
	border-top: 1px dashed var(--ds-border);
}

/* booktabs-style tables for data posts */
.entry-content table {
	border-collapse: collapse;
	margin: 2em auto;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
}

.entry-content table th {
	border-top: 2px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	padding: 0.4em 0.9em;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.85em;
	font-weight: 600;
}

.entry-content table td {
	padding: 0.35em 0.9em;
	border: none;
}

.entry-content table tr:last-child td {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

.entry-content table caption {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.8em;
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.5em;
}

figcaption {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.8rem !important;
	color: var(--wp--preset--color--accent-4);
}

/* ------------------------------------------------------------------ */
/* Links, buttons, forms — no rounded corners in Emacs                */
/* ------------------------------------------------------------------ */

.entry-content a:hover {
	text-decoration-thickness: 2px;
}

.wp-block-button__link,
.wp-block-search__button,
.wp-block-search__input {
	border-radius: 0 !important;
}

.wp-block-search__input {
	font-family: var(--wp--preset--font-family--fira-code);
	border: 1px solid var(--ds-border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------ */
/* Footer — the modeline                                              */
/* ------------------------------------------------------------------ */

.ds-modeline {
	background: var(--ds-ml-bg);
	color: var(--ds-ml-fg);
	border-top: 1px solid var(--ds-ml-border);
	border-bottom: 1px solid var(--ds-ml-border);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.85rem;
	padding: 0.3em 1.25rem;
}

.ds-modeline p {
	margin: 0;
	white-space: pre;
}

.ds-echo-area {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent-4);
	padding: 0.7em 1.25rem 1.6em;
}

.ds-echo-area p {
	margin: 0;
}

.ds-echo-area a {
	color: inherit;
}