/**
 * Styles shared by every display style.
 *
 * Colours and spacing stay deliberately sober and inherit the theme's
 * typography, so the reviews look like part of the site rather than a
 * widget bolted onto it.
 *
 * 0.16.0: no fixed colour any more. The card, its border and the grey of
 * the dates are mixed from the colour of the text around the reviews
 * (currentColor), so the same rules give a faint grey card on a light
 * theme, a faint light card on a dark theme, and follow a dark section
 * placed in a light page or a theme's "dark mode" switch, with no script.
 * The variables hold currentColor unresolved: it is resolved where they
 * are used, against the colour of that element. The grey of the dates
 * keeps 85% of the text colour: lighter than the text, yet above the
 * 4.5:1 contrast of accessibility guidelines on every theme of the test
 * bench (a theme whose own text is already grey left no margin at 70%).
 *
 * The three buttons (read the full review, see more reviews, carousel
 * arrows) carry ":not(#mgst-guard)": no element has that id, so the
 * selector matches as usual, but it weighs as much as an id. Some themes
 * restyle every button with heavy selectors (Twenty Twenty-One paints them
 * with "button:not(:hover):not(:active):not(.has-background)"); a class
 * alone cannot win against those. A site owner can still override the
 * plugin with an id or !important.
 *
 * 0.17.0: sizes and spacing are in em, relative to the text around the
 * reviews, never in rem. A theme that sets the root to 62.5% (10px) and
 * the text back to 16px with "1.6rem" made every rem of the plugin a
 * third smaller: 25px carousel arrows, cramped cards.
 */

.mgst-more-scope,
.mgst-reviews,
.mgst-linked {
	/* Fallback for browsers without color-mix() (before 2023): neutral
	   values readable on a light or a dark background alike. */
	--mgst-card: transparent;
	--mgst-border: rgba(128, 128, 128, 0.4);
	--mgst-muted: inherit;
	--mgst-hover: rgba(128, 128, 128, 0.15);
	--mgst-star: #e8a33d;
	--mgst-check: #2e9e57;
	--mgst-reply: rgba(128, 128, 128, 0.12);
	--mgst-radius: 8px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.mgst-more-scope,
	.mgst-reviews,
	.mgst-linked {
		--mgst-card: color-mix(in srgb, currentColor 5%, transparent);
		--mgst-border: color-mix(in srgb, currentColor 18%, transparent);
		--mgst-muted: color-mix(in srgb, currentColor 85%, transparent);
		--mgst-hover: color-mix(in srgb, currentColor 9%, transparent);
		--mgst-reply: color-mix(in srgb, currentColor 7%, transparent);
	}
}

/*
 * "White" card background (Display screen): the look of 0.15.0, with its
 * own dark text so a white card stays readable even on a dark theme.
 */
/* The hover tint is left automatic: the "See more" button of the carousel
   sits on the page, not on a card. */
.mgst-reviews.mgst-cards-white {
	--mgst-card: #fff;
	--mgst-border: #e3e3e3;
	--mgst-muted: #6b6b6b;
	--mgst-reply: #f2f2f2;
}

.mgst-cards-white .mgst-review {
	color: #222;
}

.mgst-reviews {
	margin: 2em 0;
}

.mgst-review {
	min-width: 0;
	overflow-wrap: break-word;
	/* 0.13.0: a theme without a global border-box rule would otherwise make
	   cards of the mosaic and the carousel (height: 100%) overflow their row. */
	box-sizing: border-box;
	background: var(--mgst-card);
	border: 1px solid var(--mgst-border);
	border-radius: var(--mgst-radius);
	padding: 1.25em 1.4em;
}

.mgst-review__head {
	align-items: flex-start;
	display: flex;
	/* 0.16.0: the badge goes under the name only when the card is too
	   narrow for both (a phone, a narrow column), never earlier: the name
	   keeps at least 6em (a long word) before it does. */
	flex-wrap: wrap;
	gap: 0.4em 1em;
	justify-content: space-between;
}

/* 0.16.0: the name and the date take the room left by the badge. */
.mgst-review__identity {
	flex: 1 1 6em;
	min-width: 0;
}

.mgst-review .mgst-review__author {
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.mgst-review__date {
	color: var(--mgst-muted);
	font-size: 0.85em;
}

/* 0.19.2: date of the experience, under the date of the review. */
.mgst-review .mgst-review__experience {
	color: var(--mgst-muted);
	font-size: 0.85em;
	line-height: 1.4;
	margin: 0.15em 0 0;
}

/* 0.16.0: one class more, so a theme rule such as ".entry-content a"
   does not paint the badge in the colour of the links. */
.mgst-review .mgst-review__source {
	border: 1px solid var(--mgst-border);
	border-radius: 999px;
	color: var(--mgst-muted);
	flex: none;
	font-size: 0.72em;
	letter-spacing: 0.02em;
	padding: 0.15em 0.7em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mgst-review__rating {
	color: var(--mgst-star);
	display: block;
	font-size: 1.05em;
	letter-spacing: 0.08em;
	margin: 0.48em 0 0.24em;
}

.mgst-review__text {
	line-height: 1.65;
}

.mgst-review__text p {
	margin: 0 0 0.75em;
}

.mgst-review__text p:last-child {
	margin-bottom: 0;
}

/*
 * Clamping limits the height of the text, never its presence: the full
 * review stays in the document and remains readable by machines.
 */
.mgst-review__text.is-clamped {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	display: -webkit-box;
	line-clamp: 7;
	overflow: hidden;
}

/*
 * 0.16.0: many themes style every button (filled background, capitals,
 * padding, a coloured hover). The selectors carry an extra class so they
 * outrank rules such as "button:hover" or "[type=button]:hover", and
 * every property such a rule may set is set here, in every state.
 */
.mgst-reviews .mgst-review__more:not(#mgst-guard),
.mgst-reviews .mgst-review__more:not(#mgst-guard):hover,
.mgst-reviews .mgst-review__more:not(#mgst-guard):focus,
.mgst-reviews .mgst-review__more:not(#mgst-guard):active {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.88em;
	height: auto;
	letter-spacing: normal;
	line-height: inherit;
	margin: 0.68em 0 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	text-decoration: underline;
	text-shadow: none;
	text-transform: none;
	width: auto;
}

/* A theme styling every button must not bring back a hidden one (0.15.0). */
.mgst-review__more[hidden] {
	display: none !important;
}

/* 0.16.0: a thicker underline rather than a fading text, which lowered
   the contrast below the accessibility threshold. */
.mgst-reviews .mgst-review__more:not(#mgst-guard):hover,
.mgst-reviews .mgst-review__more:not(#mgst-guard):focus-visible {
	text-decoration-thickness: 2px;
}

.mgst-reviews .mgst-review__more:not(#mgst-guard):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Visually hidden but announced by screen readers, the WordPress way. */
.mgst-reviews .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* 0.10.0: the source badge is a link, and the photo report link. */
.mgst-review a.mgst-review__source {
	text-decoration: none;
}

.mgst-review a.mgst-review__source:hover,
.mgst-review a.mgst-review__source:focus-visible {
	border-color: currentColor;
	color: inherit;
}

.mgst-review__report {
	margin: 0.8em 0 0;
}

.mgst-review__report a {
	font-weight: 600;
}

/* 0.12.0: "See more reviews". The hidden cards are in the page, only
   folded away; the button reveals them a few at a time. */
.mgst-reviews.has-more .mgst-is-extra:not(.is-revealed) {
	display: none;
}

.mgst-more-scope .mgst-more:not(#mgst-guard),
.mgst-reviews .mgst-more:not(#mgst-guard),
.mgst-more-scope .mgst-more:not(#mgst-guard):focus,
.mgst-reviews .mgst-more:not(#mgst-guard):focus,
.mgst-more-scope .mgst-more:not(#mgst-guard):active,
.mgst-reviews .mgst-more:not(#mgst-guard):active {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	font-weight: 600;
	height: auto;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 1.25em auto 0;
	min-height: 0;
	padding: 0.6em 1.6em;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	width: auto;
}

.mgst-more-scope .mgst-more:not(#mgst-guard):hover,
.mgst-reviews .mgst-more:not(#mgst-guard):hover,
.mgst-more-scope .mgst-more:not(#mgst-guard):focus-visible,
.mgst-reviews .mgst-more:not(#mgst-guard):focus-visible {
	background: var(--mgst-hover);
	border-color: currentColor;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

.mgst-more-scope .mgst-more:not(#mgst-guard):focus-visible,
.mgst-reviews .mgst-more:not(#mgst-guard):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mgst-more[hidden] {
	display: none !important;
}

.mgst-carrousel__slide--more {
	align-items: center;
	display: flex;
	justify-content: center;
}

.mgst-reviews .mgst-carrousel__slide--more .mgst-more:not(#mgst-guard) {
	margin: 0;
}

/* 0.13.0: "Reviews about this page", at the top of a linked page. The
   title keeps the theme's own heading style. */
.mgst-linked {
	margin: 0 0 2em;
}

.mgst-linked .mgst-reviews {
	margin-top: 1em;
}

/* 0.14.0: Facebook has no stars, only "Recommends" / "Does not recommend". */
.mgst-review__recommend {
	display: inline-block;
	font-size: 0.9em;
	font-weight: 600;
	margin: 0.55em 0 0.28em;
}

/* 0.16.0: only the tick is green; the word takes the colour of the text,
   so it stays readable on a dark background. */
.mgst-review__recommend--positive {
	color: inherit;
}

.mgst-review__recommend--positive [aria-hidden="true"] {
	color: var(--mgst-check);
}

.mgst-review__recommend--negative {
	color: var(--mgst-muted);
}

/* 0.18.0: the reply of the business, under the review. A <details>
   element: unfolded in the list, folded in the mosaic and the carousel,
   always in the HTML for search engines and assistants. */
.mgst-review .mgst-review__reply {
	background: var(--mgst-reply);
	border-radius: calc(var(--mgst-radius) - 2px);
	font-size: 0.95em;
	margin: 0.9em 0 0;
	padding: 0.7em 0.95em;
}

.mgst-review .mgst-review__reply-title {
	cursor: pointer;
	font-weight: 600;
	line-height: 1.4;
}

.mgst-review .mgst-review__reply-title:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mgst-review .mgst-review__reply-text {
	line-height: 1.6;
	margin-top: 0.45em;
}

.mgst-review .mgst-review__reply-text p {
	margin: 0 0 0.6em;
}

.mgst-review .mgst-review__reply-text p:last-child {
	margin-bottom: 0;
}

/* 0.19.0: link to "How our reviews are managed", under a block of reviews
   when the shortcode asks for it. Small and discreet, in the colours of
   the text around it. */
.mgst-policy-link {
	font-size: 0.875em;
	line-height: 1.5;
	margin: 0.9em 0 0;
}

.mgst-policy-link .mgst-policy-link__a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mgst-policy-link .mgst-policy-link__a:hover,
.mgst-policy-link .mgst-policy-link__a:focus {
	text-decoration-thickness: 2px;
}