/*
 * Blocks added to posts published from your dashboard: the review card, the
 * call-to-action panel, the "keep reading" list and the marker on FAQ questions.
 *
 * Your theme styles the article itself — its fonts, sizes, spacing, link colour,
 * headings and quotes. This file deliberately sets none of those, on anything.
 * It styles only the blocks listed above, all of which carry an rvc- class, and
 * it needs nothing from your theme to do it.
 *
 * The declarations marked !important are all of one kind: undoing your
 * theme's decoration of an element INSIDE one of these blocks — the quote's
 * border and indent, the list's bullets. They are marked because a theme that
 * scopes its rules under an id (#content, #primary, #main, #left-area) outranks
 * any selector built from classes, and the box would otherwise be drawn twice,
 * once by us and once by your theme, one inside the other. Nothing here selects
 * an element outside these blocks.
 *
 * To restyle a block, use a selector of three classes or more (or the same two
 * in a stylesheet that loads later) — and, for the declarations above, your own
 * !important. To switch it off completely, dequeue the 'revcon-post' handle.
 *
 * Colours: --rvc-accent / --rvc-accent-2 are the client's brand colours and
 * --rvc-accent-tint / --rvc-accent-2-tint the same two at 8% alpha. All four are
 * optional; without them everything below falls back to a neutral grey that
 * suits a light and a dark theme equally.
 */

/* The three panels. Two classes on the element itself, so no wrapper, body
   class or post class has to exist for these to apply. */
.rvc.rvc-review,
.rvc.rvc-cta,
.rvc.rvc-links {
	box-sizing: border-box;
	margin: 2em 0;
	padding: 1.2em 1.4em;
	border: 1px solid rgba(128, 128, 128, 0.32);
	border-radius: 14px;
	background-color: rgba(128, 128, 128, 0.05);
	color: inherit;
	text-align: start;
}

/* The labels this plugin invents — the only text it sizes. Dimmed with opacity
   rather than a colour, which needs no knowledge of the background. The margin
   is an undo: these are paragraphs, and the theme's paragraph spacing would
   otherwise push the label away from the block it belongs to. */
.rvc .rvc-review__eyebrow,
.rvc .rvc-links__title {
	margin: 0 0 0.6em !important;
	font-size: 0.8125em;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	opacity: 0.75;
}

/* The review the post was written from. */
.rvc.rvc-review {
	background-color: var(--rvc-accent-2-tint, var(--rvc-accent-tint, rgba(128, 128, 128, 0.05)));
}

/* Themes decorate blockquotes heavily — a rule, an indent, a fill, big quote
   marks. Inside the card that reads as a box within a box, so it is undone
   here; outside it, every blockquote in the article keeps the theme's own
   treatment untouched. This is the reset the id-scoped themes would otherwise
   take from us, hence !important; see the note at the top of the file. */
.rvc.rvc-review .rvc-review__quote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-style: inherit !important;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

.rvc.rvc-review .rvc-review__quote::before,
.rvc.rvc-review .rvc-review__quote::after {
	content: none !important;
}

/* The quote's own paragraph. It is named rather than matched as a plain
   descendant paragraph so the plugin can tell it is one of these blocks, and so
   leaves its fallback spacing alone if this file is ever missing. The theme's
   own paragraph spacing would otherwise open a gap at the foot of the quote. */
.rvc.rvc-review .rvc-review__text {
	margin: 0 !important;
}

.rvc.rvc-review .rvc-review__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.7em;
	/* A figcaption is one of the few things nearly every theme styles, usually
	   centred and in a pale grey chosen for a caption sitting on the page
	   background — which on this tinted card can come out unreadable. */
	margin: 0.8em 0 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: 0.875em;
	text-align: start !important;
}

.rvc .rvc-review__stars {
	letter-spacing: 0.12em;
}

/* A <cite>, which every browser italicises by default, and many themes then
   italicise again on purpose. */
.rvc .rvc-review__author {
	font-style: normal !important;
	font-weight: 600;
}

/* The score in words and the source. The star row beside them is aria-hidden
   decoration, so "5 out of 5" is what a screen reader actually reads — it is
   dimmed rather than hidden, because it is also the whole of the rating on a
   site that never loads this file. */
.rvc .rvc-review__rating,
.rvc .rvc-review__source {
	opacity: 0.75;
}

/* Call to action. */
.rvc.rvc-cta {
	background-color: var(--rvc-accent-tint, rgba(128, 128, 128, 0.05));
}

/* The panel's three paragraphs. Their spacing is measured from each other, so
   the theme's paragraph rhythm is undone rather than added to. */
.rvc.rvc-cta .rvc-cta__heading {
	margin: 0 !important;
	font-size: 1.0625em;
	font-weight: 600;
	line-height: 1.4;
}

.rvc.rvc-cta .rvc-cta__line {
	margin: 0.5em 0 0 !important;
}

.rvc.rvc-cta .rvc-cta__action {
	margin: 0.9em 0 0 !important;
}

/* A pill outline, not a filled button: the fill would be the client's brand
   colour and there is no way to know a text colour that stays legible on top of
   it. The label keeps the theme's own link colour for the same reason — but not
   its underline, which inside a pill reads as a mistake. */
.rvc .rvc-cta__button {
	display: inline-block;
	padding: 0.5em 1.1em;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 999px;
	background-color: var(--rvc-accent-tint, rgba(128, 128, 128, 0.08));
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}

/* Keep reading. The bullets and the indent that comes with them are the theme's
   (or, failing that, the browser's), and this list is a stack of links rather
   than a list of points, so both are undone. list-style is set on the items as
   well as the list: it inherits, and a theme rule naming the item beats
   inheritance from the list however specific the list's own rule is. */
.rvc.rvc-links ul {
	margin: 0.6em 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rvc.rvc-links li {
	margin: 0.35em 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* FAQ questions. A shape rather than a letter, so nothing is added to the
   heading's text: a letter would end up in search results, in the page outline
   and in a screen reader, and would need translating. */
.rvc-faq-q::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-inline-end: 0.5em;
	vertical-align: 0.05em;
	border-radius: 2px;
	background-color: var(--rvc-accent, currentColor);
	opacity: 0.6;
}