/*
 * ILM Components -- Rich text.
 *
 * Styles the fixed set of tags that survive the component's own `wp_kses()`
 * filter, and nothing else -- there is no point styling `<table>` here when a
 * `<table>` cannot reach the page through this component.
 *
 * Every selector is a descendant of the component class, so none of it can
 * reach ordinary WordPress content. This stylesheet never says `p { }` or
 * `a { }` on their own.
 */

.ilm-component--basic-rich-text {
	line-height: var(--ilm-line-height-base, 1.6);
	overflow-wrap: break-word;
}

.ilm-component--basic-rich-text > :first-child { margin-block-start: 0; }
.ilm-component--basic-rich-text > :last-child { margin-block-end: 0; }

.ilm-component--basic-rich-text p,
.ilm-component--basic-rich-text ul,
.ilm-component--basic-rich-text ol,
.ilm-component--basic-rich-text blockquote {
	margin-block: 0 0.75em;
}

.ilm-component--basic-rich-text ul,
.ilm-component--basic-rich-text ol {
	padding-inline-start: 1.5em;
}

.ilm-component--basic-rich-text li + li {
	margin-block-start: 0.25em;
}

.ilm-component--basic-rich-text a {
	color: var(--ilm-color-link, inherit);

	/*
	 * Underlined, not coloured. Underline is the only link affordance that
	 * survives a reader who cannot distinguish the link colour from the text
	 * around it, which is why it is not traded away for colour alone.
	 */
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ilm-component--basic-rich-text blockquote {
	border-inline-start: 3px solid var(--ilm-color-border-strong, #b6bcc4);
	color: var(--ilm-color-fg-muted, #5b6470);
	margin-inline: 0;
	padding-inline-start: 1em;
}

.ilm-component--basic-rich-text code {
	background-color: var(--ilm-color-bg-subtle, #f6f7f8);
	border-radius: var(--ilm-radius-sm, 0.25rem);
	font-size: 0.9em;
	padding: 0.15em 0.35em;
}

.ilm-component--basic-rich-text mark {
	background-color: var(--ilm-color-bg-strong, #e8eaed);
	color: inherit;
}

.ilm-component--basic-rich-text.ilm-size-sm { font-size: var(--ilm-font-size-sm, 0.875rem); }
.ilm-component--basic-rich-text.ilm-size-md { font-size: var(--ilm-font-size-base, 1rem); }
.ilm-component--basic-rich-text.ilm-size-lg { font-size: var(--ilm-font-size-lg, 1.125rem); }