/**
 * Home hero slider — replaces Slider Revolution's "home9" slider.
 *
 * Typography, sizes and colours are taken from the original slider's layer data
 * so the rebuild matches what was there before:
 *   title     70/70/70/45px, line-height 55, weight 700, Oswald, uppercase
 *   subtitle  50/50/50/30px, line-height 55, weight 300, Oswald, uppercase
 *   logo      148x138px desktop, 100x93px on small screens
 *   button    140x50px, 14px/17px Lato 700 on #94c347
 *   breakpoints follow the original: 1240 / 1024 / 778 / 480
 */

.foodfarm-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f4f4f4;
}

/* Before Slick initialises, show only the first slide so there is no flash of
   stacked slides on load. */
.foodfarm-hero__track:not(.slick-initialized) .foodfarm-hero__slide + .foodfarm-hero__slide {
	display: none;
}

/* slick-theme.css sets `.slick-slider { margin-bottom: 30px }`, which left a
   30px band of the hero background showing under the slider. The original
   Slider Revolution hero sat flush against the section below it. */
.foodfarm-hero__track.slick-slider {
	margin-bottom: 0;
}

.foodfarm-hero__slide {
	position: relative;
	height: 750px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.foodfarm-hero .slick-slide {
	height: 750px;
}

.foodfarm-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.foodfarm-hero__logo {
	width: 148px;
	height: auto;
	margin: 0 0 10px;
}

.foodfarm-hero__title {
	font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 70px;
	line-height: 55px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
	letter-spacing: 0;
}

.foodfarm-hero__subtitle {
	font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 50px;
	line-height: 55px;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.foodfarm-hero__subtitle--green {
	color: #4cd964;
}

.foodfarm-hero__tagline {
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height: 22px;
	font-weight: 400;
	color: #fff;
	margin: 18px 0 0;
}

.foodfarm-hero__btn {
	display: inline-block;
	width: 140px;
	height: 50px;
	margin: 26px 0 0;
	padding: 15px 20px;
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 17px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	background-color: #94c347;
	/* The original button had no border at all. Its hover state set a border
	   colour but the width stayed 0, so nothing ever drew - giving this one a
	   real border made a black outline appear on hover. */
	border: none;
	border-radius: 0;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color .25s ease, color .25s ease;
}

.foodfarm-hero__btn:hover,
.foodfarm-hero__btn:focus {
	background-color: #fff;
	color: #000;
	text-decoration: none;
}

.foodfarm-hero__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Sat near the very bottom of the original slider (y offset ~712-719 of 750). */
.foodfarm-hero__disclaimer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 4;
	margin: 0;
	padding: 0 20px;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	color: #fff;
}

/* Decorative parallax flakes on the second slide. */
.foodfarm-hero__decor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.foodfarm-hero__flake {
	position: absolute;
	opacity: .85;
	will-change: transform;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.foodfarm-hero__flake--1 { top: 60%; left: 10%; width: 50px; }
.foodfarm-hero__flake--2 { top: 20%; left: 70%; width: 170px; }
.foodfarm-hero__flake--3 { top: 62%; left: 78%; width: 240px; }

/* Dot navigation, sitting above the disclaimer as in the original. */
.foodfarm-hero .slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 58px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foodfarm-hero .slick-dots li { line-height: 0; }

.foodfarm-hero .slick-dots li button {
	width: 16px;
	height: 16px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: rgba(255, 255, 255, .3);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease;
}

.foodfarm-hero .slick-dots li.slick-active button,
.foodfarm-hero .slick-dots li button:hover {
	background: #fff;
}

.foodfarm-hero .slick-dots li button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Breakpoints mirror the original slider: 1240 / 1024 / 778 / 480 --- */

@media (max-width: 1240px) {
	.foodfarm-hero__slide,
	.foodfarm-hero .slick-slide { height: 600px; }
	/* The original dropped the green back to white below the desktop breakpoint. */
	.foodfarm-hero__subtitle--green { color: #fff; }
}

@media (max-width: 1024px) {
	.foodfarm-hero__title { line-height: 70px; }
}

@media (max-width: 778px) {
	.foodfarm-hero__slide,
	.foodfarm-hero .slick-slide { height: 500px; }
	.foodfarm-hero__logo { width: 100px; }
	.foodfarm-hero__title { font-size: 70px; line-height: 70px; }
	.foodfarm-hero__subtitle { font-size: 50px; line-height: 55px; }
	.foodfarm-hero .slick-dots { bottom: 50px; }
}

@media (max-width: 480px) {
	.foodfarm-hero__slide,
	.foodfarm-hero .slick-slide { height: 400px; }
	.foodfarm-hero__title { font-size: 45px; line-height: 50px; margin-bottom: 8px; }
	.foodfarm-hero__subtitle { font-size: 30px; line-height: 37px; }
	.foodfarm-hero__tagline { font-size: 18px; margin-top: 12px; }
	.foodfarm-hero__btn { margin-top: 18px; }
	.foodfarm-hero__disclaimer { font-size: 11px; line-height: 16px; bottom: 6px; }
	.foodfarm-hero .slick-dots { bottom: 44px; }
	.foodfarm-hero__flake--2 { width: 110px; }
	.foodfarm-hero__flake--3 { width: 150px; }
}

/* Slide 2's title runs slightly smaller than slide 1's on the smallest screens,
   matching the original layer data (49px vs 45px). */
@media (max-width: 480px) {
	.foodfarm-hero__slide--formulated .foodfarm-hero__title { font-size: 49px; }
	.foodfarm-hero__slide--formulated .foodfarm-hero__subtitle { font-size: 40px; }
}

/* Respect users who ask for reduced motion: no parallax drift. */
@media (prefers-reduced-motion: reduce) {
	.foodfarm-hero__flake { transition: none !important; transform: none !important; }
}