/* Base class for sticky elements - added via PHP before_render */
.ase-sticky-element {
    transition: all var(--ase-transition-speed, 0.5s) ease;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 9999 !important;
    will-change: transform, opacity, background-color;
}

.ase-sticky-visibility-item[hidden],
.ase-sticky-visibility-item.ase-visibility-hidden {
    display: none !important;
}

.ase-sticky-element a,
.ase-sticky-element .elementor-item,
.ase-sticky-element .elementor-heading-title,
.ase-sticky-element .elementor-icon-list-text,
.ase-sticky-element .elementor-icon-box-title,
.ase-sticky-element .elementor-button,
.ase-sticky-element .elementor-button-text,
.ase-sticky-element .elementor-menu-toggle,
.ase-sticky-element .sub-arrow,
.ase-sticky-element .elementor-icon svg,
.ase-sticky-element .elementor-icon svg *,
.ase-sticky-element .elementor-menu-toggle svg,
.ase-sticky-element .elementor-menu-toggle svg *,
.ase-sticky-element .sub-arrow svg,
.ase-sticky-element .sub-arrow svg * {
    transition:
        color var(--ase-transition-speed, 0.5s) ease,
        fill var(--ase-transition-speed, 0.5s) ease,
        stroke var(--ase-transition-speed, 0.5s) ease,
        background-color var(--ase-transition-speed, 0.5s) ease;
}

/* Active sticky state */
.ase-sticky-element.ase-sticky-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    z-index: 10000;
}

/* Transparent header must overlay page content from the very top */
.ase-sticky-element.ase-transparent-overlay.ase-sticky-inactive {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
    z-index: 10000;
}

.ase-effect-none {
    animation: none;
}

/* FADE EFFECT */
.ase-effect-fade {
    opacity: 1;
}

.ase-sticky-active.ase-effect-fade {
    animation: aseFadeIn var(--ase-transition-speed, 0.5s) forwards;
}

@keyframes aseFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* SLIDE EFFECT */
.ase-sticky-active.ase-effect-slide {
    animation: aseSlideDown var(--ase-transition-speed, 0.5s) forwards;
}

@keyframes aseSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* REVEAL EFFECT */
.ase-sticky-active.ase-effect-reveal {
    transition: transform var(--ase-transition-speed, 0.5s) cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* SHRINK EFFECT */
.ase-sticky-active.ase-effect-shrink {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
}

/* Fix for Elementor containers/sections if they have relative/overflow */
.ase-sticky-element.ase-sticky-active>.elementor-container,
.ase-sticky-element.ase-sticky-active>.elementor-widget-container {
    max-width: 100%;
}

/* Fix: mobile dropdown clipped by Elementor containers (classic sections & flex containers) */
.ase-sticky-element .elementor-column,
.ase-sticky-element .elementor-col-100,
.ase-sticky-element .elementor-widget-wrap,
.ase-sticky-element .elementor-widget-nav-menu,
.ase-sticky-element .elementor-widget-nav-menu > .elementor-widget-container,
.ase-sticky-element .e-con,
.ase-sticky-element .e-con-inner,
.ase-sticky-element .e-child {
    overflow: visible !important;
}

/* Fix: ensure mobile dropdown appears above page sections */
.ase-sticky-element .elementor-nav-menu--dropdown,
.ase-sticky-element .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    z-index: 10001 !important;
    position: absolute;
}