.can-seo-longform {
	background: color-mix(in oklab, var(--can-card) 40%, transparent);
	padding: 4rem 1rem;
}

.can-seo-longform__inner {
	max-width: 48rem;
	margin: 0 auto;
}

.can-seo-longform__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--can-primary);
}

.can-seo-longform__title {
	margin: 0.5rem 0 0;
	font-family: var(--can-font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--can-foreground);
}

.can-seo-longform__read-more {
	margin-top: 1.5rem;
}

.can-seo-longform__content {
	position: relative;
	max-height: var(--can-collapsed-height, 520px);
	overflow: hidden;
	color: var(--can-muted);
	line-height: 1.7;
}

.can-seo-longform__content.is-expanded {
	max-height: none;
}

.can-seo-longform__body {
	color: var(--can-muted);
	line-height: 1.7;
}

.can-seo-longform__body h2,
.can-seo-longform__body .wp-block-heading,
.can-seo-longform__content h2,
.can-seo-longform__content .wp-block-heading {
	margin: 2.5rem 0 0;
	font-family: var(--can-font-display);
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--can-foreground);
	background: none !important;
	border: 0;
	box-shadow: none;
}

/* Kill pasted WordPress Highlight / <mark> yellow on headings + body */
.can-seo-longform__content h1,
.can-seo-longform__content h2,
.can-seo-longform__content h3,
.can-seo-longform__content h4,
.can-seo-longform__content h1 *,
.can-seo-longform__content h2 *,
.can-seo-longform__content h3 *,
.can-seo-longform__content h4 *,
.can-seo-longform__content mark,
.can-seo-longform__content .has-inline-color,
.can-seo-longform__body h1,
.can-seo-longform__body h2,
.can-seo-longform__body h3,
.can-seo-longform__body h4,
.can-seo-longform__body h1 *,
.can-seo-longform__body h2 *,
.can-seo-longform__body h3 *,
.can-seo-longform__body h4 *,
.can-seo-longform__body mark,
.can-seo-longform__body .has-inline-color {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.can-seo-longform__content h1 *,
.can-seo-longform__content h2 *,
.can-seo-longform__content h3 *,
.can-seo-longform__content h4 *,
.can-seo-longform__body h1 *,
.can-seo-longform__body h2 *,
.can-seo-longform__body h3 *,
.can-seo-longform__body h4 * {
	color: inherit !important;
}

.can-seo-longform__body h2:first-child,
.can-seo-longform__body .wp-block-heading:first-child,
.can-seo-longform__content h2:first-child,
.can-seo-longform__content .wp-block-heading:first-child {
	margin-top: 0;
}

.can-seo-longform__body p,
.can-seo-longform__body .wp-block-paragraph,
.can-seo-longform__body li,
.can-seo-longform__content p,
.can-seo-longform__content .wp-block-paragraph,
.can-seo-longform__content li {
	margin: 0.75rem 0 0;
	color: var(--can-muted);
}

/* Force one text color — including accidental/broken links inside paragraphs */
.can-seo-longform__content p,
.can-seo-longform__content p *,
.can-seo-longform__body p,
.can-seo-longform__body p * {
	color: var(--can-muted) !important;
	background: transparent !important;
}

.can-seo-longform__content a,
.can-seo-longform__body a {
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, var(--can-primary) 50%, transparent);
	text-underline-offset: 0.15em;
}

.can-seo-longform__content a:hover,
.can-seo-longform__content a:focus-visible,
.can-seo-longform__body a:hover,
.can-seo-longform__body a:focus-visible {
	color: var(--can-primary) !important;
	text-decoration-color: currentColor;
}

.can-seo-longform__body p:first-child,
.can-seo-longform__body .wp-block-paragraph:first-child,
.can-seo-longform__content p:first-child,
.can-seo-longform__content .wp-block-paragraph:first-child {
	margin-top: 0;
}

.can-seo-longform__body .wp-block-image,
.can-seo-longform__body .wp-block-list,
.can-seo-longform__body .wp-block-table,
.can-seo-longform__body .wp-block-quote,
.can-seo-longform__body .wp-block-buttons,
.can-seo-longform__body .wp-block-separator {
	margin-top: 1.5rem;
}

.can-seo-longform__fade {
	position: absolute;
	inset: auto 0 0;
	height: 10rem;
	background: linear-gradient(to top, color-mix(in oklab, var(--can-card) 95%, transparent), transparent);
	pointer-events: none;
}

.can-seo-longform__content.is-expanded .can-seo-longform__fade {
	display: none;
}

.can-seo-longform__toggle-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.can-seo-longform__toggle-wrap[hidden] {
	display: none;
}

.can-seo-longform__toggle {
	border: 1px solid var(--can-border);
	border-radius: 999px;
	background: var(--can-card);
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--can-shadow-card);
}

.can-seo-longform__toggle:hover {
	box-shadow: var(--can-shadow-card-hover);
}

.can-seo-longform__toggle:focus-visible {
	outline: 2px solid var(--can-primary);
	outline-offset: 2px;
}

/* Editor: normal colors, easy to click each paragraph/heading */
.can-seo-longform--editor {
	padding: 1.5rem;
	border: 1px dashed var(--can-border);
	border-radius: 1rem;
	background: var(--can-card);
}

.can-seo-longform--editor .can-seo-longform__editor-body {
	margin-top: 1.25rem;
}

.can-seo-longform--editor .can-seo-longform__editor-body > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

.can-seo-longform--editor .block-editor-block-list__block {
	max-width: 100%;
}

/* Kill Classic-block yellow chrome inside SEO content */
.editor-styles-wrapper .can-seo-longform--editor .wp-block-freeform.block-library-rich-text__tinymce,
.editor-styles-wrapper .can-seo-longform--editor .mce-tinymce,
.editor-styles-wrapper .can-seo-longform--editor .mce-top-part::before,
.editor-styles-wrapper .can-seo-longform--editor .block-library-classic__toolbar,
.editor-styles-wrapper .can-seo-longform--editor .wp-block-freeform {
	background: transparent !important;
	border-color: var(--can-border, #e2e8f0) !important;
	box-shadow: none !important;
}

.editor-styles-wrapper .can-seo-longform--editor .mce-toolbar-grp,
.editor-styles-wrapper .can-seo-longform--editor .mce-panel,
.editor-styles-wrapper .can-seo-longform--editor .mce-btn-group {
	background: #f8fafc !important;
	border-color: #e2e8f0 !important;
}

.editor-styles-wrapper .can-seo-longform--editor .mce-top-part::before {
	content: none !important;
	box-shadow: none !important;
	border: 0 !important;
	background: none !important;
}

/* Standard text colors in editor */
.can-seo-longform--editor .wp-block-heading {
	color: var(--can-foreground);
	background: none !important;
	border: 0;
}

.can-seo-longform--editor .wp-block-paragraph {
	color: var(--can-muted);
	background: none !important;
}

.can-seo-longform--editor mark,
.can-seo-longform--editor .has-inline-color,
.can-seo-longform--editor h1,
.can-seo-longform--editor h2,
.can-seo-longform--editor h3,
.can-seo-longform--editor h4,
.can-seo-longform--editor h1 *,
.can-seo-longform--editor h2 *,
.can-seo-longform--editor h3 *,
.can-seo-longform--editor h4 * {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit;
}

.can-seo-longform--editor h1,
.can-seo-longform--editor h2,
.can-seo-longform--editor h3,
.can-seo-longform--editor h4 {
	color: var(--can-foreground);
}
