/**
 * Modulo: Posizionamento Header Custom - ANTI-CONFLICT VERSION
 * Path: assets/css/spazio-lqd.css
 */

/* ==========================================================================
   IMPOSTAZIONI GLOBALI - Variabili fluide via clamp()
   Scalano linearmente tra mobile e desktop senza breakpoint discreti.
   ========================================================================== */
:root {
    /* Distanza dal fondo: 10px @ ~375px viewport → 30px @ 1000px+ */
    --spazio-bottom: clamp(10px, 2.5vw, 30px);

    /* Altezza header: 52px su mobile → 80px su desktop */
    --spazio-height: clamp(52px, 7vw, 80px);

    /* Border radius: 26px su mobile → 60px su desktop */
    --spazio-radius: clamp(26px, 5vw, 60px);

    --spazio-width-percent: 96%;
    --spazio-max-width: var(--lqd-container-width, 1100px);

    --spazio-z-index: 9999; /* Sopra i cloni di Hub */
    --spazio-transition-speed: 0.4s;
    --spazio-spring-curve: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   CORE LOGIC (Protezione dai conflitti Sticky di Hub)
   ========================================================================== */

.spazio-lqd {
    /* === SOLO POSIZIONAMENTO ESTERNO ===
       Tutto il layout interno (display, padding, align-items, height)
       è lasciato a Elementor per evitare conflitti con frontend.js dopo il page load. */

    /* Ancoraggio fisso in basso, centrato — sovrascrive sticky di Hub */
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--spazio-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;

    /* Dimensioni esterne del pill */
    width: var(--spazio-width-percent) !important;
    max-width: var(--spazio-max-width) !important;
    z-index: var(--spazio-z-index) !important;

    /* Estetica esterna (no !important: l'utente può sovrascriverla in editor) */
    border-radius: var(--spazio-radius);

    /* Anti-hide di Hub (no override su display: lo gestisce Elementor) */
    opacity: 1 !important;
    visibility: visible !important;

    /* Motore inerziale (centratura orizzontale + drift verticale fisica) */
    transform: translate(-50%, var(--spazio-inertia, 0px)) !important;
    transition: transform var(--spazio-transition-speed) var(--spazio-spring-curve) !important;
    will-change: transform;
}

/* Annulla forzatamente le trasformazioni che Hub applica quando rileva lo scroll */
.lqd-is-sticky .spazio-lqd,
.is-stuck .spazio-lqd,
.header-sticky-active .spazio-lqd {
    position: fixed !important;
    bottom: calc(var(--spazio-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    transform: translate(-50%, var(--spazio-inertia, 0px)) !important;
}

/* ==========================================================================
   ADATTAMENTO MOBILE STRETTO
   Le dimensioni (height, radius, bottom) scalano già via clamp().
   Qui gestiamo solo il margin orizzontale per i viewport molto stretti.
   ========================================================================== */
@media screen and (max-width: 480px) {
    .spazio-lqd {
        width: calc(100% - 30px) !important;
    }
}

.lqd-mobile-sec {
    display: none !important;
}