/* Top Typing Bar — frontend styles.
 * Colors and typography are driven by CSS custom properties set inline on the
 * `.ttbp-bar` container from the plugin's Appearance settings.
 *
 * Fonts: the Inter web font is optional. It is enqueued separately by
 * `TTBP_Injector::maybe_enqueue()` and can be disabled with the
 * `ttbp_use_google_fonts` filter. The font stack below falls back to system
 * fonts so the bar renders correctly either way.
 */

.ttbp-bar {
	background-color: var(--ttbp-bg, transparent);
	color: var(--ttbp-color, #ffffff);
	text-align: center;
	padding: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--ttbp-font-size, 15px);
	font-weight: var(--ttbp-font-weight, 600);
	line-height: 1.5;
}

.ttbp-bar .ttbp-link {
	color: var(--ttbp-link-color, #ffffff);
	text-decoration: underline;
	font-weight: 700;
}

.ttbp-bar .ttbp-link:hover {
	text-decoration: none;
	opacity: 0.8;
}

.ttbp-bar .ttbp-link:focus-visible {
	outline: 2px solid var(--ttbp-link-color, #ffffff);
	outline-offset: 2px;
	border-radius: 2px;
}

.ttbp-bar .ttbp-cursor {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	background-color: var(--ttbp-color, #ffffff);
	animation: ttbp-blink 0.75s step-end infinite;
	vertical-align: text-bottom;
	margin-left: 2px;
}

/* Visually-hidden live region: screen readers get one clean announcement
 * per full message rotation instead of every typed character. */
.ttbp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes ttbp-blink {
	from, to { opacity: 1; }
	50%       { opacity: 0; }
}

/* The typing cursor is a small opacity blink comparable to the native input
 * caret, so we intentionally do NOT freeze it under prefers-reduced-motion.
 * We still disable the link-hover opacity transition for reduced-motion users. */
@media ( prefers-reduced-motion: reduce ) {
	.ttbp-bar .ttbp-link:hover {
		opacity: 1;
	}
}