/*
 * Blog SEO — estilos dos blocos (front + editor). Usa as CSS custom properties
 * do tema (var(--bs-*)) quando disponíveis, com fallback neutro.
 */

/* FAQ */
.blog-seo-faq {
	display: grid;
	gap: 10px;
	margin: 1.5rem 0;
}
.blog-seo-faq__item {
	border: 1px solid var(--bs-color-border, #e5e7eb);
	border-radius: 12px;
	background: var(--bs-color-bg, #fff);
	padding: 4px 18px;
}
.blog-seo-faq__q {
	cursor: pointer;
	font-weight: 600;
	padding: 14px 0;
	list-style: none;
}
.blog-seo-faq__q::-webkit-details-marker {
	display: none;
}
.blog-seo-faq__q::after {
	content: '+';
	float: right;
	font-weight: 700;
	color: var(--bs-color-primary, #4f46e5);
}
.blog-seo-faq__item[open] .blog-seo-faq__q::after {
	content: '–';
}
.blog-seo-faq__a {
	padding: 0 0 14px;
	color: var(--bs-color-text-muted, #4b5563);
}

/* HowTo */
.blog-seo-howto {
	margin: 1.5rem 0;
}
.blog-seo-howto__title {
	margin: 0 0 12px;
}
.blog-seo-howto__steps {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0 0 0 1.2rem;
}
.blog-seo-howto__step {
	padding-left: 6px;
}
.blog-seo-howto__name {
	display: block;
	margin-bottom: 2px;
}

/* CTA */
.blog-seo-cta {
	margin: 1.5rem 0;
	padding: 26px 28px;
	border-radius: 16px;
	background: var(--bs-color-bg-alt, #eef2ff);
	border: 1px solid var(--bs-color-border, #e5e7eb);
	text-align: center;
}
.blog-seo-cta__title {
	margin: 0 0 8px;
}
.blog-seo-cta__text {
	margin: 0 0 16px;
	color: var(--bs-color-text-muted, #4b5563);
}
.blog-seo-cta__btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 10px;
	background: var(--bs-color-primary, #4f46e5);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: filter .15s;
}
.blog-seo-cta__btn:hover {
	filter: brightness( 1.08 );
	color: #fff;
}

/* Callout (caixa de destaque) — cores semânticas por tipo, adapta claro/escuro */
.blog-seo-callout {
	--cl: #2563eb;
	margin: 1.5rem 0;
	padding: 14px 18px;
	border: 1px solid var(--bs-color-border, #e5e7eb);
	border-left: 4px solid var(--cl);
	border-radius: 12px;
	background: var(--bs-color-bg-alt, #f8fafc);
	background: color-mix( in srgb, var(--cl) 12%, var(--bs-color-bg, #fff) );
}
.blog-seo-callout--info {
	--cl: #2563eb;
}
.blog-seo-callout--tip {
	--cl: #16a34a;
}
.blog-seo-callout--warning {
	--cl: #d97706;
}
.blog-seo-callout--danger {
	--cl: #dc2626;
}
.blog-seo-callout__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.blog-seo-callout__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: center / contain no-repeat;
}
.blog-seo-callout--info .blog-seo-callout__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.blog-seo-callout--tip .blog-seo-callout__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.blog-seo-callout--warning .blog-seo-callout__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.blog-seo-callout--danger .blog-seo-callout__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}
.blog-seo-callout__title {
	font-weight: 700;
	color: var(--cl);
	line-height: 1.25;
}
.blog-seo-callout__body {
	color: var(--bs-color-text, #1f2937);
}
.blog-seo-callout__body > :first-child {
	margin-top: 0;
}
.blog-seo-callout__body > :last-child {
	margin-bottom: 0;
}

/* Editor */
.blog-seo-faq-edit__item,
.blog-seo-howto-edit__step {
	border: 1px dashed #cbd2e0;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.blog-seo-faq-edit__q {
	font-weight: 600;
}
.blog-seo-faq-edit__a,
.blog-seo-howto-edit__text {
	margin-top: 6px;
	color: #4b5563;
}