/**
 * Food Carousel
 *
 * Slice widths, background positions and stagger delays are set inline by the
 * script, because the number of slices is configurable. Everything else is
 * driven by the custom properties on .food-carousel, which the shortcode
 * writes from the plugin settings.
 */

.food-carousel {
	--fc-height: 400px;
	--fc-height-tablet: 340px;
	--fc-height-mobile: 280px;
	--fc-slice-duration: 700ms;
	--fc-overlay-color: rgba(0, 0, 0, 0.18);
	--fc-bg: #111111;

	position: relative;
	width: 100%;
	height: var(--fc-height);
	overflow: hidden;
	background: var(--fc-bg);
	isolation: isolate;
}

.food-carousel-track {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* =========================================================
   Slides
   ========================================================= */

.food-carousel .food-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity 250ms ease;
}

.food-carousel .food-slide.active {
	opacity: 1;
	z-index: 2;
}

.food-carousel .food-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   Slice transition
   ========================================================= */

.food-carousel .food-slice-layer {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.food-carousel .food-image-slice {
	position: relative;
	height: 100%;
	overflow: hidden;
	transform: scaleX(0);
	transform-origin: center center;
	will-change: transform;
	/* width, flex-basis and animation-delay are set inline by the script. */
}

/* Each slice holds a full-width copy of the next image, cropped the same way
   the slide is, so the transition and the finished slide look identical.
   width and left are set inline by the script. */
.food-carousel .food-slice-img {
	position: absolute;
	top: 0;
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.food-carousel.is-changing .food-image-slice {
	animation-name: fcSliceIn;
	animation-duration: var(--fc-slice-duration);
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	animation-fill-mode: forwards;
}

@keyframes fcSliceIn {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

/* =========================================================
   Overlay
   ========================================================= */

.food-carousel .food-overlay {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
	display: block;
	background: var(--fc-overlay-color, rgba(0, 0, 0, 0.18));
	pointer-events: none;
}


/* =========================================================
   Slide content (optional text and button per slide)
   ========================================================= */

.food-carousel .food-contents {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	/* Let clicks through to the slider controls; the button opts back in. */
	pointer-events: none;
}

.food-carousel .food-content {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: var(--fc-content-items, center);
	justify-content: center;
	box-sizing: border-box;
	padding: 40px 70px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
}

.food-carousel .food-content.active {
	opacity: 1;
	visibility: visible;
}

.food-carousel .food-content__inner {
	max-width: var(--fc-content-width, 640px);
	text-align: var(--fc-content-text, center);
	color: var(--fc-content-color, #ffffff);
}

.food-carousel .food-content__heading {
	margin: 0 0 14px;
	padding: 0;
	color: inherit;
	font-size: var(--fc-heading-size, 42px);
	line-height: 1.15;
}

.food-carousel .food-content__text {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: var(--fc-text-size, 17px);
	line-height: 1.55;
}

.food-carousel .food-content__btn {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 32px;
	background: var(--fc-btn-bg, #e0ac28);
	border: 0;
	border-radius: var(--fc-btn-radius, 999px);
	color: var(--fc-btn-color, #111111);
	font-size: var(--fc-btn-size, 15px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	/* Re-enable clicks on the button only. */
	pointer-events: auto;
	transition: background-color 0.2s ease;
}

.food-carousel .food-content__btn:hover,
.food-carousel .food-content__btn:focus {
	background: var(--fc-btn-bg-hover, #eebb3c);
	color: var(--fc-btn-color, #111111);
	text-decoration: none;
}

.food-carousel .food-content__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* =========================================================
   Arrows
   ========================================================= */

.food-carousel .food-arrow {
	position: absolute;
	top: 50%;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.food-carousel .food-arrow.left {
	left: 25px;
}

.food-carousel .food-arrow.right {
	right: 25px;
}

.food-carousel .food-arrow span {
	display: block;
	width: 20px;
	height: 20px;
	border-top: 4px solid #ffffff;
	border-left: 4px solid #ffffff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
	transition: transform 0.25s ease;
}

.food-carousel .food-arrow.left span {
	transform: rotate(-45deg);
}

.food-carousel .food-arrow.right span {
	transform: rotate(135deg);
}

.food-carousel .food-arrow.left:hover span {
	transform: rotate(-45deg) scale(1.15);
}

.food-carousel .food-arrow.right:hover span {
	transform: rotate(135deg) scale(1.15);
}

.food-carousel .food-arrow:focus-visible span {
	outline: 2px solid #ffffff;
	outline-offset: 6px;
}

/* Stop theme and page builder button styles bleeding in */
.food-carousel .food-arrow:hover,
.food-carousel .food-arrow:focus,
.food-carousel .food-arrow:active {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* =========================================================
   Play / pause
   ========================================================= */

.food-carousel .food-pause {
	position: absolute;
	left: 27px;
	bottom: 30px;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.food-carousel .food-pause::before,
.food-carousel .food-pause::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 23px;
	background: #ffffff;
	border-radius: 1px;
}

.food-carousel .food-pause::before {
	margin-left: -9px;
}

.food-carousel .food-pause::after {
	margin-left: 9px;
}

/* Paused state shows a play triangle */
.food-carousel .food-pause.playing::before {
	width: 0;
	height: 0;
	margin-left: 5px;
	background: transparent;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 18px solid #ffffff;
	border-radius: 0;
}

.food-carousel .food-pause.playing::after {
	display: none;
}

.food-carousel .food-pause:hover,
.food-carousel .food-pause:focus,
.food-carousel .food-pause:active {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.food-carousel .food-pause:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 4px;
}

/* =========================================================
   Dots
   ========================================================= */

.food-carousel .food-dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 12px;
	transform: translateX(-50%);
}

.food-carousel .food-dot {
	width: 14px;
	height: 14px;
	min-width: 14px;
	min-height: 14px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	transition: transform 0.25s ease, background 0.25s ease;
}

.food-carousel .food-dot.active {
	background: #ffffff !important;
	border-color: #ffffff !important;
	transform: scale(1.15);
}

.food-carousel .food-dot:hover,
.food-carousel .food-dot:active {
	box-shadow: none !important;
	outline: none !important;
}

.food-carousel .food-dot:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 3px;
}

.food-carousel .food-dot.active:hover,
.food-carousel .food-dot.active:focus {
	background: #ffffff !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 1024px) {
	.food-carousel {
		height: var(--fc-height-tablet);
	}

	.food-carousel .food-content {
		padding: 36px 60px;
	}
}

@media (max-width: 767px) {
	.food-carousel {
		height: var(--fc-height-mobile);
	}

	.food-carousel .food-arrow {
		width: 45px;
		height: 45px;
	}

	.food-carousel .food-arrow.left {
		left: 8px;
	}

	.food-carousel .food-arrow.right {
		right: 8px;
	}

	.food-carousel .food-arrow span {
		width: 16px;
		height: 16px;
		border-width: 3px;
	}

	.food-carousel .food-pause {
		left: 12px;
		bottom: 20px;
		width: 36px;
		height: 36px;
	}

	.food-carousel .food-pause::before,
	.food-carousel .food-pause::after {
		width: 5px;
		height: 19px;
	}

	.food-carousel .food-pause.playing::before {
		border-top-width: 10px;
		border-bottom-width: 10px;
		border-left-width: 15px;
	}

	.food-carousel .food-dots {
		bottom: 18px;
		gap: 9px;
	}

	.food-carousel .food-dot {
		width: 11px;
		height: 11px;
		min-width: 11px;
		min-height: 11px;
	}

	.food-carousel .food-content {
		padding: 28px 24px;
	}

	.food-carousel .food-content__heading {
		font-size: var(--fc-heading-size-m, 28px);
		margin-bottom: 10px;
	}

	.food-carousel .food-content__text {
		font-size: var(--fc-text-size-m, 15px);
	}

	.food-carousel .food-content__btn {
		margin-top: 18px;
		padding: 12px 26px;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.food-carousel *,
	.food-carousel *::before,
	.food-carousel *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}