/**
 * Styles for the plugin's blocks, in the editor and on the front end.
 *
 * @package siteskill-seo
 */

/* ---------- editor ---------- */

.sseo-block {
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	padding: 14px 16px;
	background: #fbfbfc;
}

.sseo-block-title {
	margin: 0 0 10px;
	font-weight: 600;
}

.sseo-block-note {
	margin: 6px 0 0;
	color: #646970;
	font-size: 13px;
}

.sseo-block-row {
	border-top: 1px solid #e0e0e0;
	padding-top: 12px;
	margin-top: 12px;
}

/* ---------- front end ---------- */

.sseo-faq {
	margin: 1.5em 0;
}

.sseo-faq-item {
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	margin-bottom: 10px;
	background: #fff;
}

.sseo-faq-q {
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 600;
	list-style: none;
}

.sseo-faq-q::-webkit-details-marker {
	display: none;
}

.sseo-faq-q::before {
	content: '+';
	display: inline-block;
	margin-inline-end: 8px;
	font-weight: 400;
	opacity: .6;
}

.sseo-faq-item[open] .sseo-faq-q::before {
	content: '–';
}

.sseo-faq-a {
	padding: 0 16px 14px;
}

.sseo-howto {
	margin: 1.5em 0;
}

.sseo-howto-steps {
	padding-inline-start: 1.4em;
}

.sseo-howto-step {
	margin-bottom: 1em;
}

.sseo-howto-time {
	color: #555;
	font-size: .9em;
}

.sseo-toc {
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	padding: 14px 18px;
	margin: 1.5em 0;
	background: #fafafa;
}

.sseo-toc-title {
	margin: 0 0 8px;
	font-weight: 700;
}

.sseo-toc-list {
	margin: 0;
	padding-inline-start: 1.2em;
}

.sseo-toc-list li {
	margin-bottom: 4px;
}

.sseo-toc-level-3 { padding-inline-start: 1em; }
.sseo-toc-level-4 { padding-inline-start: 2em; }
.sseo-toc-level-5,
.sseo-toc-level-6 { padding-inline-start: 3em; }

.sseo-breadcrumbs {
	margin: 0 0 1em;
	font-size: .9em;
	color: #555;
}

.sseo-breadcrumb-sep {
	margin: 0 .35em;
	opacity: .55;
}