/**
 * Custom Heading Widget Styles
 * 
 * Handles layout, positioning, and hover animations for the custom heading widget.
 */

/* Main container with flexbox layout */
.elementor-widget-custom-heading .title {
    display: flex;
    align-items: center;
    gap: 0px; /* Default - overridden by Elementor control */
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Left SVG - initially hidden off-screen to the left */
.elementor-widget-custom-heading .arrowhover {
    flex-shrink: 0;
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(.55, 0, .1, 1);
}

/* Heading element - starts flush left, no gap before it */
.elementor-widget-custom-heading .elementor-heading-title {
    flex-shrink: 0;
    margin: 0;
    transition: transform 0.6s cubic-bezier(.55, 0, .1, 1);
}
/* Link styling inside heading */
.elementor-widget-custom-heading .elementor-heading-title a {
    color: inherit;
    text-decoration: inherit;
    transition: all 0.3s ease;
}

.elementor-widget-custom-heading .elementor-heading-title a:hover {
    text-decoration: none;
}

/* Right SVG - visible by default */
.elementor-widget-custom-heading .arrow {
    flex-shrink: 0;
    transition: transform 0.6s cubic-bezier(.55, 0, .1, 1);
}

/* SVG styling */
.elementor-widget-custom-heading .arrowsvg {
    display: block;
    width: 15px;
    height: 15px;
}

.elementor-widget-custom-heading .arrowsvg path {
    fill: #ffffff;
    transition: fill 0.3s ease;
}

/* 
 * Hover animations
 * Triggered on widget hover, parent container hover, or ancestor container hover
 * Left SVG slides in, heading moves right by SVG width (57px), right SVG clips out
 */

/* Widget direct hover */
.elementor-widget-custom-heading:hover .arrowhover {
    transform: translateX(0);
}

.elementor-widget-custom-heading:hover .elementor-heading-title {
    transform: translateX(calc(var(--svg-width, 12px) + var(--svg-gap, 15px))); /* SVG width + gap */
}

.elementor-widget-custom-heading:hover .arrow {
    transform: translateX(calc(var(--svg-width, 12px) + var(--svg-gap, 15px))); /* Same as heading */
}

/* Nearest .e-con container hover, driven by JS class (works for
   both e-parent-only and e-child containers — see custom-heading-widget.js) */
.e-con.is-hovered .elementor-widget-custom-heading .arrowhover {
    transform: translateX(0);
}
.e-con.is-hovered .elementor-widget-custom-heading .elementor-heading-title {
    transform: translateX(calc(var(--svg-width, 12px) + var(--svg-gap, 7px)));
}
.e-con.is-hovered .elementor-widget-custom-heading .arrow {
    transform: translateX(calc(var(--svg-width, 12px) + var(--svg-gap, 7px)));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .elementor-widget-custom-heading .title {
        gap: 0px; /* Default fallback */

    }
    
    .elementor-widget-custom-heading .arrowsvg {
        width: 15px;
        height: 15px;
    }
    
    .elementor-widget-custom-heading:hover .elementor-heading-title,
    .e-con.is-hovered .elementor-widget-custom-heading .elementor-heading-title {
        /*transform: translateX(15px);*/ /* SVG width + gap */
        transform: translateX(calc(var(--svg-width-tablet, 15px) + var(--svg-gap-tablet, 5px))); /* SVG width + gap */
    }
    
    .elementor-widget-custom-heading:hover .arrow,
    .e-con:hover .elementor-widget-custom-heading .arrow {
        /* transform: translateX(15px); */
        transform: translateX(calc(var(--svg-width-tablet, 15px) + var(--svg-gap-tablet, 5px)));
    }
}

@media (max-width: 480px) {
    .elementor-widget-custom-heading .title {
        gap: 0px;/* Default fallback */
    }
    
    .elementor-widget-custom-heading .arrowsvg {
        width: 15px;
        height: 15px;
    }
    
    .elementor-widget-custom-heading:hover .elementor-heading-title,
    .e-con.is-hovered .elementor-widget-custom-heading .elementor-heading-title {
        /*transform: translateX(15px);*/ /* SVG width + gap */
        transform: translateX(calc(var(--svg-width-mobile, 15px) + var(--svg-gap-mobile, 3px)));

    }
    
    .elementor-widget-custom-heading:hover .arrow,
    .e-con:hover .elementor-widget-custom-heading .arrow {
        /* transform: translateX(15px); */
        transform: translateX(calc(var(--svg-width-mobile, 15px) + var(--svg-gap-mobile, 3px)));
    }
}