/**
 * ============================================================================
 * SMART HEADER - SCROLL ANIMATION SYSTEM
 * Sistema intelligente per header Elementor con animazioni fluide
 * ============================================================================
 */

/* ============================================================================
   KEYFRAME ANIMATIONS
   ============================================================================ */

/**
 * NOTA: L'animazione slideDown è stata rimossa.
 * Ora utilizziamo solo la transition CSS per gestire sia scroll up che scroll down.
 * Questo garantisce un'animazione speculare e fluida in entrambe le direzioni.
 */

/* ============================================================================
   BASE STYLES
   ============================================================================ */

/**
 * Stile base per l'header smart
 * Applicato sempre all'elemento con classe .smart-header
 */
.smart-header {
    /* Posizionamento fisso in alto */
    position: fixed !important;
    /* Usa CSS variable per l'offset totale (WP Admin Bar + Animated Banner) */
    top: var(--smart-header-top-offset, var(--wp-admin-bar-height, 0)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* Z-index alto per stare sopra tutto (ma sotto il banner se presente) */
    z-index: 9998 !important;

    /* Transizione smooth per il nascondimento/apparizione */
    transition: transform 0.4s ease-in-out,
                background-color 0.3s ease,
                backdrop-filter 0.3s ease,
                top 0.2s ease !important;

    /* GPU acceleration per performance migliori */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Assicura che il contenuto sia sopra il blur */
    isolation: isolate;
}

/* ============================================================================
   STATI VISIBILITÀ
   ============================================================================ */

/**
 * Stato nascosto - Header scivola verso l'alto
 * Applicato quando l'utente scrolla giù oltre 100px
 */
.smart-header.hidden {
    transform: translateY(-100%) !important;
}

/**
 * Stato visibile - Header riappare con transition speculare
 * Applicato quando l'utente scrolla su (anche solo 1px)
 * La transition nella classe base gestisce automaticamente l'animazione
 */
.smart-header.visible {
    transform: translateY(0) !important;
}

/* ============================================================================
   BLUR EFFECT
   ============================================================================ */

/**
 * Stato scrollato - dopo 50px di scroll
 * Applicato quando menu è visibile dopo scroll
 * NOTA: Il blur è stato spostato nella classe dedicata .smart-header-menu-blur
 */
.smart-header.scrolled {
    /* Shadow rimossa */
}

/**
 * Classe dedicata al blur per la colonna menu dello SmartHeader
 * Applica effetto blur al contenitore del menu con espansione "capsula"
 *
 * USO: Aggiungi questa classe manualmente alla colonna/container del menu in Elementor
 *
 * CARATTERISTICHE:
 * - Effetto blur trasparente al posto del background solido
 * - Espansione di 10px oltre il contenuto per effetto "capsula"
 * - Mantiene bordi arrotondati esistenti
 * - Compatibile con animazioni SmartHeader
 * - Responsive senza causare overflow orizzontale
 */
.smart-header-menu-blur {
    /* Effetto blur del contenuto sottostante */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px) !important;

    /* Rimuovi background solido se presente */
    background-color: transparent !important;

    /* Espansione "capsula" - padding oltre il contenuto */
    padding: 10px !important;

    /* Mantieni bordi arrotondati se presenti */
    border-radius: inherit;

    /* Assicura che il contenuto sia sopra il blur */
    position: relative;
    z-index: 1;
    isolation: isolate;

    /* Transizione smooth per compatibilità con animazioni header */
    transition: backdrop-filter 0.3s ease,
                padding 0.3s ease;

    /* Previeni overflow orizzontale */
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/**
 * Fallback per browser che non supportano backdrop-filter
 * Usa un background semi-trasparente per garantire leggibilità
 */
@supports not (backdrop-filter: blur(20px)) {
    .smart-header-menu-blur {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
}

/**
 * Variante per tema scuro (opzionale)
 */
.smart-header.dark-theme .smart-header-menu-blur {
    /* Shadow rimossa */
}

@supports not (backdrop-filter: blur(20px)) {
    .smart-header.dark-theme .smart-header-menu-blur {
        background-color: rgba(0, 0, 0, 0.15) !important;
    }
}

/**
 * Ottimizzazioni responsive per mobile
 * Padding leggermente ridotto su schermi piccoli
 */
@media (max-width: 768px) {
    .smart-header-menu-blur {
        padding: 8px !important;
    }
}

/**
 * Riduzione animazioni per utenti con preferenze accessibilità
 */
@media (prefers-reduced-motion: reduce) {
    .smart-header-menu-blur {
        transition: none !important;
    }
}

/* ============================================================================
   BODY COMPENSATION
   ============================================================================ */

/**
 * Padding del body per compensare l'header fisso + animated banner
 * NON applicato nell'editor di Elementor
 * Usa CSS variable calcolata dinamicamente da JavaScript
 */
body:not(.elementor-editor-active) {
    padding-top: var(--smart-header-body-padding, 100px);
}

/**
 * Reset padding nell'editor di Elementor
 * Previene problemi di layout durante la modifica
 */
body.elementor-editor-active {
    padding-top: 0 !important;
}

/**
 * Previeni sovrapposizione e animazioni nell'editor
 */
.elementor-editor-active .smart-header {
    position: relative !important;
    transform: none !important;
    animation: none !important;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/**
 * GPU Acceleration - Cross browser
 */
.smart-header {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

/**
 * Riduce le animazioni per utenti con preferenze di riduzione movimento
 * Accessibilità - rispetta le preferenze del sistema operativo
 */
@media (prefers-reduced-motion: reduce) {
    .smart-header {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   RESPONSIVE - MOBILE
   ============================================================================ */

/**
 * Ottimizzazioni per dispositivi mobili
 */
@media (max-width: 768px) {
    .smart-header {
        /* Transizione leggermente più veloce su mobile */
        transition: transform 0.3s ease-in-out,
                    background-color 0.3s ease,
                    backdrop-filter 0.3s ease,
                    top 0.2s ease !important;
    }
}

/**
 * Fix per bounce scroll su iOS
 * Previene glitch visivi durante lo scroll elastico
 */
@supports (-webkit-overflow-scrolling: touch) {
    .smart-header {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* ============================================================================
   DARK ZONE DETECTION SYSTEM
   ============================================================================ */

/**
 * CLASSE MARKER PER SEZIONI SCURE
 * Applica questa classe alle sezioni/container con sfondo scuro
 * Lo SmartHeader rileverà automaticamente quando passa sopra queste zone
 */
.smart-header-dark-zone {
    /* Questa classe è solo un marker per il JavaScript */
    /* Non applica stili visivi - serve solo per il rilevamento */
    position: relative; /* Assicura che getBoundingClientRect() funzioni correttamente */
}

/**
 * CLASSE REATTIVA PER TESTO E ELEMENTI
 * Applica questa classe agli elementi dello SmartHeader che devono cambiare colore:
 * - Voci di menu navigation
 * - Logo SVG
 * - Widget BW NavShop
 * - Qualsiasi testo che deve diventare chiaro su sfondo scuro
 */
.smart-header-reactive-text {
    /* Colore di default (testo scuro su sfondo chiaro) */
    color: inherit;

    /* Transizione fluida per il cambio colore */
    transition: color 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease,
                opacity 0.3s ease;
}

/**
 * Supporto SVG - Logo e icone
 * Assicura che gli elementi SVG ereditino il colore corrente
 */
.smart-header-reactive-text svg,
.smart-header-reactive-text svg path,
.smart-header-reactive-text svg circle,
.smart-header-reactive-text svg rect,
.smart-header-reactive-text svg polygon,
.smart-header-reactive-text svg polyline,
.smart-header-reactive-text svg line {
    fill: currentColor;
    stroke: currentColor;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

/**
 * STATO: SmartHeader su zona scura
 * Quando lo SmartHeader passa sopra una sezione con .smart-header-dark-zone,
 * tutti gli elementi con .smart-header-reactive-text diventano chiari
 */
.smart-header--on-dark .smart-header-reactive-text {
    color: #ffffff !important; /* Testo bianco su sfondo scuro */
}

/**
 * Variante con opacità ridotta per elementi secondari
 * Applica classe aggiuntiva .smart-header-reactive-text--secondary
 */
.smart-header--on-dark .smart-header-reactive-text.smart-header-reactive-text--secondary {
    color: rgba(255, 255, 255, 0.8) !important;
}

/**
 * SVG su zona scura
 */
.smart-header--on-dark .smart-header-reactive-text svg,
.smart-header--on-dark .smart-header-reactive-text svg path,
.smart-header--on-dark .smart-header-reactive-text svg circle,
.smart-header--on-dark .smart-header-reactive-text svg rect,
.smart-header--on-dark .smart-header-reactive-text svg polygon,
.smart-header--on-dark .smart-header-reactive-text svg polyline,
.smart-header--on-dark .smart-header-reactive-text svg line {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/**
 * Supporto per Elementor Navigation Menu
 * Gli elementi di menu Elementor hanno selettori specifici
 */
.smart-header--on-dark .smart-header-reactive-text .elementor-nav-menu--main .elementor-item,
.smart-header--on-dark .smart-header-reactive-text.elementor-nav-menu--main .elementor-item,
.smart-header--on-dark .elementor-nav-menu--main.smart-header-reactive-text .elementor-item {
    color: #ffffff !important;
}

.smart-header--on-dark .smart-header-reactive-text .elementor-nav-menu--main .elementor-item:hover,
.smart-header--on-dark .smart-header-reactive-text.elementor-nav-menu--main .elementor-item:hover,
.smart-header--on-dark .elementor-nav-menu--main.smart-header-reactive-text .elementor-item:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/**
 * Supporto per Widget BW NavShop
 */
.smart-header--on-dark .smart-header-reactive-text .bw-navshop__item,
.smart-header--on-dark .bw-navshop.smart-header-reactive-text .bw-navshop__item {
    color: #ffffff !important;
}

.smart-header--on-dark .smart-header-reactive-text .bw-navshop__item:hover,
.smart-header--on-dark .bw-navshop.smart-header-reactive-text .bw-navshop__item:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

/**
 * Performance - GPU acceleration per transizioni fluide
 */
.smart-header-reactive-text {
    will-change: color;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/**
 * Accessibilità - Riduzione animazioni
 */
@media (prefers-reduced-motion: reduce) {
    .smart-header-reactive-text {
        transition: none !important;
    }

    .smart-header-reactive-text svg,
    .smart-header-reactive-text svg * {
        transition: none !important;
    }
}

/**
 * Responsive - Mobile
 * Su mobile manteniamo le stesse regole ma assicuriamo performance ottimali
 */
@media (max-width: 768px) {
    .smart-header-reactive-text {
        /* Transizioni leggermente più veloci su mobile */
        transition: color 0.25s ease,
                    fill 0.25s ease,
                    stroke 0.25s ease;
    }
}

/* ============================================================================
   VARIANTE DARK THEME (OPZIONALE)
   ============================================================================ */

.smart-header.dark-theme.scrolled {
    /* Shadow rimossa */
}