/**
 * Lemon Floating Container — Stylesheet
 *
 * All visual states are driven by CSS custom properties injected
 * per-element by the PHP extension (via data-lt-styles → JS).
 *
 * Class map:
 *   .lt-floating-container   — Base class, always present when enabled
 *   .lt-mode-overlay         — Fixed positioning (overlay mode)
 *   .lt-mode-sticky          — CSS sticky positioning
 *   .lt-is-normal            — At original position (top of page)
 *   .lt-is-scrolled          — User has scrolled past 10px
 *   .lt-is-hidden            — Slide/fade out (scroll-down reveal)
 *   .lt-over-dark            — Floating over a [data-lt-section-theme="dark"]
 *   .lt-over-light           — Floating over a [data-lt-section-theme="light"]
 *   .lt-effect-slide         — Reveal effect: slide only
 *   .lt-effect-fade          — Reveal effect: fade only
 *   .lt-effect-both          — Reveal effect: slide + fade
 *   .lt-disabled             — Behaviour disabled at current breakpoint
 *
 * Cascade order for styles (lowest to highest priority):
 *   Normal  →  Scrolled  →  Over Dark  →  Over Light
 */

/* ================================================================
   BASE — transitions and shared properties
   ================================================================ */

/* Override Elementor's generated top:0px with admin bar offset */
.elementor-element.lt-floating-container.lt-mode-overlay {
    top: var(--lt-fc-top, 0px) !important;
}

.lt-floating-container {
    transition:
        background-color var(--lt-fc-transition, 350ms) ease,
        backdrop-filter  var(--lt-fc-transition, 350ms) ease,
        padding-top      var(--lt-fc-transition, 350ms) ease,
        padding-bottom   var(--lt-fc-transition, 350ms) ease,
        box-shadow       var(--lt-fc-transition, 350ms) ease,
        border-color     var(--lt-fc-transition, 350ms) ease,
        transform        var(--lt-fc-transition, 350ms) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity          var(--lt-fc-transition, 350ms) ease;
}

/* ================================================================
   STATE — Normal (at top, before any scroll)
   ================================================================ */

.elementor-element.lt-floating-container:not(.lt-is-scrolled) {
    background-color : var(--lt-fc-n-bg,       transparent) !important;
    -webkit-backdrop-filter: blur(var(--lt-fc-n-blur, 0px));
    backdrop-filter  : blur(var(--lt-fc-n-blur, 0px));
    box-shadow       : var(--lt-fc-n-shadow,    none)  !important;
    border-bottom    : var(--lt-fc-n-border-w,  0px) solid var(--lt-fc-n-border-c, transparent) !important;
}

/* Only apply padding override when explicitly set via toggle */
.elementor-element.lt-floating-container:not(.lt-is-scrolled)[style*="--lt-fc-n-padding"] {
    padding : var(--lt-fc-n-padding) !important;
}

/* ================================================================
   STATE — Scrolled / Default
   ================================================================ */

.elementor-element.lt-floating-container.lt-is-scrolled {
    background-color : var(--lt-fc-s-bg,       var(--lt-fc-n-bg,      transparent)) !important;
    -webkit-backdrop-filter: blur(var(--lt-fc-s-blur, var(--lt-fc-n-blur, 0px)));
    backdrop-filter  : blur(var(--lt-fc-s-blur, var(--lt-fc-n-blur, 0px)));
    box-shadow       : var(--lt-fc-s-shadow,    var(--lt-fc-n-shadow,  none))  !important;
    border-bottom    : var(--lt-fc-s-border-w,  var(--lt-fc-n-border-w, 0px)) solid var(--lt-fc-s-border-c, var(--lt-fc-n-border-c, transparent)) !important;
}

.elementor-element.lt-floating-container.lt-is-scrolled[style*="--lt-fc-s-padding"],
.elementor-element.lt-floating-container.lt-is-scrolled[style*="--lt-fc-n-padding"] {
    padding : var(--lt-fc-s-padding, var(--lt-fc-n-padding)) !important;
}

/* ================================================================
   STATE — Over Dark section
   Falls back to scrolled values via CSS var() chaining if not set
   ================================================================ */

.elementor-element.lt-floating-container.lt-over-dark {
    background-color : var(--lt-fc-d-bg,       var(--lt-fc-s-bg,      transparent)) !important;
    -webkit-backdrop-filter: blur(var(--lt-fc-d-blur, var(--lt-fc-s-blur, 0px)));
    backdrop-filter  : blur(var(--lt-fc-d-blur, var(--lt-fc-s-blur, 0px)));

    box-shadow       : var(--lt-fc-d-shadow,    var(--lt-fc-s-shadow,  none)) !important;
    border-bottom    : var(--lt-fc-d-border-w,  var(--lt-fc-s-border-w, 0px))
                       solid
                       var(--lt-fc-d-border-c,  var(--lt-fc-s-border-c, transparent)) !important;
}

/* ================================================================
   STATE — Over Light section
   Falls back to scrolled values via CSS var() chaining if not set
   ================================================================ */

.elementor-element.lt-floating-container.lt-over-light {
    background-color : var(--lt-fc-l-bg,       var(--lt-fc-s-bg,      #ffffff)) !important;
    -webkit-backdrop-filter: blur(var(--lt-fc-l-blur, var(--lt-fc-s-blur, 0px)));
    backdrop-filter  : blur(var(--lt-fc-l-blur, var(--lt-fc-s-blur, 0px)));

    box-shadow       : var(--lt-fc-l-shadow,    var(--lt-fc-s-shadow,  none)) !important;
    border-bottom    : var(--lt-fc-l-border-w,  var(--lt-fc-s-border-w, 0px))
                       solid
                       var(--lt-fc-l-border-c,  var(--lt-fc-s-border-c, transparent)) !important;
}

.elementor-element.lt-floating-container.lt-over-dark[style*="--lt-fc-d-padding"],
.elementor-element.lt-floating-container.lt-over-dark[style*="--lt-fc-s-padding"],
.elementor-element.lt-floating-container.lt-over-dark[style*="--lt-fc-n-padding"] {
    padding : var(--lt-fc-d-padding, var(--lt-fc-s-padding, var(--lt-fc-n-padding))) !important;
}

.elementor-element.lt-floating-container.lt-over-light[style*="--lt-fc-l-padding"],
.elementor-element.lt-floating-container.lt-over-light[style*="--lt-fc-s-padding"],
.elementor-element.lt-floating-container.lt-over-light[style*="--lt-fc-n-padding"] {
    padding : var(--lt-fc-l-padding, var(--lt-fc-s-padding, var(--lt-fc-n-padding))) !important;
}

/* ================================================================
   REVEAL — Hidden states per effect type
   ================================================================ */

/* Slide only */
.lt-floating-container.lt-mode-overlay.lt-effect-slide.lt-is-hidden {
    transform : translateY(-110%);
    opacity   : 1;
}

/* Fade only */
.lt-floating-container.lt-mode-overlay.lt-effect-fade.lt-is-hidden {
    transform : translateY(0);
    opacity   : 0;
    pointer-events: none;
}

/* Slide + Fade */
.lt-floating-container.lt-mode-overlay.lt-effect-both.lt-is-hidden {
    transform : translateY(-80%);
    opacity   : 0;
    pointer-events: none;
}

/* ================================================================
   OVERLAY MODE — ensure content below is not offset
   ================================================================ */

/*
 * When a container is in overlay/fixed mode, the next sibling
 * element in the DOM may need a top margin to prevent being hidden
 * behind the header. The JS sets a CSS var we can reference,
 * but managing the sibling offset is intentionally left to the
 * user's theme/template since header height is variable.
 *
 * Helper class you can add to the section below the header:
 */
.lt-push-below-header {
    padding-top: var(--lt-fc-push, 0px);
}

/* ================================================================
   DISABLED state (breakpoint)
   ================================================================ */

.lt-floating-container.lt-disabled {
    position      : relative !important;
    top           : auto !important;
    transform     : none !important;
    opacity       : 1   !important;
    background-color: var(--lt-fc-n-bg, transparent) !important;
    backdrop-filter: none !important;
    box-shadow    : none !important;
    padding-top   : var(--lt-fc-n-pv, 20px) !important;
    padding-bottom: var(--lt-fc-n-pv, 20px) !important;
}

/* ================================================================
   REDUCED MOTION — respect user preference
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .lt-floating-container {
        transition: background-color var(--lt-fc-transition, 350ms) ease,
                    opacity          50ms ease !important;
    }
    .lt-floating-container.lt-is-hidden {
        transform: none !important;
    }
}

/* ================================================================
   WIDGET STATE — children visibility and overrides
   ================================================================ */

.lt-widget-state {
    transition:
        opacity          var(--lt-widget-transition, 350ms) ease,
        transform        var(--lt-widget-transition, 350ms) ease,
        color            var(--lt-widget-transition, 350ms) ease,
        font-size        var(--lt-widget-transition, 350ms) ease;
}

.lt-widget-state.lt-widget-hidden {
    opacity:        0;
    pointer-events: none;
}