/*
 * CKEditor 5 content styles for the public site.
 * Needed so image alignment/resize from the editor matches the frontend.
 */

:root {
	--ck-image-style-spacing: 1.5em;
}

figure.image,
.image {
	display: table;
	clear: both;
	text-align: center;
	margin: 0.9em auto;
	min-width: 50px;
}

figure.image > img,
.image > img,
figure.image img,
.image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.image-inline {
	display: inline-flex;
	max-width: 100%;
	align-items: flex-start;
}

.image-inline img {
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 100%;
	height: auto;
}

figure.image.image_resized,
.image.image_resized {
	max-width: 100%;
	display: block;
	box-sizing: border-box;
}

figure.image.image_resized > img,
.image.image_resized > img,
figure.image.image_resized img,
.image.image_resized img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

figure.image.image_resized > figcaption,
.image.image_resized > figcaption {
	display: block;
}

.image-style-side {
	float: right;
	margin-left: var(--ck-image-style-spacing);
	max-width: 50%;
}

.image-style-align-left {
	float: left;
	clear: none;
	margin-right: var(--ck-image-style-spacing);
}

.image-style-align-right {
	float: right;
	clear: none;
	margin-left: var(--ck-image-style-spacing);
}

.image-style-align-center {
	margin-left: auto;
	margin-right: auto;
}

.image-style-block-align-left {
	margin-left: 0;
	margin-right: auto;
}

.image-style-block-align-right {
	margin-left: auto;
	margin-right: 0;
}

.image > figcaption {
	display: table-caption;
	caption-side: bottom;
	word-break: break-word;
	color: #333;
	background-color: #f7f7f7;
	padding: 0.6em;
	font-size: 0.75em;
	outline-offset: -1px;
}

/* Keep text wrapping correctly around floated editor images */
.center-nav:after,
.page-no-sidebars:after,
.fewText:after {
	content: "";
	display: table;
	clear: both;
}