/*
 * am-terminal — a dark box styled like a terminal window (macOS traffic-lights).
 * Apply to a <pre>; type the session as plain text ($ command, then output). No
 * syntax highlighting. The titlebar + dots are drawn in CSS; an optional window
 * title comes from a data-title attribute.
 *
 *   Gutenberg  → a "Custom HTML" block:
 *       <pre class="am-terminal" data-title="zsh — activemind">
 *       $ nmap -sV example.se
 *       Starting Nmap…
 *       </pre>
 *   Elementor  → an HTML widget with the same markup.
 */

.am-terminal {
	position: relative;
	margin-block: var(--am-space-500);
	padding: calc(var(--am-space-600) + var(--am-space-300)) var(--am-space-500) var(--am-space-500);
	background-color: var(--am-color-code-bg);
	color: var(--am-color-code-text);
	border-radius: var(--am-radius-md);
	overflow-x: auto;
	font-family: var(--am-font-mono);
	font-size: var(--am-font-size-200);
	line-height: var(--am-leading-normal);
	tab-size: 2;
}

/* Titlebar — also shows the optional window title (data-title). */
.am-terminal::before {
	content: attr(data-title);
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--am-space-600);
	background-color: var(--am-color-code-bar);
	border-radius: var(--am-radius-md) var(--am-radius-md) 0 0;
	color: var(--am-color-code-muted);
	font-family: var(--am-font-sans);
	font-size: var(--am-font-size-100);
}

/* Three traffic-light dots (one element + box-shadow), sat over the titlebar. */
.am-terminal::after {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--am-space-600) / 2);
	inset-inline-start: var(--am-space-400);
	transform: translateY(-50%);
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background-color: var(--am-dot-red);
	box-shadow: 1.15em 0 0 var(--am-dot-yellow), 2.3em 0 0 var(--am-dot-green);
}

.am-terminal code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}