.content {
	--sdf-quote-accent: #0051f3;
	--sdf-quote-accent-hover: #3d7bff;
	--sdf-quote-text: #f4f6fa;
	--sdf-quote-muted: #aeb5c2;
	--sdf-quote-line: rgba(255, 255, 255, 0.105);
}

/* --------------------------------------------------------------------------
 * Blog blockquotes
 * Native HTML only: <blockquote>, with optional <cite> for the source.
 * A linked source may be written as:
 * <cite><a href="...">Source</a></cite>
 * ----------------------------------------------------------------------- */

.content blockquote {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 29px !important;
	padding-block: 20px 18px !important;
	padding-inline-start: 68px !important;
	padding-inline-end: 23px !important;
	overflow: hidden;

	border: 1px solid var(--sdf-quote-line) !important;
	border-inline-start: 2px solid var(--sdf-quote-accent) !important;
	border-radius: 14px !important;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(0, 81, 243, 0.125),
			transparent 43%
		),
		linear-gradient(
			135deg,
			rgba(29, 33, 41, 0.98),
			rgba(18, 21, 27, 0.98) 62%,
			rgba(10, 28, 65, 0.72)
		) !important;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.13) !important;

	color: var(--sdf-quote-text) !important;
	font-size: clamp(15.5px, 1.08vw, 17.5px) !important;
	font-style: normal !important;
	font-weight: 500;
	line-height: 1.9 !important;

	/* Justify quotation text */
	text-align: justify !important;
	text-justify: inter-word;
	text-align-last: auto;
}

.content blockquote:dir(ltr) {
	background:
		radial-gradient(
			circle at 0% 0%,
			rgba(0, 81, 243, 0.125),
			transparent 43%
		),
		linear-gradient(
			225deg,
			rgba(29, 33, 41, 0.98),
			rgba(18, 21, 27, 0.98) 62%,
			rgba(10, 28, 65, 0.72)
		) !important;
}

.content blockquote::before {
	content: "\201D";
	position: absolute;
	z-index: 0;
	inset-block-start: 15px;
	inset-inline-start: 20px;

	color: var(--sdf-quote-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 55px;
	font-weight: 800;
	line-height: 1;
	opacity: 0.94;

	pointer-events: none;
}

.content blockquote::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: -74px;
	inset-inline-start: -68px;

	width: 178px;
	height: 178px;
	border-radius: 50%;

	background: rgba(0, 81, 243, 0.055);
	filter: blur(31px);

	pointer-events: none;
}

.content blockquote > * {
	position: relative;
	z-index: 1;
}

.content blockquote > :first-child {
	margin-top: 0 !important;
}

.content blockquote > :last-child:not(cite),
.content blockquote > p:last-of-type {
	margin-bottom: 0 !important;
}

.content blockquote p {
	color: inherit !important;
	font: inherit !important;
	line-height: inherit !important;

	text-align: justify !important;
	text-justify: inter-word;
	text-align-last: auto;
}

/* --------------------------------------------------------------------------
 * Quote source / author
 * This section must not inherit the justified alignment.
 * ----------------------------------------------------------------------- */

.content blockquote cite,
.content blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 13px !important;
	padding-top: 10px;

	border-top: 1px solid rgba(255, 255, 255, 0.075);

	color: var(--sdf-quote-muted) !important;
	font-size: 13px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;

	text-align: start !important;
	text-align-last: auto !important;
}

.content blockquote cite::before,
.content blockquote .wp-block-quote__citation::before {
	content: "—";
	margin-inline-end: 6px;

	color: var(--sdf-quote-accent);
	font-weight: 800;
}

/* Regular links inside the quotation text. */
.content blockquote a,
.content blockquote a:link,
.content blockquote a:visited {
	color: var(--sdf-quote-accent) !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * Linked quote source
 * Keeps the source visibly clickable and always uses SDF blue.
 * ----------------------------------------------------------------------- */

.content blockquote cite a,
.content blockquote cite a:link,
.content blockquote cite a:visited,
.content blockquote .wp-block-quote__citation a,
.content blockquote .wp-block-quote__citation a:link,
.content blockquote .wp-block-quote__citation a:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;

	color: var(--sdf-quote-accent) !important;
	font-weight: 650 !important;
	text-decoration: none !important;

	border-bottom: 1px dashed rgba(0, 81, 243, 0.58);

	transition:
		color 160ms ease,
		border-color 160ms ease,
		opacity 160ms ease;
}

.content blockquote cite a::after,
.content blockquote .wp-block-quote__citation a::after {
	content: "\2197";
	font-size: 0.88em;
	line-height: 1;
	opacity: 0.76;
}

.content blockquote cite a:hover,
.content blockquote cite a:focus,
.content blockquote .wp-block-quote__citation a:hover,
.content blockquote .wp-block-quote__citation a:focus {
	color: var(--sdf-quote-accent-hover) !important;
	border-bottom-color: currentColor;
}

.content blockquote cite a:focus-visible,
.content blockquote .wp-block-quote__citation a:focus-visible {
	outline: 2px solid rgba(0, 81, 243, 0.58);
	outline-offset: 4px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
 * Mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 767px) {
	.content blockquote {
		margin-top: 19px !important;
		margin-bottom: 24px !important;

		padding-block: 18px 17px !important;
		padding-inline-start: 53px !important;
		padding-inline-end: 16px !important;

		border-radius: 12px !important;
		box-shadow: none !important;

		font-size: 14.5px !important;
		line-height: 1.9 !important;

		text-align: justify !important;
		text-justify: inter-word;
	}

	.content blockquote::before {
		inset-block-start: 14px;
		inset-inline-start: 15px;
		font-size: 44px;
	}

	.content blockquote cite,
	.content blockquote .wp-block-quote__citation {
		margin-top: 11px !important;
		padding-top: 9px;

		font-size: 12.5px !important;
		text-align: start !important;
	}
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.content blockquote::after {
		filter: none;
	}

	.content blockquote cite a,
	.content blockquote .wp-block-quote__citation a {
		transition: none;
	}
}