/**
 * Section content components.
 *
 * Loaded in two places from one file: into the TinyMCE iframe via mce_css, and
 * onto the front end via wp_enqueue_style. What the client sees while editing
 * is therefore rendered by the same rules as the published page.
 *
 * Structural only. Colours, type scale and spacing rhythm are wired to the
 * design system when the sub-section template is built; the values here are
 * neutral placeholders so the components are legible and distinguishable in
 * the meantime.
 *
 * Selectors are kept to our own classes so the file is safe to load globally.
 * The one exception is the `sup` rule at the bottom.
 */

/* Parent quote with demographic attribution. */
.quote-box {
	margin: 1.75em 0;
	padding: 1.25em 1.5em;
	border-left: 4px solid rgba(0, 0, 0, 0.35);
	background: rgba(0, 0, 0, 0.04);
	font-style: normal;
	quotes: none;
}

.quote-box > *:first-child {
	margin-top: 0;
}

.quote-box > *:last-child {
	margin-bottom: 0;
}

/* Speaker line inside a quote box. */
.quote-attribution {
	margin-top: 0.75em;
	font-size: 0.9em;
	font-style: italic;
	opacity: 0.8;
}

/* Informational aside, not a quotation. */
.pull-box {
	margin: 1.75em 0;
	padding: 1.25em 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.02);
}

.pull-box > *:first-child {
	margin-top: 0;
}

.pull-box > *:last-child {
	margin-bottom: 0;
}

/**
 * Footnote markers, produced by the superscript button.
 *
 * The only element selector in this file. Without it, a superscript pushes its
 * line apart from the surrounding text, which is visible on every paragraph
 * that cites a source. If the design system takes over line-height, this rule
 * should move there.
 */
sup {
	line-height: 0;
}