/**
 * Jannah Widgets - Button
 *
 * Everything here is scoped to .jhr-button so it cannot leak into Elementor's
 * own buttons or the theme's.
 *
 * The icon animations are pure CSS: a transform on the icon, triggered by hover
 * (and focus) on the button. Nothing moves the button itself, which is the
 * whole point of the module.
 */

/* ---------------------------------------------------------------------------
 * Wrapper and alignment
 *
 * The wrapper is a COLUMN flex container on purpose. It is the one layout that
 * gives all four alignment options from a single property, so the Position
 * control can be responsive with plain Elementor selectors and no per-breakpoint
 * CSS of our own:
 *   flex-start / center / flex-end  -> button hugs its content, aligned
 *   stretch                         -> button fills the width ("Justified")
 * With a row flex container, stretch would do nothing.
 * ------------------------------------------------------------------------ */
.jhr-button-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ---------------------------------------------------------------------------
 * The button
 * ------------------------------------------------------------------------ */
.jhr-button {
	/* Defaults for everything the panel can override. */
	--jhr-btn-transition: 0.3s;
	--jhr-btn-icon-duration: 0.3s;
	--jhr-btn-icon-distance: 8px;
	--jhr-btn-icon-easing: ease;
	--jhr-btn-icon-gap: 10px;

	/* Amounts for the animations that have no Distance control. Override these
	   in your own CSS if you want a different feel. */
	--jhr-btn-icon-scale-grow: 1.25;
	--jhr-btn-icon-scale-shrink: 0.75;
	--jhr-btn-icon-rotate: 45deg;

	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 12px 24px;
	border: none;
	border-radius: 3px;
	background-color: #69727d;
	color: #fff;
	fill: #fff;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--jhr-btn-transition), color var(--jhr-btn-transition), border-color var(--jhr-btn-transition), box-shadow var(--jhr-btn-transition), transform var(--jhr-btn-transition);
}

.jhr-button:visited {
	color: #fff;
}

.jhr-button:hover,
.jhr-button:focus {
	color: #fff;
	text-decoration: none;
}

/* Justified: the wrapper stretches the button, so let the anchor fill it. */
.jhr-button-wrapper .jhr-button {
	width: auto;
}

/* Button types, matching Elementor's palette. */
.jhr-button--type-info    { background-color: #5bc0de; }
.jhr-button--type-success { background-color: #5cb85c; }
.jhr-button--type-warning { background-color: #f0ad4e; }
.jhr-button--type-danger  { background-color: #d9534f; }

/* ---------------------------------------------------------------------------
 * Content row
 * ------------------------------------------------------------------------ */
.jhr-button__content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.jhr-button__text {
	display: inline-block;
}

.jhr-button__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The icon translates on hover; nothing should clip it. */
	overflow: visible;
}

/* Icon spacing. Logical properties so RTL works without a second rule set. */
.jhr-button--icon-before .jhr-button__icon-wrap {
	margin-inline-end: var(--jhr-btn-icon-gap);
}

.jhr-button--icon-after .jhr-button__icon-wrap {
	margin-inline-start: var(--jhr-btn-icon-gap);
}

/* An icon-only button needs no spacing at all. */
.jhr-button--no-text .jhr-button__icon-wrap {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* ---------------------------------------------------------------------------
 * The icon itself
 *
 * transform-box / transform-origin are set so SVG icons rotate and scale about
 * their own centre rather than the SVG user-space origin, which is what makes
 * Rotate look right on inline SVG as well as on icon fonts.
 * ------------------------------------------------------------------------ */
.jhr-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform-origin: center center;
	transition: transform var(--jhr-btn-icon-duration) var(--jhr-btn-icon-easing);
	will-change: transform;
}

.jhr-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	transform-box: fill-box;
	transform-origin: center center;
}

/* ---------------------------------------------------------------------------
 * Icon hover animations
 *
 * :focus-visible is included alongside :hover so the animation also fires for
 * keyboard users tabbing to the button, not just mouse users.
 * ------------------------------------------------------------------------ */
.jhr-button--icon-anim-slide-right:hover .jhr-button__icon,
.jhr-button--icon-anim-slide-right:focus-visible .jhr-button__icon {
	transform: translateX(var(--jhr-btn-icon-distance));
}

.jhr-button--icon-anim-slide-left:hover .jhr-button__icon,
.jhr-button--icon-anim-slide-left:focus-visible .jhr-button__icon {
	transform: translateX(calc(var(--jhr-btn-icon-distance) * -1));
}

.jhr-button--icon-anim-slide-up:hover .jhr-button__icon,
.jhr-button--icon-anim-slide-up:focus-visible .jhr-button__icon {
	transform: translateY(calc(var(--jhr-btn-icon-distance) * -1));
}

.jhr-button--icon-anim-slide-down:hover .jhr-button__icon,
.jhr-button--icon-anim-slide-down:focus-visible .jhr-button__icon {
	transform: translateY(var(--jhr-btn-icon-distance));
}

.jhr-button--icon-anim-grow:hover .jhr-button__icon,
.jhr-button--icon-anim-grow:focus-visible .jhr-button__icon {
	transform: scale(var(--jhr-btn-icon-scale-grow));
}

.jhr-button--icon-anim-shrink:hover .jhr-button__icon,
.jhr-button--icon-anim-shrink:focus-visible .jhr-button__icon {
	transform: scale(var(--jhr-btn-icon-scale-shrink));
}

.jhr-button--icon-anim-rotate:hover .jhr-button__icon,
.jhr-button--icon-anim-rotate:focus-visible .jhr-button__icon {
	transform: rotate(var(--jhr-btn-icon-rotate));
}

/* ---------------------------------------------------------------------------
 * Accessibility
 *
 * Anyone who has asked their OS for less motion gets a button that still
 * changes colour on hover but does not move.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.jhr-button__icon {
		transition: none;
	}

	.jhr-button:hover .jhr-button__icon,
	.jhr-button:focus-visible .jhr-button__icon {
		transform: none;
	}
}

/* Keyboard focus ring — Elementor's button has none, which is a real
   accessibility gap. Kept subtle and only for keyboard navigation. */
.jhr-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Editor
 * ------------------------------------------------------------------------ */
.elementor-editor-active .jhr-button {
	cursor: default;
}