/**
 * Bananchal Farms — home hero slider.
 *
 * Styles the Owl Carousel 2 slider used by template-parts/home/section-slider.php.
 * Owl ships its own CSS (enqueued separately) which provides the stage,
 * nav and dot defaults; this file rewrites the bits that have to match the
 * rest of the site.
 *
 * The simplest possible image slider: each slide is a single <img> shown at
 * its own natural aspect ratio, the stage resizes to fit the active slide,
 * and the only control is a row of dots overlaid on the bottom-centre of
 * the photograph (with a soft top-to-bottom dark gradient behind them, so
 * the white dots stay readable on pale images). No cover/contain/fill, no
 * crop, no letterbox, no stretch — whatever the image's aspect ratio is,
 * the slider takes that ratio.
 *
 * rgba() values repeat the RGB of --bf-green-darker (#12301b); custom properties
 * cannot be used inside rgba() without a separate channel token.
 */

/* ==========================================================================
   Shell
   ========================================================================== */

.bf-slider {
	position: relative;
	background-color: var(--bf-green-darker);
	/*
	 * No fixed height anywhere: the section is the photograph at its natural
	 * aspect ratio, with the row of dots overlaid on the bottom-centre of
	 * the image. A 16:9 image in a 390px column becomes a 390x219 slide; a
	 * 4:3 upload a 390x293 one; a portrait a 390x694 one. Whatever the client
	 * uploaded is the shape the slider takes.
	 */
	width: 100%;
}

/* ==========================================================================
   Owl stage
   ========================================================================== */

/*
 * The carousel fills the section. Owl's own stylesheet sets position:relative
 * and z-index:1 on the carousel; we just need the width.
 */
.bf-slider__owl {
	width: 100%;
}

/* Hide the nav block even if Owl renders an empty one (we set nav:false). */
.bf-slider__owl .owl-nav {
	display: none;
}

/* The stage outer is the viewport that clips the running stage. */
.bf-slider__owl .owl-stage-outer {
	position: relative;
	overflow: hidden;
}

/*
 * Each .owl-item is the row Owl animates. The .item inside is the slide
 * content the template renders. width:100% keeps one slide on screen at a
 * time; height:auto lets the <img> drive the row height so 16:9 stays 16:9.
 */
.bf-slider__owl .owl-item {
	width: 100%;
}

.bf-slider__owl .item {
	width: 100%;
}

/* ==========================================================================
   Image
   ========================================================================== */

.bf-slider__img {
	/*
	 * The image is shown exactly as it was uploaded: 100% of the column
	 * width, height driven by the image's natural aspect ratio. No
	 * object-fit, no position tricks, no scaling past the source resolution.
	 * If the client uploads a 16:9 photograph, that is the shape the slider
	 * takes; a 4:3 upload reshapes the slider to 4:3, a portrait to 9:16.
	 *
	 * display:block kills the inline-image baseline gap that would otherwise
	 * add a few pixels of empty space below the photograph.
	 */
	display: block;
	width: 100%;
	height: auto;
}

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

/*
 * The strip of dots sits on top of the photograph, centred along the
 * bottom edge. Owl renders .owl-dots inside the carousel by default
 * (below the stage in document order), so we absolutely position it over
 * the image. The carousel is the positioning context. A soft top-to-bottom
 * dark gradient sits behind the dots so pale photographs still leave the
 * white dots readable.
 */
.bf-slider__owl .owl-dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	padding: 2.5rem 0 1.5rem;
	margin: 0;
	background: linear-gradient(
		180deg,
		rgba(18, 48, 27, 0) 0%,
		rgba(18, 48, 27, 0.45) 100%
	);
	pointer-events: none;
}

/* Owl renders <button class="owl-dot"><span></span></button>. The span is
   the actual visible bar; the button is the click target. For circles the
   bar and the click target are the same shape — the span fills the button
   and the active state only swaps the fill colour, not the size. */
.bf-slider__owl .owl-dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color var(--bf-transition);
}

.bf-slider__owl .owl-dot span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	transition: background-color var(--bf-transition), transform var(--bf-transition);
}

.bf-slider__owl .owl-dot:hover span {
	background-color: rgba(255, 255, 255, 0.85);
}

.bf-slider__owl .owl-dot.active span {
	background-color: var(--bf-amber);
	/* A small lift on the active dot so it is unmistakable as the current
	   slide without forcing a different size. */
	transform: scale(1.15);
}

.bf-slider__owl .owl-dot:focus-visible {
	outline: 2px solid var(--bf-amber);
	outline-offset: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/*
 * The dots step down a touch on tablet-and-below so they sit lightly on
 * the photograph rather than dominating it. The slider itself no longer
 * resizes per breakpoint — the active photograph dictates the height on
 * every screen.
 */
@media (max-width: 991.98px) {

	.bf-slider__owl .owl-dot {
		width: 9px;
		height: 9px;
	}
}