/**
 * Unesco Extra Tittle - front-end styles.
 * - Never sets fixed heights; long text wraps instead of overflowing.
 * - Elements only exist in the markup when a post HAS a rotitr, so there is
 *   never an empty gap in cards/carousels.
 * - Colors come from CSS variables set in the plugin settings.
 */
.uet-rotitr {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
	font-family: inherit;
	font-weight: 400;
	text-align: start;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Single post (above the H1, in proportion to it). */
.uet-rotitr--single {
	color: var(--uet-color-single, #006bb9);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	/* Blocksy gives the H1 a 25px top margin; the rotitr takes that spot ... */
	margin-top: 25px;
}
/* ... and the H1 then sits close below it. */
.uet-rotitr--single + .page-title {
	margin-top: 6px;
}

/* Lists / cards: same look as the excerpt (grey, 14px, regular). */
.uet-rotitr--archive,
.uet-rotitr--related,
.uet-rotitr--upk {
	color: var(--uet-color-list, #777777);
	font-size: 14px;
	line-height: 1.65;
	margin-bottom: 6px;
}

.uet-rotitr--related {
	font-size: 13px;
}

@media (max-width: 689px) {
	.uet-rotitr--single {
		font-size: 13px;
	}
	.uet-rotitr--archive,
	.uet-rotitr--upk {
		font-size: 13px;
	}
}