/*
 * Styles shared across blocks – editor copy, the gallery carousel, WordPress's
 * own alignment classes.
 */

/* The gallery carousel always shows the hand cursor over its items so
   visitors know they can drag or swipe (mouseDrag is on in
   js/utilities/carousels.js). The quote slideshow does the same in quote.css. */
.owl-carousel {
	cursor: pointer;

	.owl-item {
		cursor: pointer;
	}
}

.body-text iframe {
	max-width: 100%;
}

/*
 * Headings carry font tokens but no margins, so Bootstrap's margin-top:0 left a
 * heading sitting straight on the paragraph above it. Scoped to .body-text –
 * editor content only – so the blocks' own .sectionTitle spacing stands. A
 * heading opening its own container still starts flush.
 */
.body-text h2 {
	margin-top: 40px;
}
.body-text h3 {
	margin-top: 32px;
}
.body-text h4,
.body-text h5,
.body-text h6 {
	margin-top: 24px;
}
.body-text :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/*
 * Editor lists: the indent matches the paragraph measure, the marker takes the
 * accent, and the row spacing follows the body rhythm. Nested lists step down
 * without re-spacing.
 */
.body-text :is(ul, ol) {
	margin: 0 0 1rem;
	padding-left: 1.25em;

	li {
		margin-bottom: 0.5em;

		&:last-child {
			margin-bottom: 0;
		}
	}

	:is(ul, ol) {
		margin: 0.5em 0 0;
	}
}
/* Unordered lists take a small accent disc, drawn rather than a ::marker so it
   can carry a role colour – sized in em to track the copy. */
.body-text ul {
	list-style: none;

	> li {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0.55em;
			left: -1.1em;
			width: 0.45em;
			height: 0.45em;
			border-radius: 50%;
			background: var(--landing-accent);
		}
	}
}
.body-text ol > li::marker {
	color: var(--landing-accent);
	font-weight: 700;
}

/*------------------------------------*\
    WORDPRESS CORE – image alignment in editor copy
\*------------------------------------*/
.alignnone {
	margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto;
}
.alignright,
.alignleft,
a img.alignright,
a img.alignleft {
	display: block;
	float: none;
	margin: 5px auto 20px;
}
a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	max-width: 100%;
	text-align: center;

	img {
		display: block;
		margin: 0 auto;
	}

	.wp-caption-text {
		margin: 0;
		padding: 4px 0;
		font: var(--text-caption);
	}
}
/* desktop restores the floats */
@media (min-width: 768px) {
	.alignright,
	a img.alignright {
		float: right;
		margin: 5px 0 20px 20px;
	}
	.alignleft,
	a img.alignleft {
		float: left;
		margin: 5px 20px 20px 0;
	}
}