/**
 * Smart SEO Booster — front-end block styles.
 * Theme-agnostic, uses CSS variables so themes/users can override easily.
 */
.ssb-share,
.ssb-cta,
.ssb-breadcrumbs,
.ssb-dates,
.smart-seo-local-business {
	--ssb-accent: #2563eb;
	--ssb-accent-2: #7c3aed;
	--ssb-radius: 8px;
	font-family: inherit;
}

/* ---------- Social share ---------- */
.ssb-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.ssb-share.is-center { justify-content: center; }
.ssb-share.is-right { justify-content: flex-end; }
.ssb-share-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 12px; border-radius: var(--ssb-radius);
	font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #1e293b;
	transition: transform .1s ease, box-shadow .1s ease;
}
.ssb-share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.ssb-share-btn svg { flex: 0 0 auto; }
.ssb-share-btn.is-x { background: #000; color: #fff; border-color: #000; }
.ssb-share-btn.is-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.ssb-share-btn.is-linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.ssb-share-btn.is-whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.ssb-share-btn.is-reddit { background: #ff4500; color: #fff; border-color: #ff4500; }
.ssb-share-btn.is-email { background: #64748b; color: #fff; border-color: #64748b; }
.ssb-share-copy.is-copied { background: #10b981; color: #fff; border-color: #10b981; }

/* ---------- CTA ---------- */
.ssb-cta {
	padding: 28px; border-radius: 14px; margin: 24px 0; text-align: center;
	background: #f1f5f9; color: #0f172a;
}
.ssb-cta.is-gradient { background: linear-gradient(135deg, var(--ssb-accent), var(--ssb-accent-2)); color: #fff; }
.ssb-cta.is-outline { background: transparent; border: 2px solid var(--ssb-accent); }
.ssb-cta-title { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.ssb-cta-text { margin: 0 auto 16px; max-width: 52ch; opacity: .95; }
.ssb-cta-btn {
	display: inline-block; padding: 12px 26px; border-radius: 999px;
	font-weight: 600; text-decoration: none; cursor: pointer;
	background: var(--ssb-accent); color: #fff;
}
.ssb-cta.is-gradient .ssb-cta-btn { background: #fff; color: var(--ssb-accent); }
.ssb-cta.is-outline .ssb-cta-btn { background: var(--ssb-accent); color: #fff; }
.ssb-cta-btn:hover { filter: brightness(1.05); }

/* ---------- Breadcrumbs ---------- */
.smart-seo-breadcrumbs, .ssb-breadcrumbs { font-size: 14px; color: #64748b; margin: 12px 0; }
.smart-seo-breadcrumbs a { color: var(--ssb-accent); text-decoration: none; }
.smart-seo-breadcrumbs a:hover { text-decoration: underline; }
.smart-seo-breadcrumbs .sep { opacity: .5; margin: 0 2px; }
.smart-seo-breadcrumbs .current { color: inherit; }

/* ---------- Dates ---------- */
.ssb-dates { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #64748b; margin: 12px 0; }
.ssb-dates .ssb-date { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Local business ---------- */
.smart-seo-local-business { padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 12px; margin: 16px 0; }
.smart-seo-local-business .ssb-name { font-size: 16px; margin: 0 0 4px; }
.smart-seo-local-business .ssb-hours { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: #64748b; }

/* ---------- FAQ ---------- */
.ssb-faq { margin: 20px 0; }
.ssb-faq-title { font-size: 22px; margin: 0 0 12px; }
.ssb-faq-item {
	border: 1px solid #e2e8f0; border-radius: 10px;
	padding: 12px 16px; margin-block-end: 8px;
}
.ssb-faq-item summary {
	cursor: pointer; font-weight: 600; color: #0f172a;
	list-style: none;
}
.ssb-faq-item summary::-webkit-details-marker { display: none; }
.ssb-faq-item summary::before {
	content: '+'; display: inline-block; inline-size: 18px;
	color: var(--ssb-accent, #2563eb); font-weight: 700;
}
.ssb-faq-item[open] summary::before { content: '–'; }
.ssb-faq-answer { margin-block-start: 8px; color: #334155; }

/* ---------- HowTo ---------- */
.ssb-howto { margin: 20px 0; }
.ssb-howto-title { font-size: 22px; margin: 0 0 8px; }
.ssb-howto-desc { color: #334155; margin-block-end: 12px; }
.ssb-howto-steps { margin: 0; padding-inline-start: 22px; }
.ssb-howto-steps li { margin-block-end: 14px; }
.ssb-howto-step-name { font-weight: 600; color: #0f172a; }
.ssb-howto-step-text { color: #334155; margin-block-start: 4px; }

/* ---------- Table of Contents ---------- */
.ssb-toc {
	border: 1px solid #e2e8f0; border-radius: 10px;
	padding: 16px 20px; margin: 20px 0; background: #f8fafc;
}
.ssb-toc-title { font-weight: 700; margin: 0 0 8px; color: #0f172a; }
.ssb-toc ol { margin: 0; padding-inline-start: 20px; }
.ssb-toc li { margin-block-end: 4px; }
.ssb-toc li.ssb-toc-lvl-1 { padding-inline-start: 16px; list-style-type: circle; }
.ssb-toc li.ssb-toc-lvl-2 { padding-inline-start: 32px; list-style-type: square; }
.ssb-toc a { color: var(--ssb-accent, #2563eb); text-decoration: none; }
.ssb-toc a:hover { text-decoration: underline; }

/* ==========================================================================
   Block-editor-only presentation (never rendered on the front end).
   Brings every Smart SEO block's canvas placeholder in line with the same
   card look and brand-blue accent used on the SEO Audit Report dashboard.
   ========================================================================== */
.ssb-block-placeholder.components-placeholder {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
}
.ssb-block-placeholder .components-placeholder__label {
	color: #1e293b;
	font-weight: 600;
}
.ssb-block-placeholder .components-placeholder__icon,
.ssb-block-placeholder .components-placeholder__icon svg {
	fill: #2563eb;
	color: #2563eb;
}
.ssb-block-placeholder .components-placeholder__instructions {
	color: #64748b;
}

/* ---------- Social share (editor preview chips) ---------- */
.ssb-share-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.ssb-share-editor.is-center .ssb-share-preview { justify-content: center; }
.ssb-share-editor.is-right .ssb-share-preview { justify-content: flex-end; }
.ssb-share-chip {
	display: inline-flex; align-items: center;
	padding: 6px 12px; border-radius: 8px;
	font-size: 13px; font-weight: 500;
	border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #1e293b;
}
.ssb-share-chip.is-x { background: #000; color: #fff; border-color: #000; }
.ssb-share-chip.is-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.ssb-share-chip.is-linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.ssb-share-chip.is-whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.ssb-share-chip.is-reddit { background: #ff4500; color: #fff; border-color: #ff4500; }
.ssb-share-chip.is-email { background: #64748b; color: #fff; border-color: #64748b; }
.ssb-share-chip.is-copy { background: #f1f5f9; color: #1e293b; }

/* ---------- FAQ / HowTo (editor repeater rows) ---------- */
.ssb-block-editor-label { font-weight: 600; color: #1e293b; margin: 0 0 10px; }
.ssb-repeater-row {
	border: 1px solid #e2e8f0; border-radius: 8px;
	padding: 12px; margin-block-end: 10px; background: #fff;
}