.nomon-hero-slider {
	--swiper-navigation-color: #fff;
	--swiper-navigation-sides-offset: 10px;
}

/* Live tucks the top 70px of the slide under the overlaid header (main.css overlays it on home from 992px). */
@media (min-width: 992px) {
	.nomon-hero-slider.nomon-hero-slider {
		margin-top: -70px;
	}
}

/* Swiper's stylesheet sets `display: block` on slides and beats Tailwind's layered utilities. */
.nomon-hero-slider__slide {
	display: flex;
	align-items: center;
}

.nomon-hero-slider__text {
	width: 490px;
	max-width: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.nomon-hero-slider__title {
	margin: 0 0 20px;
	color: #fff;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.1;
	text-transform: uppercase;
	text-shadow: -0.45px 1.949px 14.25px #000;
	width: auto;
}

.nomon-hero-slider__title::after {
	content: none;
}

.nomon-hero-slider__subtitle {
	margin: 0;
}

.nomon-hero-slider__slide--brand .nomon-hero-slider__text {
	margin-inline: auto;
	text-align: center;
	text-transform: none;
}

.nomon-hero-slider__slide--brand .nomon-hero-slider__title {
	color: var(--wp--preset--color--green);
	font-weight: 400;
	text-transform: none;
}

/* Below 360px "MEASUREMENT" at 40px is wider than the gap between the prev/next arrows. */
@media (max-width: 359px) {
	.nomon-hero-slider__title {
		font-size: 34px;
	}
}

@media (min-width: 769px) {
	.nomon-hero-slider__text {
		font-size: min(2.291vw, 28px);
		text-align: left;
	}

	.nomon-hero-slider__title {
		font-size: min(4.811vw, 60px);
	}

	.nomon-hero-slider__slide--brand .nomon-hero-slider__title {
		font-size: min(7.994vw, 100px);
	}

	.nomon-hero-slider__toggle {
		top: calc(50% + 40px);
		bottom: auto;
	}
}

.nomon-hero-slider :is(.swiper-button-prev, .swiper-button-next, .nomon-hero-slider__toggle) {
	padding: 0;
	border: 0;
	background: none;
}

.nomon-hero-slider__toggle {
	position: absolute;
	z-index: 10;
	bottom: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #fff;
	cursor: pointer;
}

.nomon-hero-slider__toggle svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.6));
}

.nomon-hero-slider__toggle[aria-pressed="false"] .nomon-hero-slider__play,
.nomon-hero-slider__toggle[aria-pressed="true"] .nomon-hero-slider__pause {
	display: none;
}

.nomon-hero-slider :is(button):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}