/**
 * Editor-content classes.
 *
 * Pages and posts in this site's content carry bsy-* wrappers (answer box,
 * notes, card grid, inline CTA) that were styled by the retired Astra child
 * theme. These rules give them back a look, built only from the theme's own
 * design tokens so content blocks read as part of the theme.
 */

/* Answer box: the lede callout at the top of every page. */
.spk-content .bsy-answer {
	background: var(--spk-surface);
	border-left: 3px solid var(--spk-primary);
	border-radius: var(--spk-radius-md);
	padding: var(--spk-sm) var(--spk-md);
	margin: 0 0 var(--spk-md);
}

.spk-content .bsy-answer > :last-child {
	margin-bottom: 0;
}

/* Inline note: a quieter aside inside the body copy. */
.spk-content .bsy-note {
	border-left: 2px solid var(--spk-border);
	padding: 0 0 0 var(--spk-sm);
	margin: var(--spk-md) 0;
	color: var(--spk-muted);
	font-size: 0.94em;
}

.spk-content .bsy-note > :last-child {
	margin-bottom: 0;
}

/* Card grid. */
.spk-content .bsy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--spk-sm);
	margin: var(--spk-md) 0;
}

.spk-content .bsy-card {
	border: 1px solid var(--spk-border);
	border-radius: var(--spk-radius-md);
	padding: var(--spk-sm);
	background: var(--spk-bg);
}

.spk-content .bsy-card > :first-child {
	margin-top: 0;
}

.spk-content .bsy-card > :last-child {
	margin-bottom: 0;
}

/* In-content CTA block. */
.spk-content .bsy-cta {
	background: var(--spk-surface);
	border: 1px solid var(--spk-border);
	border-radius: var(--spk-radius-lg);
	padding: var(--spk-md);
	margin: var(--spk-lg) 0;
}

.spk-content .bsy-cta > :first-child {
	margin-top: 0;
}

/* Content buttons mirror .spk-btn so a content CTA matches a theme CTA. */
.spk-content .bsy-btn {
	display: inline-block;
	margin: var(--spk-xs) var(--spk-xs) 0 0;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--spk-primary);
	border-radius: var(--spk-radius-sm);
	background: var(--spk-primary);
	color: var(--spk-bg);
	font-family: var(--spk-font-body);
	font-size: 0.92rem;
	line-height: 1.2;
	text-decoration: none;
}

.spk-content .bsy-btn:hover,
.spk-content .bsy-btn:focus-visible {
	background: var(--spk-text);
	border-color: var(--spk-text);
}

.spk-content .bsy-btn--ghost {
	background: transparent;
	color: var(--spk-primary);
}

.spk-content .bsy-btn--ghost:hover,
.spk-content .bsy-btn--ghost:focus-visible {
	background: var(--spk-primary);
	color: var(--spk-bg);
}

/* ".speedking-theme .spk-content a" is (0,2,1) and outranked the (0,2,0)
   ".spk-content .bsy-btn" rule above, so the label took the white link colour
   on its white background. Match that specificity with a.bsy-btn. */
.spk-content a.bsy-btn { color: var(--spk-bg); }
.spk-content a.bsy-btn:hover,
.spk-content a.bsy-btn:focus-visible { color: var(--spk-bg); }
.spk-content a.bsy-btn--ghost { color: var(--spk-primary); }
.spk-content a.bsy-btn--ghost:hover,
.spk-content a.bsy-btn--ghost:focus-visible { color: var(--spk-bg); }