/*
 * Pull quotes and block quotes (Phase 4 design update).
 *
 * Replaces the old look (a thick gold bar down the left side, removed in styles.less)
 * with a centred serif quote between two thin teal rules and a gold opening mark.
 * Editors use both the Quote block and the Pull Quote block for this, so both get the design.
 *
 * Colours: teal #6eadbc (rules), gold #fdbf56 (quote mark). Change them in the two variables below.
 * Text colour is inherited, so the quotes also work inside coloured cards and dark sections.
 */

/* ---------- The frame ---------- */

.wp-block-pullquote,
:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote {
	--rr-pq-rule: #6eadbc;
	--rr-pq-mark: #fdbf56;
	max-width: 760px;
	margin: 64px auto;
	padding: 36px 24px 32px;
	text-align: center;
	border: 0;
	border-top: 2px solid var(--rr-pq-rule);
	border-bottom: 2px solid var(--rr-pq-rule);
	font-family: "Playfair Display", serif;
	font-style: italic;
	line-height: 1.4;
	box-sizing: border-box;
}

/*
 * The Pull Quote block wraps a blockquote in a figure: only the figure gets the frame.
 * "figure.wp-block-pullquote > blockquote" is more specific than the frame rule and the
 * phone rule below, so this reset wins wherever it sits in the file.
 */
figure.wp-block-pullquote > blockquote {
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: inherit;
	border: 0;
	font: inherit;
}

/* ---------- Opening quote mark ---------- */

.wp-block-pullquote::before,
:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote::before {
	display: block;
	height: 28px;
	margin-bottom: 8px;
	color: var(--rr-pq-mark);
	font-family: Georgia, "Playfair Display", serif;
	font-size: 64px;
	font-style: normal;
	line-height: 0.7;
	content: "\201C";
}

figure.wp-block-pullquote > blockquote::before {
	content: none;
}

/* ---------- Text ---------- */

.wp-block-pullquote p,
:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote p {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: clamp(22px, 3.2vw, 32px); /* px, not rem: the site's root size is 62.5%, the editor's is not */
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
}

.wp-block-pullquote p + p,
:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote p + p {
	margin-top: 16px;
}

/* ---------- Attribution ---------- */

.wp-block-pullquote cite,
:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote cite {
	display: block;
	margin-top: 22px;
	font-family: "Lato", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

/*
 * The attribution line is optional: an editor who does not want it simply deletes its text,
 * and WordPress then leaves the line out. This also hides one that was saved empty (or with
 * only a line break in it), so it never leaves a gap under the quote.
 * Front end only: in the editor the empty line must stay visible, it is where the text is typed.
 */
body:not(.wp-admin, .editor-styles-wrapper) :is(.wp-block-pullquote, blockquote) cite:empty,
body:not(.wp-admin, .editor-styles-wrapper) :is(.wp-block-pullquote, blockquote) cite:has(> br:only-child) {
	display: none;
}

/* ---------- Filled pull quotes ---------- */

/*
 * Many existing articles use a Pull Quote with a background colour (for example amber).
 * The coloured box is the frame, so it gets no rules, and the quote mark follows the
 * text colour: a gold mark on an amber box would be invisible.
 */
.wp-block-pullquote.has-background {
	padding: 40px 28px 32px;
	border: 0;
}

.wp-block-pullquote.has-background::before {
	color: currentColor;
	opacity: 0.45;
}

/* ---------- Floated pull quotes stay narrow ---------- */

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
	max-width: 340px;
	margin-top: 8px;
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.wp-block-pullquote,
	:is(.single-post, .posts__page, .editor-styles-wrapper) blockquote {
		margin: 44px 0;
		padding: 28px 8px 24px;
	}

	.wp-block-pullquote.alignleft,
	.wp-block-pullquote.alignright {
		max-width: none;
	}
}