/*
 * MyBMS editor content contract.
 * This file intentionally styles only content produced/edited by MyBMS.
 */

.rich-text,
.ql-editor {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	color: rgb(var(--color-tertiary));
}

.rich-text :is(p, h1, h2, h3, h4, h5, h6),
.ql-editor :is(p, h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.rich-text p + p,
.ql-editor p + p {
	margin-top: 0.85em;
}

.rich-text :is(h2, h3, h4),
.ql-editor :is(h2, h3, h4),
.content-heading :is(h2, h3, h4) {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-heading);
	line-height: 1.12;
	color: rgb(var(--color-tertiary));
}

.rich-text h2,
.ql-editor h2,
.content-heading h2 { font-size: var(--font-size-h2); }
.rich-text h3,
.ql-editor h3,
.content-heading h3 { font-size: var(--font-size-h3); }
.rich-text h4,
.ql-editor h4,
.content-heading h4 { font-size: var(--font-size-h4); }

.color-app-primary,
.ql-color-primary { color: rgb(var(--color-primary)); }
.color-app-secondary,
.ql-color-secondary { color: rgb(var(--color-secondary)); }
.color-app-tertiary,
.ql-color-tertiary { color: rgb(var(--color-tertiary)); }
.color-app-white,
.ql-color-white { color: rgb(var(--color-white)); }

.content-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.content-heading.ql-align-center { justify-content: center; }
.content-heading.ql-align-right { justify-content: flex-end; }
.content-heading.ql-align-justify { justify-content: flex-start; }
.content-heading.ql-align-justify > :is(h2, h3, h4) { flex: 1 1 auto; }

.content-heading-icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	max-width: 54px;
	max-height: 54px;
	object-fit: contain;
}

.rich-text a:not(.content-button),
.ql-editor a:not(.content-button) {
	color: rgb(var(--color-primary));
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.content-button.button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--button-height);
	padding: 8px var(--button-padding-inline);
	border-radius: var(--button-radius);
	font-weight: var(--button-font-weight);
	font-size: var(--button-font-size);
	line-height: 1.2;
	text-decoration: none;
	background: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.content-button.button-link:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-small);
}

.content-button.button-link[data-button-color="primary"] { background: rgb(var(--color-primary)); }
.content-button.button-link[data-button-color="secondary"] { background: rgb(var(--color-secondary)); }
.content-button.button-link[data-button-color="tertiary"] { background: rgb(var(--color-tertiary)); }
.content-button.button-link[data-button-background="transparent"] {
	background: transparent;
	color: rgb(var(--color-primary));
	box-shadow: inset 0 0 0 1px rgb(var(--color-primary));
}

.content-button.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: rgb(var(--color-tertiary));
	text-decoration: none;
}

.content-button.arrow-link::after {
	content: "→";
	font-size: 1.2em;
	color: rgb(var(--color-secondary));
	transition: transform var(--transition-fast);
}

.content-button.arrow-link:hover::after {
	transform: translateX(4px);
}

.content-frame {
	margin-block: 1.15em;
	padding: var(--content-frame-padding);
	border: 1px solid rgb(var(--color-primary) / 0.20);
	border-radius: var(--radius-medium);
	background: rgb(var(--color-white) / 0.68);
	box-shadow: inset 0 0 0 1px rgb(var(--color-white) / 0.55);
}

.rich-text ul,
.rich-text ol,
.ql-editor ul,
.ql-editor ol {
	padding-inline-start: 1.35em;
}

.rich-text li + li,
.ql-editor li + li {
	margin-top: 0.32em;
}

.rich-text li[data-list="bullet"],
.ql-editor li[data-list="bullet"] {
	list-style: none;
	position: relative;
}

.rich-text li[data-list="bullet"]::before,
.ql-editor li[data-list="bullet"]::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: 0.72em;
	width: 0.48em;
	height: 0.48em;
	border-radius: 50%;
	background: rgb(var(--color-secondary));
}

.rich-text :is(img, video, iframe),
.ql-editor :is(img, video, iframe) {
	max-width: 100%;
}

.rich-text :is(img, video)[data-image-mode],
.rich-text video[data-video-mode],
.ql-editor :is(img, video)[data-image-mode],
.ql-editor video[data-video-mode] {
	height: auto;
	object-fit: contain;
}

.rich-text img[data-image-mode="column"],
.rich-text video[data-video-mode="column"],
.ql-editor img[data-image-mode="column"],
.ql-editor video[data-video-mode="column"] {
	width: 100%;
}

.rich-text video,
.ql-editor video {
	display: block;
	width: 100%;
	border-radius: var(--radius-medium);
	background: rgb(var(--color-primary) / 0.08);
	box-shadow: var(--shadow-small);
}

.rich-text :is(img, video).ql-align-center,
.ql-editor :is(img, video).ql-align-center {
	margin-inline: auto;
}

.rich-text :is(img, video).ql-align-right,
.ql-editor :is(img, video).ql-align-right {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.content-panel {
	overflow: hidden;
	border: 1px solid rgb(var(--color-primary) / 0.14);
	border-radius: var(--panel-radius);
	background: rgb(var(--color-white) / 0.80);
	box-shadow: var(--shadow-small);
}

.content-panel-title {
	padding: 13px 18px;
	font-family: var(--font-family-heading);
	font-weight: 750;
	color: rgb(var(--color-primary));
	background: linear-gradient(90deg, rgb(var(--color-primary) / 0.10), rgb(var(--color-secondary) / 0.08));
	border-bottom: 1px solid rgb(var(--color-primary) / 0.12);
}

.content-panel-body {
	padding: 18px;
}