/* The light and dark mode switch. */
.kl-nav-logo { margin-right: auto; }
.kl-theme-toggle {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 0 10px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--kl-nav-active, #0B379B) !important;
	cursor: pointer;
	order: 5; /* Far right of the menu on larger screens. */
	transition: background-color .15s ease;
}
.kl-theme-toggle:hover { background: rgba(11, 55, 155, .08) !important; }
html[data-theme="dark"] .kl-theme-toggle:hover { background: rgba(157, 184, 255, .14) !important; }
.kl-theme-toggle:focus-visible { outline: 2px solid var(--e-global-color-secondary, #F66); outline-offset: 1px; }
.kl-theme-toggle svg { display: block; }
@media (max-width: 960px) {
	.kl-theme-toggle { order: 0; margin: 0 4px 0 0; }
}

/* Phones: stop anything pushing the page sideways, which makes the menu slide. */
@media (max-width: 1024px) {
	html, body { overflow-x: clip; }
	body.single-post .elementor-inline-items {
		flex-wrap: wrap;
		width: auto !important;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body.single-post .elementor-inline-items > .elementor-icon-list-item { margin-left: 0 !important; margin-right: 12px !important; }
	body.single-post .elementor-widget-theme-post-content :is(img, video, iframe, embed) { max-width: 100%; }
	body.single-post .elementor-widget-theme-post-content img { height: auto; }
	body.single-post .elementor-widget-theme-post-content :is(pre, code) { white-space: pre-wrap; overflow-wrap: anywhere; }
	body.single-post .elementor-widget-theme-post-content :is(p, li, a, h1, h2, h3, h4, blockquote) { overflow-wrap: break-word; }
}

/* Phones: more room at the edges, and no stretched word gaps. */
@media (max-width: 767px) {
	/* Charts stack over their legends, because side by side they are wider than the screen. */
	.kl-chart-body { flex-wrap: wrap; justify-content: center; }
	body.single-post .elementor-widget-theme-post-content { padding-left: 10px; padding-right: 10px; }
	body.single-post .elementor-widget-theme-post-content :is(p, li, blockquote, figcaption) { text-align: left !important; }
}