/*
 * Guides: the callout boxes the articles use, their pictures and code.
 *
 * A callout is a blockquote with one class (key, note, tip, warn), so it reads
 * as an ordinary quote anywhere this file does not reach. Icons are drawn with
 * an SVG mask: the theme does not load an icon font for post content.
 */

.single-post .wd-entry-content blockquote.key,
.single-post .wd-entry-content blockquote.note,
.single-post .wd-entry-content blockquote.tip,
.single-post .wd-entry-content blockquote.warn {
	position: relative;
	margin: 28px 0;
	padding: 18px 22px 18px 58px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-left: 4px solid var(--bgl-callout, #c8cdd4);
	border-radius: 12px;
	background: color-mix(in srgb, var(--bgl-callout, #c8cdd4) 9%, transparent);
	font-size: 16px;
	font-style: normal;
	line-height: 1.7;
	color: inherit;
	text-align: left;
}

.single-post .wd-entry-content blockquote.key::before,
.single-post .wd-entry-content blockquote.note::before,
.single-post .wd-entry-content blockquote.tip::before,
.single-post .wd-entry-content blockquote.warn::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 20px;
	height: 20px;
	background: var(--bgl-callout, #c8cdd4);
	-webkit-mask: var(--bgl-icon) center / contain no-repeat;
	mask: var(--bgl-icon) center / contain no-repeat;
}

.single-post .wd-entry-content blockquote.key::after,
.single-post .wd-entry-content blockquote.note::after,
.single-post .wd-entry-content blockquote.tip::after,
.single-post .wd-entry-content blockquote.warn::after {
	display: none;
}

.single-post .wd-entry-content blockquote.key > :last-child,
.single-post .wd-entry-content blockquote.note > :last-child,
.single-post .wd-entry-content blockquote.tip > :last-child,
.single-post .wd-entry-content blockquote.warn > :last-child {
	margin-bottom: 0;
}

/* The main point of the article: the site's own silver, and a key. */
.single-post .wd-entry-content blockquote.key {
	--bgl-callout: #c8cdd4;
	--bgl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.6-4A6 6 0 1 0 12.6 14H16v3h3v-3h2v-4z'/%3E%3C/svg%3E");
}

/* An aside: blue, and an i. */
.single-post .wd-entry-content blockquote.note {
	--bgl-callout: #5aa9e6;
	--bgl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
}

/* A tip: teal, and a bulb. */
.single-post .wd-entry-content blockquote.tip {
	--bgl-callout: #3fbac2;
	--bgl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9zm3-19a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}

/* A warning: amber, and a triangle. */
.single-post .wd-entry-content blockquote.warn {
	--bgl-callout: #f0b429;
	--bgl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/%3E%3C/svg%3E");
}

/* Pictures fill the column and keep their shape. */
.single-post .wd-entry-content img.bgl-blog-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 26px 0;
	border-radius: 12px;
}

.single-post .wd-entry-content pre {
	overflow-x: auto;
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .35);
	font-size: 14px;
	line-height: 1.6;
	white-space: pre;
}

.single-post .wd-entry-content code {
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .07);
	font-size: .92em;
}

.single-post .wd-entry-content pre code {
	padding: 0;
	background: none;
}

.single-post .wd-entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.single-post .wd-entry-content blockquote.key,
	.single-post .wd-entry-content blockquote.note,
	.single-post .wd-entry-content blockquote.tip,
	.single-post .wd-entry-content blockquote.warn {
		padding: 16px 16px 16px 50px;
	}

	.single-post .wd-entry-content blockquote.key::before,
	.single-post .wd-entry-content blockquote.note::before,
	.single-post .wd-entry-content blockquote.tip::before,
	.single-post .wd-entry-content blockquote.warn::before {
		top: 18px;
		left: 16px;
	}
}