/* Blue Naartjie Hero Rotator. Builds on the theme's .hero3 .highlight / .highlight2 styles. */
.bn-rotator--right { text-align: right; }
.bn-rotator--left { text-align: left; }
.bn-rotator--center { text-align: center; }
.bn-rotator--upper .bn-rot-visual { text-transform: uppercase; }

/* Readable text for screen readers and search engines; hidden visually. */
.bn-rot-sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* The window shows one phrase at a time and animates its width between phrases. */
.bn-rot-window {
	display: inline-block;
	position: relative;
	/* clip-path (not overflow) keeps the text on the normal baseline, so it sits
	   exactly where the theme's own highlight text sits inside the orange box. */
	vertical-align: baseline;
	clip-path: inset(0 -0.3em);
	white-space: nowrap;
	transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.bn-rot-item {
	display: inline-block;
	white-space: nowrap;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}
/* Every phrase except the active one sits out of the flow, below the window. */
.bn-rot-item:not(.is-active) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
}
.bn-rot-item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}
.bn-rotator--right .bn-rot-item:not(.is-active) { left: auto; right: 0; }

@media (prefers-reduced-motion: reduce) {
	.bn-rot-window, .bn-rot-item { transition: none; }
}

/* A single-word phrase in the stacked layout leaves the first line empty: keep its
   space so the hero doesn't jump, but hide the empty orange box. */
.bn-rot-line.is-empty { visibility: hidden; }