/* Title Styles */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

h1 > :where(b,strong),
section header > *:first-child:not(a) > :where(b,strong) {
	display: inline-block;
}

section header > *:first-child + :where(p, h2, h3, h4, h5, strong) {
	margin-top: var(--g-cnt-ttl-ttl-m);
}

.cnt-stl {

	:where(h1,h2,h3,h4,h5,h6) {
		margin-block: var(--g-cnt-ttl-ttl-m);
	}

	:is(p, ol, ul) {
		margin-block: var(--g-cnt-ttl-cnt-m);
	}

	:is(ul) {
		list-style-type: none;
		padding: 0;

		li {
			position: relative;
			padding: .1em 0 .1em 1.5em;

			&::before {
				content: '';
				position: absolute;
				top: .55rem;
				left: 0;
				width: 0.5em;
				height: 0.5em;
				border-radius: 50%;
				background-color: var(--buttons);
			}

			li {
				&::before {
					top: calc(var(--fnt-itm-lh) / 2 * 1rem - (0.5rem / 2));
					height: 0.5rem;
					width: 0.5rem;
					border-radius: 50%;
					background-color: initial;
					border: 1px solid var(--blt-clr);
				}

				li {
					&::before {
						background-color: var(--blt-clr);
						border-radius: 0;
						border: none;
					}

					li {
						&::before {
							border: none;
							border-radius: 50%;
						}

						li {
							&::before {
								background-color: initial;
								border: 1px solid var(--blt-clr);
							}
						}
					}
				}
			}
		}

		ul, ol {
			margin-top: .25em;
			margin-bottom: 0;
		}
	}

	:is(ol) {
		list-style-type: decimal;
		padding: 0 0 0 1.5em;

		li {
			position: relative;
			padding: .1em 0;

			&:has(> :is(strong,b):first-child)::marker {
				font-weight: bold;
			}
		}

		ol, ul {
			margin-top: .25em;
			margin-bottom: 0;
		}
	}

	:not(.spl-lst) :is(ul,ol):not(.el-tab-box) li + li {
		margin-top: .3em;
	}

	:is(ol):not(.spl-lst) li + li {
		margin-top: 0.3em;
	}

	.spl-lst li {
		margin-top: .5em;
	}

	/* Content Styles */
	> *:first-child {
		margin-top: 0;
	}

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

	figure.image {
		margin: var(--g-cnt-full-img-m) auto;
	}

	img:is(.media-right, .media-left) {
		margin-bottom: 1rem;
	}

	.media-small {
		width: 25%;
	}

	.media-medium {
		width: 50%;
	}

	.media-large {
		width: 100%;
	}

	:is(.media-right, figure.image-style-side) {
		float: right;
		margin-left: 1rem;
		margin-top: 0;
		max-width: 50%;
	}

	.media-left {
		float: left;
		margin-right: 1rem;
	}

	.txt-hlt {

		--txt-hlt-bg:  var(--dk-bg);
		--txt-hlt-txt: var(--dk-txt);

		[data-colors="alternate-light"] & { --txt-hlt-bg: var(--dk-alt-bg); --txt-hlt-txt: var(--dk-alt-txt); }
		[data-colors="primary-dark"] &    { --txt-hlt-bg: var(--lt-bg);     --txt-hlt-txt: var(--lt-txt); }
		[data-colors="alternate-dark"] &  { --txt-hlt-bg: var(--lt-alt-bg); --txt-hlt-txt: var(--lt-alt-txt); }

		&.v1 {
			padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70));
			padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5));
			background-color: var(--inner-theme);
			border-radius: var(--bdr-rds-crd);
		}

		&.v2 {
			padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70));
			padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5));
			background-color: var(--txt-hlt-bg);
			border-radius: var(--bdr-rds-crd);
			color: var(--txt-hlt-txt);
		}

		&.v3 {
			padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70));
			padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5));
			border-radius: var(--bdr-rds-crd);
			border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o));
			border-width: 1px;
			border-style: solid;
		}

		&.v4 {
			padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70));
			border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o));
			border-width: 0;
			border-style: solid;
			border-top-width: 1px;
			border-bottom-width: 1px;
		}

		&.v5 {
			padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5));
			border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o));
			border-width: 0;
			border-style: solid;
			border-left-width: 1px;
			border-right-width: 1px;
		}
	}

	@media screen and (max-width:1279px) {

		figure.image img,
		img[class*="media-"] {
			width: 100%;
		}
	}
}

/* Bullet color override inside alt-bg boxes */
:is(.lt-bg,.dk-bg) .bg-bx.alt-bg ul li::before {
	background-color: var(--buttons);
}