/* =============================================================
   Underline Link Hover Widget — ulw-style.css v1.1.0
   Superior University Web Team
   ============================================================= */

/* ——— WRAPPER ——————————————————————————————————————————————— */

.ulw-wrapper {
	display: flex;
	width: 100%;
}

/* ——— ANCHOR ——————————————————————————————————————————————— */

.ulw-link {
	display:         inline-flex;
	align-items:     center;
	position:        relative;
	padding-bottom:  4px;
	text-decoration: none;
	cursor:          pointer;

	/* Per-instance custom properties (overridden by Elementor selectors) */
	--ulw-speed:             500ms;
	--ulw-icon-gap:          8px;   /* normal gap — static layout, not animated */
	--ulw-icon-gap-hover:    8px;   /* hover gap  — diff drives translateX */
	--ulw-icon-rotate:       0deg;
	--ulw-icon-rotate-hover: 0deg;

	/* Static gap — not animated; movement comes from translateX on .ulw-icon */
	gap: var(--ulw-icon-gap);

	/* Only color is transitioned on the anchor itself */
	transition: color 0.25s ease;
}

/* ——— LAYOUT ———————————————————————————————————————————————— */

.ulw-layout-row {
	flex-direction:      row;
	--ulw-icon-direction: 1;    /* positive X = forward (right) */
}

.ulw-layout-row-reverse {
	flex-direction:      row-reverse;
	--ulw-icon-direction: -1;   /* negative X = forward (left) */
}

/* ——— TEXT ————————————————————————————————————————————————— */

.ulw-text {
	display:     inline-block;
	white-space: nowrap;
}

/* ——— ICON ————————————————————————————————————————————————— */

.ulw-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	font-size:       20px;
	line-height:     1;

	/* Normal state: no translation, apply base rotation */
	transform: translateX(0) rotate(var(--ulw-icon-rotate));

	/*
	 * Single transition on transform handles BOTH the slide-forward (translateX)
	 * and the rotation — one duration, one easing, one property.
	 * Uses --ulw-speed from the parent so it is always in sync with the underline.
	 */
	transition: transform var(--ulw-speed) ease;
}

/*
 * Hover state: icon slides forward by exactly (hover_gap - normal_gap) pixels.
 * --ulw-icon-direction flips the sign for row-reverse layouts.
 *
 * Example with default values (row, 8px to 20px):
 *   translateX( calc( (20px - 8px) * 1 ) ) = translateX(12px)
 *
 * When icon_spacing_hover === icon_spacing the delta is 0px so no movement occurs —
 * degrades gracefully.
 */
.ulw-link:hover .ulw-icon {
	transform:
		translateX(
			calc(
				(var(--ulw-icon-gap-hover) - var(--ulw-icon-gap))
				* var(--ulw-icon-direction)
			)
		)
		rotate(var(--ulw-icon-rotate-hover));
}

/* ——— UNDERLINE BAR ————————————————————————————————————————— */

.ulw-underline {
	position:       absolute;
	bottom:         0;
	left:           0;
	width:          100%;
	height:         1px;
	background:     currentColor;
	pointer-events: none;

	transform-origin: left center; /* overridden per animation+direction class */

	/* Uses the same --ulw-speed — this is the sync guarantee */
	transition:
		transform        var(--ulw-speed) ease,
		background-color 0.25s ease;
}

/* =============================================================
   ANIMATION TYPES x DIRECTIONS
   ============================================================= */

/* ——— HIDE ————————————————————————————————————————————————— */

.ulw-anim-hide .ulw-underline                              { transform: scaleX(1); }

.ulw-anim-hide.ulw-dir-left-to-right .ulw-underline        { transform-origin: left center; }
.ulw-anim-hide.ulw-dir-left-to-right:hover .ulw-underline  { transform: scaleX(0); }

.ulw-anim-hide.ulw-dir-right-to-left .ulw-underline        { transform-origin: right center; }
.ulw-anim-hide.ulw-dir-right-to-left:hover .ulw-underline  { transform: scaleX(0); }

.ulw-anim-hide.ulw-dir-center .ulw-underline               { transform-origin: center; }
.ulw-anim-hide.ulw-dir-center:hover .ulw-underline         { transform: scaleX(0); }

/* ——— SHOW ————————————————————————————————————————————————— */

.ulw-anim-show .ulw-underline                              { transform: scaleX(0); }

.ulw-anim-show.ulw-dir-left-to-right .ulw-underline        { transform-origin: left center; }
.ulw-anim-show.ulw-dir-left-to-right:hover .ulw-underline  { transform: scaleX(1); }

.ulw-anim-show.ulw-dir-right-to-left .ulw-underline        { transform-origin: right center; }
.ulw-anim-show.ulw-dir-right-to-left:hover .ulw-underline  { transform: scaleX(1); }

.ulw-anim-show.ulw-dir-center .ulw-underline               { transform-origin: center; }
.ulw-anim-show.ulw-dir-center:hover .ulw-underline         { transform: scaleX(1); }

/* ——— SLIDE ———————————————————————————————————————————————— */

.ulw-anim-slide .ulw-underline                             { transform: scaleX(0); }

.ulw-anim-slide.ulw-dir-left-to-right .ulw-underline       { transform-origin: left center; }
.ulw-anim-slide.ulw-dir-left-to-right:hover .ulw-underline { transform: scaleX(1); }

.ulw-anim-slide.ulw-dir-right-to-left .ulw-underline       { transform-origin: right center; }
.ulw-anim-slide.ulw-dir-right-to-left:hover .ulw-underline { transform: scaleX(1); }

.ulw-anim-slide.ulw-dir-center .ulw-underline              { transform-origin: center; }
.ulw-anim-slide.ulw-dir-center:hover .ulw-underline        { transform: scaleX(1); }

/* ——— EDITOR ———————————————————————————————————————————————— */

.elementor-editor-active .ulw-underline {
	opacity: 0.4;
}