/**
 * THENATHE Terminal — markdown.css
 *
 * Shows Markdown / Discord-style syntax around normal Gutenberg formatting,
 * so you write with the regular toolbar and the page shows the markers:
 *
 *   Toolbar format         Element      Rendered as
 *   ---------------------  -----------  -------------------
 *   Heading block          h1–h6        # Heading … ###### Heading
 *   Bold                   <strong>     **bold**
 *   Italic                 <em>         *italic*
 *   Strikethrough          <s>, <del>   ~~strike~~
 *   Underline (if added)   <u>          __underline__
 *   Inline code            <code>       `code`
 *   <mark> (no text color) <mark>       ==highlight==
 *   Keyboard input         <kbd>        [Ctrl]
 *   List block             ul / ol      - item / 1. item
 *   Quote block            blockquote   > quote
 *
 * IMPORTANT: the markers are generated, so do NOT type them yourself
 * (for example "~~text~~" inside a strikethrough), or they will show twice.
 *
 * Scope: anything inside <main> plus the Post Content block (which also
 * covers the block editor). The header and footer are left plain.
 */

/* =========================================================
   Headings: # … ######
   ========================================================= */

:where(main, .wp-block-post-content) h1.wp-block-heading::before,
.wp-block-post-title::before,
.wp-block-query-title::before {
	content: "#\00a0\2060";
}

:where(main, .wp-block-post-content) h2.wp-block-heading::before {
	content: "##\00a0\2060";
}

:where(main, .wp-block-post-content) h3.wp-block-heading::before {
	content: "###\00a0\2060";
}

:where(main, .wp-block-post-content) h4.wp-block-heading::before {
	content: "####\00a0\2060";
}

:where(main, .wp-block-post-content) h5.wp-block-heading::before {
	content: "#####\00a0\2060";
}

:where(main, .wp-block-post-content) h6.wp-block-heading::before {
	content: "######\00a0\2060";
}

/* Keep the prefix inline with the heading text; \2060 lets long titles wrap after it. */
:where(main, .wp-block-post-content) :is(h1, h2, h3, h4, h5, h6).wp-block-heading::before,
.wp-block-post-title::before,
.wp-block-query-title::before {
	display: inline !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	color: var(--tn-green);
	text-shadow: 0 0 16px var(--tn-glow);
	white-space: nowrap;
}

:where(main, .wp-block-post-content) .wp-block-heading a,
.wp-block-post-title a,
.wp-block-query-title a {
	display: inline !important;
}

/* =========================================================
   Inline formatting
   ========================================================= */

/* Shared marker look: upright, normal weight. */
:where(main, .wp-block-post-content) :is(strong, b, em, s, del, u, mark:not(.has-inline-color), code)::before,
:where(main, .wp-block-post-content) :is(strong, b, em, s, del, u, mark:not(.has-inline-color), code)::after {
	display: inline; /* stays glued to the word, so a marker never wraps onto its own line */
	color: var(--tn-syntax);
	font-style: normal;
	font-weight: 400;
	text-decoration: none;
	opacity: 0.85;
}

/* **bold** */
:where(main, .wp-block-post-content) :is(strong, b) {
	color: var(--tn-secondary);
	font-weight: 700;
}

:where(main, .wp-block-post-content) :is(strong, b)::before,
:where(main, .wp-block-post-content) :is(strong, b)::after {
	content: "**";
	color: var(--tn-secondary);
}

/* *italic* */
:where(main, .wp-block-post-content) em {
	color: inherit;
}

:where(main, .wp-block-post-content) em::before,
:where(main, .wp-block-post-content) em::after {
	content: "*";
}

/* ~~strikethrough~~ */
:where(main, .wp-block-post-content) :is(s, del) {
	color: var(--tn-muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--tn-danger) 75%, transparent);
	text-decoration-thickness: 1px;
}

:where(main, .wp-block-post-content) :is(s, del)::before,
:where(main, .wp-block-post-content) :is(s, del)::after {
	content: "~~";
}

/* __underline__ */
:where(main, .wp-block-post-content) u {
	text-decoration: underline;
	text-decoration-color: var(--tn-green-line);
	text-underline-offset: 0.22em;
}

:where(main, .wp-block-post-content) u::before,
:where(main, .wp-block-post-content) u::after {
	content: "__";
}

/* `inline code` (code blocks are styled in blocks.css) */
:where(main, .wp-block-post-content) :not(pre) > code {
	padding: 0.08em 0.3em;
	color: var(--tn-green);
	background: var(--tn-bg-deep);
	border: 1px solid var(--tn-border);
	border-radius: 2px;
	font-size: 0.9em;
}

:where(main, .wp-block-post-content) :not(pre) > code::before,
:where(main, .wp-block-post-content) :not(pre) > code::after {
	content: "`";
	opacity: 0.6;
}

/* ==highlight== (a plain <mark>; text colored with the toolbar's
   "Highlight → Text color" option is left alone). */
:where(main, .wp-block-post-content) mark:not(.has-inline-color) {
	padding: 0 0.15em;
	color: var(--tn-bg-deep);
	background: var(--tn-secondary);
}

:where(main, .wp-block-post-content) mark:not(.has-inline-color)::before,
:where(main, .wp-block-post-content) mark:not(.has-inline-color)::after {
	content: "==";
	color: inherit;
	opacity: 0.6;
}

/* Toolbar text color: no browser-yellow background behind it. */
:where(main, .wp-block-post-content) mark.has-inline-color {
	background: transparent;
}

/* [Ctrl] keyboard keys */
:where(main, .wp-block-post-content) kbd {
	padding: 0.05em 0.4em;
	color: var(--tn-text);
	background: var(--tn-panel-raised);
	border: 1px solid var(--tn-border-strong);
	border-bottom-width: 3px;
	border-radius: 3px;
	font-size: 0.85em;
}

/* Content links: phosphor underline, inverse-video highlight on hover. */
.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.wp-block-post-content a:where(:not(.wp-element-button)):focus-visible {
	color: var(--tn-bg-deep);
	background: var(--tn-green);
	text-decoration: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Bold link text keeps readable markers while inverted. */
.wp-block-post-content a:hover :is(strong, b, em),
.wp-block-post-content a:hover :is(strong, b, em)::before,
.wp-block-post-content a:hover :is(strong, b, em)::after {
	color: inherit;
}

/* =========================================================
   Lists: - item / 1. item / [x] task
   ========================================================= */

.wp-block-post-content ul > li::marker {
	content: "-\00a0";
	color: var(--tn-green);
}

.wp-block-post-content ol > li::marker {
	color: var(--tn-secondary);
	font-weight: 650;
}

.wp-block-post-content li + li {
	margin-top: 0.6rem;
}

/* Task lists line up with normal lists. */
.wp-block-post-content ul:is(.is-style-checkmark-list, .is-style-terminal-todo) {
	padding-left: clamp(2.2rem, 4vw, 3rem);
}

.wp-block-post-content ul:is(.is-style-checkmark-list, .is-style-terminal-todo) > li {
	padding-inline-start: 0;
}

/* Twenty Twenty-Five "Checkmark" list → [x] done items. */
.wp-block-post-content ul.is-style-checkmark-list > li::marker {
	content: "[x]\00a0";
	color: var(--tn-green);
}

/* Child theme "To-do [ ]" list → open items. */
.wp-block-post-content ul.is-style-terminal-todo > li::marker {
	content: "[\00a0]\00a0";
	color: var(--tn-muted);
}

/* Post categories / tags as a Markdown list: - term */
.taxonomy-category.wp-block-post-terms,
.taxonomy-post_tag.wp-block-post-terms {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}

.taxonomy-category.wp-block-post-terms .wp-block-post-terms__separator,
.taxonomy-post_tag.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.taxonomy-category.wp-block-post-terms a::before,
.taxonomy-post_tag.wp-block-post-terms a::before {
	content: "-\00a0";
}

/* =========================================================
   Quotes: > line
   ========================================================= */

.wp-block-quote > p::before,
.wp-block-pullquote blockquote > p::before {
	content: ">\00a0";
	color: var(--tn-green);
	font-weight: 700;
}

.wp-block-quote cite::before,
.wp-block-pullquote cite::before {
	content: "—\00a0";
}