/* Frontend renderer styles for Editor.js content. Scope these under the host article body if needed. */

.page-content__body p,
.page-content__body ul,
.page-content__body ol,
.page-content__body blockquote,
.page-content__body figure,
.page-content__body .editorjs-alert,
.page-content__body .editorjs-checklist,
.page-content__body .editorjs-table-wrap,
.page-content__body .editorjs-columns {
	margin: 0 0 18px;
}

.page-content__body ul,
.page-content__body ol {
	padding-left: 24px;
}

.page-content__body li + li {
	margin-top: 6px;
}

.page-content__body mark {
	padding: 0 0.12em;
	border-radius: 3px;
	background: #fff3cd;
}

.editorjs-checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.editorjs-checklist__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #344054;
	cursor: pointer;
	line-height: 1.57;
}

.editorjs-checklist__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.editorjs-checklist__box {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1px solid #c9c9c9;
	border-radius: 5px;
	background: #fff;
	color: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}

.editorjs-checklist__check {
	display: inline-flex;
	width: 20px;
	height: 20px;
	opacity: 0;
	transition: opacity .15s ease;
}

.editorjs-checklist__check svg {
	width: 20px;
	height: 20px;
}

.editorjs-checklist__input:checked + .editorjs-checklist__box {
	border-color: #369fff;
	background: #369fff;
}

.editorjs-checklist__input:checked + .editorjs-checklist__box .editorjs-checklist__check {
	opacity: 1;
}

.editorjs-checklist__input:checked + .editorjs-checklist__box + .editorjs-checklist__text {
	color: #667085;
}

.page-content__body blockquote {
	padding: 16px 18px;
	border-left: 4px solid #1570ef;
	border-radius: 6px;
	background: #f8fbff;
	color: #1f2937;
}

.page-content__body blockquote p {
	margin: 0;
}

.page-content__body blockquote cite {
	display: block;
	margin-top: 8px;
	color: #667085;
	font-size: 14px;
	font-style: normal;
}

.page-content__body figure {
	display: grid;
	gap: 8px;
}

.page-content__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.page-content__body .editorjs-image--border img {
	border: 1px solid #e6e8ec;
}

.page-content__body .editorjs-image--background {
	padding: 18px;
	border-radius: 8px;
	background: #f8fafc;
}

.page-content__body .editorjs-image--stretched img {
	width: 100%;
}

.page-content__body figcaption {
	color: #667085;
	font-size: 14px;
}

.page-content__body hr {
	width: 72px;
	height: 2px;
	margin: 28px auto;
	border: 0;
	background: #d0d5dd;
}

.editorjs-table-wrap {
	overflow-x: auto;
}

.editorjs-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.editorjs-table-wrap th,
.editorjs-table-wrap td {
	padding: 10px 12px;
	border: 1px solid #e6e8ec;
	text-align: left;
	vertical-align: top;
}

.editorjs-table-wrap th {
	background: #f8fafc;
	color: #111827;
	font-weight: 700;
}

.editorjs-embed iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: 8px;
	background: #111827;
}

.editorjs-alert {
	padding: 14px 16px;
	border: 1px solid #d0d5dd;
	border-left-width: 4px;
	border-radius: 8px;
	background: #f8fafc;
	color: #344054;
}

.editorjs-alert--primary {
	border-left-color: #1570ef;
}

.editorjs-alert--secondary {
	border-left-color: #667085;
}

.editorjs-alert--info {
	border-left-color: #06aed4;
	background: #ecfdff;
}

.editorjs-alert--success {
	border-left-color: #12b76a;
	background: #ecfdf3;
}

.editorjs-alert--warning {
	border-left-color: #f79009;
	background: #fffaeb;
}

.editorjs-alert--danger {
	border-left-color: #d92d20;
	background: #fef3f2;
}

.editorjs-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.editorjs-columns__col > *:first-child {
	margin-top: 0;
}

.editorjs-columns__col > *:last-child {
	margin-bottom: 0;
}