/* Prevent technical blog content from widening the mobile layout. */
.blog-post-page,
.blog-post-page > article,
.blog-article,
.blog-article > * {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.blog-article blockquote {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
}

.blog-article blockquote > * {
	max-width: 100%;
	min-width: 0;
}

.blog-article pre {
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	display: block;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: pre;
	width: 100%;
}

.blog-article pre code {
	display: block;
	max-width: none;
	min-width: 100%;
	overflow-wrap: normal;
	white-space: inherit;
	width: max-content;
	word-break: normal;
}

.blog-article :not(pre) > code,
.blog-article a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media(max-width: 768px) {
	.container {
		grid-template-columns: minmax(0, 1fr);
	}

	main.blog-post-page {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}
}

/* Compact shared page actions used in the single-post header. */
.blog-post-header .phpog-page-actions {
	clear: both;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}

.blog-post-header .phpog-page-action-core {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-post-header .phpog-page-action-share-wrap { display: inline-flex; }

.blog-post-header .phpog-page-action-button,
.blog-post-header .phpog-page-action-link {
	display: inline-flex;
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.blog-post-header .phpog-page-action-button:hover,
.blog-post-header .phpog-page-action-button:focus-visible,
.blog-post-header .phpog-page-action-link:hover,
.blog-post-header .phpog-page-action-link:focus-visible,
.blog-post-header .phpog-page-action-button.is-copied,
.blog-post-header .phpog-page-action-button[aria-pressed="true"] {
	border-color: var(--cms-color-accent);
	background: var(--cms-color-accent);
	color: var(--cms-color-on-accent);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.blog-post-header .phpog-page-action-icon {
	display: block;
	width: 17px;
	height: 17px;
	max-width: 17px;
	fill: currentColor;
}

.blog-post-header .blog-action-notice {
	width: 100%;
	margin: 2px 0 0;
	color: var(--cms-color-text-inverse-muted);
	font-size: .82rem;
}

@media print {
	.blog-post-header .phpog-page-actions,
	.blog-post-header .blog-action-notice { display: none !important; }
}