/**
 * AsciiFrame Theme Styles
 *
 * Terminal-inspired monospace styling using modern CSS patterns.
 * Inspired by 37signals' nobuild approach (Campfire, Writebook, Fizzy).
 *
 * @package AsciiFrame
 */

/* ============================================
   CSS Layers - Specificity Management
   ============================================ */
@layer reset, base, components, utilities;

/* ============================================
   Reset Layer
   ============================================ */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}
}

/* ============================================
   Base Layer - Custom Properties & Foundations
   ============================================ */
@layer base {
	:root {
		/* Raw OKLCH values: Lightness Chroma Hue */
		--lch-green: 70% 0.2 142;
		--lch-green-muted: 55% 0.15 142;
		--lch-green-dim: 40% 0.1 142;
		--lch-blue: 65% 0.15 250;
		--lch-blue-hover: 75% 0.18 250;
		--lch-black: 10% 0.02 250;
		--lch-black-alt: 15% 0.02 250;
		--lch-gray: 30% 0.02 250;

		/* Semantic colors from primitives */
		--color-bg: oklch(var(--lch-black));
		--color-bg-alt: oklch(var(--lch-black-alt));
		--color-fg: oklch(var(--lch-green));
		--color-fg-muted: oklch(var(--lch-green-muted));
		--color-fg-dim: oklch(var(--lch-green-dim));
		--color-border: oklch(var(--lch-gray));
		--color-link: oklch(var(--lch-blue));
		--color-link-hover: oklch(var(--lch-blue-hover));

		/* Typography */
		--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Consolas', 'Monaco', monospace;
		--text-base: clamp(0.75rem, 0.5rem + 1vw, 1rem);
		--text-large: 1.2em;
		--text-small: 0.9em;
		--line-height: 1.5;

		/* Spacing - Character-based horizontal, rem-based vertical */
		--space-inline: 1ch;
		--space-inline-2: 2ch;
		--space-block: 1rem;
		--space-block-half: 0.5rem;

		/* Padding */
		--pad: var(--space-block) var(--space-inline-2);
		--pad-tight: var(--space-block-half) var(--space-inline);

		/* Touch targets */
		--touch-target: 44px;
	}

	/* Light mode override (optional) */
	@media (prefers-color-scheme: light) {
		:root {
			--lch-green: 35% 0.2 142;
			--lch-green-muted: 45% 0.15 142;
			--lch-green-dim: 55% 0.1 142;
			--lch-black: 98% 0.005 250;
			--lch-black-alt: 95% 0.01 250;
			--lch-gray: 80% 0.02 250;
			--lch-blue: 50% 0.15 250;
			--lch-blue-hover: 40% 0.18 250;
		}
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		background-color: var(--color-bg);
		color: var(--color-fg);
		font-family: var(--font-mono);
		font-size: var(--text-base);
		line-height: var(--line-height);
		padding: var(--pad);
		min-height: 100vh;
	}

	a {
		color: var(--color-link);
		text-decoration: underline;
		text-underline-offset: 0.2em;

		&:hover,
		&:focus {
			color: var(--color-link-hover);
		}
	}

	::selection {
		background-color: var(--color-fg);
		color: var(--color-bg);
	}

	/* Scrollbar */
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	::-webkit-scrollbar-track {
		background: var(--color-bg);
	}

	::-webkit-scrollbar-thumb {
		background: var(--color-border);
		border-radius: 4px;

		&:hover {
			background: var(--color-fg-dim);
		}
	}
}

/* ============================================
   Components Layer
   ============================================ */
@layer components {
	/* Main Content Area */
	.wp-site-blocks {
		max-inline-size: 120ch;
		margin-inline: auto;
	}

	/* ASCII Block Base */
	.ascii-block {
		font-family: var(--font-mono);
		white-space: pre;
		overflow-x: auto;
		background: transparent;
		border: none;
		color: inherit;
		line-height: var(--line-height);
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		scrollbar-width: thin;
		scrollbar-color: var(--color-fg-dim) transparent;

		/* Force consistent character width for CJK in monospace fonts */
		/* This helps align ASCII and CJK characters in boxes */
		text-autospace: ideograph-alpha;
		font-variant-east-asian: full-width;

		/*
		 * Japanese text spacing settings
		 *
		 * Problem: Browsers may trim or adjust spacing around CJK punctuation
		 * (especially at end of lines), causing visual misalignment in monospace boxes.
		 *
		 * Solution: text-spacing-trim: space-all preserves all whitespace around
		 * CJK characters, preventing browser from trimming spaces.
		 */
		text-spacing-trim: space-all !important;
		-webkit-text-spacing: space-all !important;

		/* Additional font settings for consistent CJK width */
		text-rendering: geometricPrecision !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		/* Force monospace for all characters including CJK */
		font-feature-settings: "halt" 0, "zero" 0;
		font-variant-numeric: tabular-nums;

		/* Force consistent letter spacing */
		letter-spacing: 0em;

		/* Additional spacing controls */
		text-justify: normal;
		word-spacing: normal;
		letter-spacing: normal;
	}

	/* Scrollable indicator */
	.ascii-block.scrollable {
		position: relative;

		&::after {
			content: '\2192'; /* → */
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			background: linear-gradient(to right, transparent, var(--color-bg) 50%);
			padding: 0.5em 0.5em 0.5em 2em;
			color: var(--color-fg-muted);
			pointer-events: none;
			animation: scroll-hint 1.5s ease-in-out infinite;
		}
	}

	@keyframes scroll-hint {
		0%, 100% { opacity: 0.5; }
		50% { opacity: 1; }
	}

	/* Block Type Styles */
	.ascii-paragraph {
		color: var(--color-fg);
	}

	.ascii-heading {
		color: var(--color-fg);
		font-weight: bold;
	}

	.ascii-h1 { font-size: 1.4em; }
	.ascii-h2 { font-size: 1.2em; }
	.ascii-h3 { font-size: 1.1em; }
	.ascii-h4,
	.ascii-h5,
	.ascii-h6 { font-size: 1em; }

	/* Image Block - Nostalgic Filter */
	.ascii-image {
		color: var(--color-fg-muted);
	}

	.ascii-image-figure {
		margin: var(--space-block) 0;
		padding: 0;
		position: relative;

		/* Alignment */
		&.align-center {
			text-align: center;
		}
		&.align-left {
			float: left;
			margin-right: var(--space-inline-2);
		}
		&.align-right {
			float: right;
			margin-left: var(--space-inline-2);
		}
		&.align-wide {
			max-width: 100%;
		}
	}

	.ascii-image-img {
		max-width: 100%;
		height: auto;
		display: block;

		/* Nostalgic filter effect */
		filter:
			sepia(30%)
			contrast(90%)
			brightness(95%)
			saturate(80%);

		/* Subtle vignette with box-shadow */
		box-shadow:
			inset 0 0 60px rgba(0, 0, 0, 0.3),
			0 0 20px rgba(0, 0, 0, 0.5);

		/* Slight grain effect via pseudo-element on parent */
		border: 2px solid var(--color-border);
	}

	/* Film grain overlay */
	.ascii-image-figure::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
		opacity: 0.08;
		mix-blend-mode: overlay;
	}

	.ascii-image-caption {
		margin-top: var(--space-block-half);
		color: var(--color-fg-muted);
		font-size: var(--text-small);
		text-align: center;
		font-style: italic;
	}

	/* Button Block */
	.ascii-button {
		--btn-bg: transparent;
		--btn-color: var(--color-fg);
		--btn-border: var(--color-border);

		display: inline-flex;
		align-items: center;
		gap: var(--space-inline);
		padding: var(--pad-tight);
		background: var(--btn-bg);
		color: var(--btn-color);
		border: 1px solid var(--btn-border);

		&:hover {
			--btn-bg: color-mix(in oklch, var(--color-fg) 10%, transparent);
		}
	}

	.ascii-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-inline);
	}

	/* List Blocks */
	.ascii-list {
		margin: 0;
		padding: 0;
	}

	.ascii-list-item {
		margin: 0;
	}

	/* Navigation */
	.ascii-navigation {
		color: var(--color-fg);
		white-space: nowrap;
	}

	.ascii-nav-link {
		color: var(--color-fg);
		text-decoration: none;
		padding: 0.2em 0.5ch;

		&:hover {
			color: var(--color-link-hover);
			text-decoration: underline;
		}
	}

	.ascii-nav-item {
		padding: 0.2em 0.5ch;
	}

	/* Site Title */
	.ascii-site-title {
		font-weight: bold;
		font-size: var(--text-large);
		white-space: nowrap;
	}

	.ascii-site-tagline {
		color: var(--color-fg-muted);
		font-size: var(--text-small);
	}

	/* Post Elements */
	.ascii-post-title {
		font-weight: bold;
	}

	.ascii-post-date {
		color: var(--color-fg-muted);
		font-size: var(--text-small);
	}

	.ascii-post-content {
		margin-block: var(--space-block);
	}

	/* Post Excerpt with Read More */
	.ascii-post-excerpt-wrapper {
		margin-block: var(--space-block);
	}

	.ascii-read-more {
		display: inline-block;
		margin-top: var(--space-block-half);
		padding: var(--pad-tight);
		color: var(--color-link);
		text-decoration: none;
		border: 1px solid var(--color-border);

		&:hover {
			color: var(--color-link-hover);
			background: color-mix(in oklch, var(--color-fg) 10%, transparent);
		}
	}

	/* Quote */
	.ascii-quote {
		color: var(--color-fg-muted);
		font-style: italic;
		border-inline-start: 2px solid var(--color-border);
		padding-inline-start: var(--space-inline-2);
	}

	/* Code Blocks */
	.ascii-code,
	.ascii-preformatted {
		background-color: var(--color-bg-alt);
		padding: var(--pad);
		border-radius: 4px;
	}

	/* Separator */
	.ascii-separator {
		color: var(--color-fg-dim);
		margin-block: var(--space-block);
	}

	/* Cover Block */
	.ascii-cover {
		margin-block: var(--space-block);
	}

	/* Search Block */
	.ascii-search {
		color: var(--color-fg);
	}

	/* Layout Blocks */
	.ascii-columns {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		margin-block: var(--space-block);
		max-width: 100%;
		justify-content: space-evenly;
		align-items: flex-start;
	}

	.ascii-column {
		flex: 0 0 auto;
		/* ASCII box is rendered in PHP with fixed width */
	}

	.ascii-group {
		margin-block: var(--space-block);
	}

	/* Fallback Block */
	.ascii-fallback {
		color: var(--color-fg-dim);
		border: 1px dashed var(--color-border);
		padding: var(--pad-tight);
	}

	/* Header Area (WordPress block) */
	.wp-block-template-part[data-slug="header"] {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-inline-2);
		border-block-end: 1px solid var(--color-border);
		padding-block-end: var(--space-block);
		margin-block-end: calc(var(--space-block) * 2);
	}

	/* Footer Area */
	.wp-block-template-part[data-slug="footer"] {
		border-block-start: 1px solid var(--color-border);
		padding-block-start: var(--space-block);
		margin-block-start: calc(var(--space-block) * 2);
		color: var(--color-fg-muted);
	}
}

/* ============================================
   Utilities Layer
   ============================================ */
@layer utilities {
	.flex { display: flex; }
	.gap { gap: var(--space-inline); }
	.pad { padding: var(--pad); }
	.hide { display: none; }
	.txt-muted { color: var(--color-fg-muted); }
	.txt-dim { color: var(--color-fg-dim); }
}

/* ============================================
   Responsive - Semantic Breakpoints
   ============================================ */

/* Wide layout: room for 100+ characters */
@media (min-width: 100ch) {
	.wp-site-blocks {
		max-inline-size: 140ch;
	}
}

/* Medium: 60-100 characters of content */
@media (max-width: 80ch) {
	:root {
		--space-inline-2: 1.5ch;
	}

	.ascii-columns {
		flex-direction: column;
		align-items: stretch;
	}

	.ascii-column {
		max-width: 100%;
	}

	/* Stack header elements vertically */
	.wp-block-template-part[data-slug="header"] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-block-half);
	}
}

/* Narrow: less than 60 characters */
@media (max-width: 60ch) {
	:root {
		--line-height: 1.6;
	}

	.wp-site-blocks {
		max-inline-size: 100%;
	}

	/* Full-bleed ASCII blocks for horizontal scroll */
	.ascii-block {
		margin-inline: calc(-1 * var(--space-inline-2));
		padding-inline: var(--space-inline-2);
	}

	/* Larger touch targets */
	a {
		min-block-size: var(--touch-target);
		display: inline-flex;
		align-items: center;
	}
}

/* Very narrow: mobile portrait */
@media (max-width: 40ch) {
	:root {
		--text-base: 0.75rem;
		--space-block: 0.75rem;
	}

	.wp-block-template-part[data-slug="header"],
	.wp-block-template-part[data-slug="footer"] {
		margin-block: var(--space-block);
	}
}

/* Fallback for browsers without ch support in media queries */
@media (max-width: 480px) {
	:root {
		--text-base: max(0.75rem, 10px);
	}
}

/* Landscape on mobile */
@media (max-height: 500px) and (orientation: landscape) {
	body {
		padding-block: var(--space-block-half);
	}

	.wp-block-template-part[data-slug="header"],
	.wp-block-template-part[data-slug="footer"] {
		padding-block: var(--space-block-half);
		margin-block: var(--space-block-half);
	}
}

/* High DPI screens */
@media (min-resolution: 2dppx) and (min-width: 100ch) {
	:root {
		--text-base: clamp(0.875rem, 0.5rem + 0.8vw, 1.125rem);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ascii-block.scrollable::after {
		animation: none;
		opacity: 0.7;
	}

	* {
		scroll-behavior: auto !important;
	}
}

/* Print Styles */
@media print {
	body {
		background: white;
		color: black;
	}

	.ascii-block {
		color: black;
	}

	a {
		color: black;
		text-decoration: underline;
	}
}

/* ============================================
   Editor Styles
   ============================================ */

/* Editor iframe - target html and body */
html:where(.wp-embed-responsive),
html:where(.block-editor-iframe__body),
body.block-editor-iframe__body,
body.editor-styles-wrapper {
	--color-bg: oklch(10% 0.02 250);
	--color-bg-alt: oklch(15% 0.02 250);
	--color-fg: oklch(70% 0.2 142);
	--color-fg-muted: oklch(55% 0.15 142);
	--color-border: oklch(30% 0.02 250);
	--color-link: oklch(65% 0.15 250);
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Consolas', 'Monaco', monospace;

	background-color: var(--color-bg) !important;
	color: var(--color-fg) !important;
	font-family: var(--font-mono) !important;
	min-height: 100vh !important;
}

/* Force dark background on all editor elements */
.editor-styles-wrapper *:not(img):not(svg):not(video) {
	background-color: inherit;
}

.editor-styles-wrapper {
	/* Base colors */
	--color-bg: oklch(10% 0.02 250);
	--color-bg-alt: oklch(15% 0.02 250);
	--color-fg: oklch(70% 0.2 142);
	--color-fg-muted: oklch(55% 0.15 142);
	--color-border: oklch(30% 0.02 250);
	--color-link: oklch(65% 0.15 250);
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Consolas', 'Monaco', monospace;

	background-color: var(--color-bg) !important;
	color: var(--color-fg) !important;
	font-family: var(--font-mono) !important;
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh !important;
}

/* Editor content area */
.editor-styles-wrapper .wp-block {
	max-width: 120ch;
}

/* All text elements in editor */
.editor-styles-wrapper p,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.editor-styles-wrapper li,
.editor-styles-wrapper span,
.editor-styles-wrapper div {
	font-family: var(--font-mono) !important;
	color: var(--color-fg);
}

/* Headings */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	color: var(--color-fg) !important;
	font-weight: 700;
}

/* Links in editor */
.editor-styles-wrapper a {
	color: var(--color-link) !important;
}

/* Paragraph block */
.editor-styles-wrapper .wp-block-paragraph {
	font-family: var(--font-mono) !important;
	color: var(--color-fg);
}

/* Button block */
.editor-styles-wrapper .wp-block-button__link {
	font-family: var(--font-mono) !important;
	background-color: transparent !important;
	color: var(--color-fg) !important;
	border: 1px solid var(--color-border) !important;
}

/* List blocks */
.editor-styles-wrapper .wp-block-list {
	font-family: var(--font-mono) !important;
	color: var(--color-fg);
}

/* Quote block */
.editor-styles-wrapper .wp-block-quote {
	border-left: 2px solid var(--color-border);
	color: var(--color-fg-muted);
	font-style: italic;
}

/* Code block */
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-preformatted {
	background-color: var(--color-bg-alt) !important;
	color: var(--color-fg) !important;
	font-family: var(--font-mono) !important;
}

/* Group block */
.editor-styles-wrapper .wp-block-group {
	color: var(--color-fg);
}

/* Columns */
.editor-styles-wrapper .wp-block-columns {
	color: var(--color-fg);
}

/* Navigation block */
.editor-styles-wrapper .wp-block-navigation {
	font-family: var(--font-mono) !important;
	color: var(--color-fg);
}

.editor-styles-wrapper .wp-block-navigation-item__content {
	color: var(--color-fg) !important;
}

/* Site title */
.editor-styles-wrapper .wp-block-site-title {
	font-family: var(--font-mono) !important;
	color: var(--color-fg) !important;
}

/* Cover block */
.editor-styles-wrapper .wp-block-cover {
	color: var(--color-fg);
}

/* Separator */
.editor-styles-wrapper .wp-block-separator {
	border-color: var(--color-border) !important;
}

/* Image captions */
.editor-styles-wrapper figcaption {
	color: var(--color-fg-muted) !important;
	font-family: var(--font-mono) !important;
}

/* Block selection outline */
.editor-styles-wrapper .wp-block.is-selected {
	outline: 1px solid var(--color-fg-muted);
}

/* Placeholder text */
.editor-styles-wrapper .block-editor-block-list__block.wp-block::before {
	color: var(--color-fg-muted);
}

/* Block toolbar adjustments */
.editor-styles-wrapper .block-editor-inserter__toggle {
	color: var(--color-fg);
}

/* Fix white background in editor iframe */
.editor-styles-wrapper,
.editor-styles-wrapper > *,
.editor-styles-wrapper .is-root-container,
.editor-styles-wrapper .wp-block-post-content,
.editor-styles-wrapper .block-editor-block-list__layout,
.editor-styles-wrapper .wp-block-group,
.editor-styles-wrapper .wp-block,
.editor-styles-wrapper [data-type],
.editor-styles-wrapper .wp-block-post-content__layout {
	background-color: var(--color-bg) !important;
}

/* Post content block in page editor */
.editor-styles-wrapper .wp-block-post-content {
	background-color: var(--color-bg) !important;
	color: var(--color-fg) !important;
	padding: 1rem !important;
}

/* Root container */
.editor-styles-wrapper .is-root-container {
	background-color: var(--color-bg) !important;
	min-height: 100% !important;
}

/* Layout containers */
.editor-styles-wrapper .is-layout-constrained,
.editor-styles-wrapper .is-layout-flow {
	background-color: var(--color-bg) !important;
}

/* Template parts in editor */
.editor-styles-wrapper .wp-block-template-part {
	background-color: var(--color-bg) !important;
	color: var(--color-fg) !important;
}

/* Cover block background */
.editor-styles-wrapper .wp-block-cover__background {
	background-color: var(--color-bg) !important;
}

/* Ensure all nested elements inherit */
.editor-styles-wrapper * {
	border-color: var(--color-border);
}

/* Block appender button */
.editor-styles-wrapper .block-editor-button-block-appender {
	color: var(--color-fg-muted) !important;
}

/* Rich text placeholders */
.editor-styles-wrapper [data-rich-text-placeholder] {
	color: var(--color-fg-muted) !important;
}

/* Block list item */
.editor-styles-wrapper .block-editor-block-list__block {
	color: var(--color-fg);
}

/* ============================================
   ASCII-style Preview in Editor
   ============================================ */

/* Heading with === underline */
.editor-styles-wrapper h1::after,
.editor-styles-wrapper h2::after {
	content: '';
	display: block;
	width: 100%;
	height: 1em;
	background-image: repeating-linear-gradient(
		90deg,
		var(--color-fg) 0,
		var(--color-fg) 0.6em,
		transparent 0.6em,
		transparent 0.7em
	);
	background-size: 0.7em 2px;
	background-repeat: repeat-x;
	background-position: 0 50%;
	margin-top: 0.2em;
	opacity: 0.8;
}

/* # prefix for headings */
.editor-styles-wrapper h1::before {
	content: '# ';
	opacity: 0.6;
}

.editor-styles-wrapper h2::before {
	content: '## ';
	opacity: 0.6;
}

.editor-styles-wrapper h3::before {
	content: '### ';
	opacity: 0.6;
}

/* Button with [ ] style */
.editor-styles-wrapper .wp-block-button__link {
	background: transparent !important;
	color: var(--color-fg) !important;
	border: none !important;
	padding: 0.5em 1em !important;
	position: relative;
}

.editor-styles-wrapper .wp-block-button__link::before {
	content: '[ ';
	color: var(--color-fg);
}

.editor-styles-wrapper .wp-block-button__link::after {
	content: ' ]';
	color: var(--color-fg);
}

/* Columns with ASCII box border */
.editor-styles-wrapper .wp-block-columns {
	border: 1px solid var(--color-fg);
	padding: 1em;
	position: relative;
}

.editor-styles-wrapper .wp-block-columns::before {
	content: '+' attr(data-label, '') '';
	position: absolute;
	top: -0.7em;
	left: 1em;
	background: var(--color-bg);
	padding: 0 0.5em;
	color: var(--color-fg);
	font-size: 0.9em;
}

/* Column with vertical separator */
.editor-styles-wrapper .wp-block-column {
	border: 1px dashed var(--color-border);
	padding: 0.5em;
	margin: 0.25em;
}

/* Group block with box style */
.editor-styles-wrapper .wp-block-group {
	border: 1px solid var(--color-border);
	padding: 1em;
	margin: 0.5em 0;
}

/* Separator as dashed line */
.editor-styles-wrapper .wp-block-separator {
	border: none !important;
	height: auto !important;
	background: transparent !important;
}

.editor-styles-wrapper .wp-block-separator::before {
	content: '════════════════════════════════════════════════════════════════════════════════';
	display: block;
	color: var(--color-fg);
	opacity: 0.6;
	overflow: hidden;
	white-space: nowrap;
}

/* Cover block header style */
.editor-styles-wrapper .wp-block-cover {
	border: 2px solid var(--color-fg);
}

/* Navigation items */
.editor-styles-wrapper .wp-block-navigation-item__content {
	color: var(--color-fg) !important;
}

.editor-styles-wrapper .wp-block-navigation-item__content::before {
	content: '| ';
	opacity: 0.5;
}

/* Site title with icon */
.editor-styles-wrapper .wp-block-site-title a::before,
.editor-styles-wrapper .wp-block-site-title span::before {
	content: '■ ';
	color: var(--color-fg);
}

/* Paragraph subtle styling */
.editor-styles-wrapper .wp-block-paragraph {
	padding-left: 0.5em;
	border-left: 2px solid transparent;
}

.editor-styles-wrapper .wp-block-paragraph:hover {
	border-left-color: var(--color-border);
}

/* List with ASCII bullets */
.editor-styles-wrapper ul.wp-block-list li::marker {
	content: '• ';
	color: var(--color-fg);
}

.editor-styles-wrapper ol.wp-block-list li::marker {
	color: var(--color-fg);
}

/* Quote block */
.editor-styles-wrapper .wp-block-quote {
	border-left: 2px solid var(--color-fg) !important;
	padding-left: 1em !important;
	font-style: italic;
}

.editor-styles-wrapper .wp-block-quote::before {
	content: '> ';
	position: absolute;
	left: 0;
	color: var(--color-fg-muted);
}

/* Image caption */
.editor-styles-wrapper .wp-block-image figcaption {
	text-align: center;
	color: var(--color-fg-muted) !important;
	font-style: italic;
}

/* Template part labels */
.editor-styles-wrapper .wp-block-template-part::before {
	content: '┌─ ' attr(data-type) ' ─┐';
	display: block;
	color: var(--color-fg-muted);
	font-size: 0.8em;
	margin-bottom: 0.5em;
}