/**
 * Helix × SEO Studio — front-end visual layer
 *
 * Breadcrumbs, answer block. Tokens from Helix variables.css.
 *
 * @package Helix
 * @version 2.7.45
 */

.sxs-breadcrumbs {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
}

.sxs-breadcrumbs a {
	color: var(--color-cobalt, var(--color-admin-accent));
	text-decoration: none;
}

.sxs-breadcrumbs a:hover {
	text-decoration: underline;
}

.sxs-breadcrumbs__sep {
	color: var(--color-text-subtle);
	user-select: none;
}

.sxs-answer {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--color-text-primary);
	background: var(--color-bg-subtle);
	border-left: 3px solid var(--color-cobalt, var(--color-admin-accent));
	padding: 0.85rem 1rem;
	margin: 0 0 1.25rem;
	border-radius: 0 8px 8px 0;
}

html[data-theme="dark"] .sxs-answer,
.helix-theme-dark .sxs-answer {
	color: var(--color-text-primary);
	background: var(--color-bg-subtle);
	border-left-color: var(--color-cobalt, var(--color-admin-accent));
}