/**
 * AWB Step Carousel
 *
 * Loaded alongside Avada's own image-carousel.min.css, which does the heavy
 * lifting — our markup deliberately keeps Avada's classes so all of its
 * carousel styling still applies. This file only covers the two things the
 * stock element has no concept of: the step label and the glass card.
 *
 * Values come from CSS custom properties written onto the .awb-carousel
 * element by get_inline_style(). Avada only emits a variable when its option
 * differs from the element default, so every var() here carries a fallback
 * that matches the option's default value.
 */

/* ---------------------------------------------------------------------
 * Step label
 * ------------------------------------------------------------------ */

.awb-step-carousel .awb-step-carousel-step {
	display: block;
	margin: 0 0 var(--awb-step-margin-bottom, 14px);
	color: var(--awb-step-color, var(--awb-color4, inherit));
	font-family: var(--awb-step-font-family, inherit);
	font-size: var(--awb-step-size, 13px);
	font-style: var(--awb-step-font-style, normal);
	font-weight: var(--awb-step-font-weight, 700);
	letter-spacing: var(--awb-step-letter-spacing, 0.08em);
	line-height: var(--awb-step-line-height, 1.2);
	text-transform: var(--awb-step-transform, uppercase);
}

/* The step is the first thing in the caption block, so drop the top margin
   Avada's caption styles may put on the title that now follows it. */
.awb-step-carousel .awb-step-carousel-step + .awb-imageframe-caption-title {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
 * Glass card
 *
 * .fusion-carousel-item-wrapper is Avada's per-slide wrapper: it contains the
 * caption block and the image wrapper, which makes it the correct element to
 * turn into a card. All properties are inert until the matching option is set,
 * so an untouched element looks exactly like the stock Image Carousel.
 * ------------------------------------------------------------------ */

.awb-step-carousel .fusion-carousel-item-wrapper {
	/* background-color, not the background shorthand: the shorthand resets
	   background-clip, which would silently undo the Card Border Placement
	   option depending on declaration order. */
	background-color: var(--awb-card-background-color, transparent);
	border-color: var(--awb-card-border-color, transparent);
	border-style: solid;
	border-width: var(--awb-card-border-width, 0);
	border-radius: var(--awb-card-border-radius, 0);

	/* Card Border Placement.
	 *
	 * border-box (default): the card background paints under the border, so a
	 * semi-transparent border blends into the card and vanishes on a solid one.
	 *
	 * padding-box: the background stops at the border edge, so a translucent
	 * border shows the section behind it — a glass ring around a solid card.
	 * This is why a white border is invisible on a white card by default: it is
	 * white over white, not a missing border. */
	-webkit-background-clip: var(--awb-card-border-placement, border-box);
	background-clip: var(--awb-card-border-placement, border-box);

	padding-top: var(--awb-card-padding-top, 0);
	padding-right: var(--awb-card-padding-right, 0);
	padding-bottom: var(--awb-card-padding-bottom, 0);
	padding-left: var(--awb-card-padding-left, 0);
	box-sizing: border-box;
	overflow: hidden;
}

/* backdrop-filter is only applied when a blur was actually requested —
   declaring blur(0) unconditionally would still create a containing block and
   can force an unnecessary compositor layer per slide. */
.awb-step-carousel .fusion-carousel-item-wrapper {
	-webkit-backdrop-filter: blur(var(--awb-card-blur, 0px));
	backdrop-filter: blur(var(--awb-card-blur, 0px));
}

/* Equal-height cards.
 *
 * With Flex Align Items = Stretch, Avada stretches .swiper-slide to the tallest
 * slide, but the item wrapper inside it stays content-height — so cards with
 * shorter captions end up shorter than their slide and the row looks ragged.
 * Measured: 221px vs 236px on a two-slide row before this rule, 236/236 after.
 *
 * Harmless at other align values: there the slide is content-height already,
 * so height:100% resolves to the same height. */
.awb-step-carousel .fusion-carousel-item-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* With the caption above the image, pin the image to the bottom of the card so
   images line up across slides regardless of how long each caption runs. */
.awb-step-carousel .awb-imageframe-style-above .fusion-carousel-item-wrapper .fusion-image-wrapper {
	margin-top: auto;
}

.awb-step-carousel .fusion-carousel-item-wrapper .fusion-image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

/* When the card has padding, the caption should not add its own on top. */
.awb-step-carousel .fusion-carousel-item-wrapper .awb-imageframe-caption-container {
	padding-left: 0;
	padding-right: 0;
}

/* ---------------------------------------------------------------------
 * Builder preview
 * ------------------------------------------------------------------ */

.awb-step-carousel-preview .awb-step-carousel-preview-item {
	display: inline-block;
	position: relative;
	margin: 0 4px 4px 0;
	text-align: center;
}

.awb-step-carousel-preview .awb-step-carousel-preview-step {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------
 * Glass navigation
 *
 * Active only when the Glass Navigation option is on, which adds
 * .awb-step-carousel--glass-nav to the element wrapper. Requires Navigation
 * = "Arrows + Dots" so Avada renders both the arrows and .swiper-pagination.
 *
 * Layout: the carousel becomes a wrapping flex ROW. The slide track takes a
 * full-width line of its own, so the three navigation items wrap onto a second
 * line and centre themselves as a group — which keeps them centred whatever
 * the slide count.
 *
 * Two things this block has to defend against, both from Avada's swiper.css:
 *
 * 1. flex-direction. Avada sets `flex-direction: column` on
 *    .awb-swiper-dots-position-above / -below. Without an explicit `row` here,
 *    that column wins and the arrows and markers stack vertically. The Dots
 *    Position option is hidden under Glass Navigation but a previously saved
 *    value still emits its class, so `row` must be stated, not assumed.
 *
 * 2. Specificity. Avada's rules reach three classes
 *    (.awb-swiper.awb-swiper-dots-position-below .swiper-pagination, and
 *    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet).
 *    A two-class selector here only wins on source order, which is not
 *    guaranteed — swiper.css and this file are enqueued through different
 *    paths. Everything below is therefore anchored on
 *    `.awb-carousel.awb-swiper`, giving three classes before the descendant.
 * ------------------------------------------------------------------ */

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	row-gap: calc(var(--awb-glass-nav-margin-top, 40px) * var(--awbsc-nav-scale, 1));
	column-gap: calc(var(--awb-glass-nav-gap, 20px) * var(--awbsc-nav-scale, 1));
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-wrapper {
	flex: 0 0 100%;
	order: 1;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev {
	order: 2;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination {
	order: 3;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next {
	order: 4;
}

/* --- the round glass buttons --- */

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev,
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next {
	/* Avada positions these absolutely against the slide area; as flex items
	   they take their place in the navigation row instead. relative rather than
	   static so the small-screen hit-area pseudo-element can anchor to them. */
	position: relative;
	align-self: center;
	inset: auto;
	margin: 0;
	transform: none;
	opacity: 1;
	/* Avada's swiper.css pairs opacity with pointer-events on both
	   .swiper-button-hidden (opacity 0, pointer-events none) and
	   .swiper-button-disabled. Overriding only the opacity above would leave a
	   button that looks live and cannot be clicked, so the pair is restored. */
	pointer-events: auto;
	cursor: pointer;

	width: calc(var(--awb-glass-nav-size, 64px) * var(--awbsc-nav-scale, 1));
	height: calc(var(--awb-glass-nav-size, 64px) * var(--awbsc-nav-scale, 1));
	border-radius: 50%;
	box-sizing: border-box;

	color: var(--awb-glass-nav-icon-color, #ffffff);
	background-color: var(--awb-glass-nav-bg, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--awb-glass-nav-border-color, rgba(255, 255, 255, 0.45));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	/* Glyph size. Driven by Avada's own Arrow Size option so that control keeps
	   working under Glass Navigation; 40px is the fallback when it is unset. */
	font-size: calc(var(--awb-arrow-size, 40px) * var(--awbsc-nav-scale, 1));
	line-height: 1;

	transition: background-color 0.3s ease, color 0.3s ease,
		transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev:hover,
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next:hover {
	background-color: var(--awb-glass-nav-hover-bg, rgba(255, 255, 255, 0.22));
	color: var(--awb-glass-nav-icon-color, #ffffff);
	transform: translateY(-2px);
	opacity: 1;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev:active,
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next:active {
	transform: translateY(0) scale(0.96);
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev.swiper-button-disabled,
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next.swiper-button-disabled {
	opacity: 0.4;
	transform: none;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev i,
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next i {
	transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* The arrows default to Font Awesome (fas fa-arrow-left / fa-arrow-right),
   which has a real right arrow — so no mirroring is needed and any icon the
   builder offers can be swapped in without the CSS second-guessing it. */

/* Nudge the glyph in its direction of travel on hover. */
.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev:hover i {
	transform: translateX(-2px);
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next:hover i {
	transform: translateX(2px);
}

/* --- the line-and-dashes markers --- */

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination {
	/* static, so the markers join the row whatever Dots Position is set to. */
	position: static;
	align-self: center;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: calc(var(--awb-glass-marker-gap, 8px) * var(--awbsc-nav-scale, 1));
	transform: none;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination-bullet {
	width: calc(var(--awb-glass-marker-width, 14px) * var(--awbsc-nav-scale, 1));
	height: calc(var(--awb-glass-marker-height, 4px) * var(--awbsc-nav-scale, 1));
	/* Avada spaces bullets with margins; gap on the row replaces that, and
	   leaving the margin in place would widen every marker slot. */
	margin: 0;
	border-radius: 999px;
	background: var(--awb-glass-marker-color, rgba(255, 255, 255, 0.35));
	opacity: 1;

	/* The width easing overshoots very slightly so the active marker snaps out
	   rather than easing flatly. Colour is deliberately quicker than width, so
	   the fill lands before the stretch finishes. */
	transition: width 0.45s cubic-bezier(0.34, 1.32, 0.52, 1),
		background-color 0.3s ease;
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination-bullet:hover {
	background: var(--awb-glass-marker-active-color, #ffffff);
}

.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination-bullet-active {
	width: calc(var(--awb-glass-marker-active-width, 56px) * var(--awbsc-nav-scale, 1));
	height: calc(var(--awb-glass-marker-height, 4px) * var(--awbsc-nav-scale, 1));
	background: var(--awb-glass-marker-active-color, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .swiper-pagination-bullet,
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev,
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next,
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev i,
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next i {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Glass navigation, small screens
 *
 * One scale factor drives the whole cluster — button diameter, glyph size,
 * marker widths and both gaps — so the proportions hold and every option in
 * the Glass Navigation group keeps working; only the multiplier changes.
 *
 * 0.4 renders the navigation 60% smaller than desktop, as requested. Note the
 * accessibility trade-off: at the default 64px button that is a ~26px tap
 * target, below the ~44px minimum usually recommended for touch. The extra
 * padding below claws back some hit area without changing the visual size.
 * Raise --awbsc-nav-scale toward 0.6 if taps feel unreliable.
 *
 * 640px matches Avada's own small-screen breakpoint and the breakpoint used
 * for the card padding above.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 640px) {
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper {
		--awbsc-nav-scale: 0.4;
	}

	/* Extend the touch target past the painted circle.
	 *
	 * Padding cannot do this: the buttons are box-sizing: border-box, so padding
	 * is drawn inside the scaled width and the hit area stays 26px — measured.
	 * An absolutely positioned pseudo-element adds hit area without affecting
	 * layout or the visual size, taking a ~26px circle to a ~46px target. */
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-prev::after,
	.awb-step-carousel--glass-nav .awb-carousel.awb-swiper .awb-swiper-button-next::after {
		content: "";
		position: absolute;
		inset: -10px;
	}
}