/**
 * SEO Buddy AI Engine - citation blocks.
 *
 * The opening answer and the key takeaways are written as ordinary prose, so
 * without this they render as body copy and the reader cannot tell them from
 * the article. SEO Buddy wraps them on publish; this gives them a shape.
 *
 * Theme-neutral on purpose. This file lands on sites whose theme we have never
 * seen, so it sets its own colours instead of inheriting, keeps to one class
 * per rule, and uses no !important - a theme that wants to restyle these can.
 */

.sb-answer,
.sb-takeaways {
	margin: 1.6em 0;
	padding: 1.15em 1.35em 1.2em;
	border: 1px solid #e2e7ee;
	border-left: 4px solid #7a869a;
	border-radius: 10px;
	background: #f7f9fb;
}

.sb-takeaways {
	background: #fff;
	border-left-color: #202b3a;
}

/* The eyebrow. Small, quiet, and never competing with the article's headings -
   it labels the block rather than announcing a new section. */
.sb-block-label {
	margin: 0 0 .55em;
	padding: 0;
	border: 0;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5b6675;
}

/* It may arrive as a heading rather than a paragraph: where the writer wrote a
   real <h2> it stays one, so it keeps its place in the outline and the
   article's own table of contents can still link to it. */
h2.sb-block-label,
h3.sb-block-label {
	font-family: inherit;
}

.sb-answer > p:last-child {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.62;
}

/* The bullets are declared here rather than inherited: one site's theme sets
   discs, the next site's global reset sets none, and a takeaway list that
   renders as bare lines loses exactly the at-a-glance shape it exists for. */
.sb-takeaways ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc outside;
}

.sb-takeaways li::marker {
	color: #5b6675;
}

.sb-takeaways li {
	margin: .38em 0;
	line-height: 1.55;
}

.sb-takeaways li:first-child {
	margin-top: 0;
}

.sb-takeaways li:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {

	.sb-answer,
	.sb-takeaways {
		padding: 1em 1.05em;
	}
}