/**
 * Synthweave Blocks — Front-end styles.
 *
 * Theme-agnostic: uses CSS custom properties from theme.json.
 * Falls back to sensible defaults if variables are missing.
 */

/* ==========================================================================
   Terminal Window Block
   ========================================================================== */
.synthweave-terminal-window {
	--terminal-bg: var(--wp--preset--color--surface-lowest, #0e0e0e);
	--terminal-bar-bg: var(--wp--preset--color--surface-high, #2a2a2a);
	--terminal-border: var(--wp--preset--color--outline-variant, #414754);
	--terminal-text: var(--wp--preset--color--on-surface, #e5e2e1);
	--terminal-muted: var(--wp--preset--color--on-surface-variant, #c1c6d7);

	background: var(--terminal-bg);
	border: 1px solid var(--terminal-border);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	color: var(--terminal-text);
}

.synthweave-terminal-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	background: var(--terminal-bar-bg);
	border-bottom: 1px solid var(--terminal-border);
}

.synthweave-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.synthweave-dot--red { background: #ff5f56; }
.synthweave-dot--yellow { background: #ffbd2e; }
.synthweave-dot--green { background: #27c93f; }

.synthweave-terminal-filename {
	margin-left: 12px;
	font-family: var(--wp--preset--font-family--heading, monospace);
	font-size: 0.75rem;
	color: #a0a5b5;
}

.synthweave-terminal-body {
	padding: 1.5rem;
	font-family: var(--wp--preset--font-family--heading, monospace);
	font-size: 0.9375rem;
	line-height: 2;
	overflow-x: auto;
}

.synthweave-terminal-body pre {
	margin: 0;
	white-space: pre;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: transparent;
	border: none;
	padding: 0;
}

/* Syntax highlighting — uses theme colors with fallbacks */
.synthweave-terminal-body .ln {
	color: #8b90a0;
	user-select: none;
	margin-right: 1rem;
}

.synthweave-terminal-body .kw { color: var(--wp--preset--color--secondary, #dbb8ff); }
.synthweave-terminal-body .fn { color: var(--wp--preset--color--primary, #aec6ff); }
.synthweave-terminal-body .st { color: var(--wp--preset--color--tertiary, #48ddbc); }
.synthweave-terminal-body .cm { color: #8b90a0; }

/* 404 terminal lines */
.synthweave-terminal-line {
	font-family: var(--wp--preset--font-family--heading, monospace);
	font-size: 0.875rem;
	margin: 0.5rem 0 !important;
}

.synthweave-terminal-line .st { color: var(--wp--preset--color--tertiary, #48ddbc); }
.synthweave-terminal-line .cm { color: var(--terminal-muted); }
.synthweave-terminal-line .er { color: var(--wp--preset--color--error, #ffb4ab); }

/* ==========================================================================
   Typing Text Block
   ========================================================================== */
pre.synthweave-typing,
.synthweave-typing {
	color: var(--wp--preset--color--tertiary, #48ddbc);
	font-family: var(--wp--preset--font-family--heading, monospace);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	min-height: 2em;
	margin-bottom: 0.5rem;
	/* Reset pre defaults */
	background: none;
	border: none;
	padding: 0;
	white-space: pre-wrap;
	overflow: visible;
}

.synthweave-typing::after {
	content: '|';
	animation: synthweave-blink 1s step-end infinite;
	color: var(--wp--preset--color--tertiary, #48ddbc);
}

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 781px) {
	.synthweave-terminal-body {
		font-size: 0.8125rem;
		padding: 1rem;
	}
}