/**
 * TARGET: hub-child/assets/css/lqd-node-menu.css
 * ENGINE: Liquid Theme Hub Framework
 * MODULO: Interactive Node Menu (Struttura Base)
 */

/* ==========================================================================
   1. CONTENITORE PRINCIPALE
   ========================================================================== */
.lqd-node-menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Rimuove eventuali margini default dei widget Elementor */
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   2. STRUTTURA LISTA (UL)
   ========================================================================== */
.lqd-node-nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permette alle voci di andare a capo se lo spazio finisce */
    margin: 0;
    padding: 0;
    list-style: none;
    /* Il gap tra le voci viene sovrascritto dinamicamente dal pannello Elementor. 
       Questo � solo un fallback di sicurezza. */
    gap: 20px; 
}

.lqd-node-nav-list li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 1;
}

/* ==========================================================================
   3. STILE LINK E TRANSIZIONI (A)
   ========================================================================== */
.lqd-node-nav-link {
    display: inline-flex;
    align-items: center;
    text-transform: capitalize; /* Prima lettera maiuscola (es. chi siamo -> Chi Siamo) */
    text-decoration: none !important; /* Rimuove sottolineature di default del browser */
    position: relative;
    padding: 5px 0;
    transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Colori e font vengono ereditati o forzati da Elementor */
}

/* --- EFFETTO PREMIUM: Sottolineatura Animata (Opzionale) --- */
.lqd-node-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: currentColor; /* Prende in automatico il colore del testo/hover */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0.5;
}

/* Espande la linea in Hover o quando la sezione � Attiva */
.lqd-node-nav-link:hover::after,
.lqd-node-nav-link.lqd-is-active::after {
    width: 100%;
}

/* ==========================================================================
   4. COMPORTAMENTO RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* Su schermi piccoli (tablet/smartphone), incolonna le voci
       se inserisci il widget in un off-canvas o menu mobile.
       Questa regola NON si applica quando il picker è attivo
       (classe .lqd-node-menu--picker sul wrapper) — la specificità
       della cascade più sotto la sovrascrive. */
    .lqd-node-menu-wrapper:not(.lqd-node-menu--picker) .lqd-node-nav-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .lqd-node-menu-wrapper:not(.lqd-node-menu--picker) .lqd-node-nav-link {
        width: 100%;
        padding: 10px 0;
    }
}

/* ==========================================================================
   5. MOBILE PICKER MODE (iOS wheel-style — solo visivo)
   - overflow: hidden + transform sulla UL → niente scroll, niente snap.
   - touch sul picker NON viene catturato: la pagina scrolla normalmente.
   - tap singolo apre la dropdown (gestito dal JS).
   - aggiornamento dell'item centrale: SOLO via page observer (passivo).
   ========================================================================== */
.lqd-node-menu-wrapper.lqd-node-menu--picker {
    height: calc(var(--lqd-picker-item-h, 2em) * var(--lqd-picker-visible, 3));
    overflow: hidden;
    position: relative;
    cursor: pointer;
    align-items: stretch;
}

.lqd-node-menu--picker .lqd-node-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.lqd-node-menu--picker .lqd-node-nav-list li {
    height: var(--lqd-picker-item-h, 2em);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1;
    flex-shrink: 0;
}

.lqd-node-menu--picker .lqd-node-nav-link {
    padding: 0;
    width: auto;
    opacity: var(--lqd-picker-dim, 0.35);
    filter: blur(var(--lqd-picker-blur, 1.5px));
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.lqd-node-menu--picker .lqd-node-nav-link.lqd-is-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.06);
}

.lqd-node-menu--picker .lqd-node-nav-link::after { display: none; }

/* ==========================================================================
   6. DROPDOWN (popup di selezione, attivata da tap sul picker)
   Position: fixed. Il JS la posiziona sopra o sotto il picker in base allo spazio.
   ========================================================================== */
.lqd-node-menu-dropdown {
    position: fixed;
    z-index: 999999;
    background: rgba(15, 15, 20, 0.95);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    max-height: 70vh;
    overflow-y: auto;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    opacity: 0;
    transform: scale(.95);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    -webkit-overflow-scrolling: touch;
    /* Pre-position out of view to avoid flicker before JS positioning */
    top: -9999px;
    left: -9999px;
}

.lqd-node-menu-dropdown.is-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.lqd-node-menu-dropdown .lqd-node-menu-dropdown-item {
    display: block;
    padding: 14px 22px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.3;
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s ease;
    text-transform: capitalize;
    white-space: nowrap;
}

.lqd-node-menu-dropdown .lqd-node-menu-dropdown-item:hover,
.lqd-node-menu-dropdown .lqd-node-menu-dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.lqd-node-menu-dropdown .lqd-node-menu-dropdown-item.lqd-is-active {
    background: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}