/* MwRichText — self-contained styles for the rich text (view + editor) and its toolbar. */

.mw_richtext,
.mw_richtext_field,
.mw_rt_bar,
.mw_rt_linkpop {
	--rt-accent: #219ED1;
	--rt-border: #e2e6e2;
}

/* ---------- rich text formatting (shared by the view and the editor) ---------- */
.mw_richtext_edit {
	outline: none;
	position: relative;
	min-height: 1.5em;
}

/* placeholder for an empty editable (CSS :has, modern browsers) */
.mw_richtext_edit:has(> p:only-child > br:only-child)::before,
.mw_richtext_edit:has(> p:only-child:empty)::before {
	content: 'Napište text…';
	color: #9aa5a0;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

/* ---------- field wrapper (the `richtext` settings field type) ---------- */
/* Framed like the admin inputs (the vars come from admin.css; the fallbacks keep
   the same look outside the admin); also anchors the floating toolbar. */
.mw_richtext_field {
	position: relative;
	padding: 8px 13px;
	background: var(--bgw-input-color, #f7fbff);
	border: 1px solid var(--bgw-input-border-color, #e6ebf0);
	border-radius: var(--border-radius-input, 8px);
	transition: border-color .15s;
}

.mw_richtext_field.is-editing {
	border-color: var(--rt-accent);
}

.mw_richtext_field .mw_richtext_edit {
	min-height: 90px;
}

.mw_richtext > *:first-child {
	margin-top: 0;
}

.mw_richtext > *:last-child {
	margin-bottom: 0;
}

.mw_richtext p {
	margin: 0 0 1.2em;
	line-height: 1.6;
}

.mw_richtext h2 {
	margin: 2em 0 1em;
	font-size: 2em;
	line-height: 1.2;
}

.mw_richtext h3 {
	margin: 1.7em 0 .7em;
	font-size: 1.5em;
	line-height: 1.3;
}

.mw_richtext h4 {
	margin: 1.4em 0 .55em;
	font-size: 1.25em;
	line-height: 1.3;
}

.mw_richtext ul,
.mw_richtext ol {
	margin: 0 0 1.2em;
	padding-left: 1.7em;
}

.mw_richtext ul {
	list-style: disc;
}

.mw_richtext ol {
	list-style: decimal;
}

.mw_richtext li {
	margin: .45em 0;
	line-height: 1.6;
}

.mw_richtext blockquote {
	margin: 0 0 1.2em;
	padding: .3em 0 .3em 1em;
	border-left: 3px solid var(--rt-accent);
	color: #55605a;
	font-style: italic;
}

.mw_richtext a {
	color: var(--rt-accent);
	text-decoration: underline;
}

/* headings darker than the body text while editing */
.mw_richtext_edit h2,
.mw_richtext_edit h3,
.mw_richtext_edit h4 {
	color: #1e2933;
}

/* ---------- toolbar (floats above the host, which must be position:relative) ---------- */
.mw_rt_bar {
	position: absolute;
	left: 0;
	bottom: calc(100% + 4px);
	z-index: 20;
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--rt-border);
	border-radius: 8px;
	box-shadow: 0 8px 20px -8px rgba(20, 40, 30, .35);
}

/* the .mw_rt_* classes keep enough specificity to survive host form resets */
.mw_rt_bar .mw_rt_btn,
.mw_rt_bar .mw_rt_fmt_toggle {
	flex: 0 0 auto;
	box-sizing: border-box;
	height: 30px;
	min-width: 30px;
	border: 1px solid var(--rt-border);
	border-radius: 6px;
	background: #fff;
	color: #445;
	cursor: pointer;
	font-size: 14px;
}

.mw_rt_bar .mw_rt_btn {
	width: 34px;
}

/* hover: subtle blue fill on the buttons */
.mw_rt_bar .mw_rt_btn:hover {
	background: rgba(33, 158, 209, .12);
	border-color: var(--rt-accent);
	color: var(--rt-accent);
}

.mw_rt_bar .mw_rt_btn.is-active,
.mw_rt_bar .mw_rt_btn.is-active:hover {
	background: var(--rt-accent);
	border-color: var(--rt-accent);
	color: #fff;
}

/* ---------- format dropdown ---------- */
.mw_rt_bar .mw_rt_fmt {
	position: relative;
	flex: 0 0 auto;
}

.mw_rt_bar .mw_rt_fmt_toggle {
	display: flex;
	align-items: center;
	width: 150px;
	padding: 0 26px 0 10px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* caret */
.mw_rt_bar .mw_rt_fmt_toggle::after {
	content: '';
	position: absolute;
	right: 11px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 2px solid #8a97a0;
	border-bottom: 2px solid #8a97a0;
	transform: rotate(45deg);
}

/* hover: highlight the select's border */
.mw_rt_bar .mw_rt_fmt_toggle:hover {
	border-color: var(--rt-accent);
}

.mw_rt_fmt_menu {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 22;
	min-width: 180px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--rt-border);
	border-radius: 8px;
	box-shadow: 0 8px 20px -8px rgba(20, 40, 30, .35);
}

.mw_rt_fmt.is-open .mw_rt_fmt_menu {
	display: block;
}

.mw_rt_fmt_menu .mw_rt_fmt_item {
	display: block;
	width: 100%;
	padding: 6px 10px;
	border: 0;
	border-radius: 5px;
	background: none;
	color: #2a3540;
	text-align: left;
	line-height: 1.2;
	cursor: pointer;
}

.mw_rt_fmt_menu .mw_rt_fmt_item:hover {
	background: rgba(33, 158, 209, .12);
}

.mw_rt_fmt_menu .mw_rt_fmt_item.is-active {
	background: rgba(33, 158, 209, .16);
	color: var(--rt-accent);
}

/* each option previews the format it applies */
.mw_rt_fmt_menu .mw_rt_fmt_p {
	font-size: 14px;
	font-weight: 400;
}

.mw_rt_fmt_menu .mw_rt_fmt_h2 {
	font-size: 22px;
	font-weight: 700;
}

.mw_rt_fmt_menu .mw_rt_fmt_h3 {
	font-size: 18px;
	font-weight: 700;
}

.mw_rt_fmt_menu .mw_rt_fmt_h4 {
	font-size: 15px;
	font-weight: 700;
}

.mw_rt_fmt_menu .mw_rt_fmt_blockquote {
	font-size: 14px;
	font-style: italic;
	color: #66727d;
}

.mw_rt_bar .mw_rt_btn svg {
	width: 16px;
	height: 16px;
	display: block;
	margin: 0 auto;
}

.mw_rt_bar .mw_rt_btn b,
.mw_rt_bar .mw_rt_btn i {
	font-size: 15px;
}

/* ---------- link popup (floats above the toolbar) ---------- */
.mw_rt_linkpop {
	position: absolute;
	left: 0;
	bottom: calc(100% + 44px);
	z-index: 21;
	display: flex;
	gap: 6px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--rt-border);
	border-radius: 8px;
	box-shadow: 0 8px 20px -8px rgba(20, 40, 30, .35);
}

.mw_rt_linkpop .mw_rt_linkpop_url {
	box-sizing: border-box;
	width: 240px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--rt-border);
	border-radius: 6px;
	font-size: 14px;
}

.mw_rt_linkpop .mw_rt_pbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--rt-border);
	border-radius: 6px;
	background: #fff;
	color: #445;
	cursor: pointer;
	font-weight: 600;
}

.mw_rt_linkpop .mw_rt_pbtn_primary {
	background: var(--rt-accent);
	border-color: var(--rt-accent);
	color: #fff;
}

.mw_rt_linkpop .mw_rt_pbtn svg {
	width: 16px;
	height: 16px;
}