/**
 * Shared carousel arrow.
 *
 * Appearance only. Each carousel positions its own arrows and declares its own
 * --ashers-carousel-arrow-* values (including any responsive overrides) on its
 * widget root, because where an arrow parks depends on whether the track bleeds
 * off the viewport or sits inside the content column.
 *
 * Every custom property is read with a fallback and NEVER declared here: a
 * declaration on .ashers-carousel__arrow would beat the value an Elementor
 * control writes onto the widget root, and the size/colour controls would stop
 * working. Fallbacks are the Figma defaults.
 *
 * Markup comes from includes/templates/carousel-arrows.php, so the two
 * carousels cannot drift apart.
 *
 * Figma: arrow 2143:348 (55px white circle, chevron 24px #5F3D31),
 * hover state 2143:341.
 */

/*
 * The doubled class is deliberate — do not "tidy" it back to one.
 *
 * Elementor's global kit styles every bare <button> on the page:
 *
 *   .elementor-kit-N button, ... { padding: 15px 25px; border-radius: 5px;
 *     background-color: <brand>; color: #fff; text-transform: uppercase;
 *     letter-spacing: 1px; font-size: 14px }
 *
 * That selector is (0,1,1), so a single .ashers-carousel__arrow (0,1,0) lost
 * every one of those properties: the arrow really had 15px/25px of padding and
 * a 5x25px content box around a 24x24 chevron. Repeating the class makes this
 * (0,2,0), which outranks the kit without !important.
 *
 * Everything the kit sets is reset here, in one place, so there is one obvious
 * spot to extend if the kit's button styling grows.
 */
.ashers-carousel__arrow.ashers-carousel__arrow {
	position: absolute;
	transform: translateY(-50%);
	width: var(--ashers-carousel-arrow-size, 55px);
	height: var(--ashers-carousel-arrow-size, 55px);
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Reset of Elementor's global button styling. */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--ashers-carousel-arrow-ink, #5f3d31);
	line-height: 0;
	letter-spacing: normal;
	/* Not cosmetic: the kit's uppercase is inherited by the button's
	   screen-reader text, and some screen readers spell out an all-caps
	   string letter by letter instead of reading it as a word. */
	text-transform: none;

	outline: none;
	cursor: pointer;
	z-index: 2;
	transition: opacity var(--ashers-carousel-arrow-ease, 240ms cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * The kit restyles button:hover and button:focus as well, at (0,2,1). Without
 * this the brand colour would come back on hover as a square behind the round
 * disc, with its corners showing. Matching specificity is enough because this
 * stylesheet is enqueued after the kit's.
 */
.ashers-carousel__arrow.ashers-carousel__arrow:hover,
.ashers-carousel__arrow.ashers-carousel__arrow:focus {
	background-color: transparent;
	color: var(--ashers-carousel-arrow-ink, #5f3d31);
}

/*
 * Figma 2143:341 — on hover the white disc grows from 55px to 65px while the
 * chevron stays exactly where and what it was. That is why the disc is a
 * separate element: the button box keeps its size so the icon does not move,
 * and only this layer scales.
 *
 * Scaling also scales the drop shadow's 10px blur by the same factor. The design
 * holds the blur constant, but the resulting ~1.8px difference is not visible,
 * and transform keeps the animation off the layout path.
 */
.ashers-carousel__arrow-disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--ashers-carousel-arrow-disc-bg, #ffffff);
	box-shadow: 0 0 10px rgba(36, 21, 11, 0.15);
	transition:
		transform var(--ashers-carousel-arrow-ease, 240ms cubic-bezier(0.4, 0, 0.2, 1)),
		background-color var(--ashers-carousel-arrow-ease, 240ms cubic-bezier(0.4, 0, 0.2, 1));
}

.ashers-carousel__arrow:hover .ashers-carousel__arrow-disc,
.ashers-carousel__arrow:focus-visible .ashers-carousel__arrow-disc {
	transform: scale(var(--ashers-carousel-arrow-hover-scale, 1.18));
}

/* Sits above the disc so the growing circle passes behind it. */
.ashers-carousel__arrow-glyph {
	position: relative;
	z-index: 1;
	display: inline-flex;
	line-height: 1;
}

/*
 * Inline SVG rather than an icon font: this site loads three Font Awesome
 * builds at once, one of them in SVG-with-JS mode which ships no webfont, and
 * a CSS \f054 rendered as a missing-glyph box. currentColor keeps the chevron
 * tied to the button's colour, so the colour control still drives it.
 */
.ashers-carousel__arrow .ashers-carousel__arrow-svg {
	display: block;
	width: var(--ashers-carousel-arrow-icon, 24px);
	height: var(--ashers-carousel-arrow-icon, 24px);

	/*
	 * Bound to the variable rather than left on currentColor. Elementor's kit
	 * sets color:#fff on every bare <button> (see the base rule above), which
	 * used to outrank our class and painted the chevron white on a white disc.
	 * Two classes here beats that, and the colour control writes the variable.
	 */
	stroke: var(--ashers-carousel-arrow-ink, #5f3d31);
	fill: none;
}

/* One path, mirrored, instead of a second chevron pointing the other way. */
.ashers-carousel__arrow--prev .ashers-carousel__arrow-svg {
	transform: scaleX(-1);
}

/*
 * Disabled doubles as hidden: an arrow is disabled at the end of the track it
 * points at, which also keeps it out of the tab order while it does nothing.
 */
.ashers-carousel__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
	/*
	 * visibility as well as opacity. On this site something in the theme or
	 * one of the accessibility plugins re-showed an arrow that was only
	 * transparent, and a half-visible dead control is worse than none.
	 * visibility also keeps it out of the accessibility tree, matching what
	 * the disabled attribute does for the tab order.
	 */
	visibility: hidden;
}

/* A visible focus ring on the disc, since the button itself is a bare box. */
.ashers-carousel__arrow:focus-visible .ashers-carousel__arrow-disc {
	outline: 2px solid var(--ashers-carousel-arrow-ink, #5f3d31);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ashers-carousel__arrow,
	.ashers-carousel__arrow-disc {
		transition-duration: 1ms;
	}
}