/**
 * Ensoul Navigation
 * Floating Navigation Bar
 * v5.5.9 - CTA "Let's talk" al footer (fondo pagina)
 */

/* ==========================================================================
   CONFIGURAZIONE VARIABILI
   ========================================================================== */
:root {
    /* Easing — morbidi, fluid motion senza bounce */
    --hm-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --hm-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --hm-ease-in: cubic-bezier(0.65, 0, 0.35, 1);
    --hm-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    /* Durate — più lunghe per un feel morbido e lussuoso */
    --hm-dur: 0.625s;
    --hm-dur-fast: 0.375s;
    --hm-dur-slow: 0.9375s;
}

/* v5.5.7: la submenu list ora è <ul> nativo per semantica/screen reader.
   Reset dei default browser (margin/padding/list-style) per non rompere
   il layout esistente. */
ul.hm-column-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.hm-column-items li {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   NAVIGAZIONE HEADER ORIGINALE - Nascosta
   ========================================================================== */
header.wp-block-template-part .wp-block-navigation {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   LOGO HEADER ORIGINALE - Fade out quando scrolli
   ========================================================================== */
header.wp-block-template-part .wp-block-site-logo {
    transition: opacity var(--hm-dur) var(--hm-ease);
}

body.hm-scrolled header.wp-block-template-part .wp-block-site-logo {
    opacity: 0;
    pointer-events: none;
}

/* Su mobile la floating nav mostra sempre il proprio logo:
   nascondi quello dell'header per evitare il "doppio logo" sopra+sotto. */
@media (max-width: 782px) {
    header.wp-block-template-part .wp-block-site-logo {
        opacity: 0;
        pointer-events: none;
    }
}

/* ==========================================================================
   RESET LINK — rimuove underline da tutti i link nella nav
   ========================================================================== */
.hm-floating-nav a {
    text-decoration: none;
}

/* ==========================================================================
   NAV WRAPPER - Container Flottante
   Tailwind (JS): fixed flex flex-col items-center
   ========================================================================== */
.hm-floating-nav {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

.home .hm-floating-nav .hm-nav-page-title a,
.hm-floating-nav .hm-nav-page-title.hm-cta a {
    font-weight: 500;
    font-size: 0.8rem;
    color: #3F2237;
    margin-left: 12px;
    padding-left: 12px;
    text-decoration: none;
    border: 1px solid #3F2237;
    padding: 10px;
    border-radius: 240px;
    transition: background-color var(--hm-dur-fast) var(--hm-ease-spring),
                color var(--hm-dur-fast) var(--hm-ease),
                border-color var(--hm-dur-fast) var(--hm-ease);
}

.home .hm-floating-nav .hm-nav-page-title a:hover,
.hm-floating-nav .hm-nav-page-title.hm-cta a:hover {
    background-color: #FF4848;
    color: white !important;
    border-color: #FF4848;
}

/* ==========================================================================
   CONTENITORE PRINCIPALE (Blur)
   Tailwind (JS): flex flex-col items-stretch overflow-visible
   ========================================================================== */
.hm-nav-main {
    background: rgba(248, 249, 251, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px !important;
    padding: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: background var(--hm-dur-slow) var(--hm-ease-out),
                box-shadow var(--hm-dur-slow) var(--hm-ease-out);
}

.hm-floating-nav.hm-expanded .hm-nav-main {
    background: rgba(248, 249, 251, 1);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   RIGA PRINCIPALE
   Tailwind (JS): flex items-stretch overflow-hidden
   ========================================================================== */
.hm-nav-row {
    border-radius: 16px !important;
    min-height: 50px;
}

/* ==========================================================================
   BOX LOGO (Sinistra)
   Tailwind (JS): flex items-center shrink-0
   ========================================================================== */
.hm-nav-logo-box {
    background: #f8f9fb;
    border-radius: 16px !important;
    padding: 2px 16px !important;
    min-width: 80px;
    transition: border-radius var(--hm-dur) var(--hm-ease);
}

/* Se non ci sono quaternarie: radius 0 a destra */
.hm-floating-nav.hm-no-quaternary.hm-logo-visible .hm-nav-logo-box {
    border-radius: 16px 0 0 16px !important;
}

/* Immagine Logo - Dimensioni fisse */
.hm-floating-nav .hm-nav-logo {
    width: 78px;
    height: 28px;
}

.hm-floating-nav .hm-nav-logo img {
    max-height: 28px;
    max-width: 78px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    margin-top: 4px;
}

/* ==========================================================================
   TITOLO PAGINA - Transizioni simmetriche
   Tailwind (JS): flex items-center whitespace-nowrap overflow-hidden opacity-0
   ========================================================================== */
.hm-floating-nav .hm-nav-page-title {
    max-width: 0;
    transition: opacity var(--hm-dur) var(--hm-ease-out),
                max-width var(--hm-dur-slow) var(--hm-ease);
}

/* Separator visivo dal logo per le pagine non-home (CTA esclusa) */
.hm-floating-nav .hm-nav-page-title:not(.hm-cta) {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* Track marquee (anche statico se nessun overflow) */
.hm-floating-nav .hm-nav-page-title .hm-marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

/* Stile testo voce */
.hm-floating-nav .hm-nav-page-title .hm-marquee-item {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.8rem;
    color: #86868b;
    line-height: 1;
}

/* Quando NON siamo in marquee, l'item duplicato resta nascosto. */
.hm-floating-nav .hm-nav-page-title:not(.hm-marquee-active) .hm-marquee-item:nth-child(2) {
    display: none;
}

/* Keyframe usato dal marquee mobile */
@keyframes hm-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hm-floating-nav.hm-logo-visible .hm-nav-page-title {
    max-width: 300px;
    opacity: 1;
}

.hm-floating-nav.hm-logo-visible.hm-menu-open .hm-nav-page-title {
    max-width: 0;
    opacity: 0;
}

/* ==========================================================================
   VOCI QUATERNARIE
   Due fasi: hm-logo-visible → in-flow ma collassato
             hm-quaternary-ready → espande con stagger sui link
   ========================================================================== */
.hm-nav-quaternary {
    width: 0;
    height: 0;
}

@media (min-width: 783px) {
    /* Fase 1: in-flow ma collassato (pronto per animazione) */
    .hm-floating-nav.hm-logo-visible .hm-nav-quaternary.hm-has-items {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        width: auto;
        height: auto;
        align-items: center;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-width var(--hm-dur) var(--hm-ease),
                    opacity var(--hm-dur-fast) var(--hm-ease);
    }

    /* Fase 2: espande con le voci */
    .hm-floating-nav.hm-quaternary-ready .hm-nav-quaternary.hm-has-items {
        max-width: 600px;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        gap: 4px;
        margin-left: 8px;
        padding-left: 8px;
        margin-right: 8px;
        transition: max-width var(--hm-dur-slow) var(--hm-ease),
                    opacity var(--hm-dur) var(--hm-ease);
    }

    /* NASCOSTO quando menu aperto */
    .hm-floating-nav.hm-logo-visible.hm-menu-open .hm-nav-quaternary.hm-has-items {
        display: none !important;
        visibility: hidden !important;
        max-width: 0;
        opacity: 0;
        position: absolute !important;
        pointer-events: none;
    }

    /* v5.5.9: AL FOOTER — la pill torna compatta, niente quaternarie
       (lo slot centrale mostra la CTA "Let's talk!"). */
    .hm-floating-nav.hm-at-footer .hm-nav-quaternary.hm-has-items,
    .hm-floating-nav.hm-at-footer.hm-quaternary-ready .hm-nav-quaternary.hm-has-items {
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Link quaternarie — base: invisibili, pronti per stagger */
.hm-nav-quaternary a {
    font-size: 0.8rem;
    color: #3F2237;
    padding: 6px 10px;
    border-radius: 8px;
    z-index: 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--hm-dur-fast) var(--hm-ease),
                transform var(--hm-dur-fast) var(--hm-ease),
                background var(--hm-dur-fast) var(--hm-ease-spring);
}

/* Link quaternarie — entrata con stagger (--hm-stagger impostato via JS) */
.hm-quaternary-ready .hm-nav-quaternary a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--hm-dur-fast) var(--hm-ease) var(--hm-stagger, 0ms),
                transform var(--hm-dur-fast) var(--hm-ease) var(--hm-stagger, 0ms),
                background var(--hm-dur-fast) var(--hm-ease-spring);
}

.hm-nav-quaternary a:hover { background: rgba(0, 0, 0, 0.06); }
.hm-nav-quaternary a.hm-active { background: transparent; font-weight: 500; }

/* Sliding background per quaternarie */
.hm-quaternary-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    pointer-events: none;
    transition: left var(--hm-dur) var(--hm-ease-spring),
                width var(--hm-dur) var(--hm-ease-spring),
                opacity var(--hm-dur-fast) var(--hm-ease-out);
    opacity: 0;
    z-index: 0;
}

/* ==========================================================================
   MENU WRAPPER (Centrale)
   Tailwind (JS): flex items-center overflow-hidden visible opacity-100
   ========================================================================== */
.hm-nav-menu-wrapper {
    padding: 8px 16px 8px 8px;
    max-width: 600px;
    transition: opacity var(--hm-dur) var(--hm-ease-out),
                max-width var(--hm-dur-slow) var(--hm-ease),
                padding var(--hm-dur-slow) var(--hm-ease),
                visibility 0s linear 0s;
}

.hm-floating-nav.hm-logo-visible .hm-nav-menu-wrapper {
    opacity: 0;
    max-width: 0;
    padding: 0;
    visibility: hidden;
    /* Sparendo: nessun delay, spariscono per prime */
    transition: opacity var(--hm-dur-fast) var(--hm-ease-in),
                max-width var(--hm-dur) var(--hm-ease-in),
                padding var(--hm-dur) var(--hm-ease-in),
                visibility 0s linear var(--hm-dur);
}

.hm-floating-nav.hm-logo-visible.hm-menu-open .hm-nav-menu-wrapper {
    opacity: 1;
    max-width: 600px;
    padding: 8px 16px 8px 8px;
    visibility: visible;
    transition: opacity var(--hm-dur) var(--hm-ease-out),
                max-width var(--hm-dur-slow) var(--hm-ease),
                padding var(--hm-dur-slow) var(--hm-ease),
                visibility 0s linear 0s;
}

/* ==========================================================================
   BOX HAMBURGER (Destra)
   Tailwind (JS): flex items-center justify-center shrink-0 overflow-hidden invisible opacity-0
   ========================================================================== */
.hm-nav-hamburger-box {
    background: #f8f9fb;
    border-radius: 16px !important;
    padding: 0;
    max-width: 0;
    transition: opacity var(--hm-dur-fast) var(--hm-ease-in),
                max-width var(--hm-dur) var(--hm-ease-in),
                padding var(--hm-dur) var(--hm-ease-in),
                border-radius var(--hm-dur) var(--hm-ease),
                visibility 0s linear var(--hm-dur);
}

.hm-floating-nav.hm-logo-visible .hm-nav-hamburger-box {
    max-width: 80px;
    padding: 8px 12px;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--hm-dur) var(--hm-ease-out),
                max-width var(--hm-dur-slow) var(--hm-ease),
                padding var(--hm-dur-slow) var(--hm-ease),
                border-radius var(--hm-dur) var(--hm-ease),
                visibility 0s linear 0s;
}

.hm-floating-nav.hm-logo-visible.hm-menu-open .hm-nav-hamburger-box {
    max-width: 0;
    opacity: 0;
    padding: 0;
    visibility: hidden;
    transition: opacity var(--hm-dur-fast) var(--hm-ease-in),
                max-width var(--hm-dur) var(--hm-ease-in),
                padding var(--hm-dur) var(--hm-ease-in),
                border-radius var(--hm-dur) var(--hm-ease),
                visibility 0s linear var(--hm-dur);
}

/* Se non ci sono quaternarie: radius 0 a sinistra */
.hm-floating-nav.hm-no-quaternary.hm-logo-visible .hm-nav-hamburger-box {
    border-radius: 0 16px 16px 0 !important;
}

/* Hamburger button
   Tailwind (JS): flex items-center justify-center border-none cursor-pointer rounded-full */
.hm-hamburger {
    width: 40px;
    height: 40px;
    background: transparent;
    transition: background var(--hm-dur-fast) var(--hm-ease-spring),
                transform var(--hm-dur-fast) var(--hm-ease-spring);
}
.hm-hamburger:hover { background: rgba(0, 0, 0, 0.06); transform: scale(1.08); }
.hm-hamburger:active { transform: scale(0.95); }
.hm-hamburger svg { width: 20px; height: 20px; color: #3F2237; }

/* ==========================================================================
   PANNELLO SOTTOVOCI
   Tailwind (JS): hidden w-full
   Desktop: transizione morbida con max-height + opacity
   ========================================================================== */
@media (min-width: 783px) {
    .hm-submenu-panel {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0 16px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        transition: max-height 0.45s var(--hm-ease-out),
                    opacity 0.35s var(--hm-ease-out),
                    padding 0.35s var(--hm-ease-out);
    }

    .hm-submenu-panel.hm-visible {
        max-height: 500px;
        opacity: 1;
        padding: 10px 16px 20px 16px;
    }

    /* Fase larghezza: il pannello resta nascosto mentre la nav si allarga */
    .hm-floating-nav.hm-phase-width .hm-submenu-panel.hm-visible {
        max-height: 0;
        opacity: 0;
        padding: 0 16px;
    }
}

/* ==========================================================================
   VOCI MENU
   Tailwind (JS): flex items-center list-none m-0 p-0
   ========================================================================== */
.hm-nav-menu {
    gap: 0px;
    margin-top: -3px;
}

.hm-nav-menu > li > a,
.hm-nav-menu > li > button {
    font-weight: 500;
    font-size: 0.8rem;
    color: #3F2237;
    padding: 8px 14px;
    border-radius: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color var(--hm-dur-fast) var(--hm-ease-spring),
                transform var(--hm-dur-fast) var(--hm-ease-spring);
    white-space: nowrap;
    text-decoration: none;
}

.hm-nav-menu > li > a:hover,
.hm-nav-menu > li > button:hover { background: rgba(0, 0, 0, 0.06); }
.hm-nav-menu > li > a:active,
.hm-nav-menu > li > button:active { transform: scale(0.96); }
.hm-nav-menu > li.hm-active > button { background: rgba(0, 0, 0, 0.08); }

/* Tab/link che contiene la pagina corrente */
.hm-nav-menu > li.hm-current-tab > button,
.hm-nav-menu > li.hm-current-tab > a { font-weight: 700; }
.hm-nav-menu > li.hm-current-tab > a.hm-current-page { background: rgba(0, 0, 0, 0.06); }
.hm-nav-menu .hm-arrow {
    width: 10px;
    height: 10px;
    opacity: 0.5;
    transition: transform var(--hm-dur) var(--hm-ease-spring);
}
.hm-nav-menu > li.hm-active .hm-arrow { transform: rotate(180deg); }

/* CONTENUTO SUBMENU
   Tailwind (generateSubmenuHTML): flex w-full on .hm-submenu-content, flex-1 on .hm-submenu-column */
.hm-submenu-content { gap: 0; }
.hm-submenu-column { padding: 20px 0px; border-right: 1px solid rgba(0, 0, 0, 0.1); }
.hm-submenu-column:last-child { border-right: none; }

.hm-column-header {
    font-family: 'PP Editorial New', Georgia, serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #3F2237;
    margin-bottom: 8px;
    padding: 6px 12px;
}

.hm-column-items a, .hm-direct-link {
    font-size: 0.8rem;
    color: #3F2237;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background var(--hm-dur-fast) var(--hm-ease-spring),
                transform var(--hm-dur-fast) var(--hm-ease-spring);
}
.hm-column-items a:hover, .hm-direct-link:hover { background: rgba(0,0,0,0.05); }
.hm-column-items a:active, .hm-direct-link:active { transform: scale(0.97); }

/* ==========================================================================
   MOBILE & RESPONSIVE
   ========================================================================== */
@media (max-width: 782px) {
    .hm-floating-nav {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    /* ----------------------------------------------------------------------
       COLORI UNIFICATI SU MOBILE
       nav-main, logo-box, hamburger-box e card condividono lo stesso bianco
       solido: niente "isole" cromatiche dentro la nav.
       (Su desktop resta il blur sulla nav-main, perché lì funziona bene.)
       ---------------------------------------------------------------------- */
    .hm-nav-main,
    .hm-floating-nav .hm-nav-logo-box,
    .hm-floating-nav .hm-nav-hamburger-box,
    .hm-mobile-card {
        background: #ffffff;
    }

    /* Niente blur (è inutile quando il background è solido) */
    .hm-nav-main {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Larghezza sempre piena su mobile: niente animazione di larghezza */
    .hm-nav-main {
        border-radius: 16px !important;
        max-width: 100% !important;
        width: 100%;
        overflow: hidden;
        transition: background var(--hm-dur-slow) var(--hm-ease);
    }

    .hm-nav-row {
        border-radius: 16px !important;
        justify-content: space-between;
        transition: all var(--hm-dur-slow) var(--hm-ease);
    }

    .hm-nav-logo-box {
        border-radius: 16px 0 0 16px !important;
        transition: all var(--hm-dur-slow) var(--hm-ease);
        flex-shrink: 0;
    }

    /* ----------------------------------------------------------------------
       Page-title sempre visibile su mobile.
       Layout: logo-box flexa per riempire la riga, page-title prende tutto
       lo spazio rimanente fra logo e hamburger.
       - Home → CTA "Let's talk!" (pill button)
       - Altre pagine → nome pagina, marquee se trabocca
       ---------------------------------------------------------------------- */
    .hm-nav-logo-box {
        flex: 1 1 auto;
        min-width: 80px;
    }

    .hm-floating-nav .hm-nav-page-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
        opacity: 1 !important;
        overflow: hidden;
        white-space: nowrap;
        /* Centra orizzontalmente il contenuto (CTA o nome pagina) */
        justify-content: center;
    }

    /* Quando il marquee è attivo serve far partire il track dal bordo
       sinistro: la centratura non avrebbe senso con scroll orizzontale. */
    .hm-floating-nav .hm-nav-page-title.hm-marquee-active {
        justify-content: flex-start;
    }

    /* Niente più override da .hm-logo-visible su mobile: page-title
       è già sempre visibile. */
    .hm-floating-nav.hm-logo-visible .hm-nav-page-title {
        max-width: none;
    }

    /* Rimuovi margini/padding/border-left asimmetrici per centrare
       davvero il contenuto sia per CTA che per nome pagina. */
    .hm-floating-nav .hm-nav-page-title:not(.hm-cta) {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .home .hm-floating-nav .hm-nav-page-title.hm-cta a,
    .hm-floating-nav .hm-nav-page-title.hm-cta a {
        margin-left: 0;
    }

    /* Marquee attivo (mobile, pagine non-home): padding fra duplicati,
       animazione lineare infinita e maschera ai bordi per fade in/out. */
    .hm-floating-nav .hm-nav-page-title.hm-marquee-active .hm-marquee-item {
        padding-right: 3rem;
    }

    .hm-floating-nav .hm-nav-page-title.hm-marquee-active .hm-marquee-track {
        animation-name: hm-marquee-scroll;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        /* animation-duration impostato inline da JS in base alla lunghezza */
    }

    .hm-floating-nav .hm-nav-page-title.hm-marquee-active {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }

    .hm-nav-hamburger-box {
        border-radius: 0 16px 16px 0 !important;
        /* SEMPRE visibile su mobile */
        display: flex !important;
        max-width: 80px !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        visibility: visible !important;
        overflow: visible !important;
        flex-shrink: 0;
        transition: all var(--hm-dur-slow) var(--hm-ease);
    }

    .hm-floating-nav.hm-no-quaternary .hm-nav-logo-box {
        border-radius: 16px 0 0 16px !important;
    }
    .hm-floating-nav.hm-no-quaternary .hm-nav-hamburger-box {
        border-radius: 0 16px 16px 0 !important;
    }

    /* NASCONDO le primarie nella navbar - sempre */
    .hm-nav-menu-wrapper {
        display: none !important;
    }

    /* Quaternarie MAI visibili su mobile */
    .hm-nav-quaternary {
        display: none !important;
    }

    /* Quando menu aperto: allinea hamburger a destra */
    .hm-floating-nav.hm-menu-open .hm-nav-row {
        justify-content: space-between;
    }

    .hm-floating-nav.hm-menu-open .hm-nav-hamburger-box {
        margin-left: auto;
    }

    /* Nascondo page title quando menu aperto su mobile */
    .hm-floating-nav.hm-menu-open .hm-nav-page-title {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       OPEN STATE — pill della navbar separata dallo stack di card
       Quando .hm-expanded:
       - nav-main diventa contenitore "neutro" (no background, no shadow,
         overflow visibile), così le card e la pill si vedono come elementi
         separati con i propri shadow/border.
       - nav-row assume il ruolo di "navbar originaria": background bianco,
         angoli arrotondati su tutti i lati visibili, shadow propria.
       - Un piccolo margin-top crea il gap fra l'ultima card (bottom flat)
         e la pill, mostrando il border-radius superiore della pill.
       ---------------------------------------------------------------------- */
    .hm-floating-nav.hm-expanded .hm-nav-main {
        background: transparent !important;
        box-shadow: none;
        border-color: transparent;
        overflow: visible;
    }

    .hm-floating-nav.hm-expanded .hm-nav-row {
        background: #ffffff;
        border-radius: 16px !important;
        /* Leggero overlap negativo: l'ultima card (senza border-bottom)
           "continua" sotto la pill. La pill resta davanti via z-index. */
        margin-top: -8px;
        position: relative;
        z-index: 2;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15),
                    0 2px 8px rgba(0, 0, 0, 0.1);
        transition: background var(--hm-dur) var(--hm-ease),
                    margin-top var(--hm-dur) var(--hm-ease),
                    box-shadow var(--hm-dur) var(--hm-ease);
    }

    /* SUBPANEL MOBILE - Transizione morbida con max-height */
    .hm-submenu-panel {
        display: block !important; /* Sempre presente nel DOM */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        visibility: hidden;
        transition: max-height var(--hm-dur-slow) var(--hm-ease-in),
                    opacity var(--hm-dur-fast) var(--hm-ease-in),
                    visibility 0s linear var(--hm-dur);
    }

    .hm-submenu-panel.hm-visible {
        max-height: calc(100dvh - 120px);
        opacity: 1;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        visibility: visible;
        transition: max-height var(--hm-dur-slow) var(--hm-ease-out),
                    opacity var(--hm-dur) var(--hm-ease-out),
                    visibility 0s linear 0s;
    }

    /* ==========================================================================
       MENU MOBILE — CARD STACK (v5.4.5)
       - Ogni card ha gli angoli SUPERIORI arrotondati (16px) e gli angoli
         INFERIORI a spigolo (0px). L'unica eccezione è l'ultima card, che
         ha tutti gli angoli arrotondati per "chiudere" lo stack.
       - L'overlap verticale è pari al raggio (-16px) così la curva superiore
         di ogni card si appoggia sopra il bordo piatto di quella precedente:
         si vede il "buco" sotto la curva, dove la card precedente prosegue.
       - Z-index naturale (DOM order) → la card aperta continua sotto le
         successive.
       ========================================================================== */
    .hm-mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .hm-mobile-card {
        position: relative;
        background: #ffffff;
        border: 1px solid #C6BFC9;
        /* Top arrotondato, bottom a spigolo (default per tutte tranne l'ultima) */
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -1px 0 rgba(63, 34, 55, 0.03),
                    0 8px 18px rgba(63, 34, 55, 0.08),
                    0 2px 6px rgba(63, 34, 55, 0.04);
        transition: background var(--hm-dur-fast) var(--hm-ease),
                    border-color var(--hm-dur-fast) var(--hm-ease),
                    box-shadow var(--hm-dur-fast) var(--hm-ease);
    }

    /* TUTTE le card (compresa l'ultima e il caso unica card) restano con
       top arrotondato e bottom piatto: il pill della navbar sotto chiude
       lo stack come "carte da gioco che salgono da sotto". L'ultima card
       non ha il border-bottom così "continua" sotto la navbar. */
    .hm-mobile-card:last-child,
    .hm-mobile-card:first-child:last-child {
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }

    /* Overlap = raggio del corner: la curva superiore di ogni card è
       interamente sovrapposta al fondo piatto della card precedente,
       mostrando il "buco" laterale sotto la curva. */
    .hm-mobile-card + .hm-mobile-card {
        margin-top: -16px;
    }

    /* La card aperta resta a z-index naturale → "continua sotto" le card
       che la seguono. Niente bump in primo piano. */
    .hm-mobile-card.hm-card-open {
        z-index: auto;
        box-shadow: 0 -1px 0 rgba(63, 34, 55, 0.03),
                    0 14px 26px rgba(63, 34, 55, 0.10),
                    0 4px 10px rgba(63, 34, 55, 0.06);
    }

    /* Header (riga con sparkle + linea + label).
       Bottoni con border-radius: 0 (flat, nessuna pillola).
       Padding-bottom +5px rispetto al top per dare aria sotto il titolo. */
    .hm-mobile-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 16px 18px 21px;
        font-family: inherit;
        color: #3F2237;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .hm-mobile-card-direct-link {
        cursor: pointer;
    }

    .hm-mobile-card-rule {
        flex: 1;
        height: 1px;
        background: rgba(63, 34, 55, 0.4);
    }

    .hm-mobile-card-label {
        flex: 0 0 auto;
        font-size: 0.95rem;
        font-weight: 500;
        white-space: nowrap;
        padding: 0 6px;
        color: #3F2237;
        transition: font-weight var(--hm-dur-fast) var(--hm-ease);
    }

    .hm-mobile-card.hm-card-open .hm-mobile-card-label,
    .hm-mobile-card-header.hm-current-page .hm-mobile-card-label,
    .hm-mobile-card-direct-link.hm-current-page .hm-mobile-card-label {
        font-weight: 700;
    }

    /* Stellina (sparkle) — UNICA icona nelle card.
       Niente X: la stellina ruota di 45° in modo morbido all'apertura.
       Colore sempre viola scuro, mai rosso. */
    .hm-mobile-card-icon-wrap {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: #3F2237;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hm-mobile-card-icon-wrap svg {
        width: 100%;
        height: 100%;
        transition: transform var(--hm-dur) var(--hm-ease);
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    .hm-mobile-card.hm-card-open .hm-mobile-card-icon-wrap svg {
        transform: rotate(45deg);
    }

    /* Bloccato a viola scuro su tutti gli stati */
    .hm-mobile-card-trigger:hover .hm-mobile-card-icon-wrap,
    .hm-mobile-card-trigger:focus .hm-mobile-card-icon-wrap,
    .hm-mobile-card-trigger:active .hm-mobile-card-icon-wrap {
        color: #3F2237;
    }

    /* Contenuto accordion — animazione morbida via max-height inline (JS).
       Niente attributo [hidden] (interferisce con la transizione). */
    .hm-mobile-card-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--hm-dur-slow) var(--hm-ease),
                    opacity var(--hm-dur) var(--hm-ease);
    }

    .hm-mobile-card.hm-card-open .hm-mobile-card-content {
        opacity: 1;
    }

    /* Padding-bottom extra: l'overlap di 10px nasconde la parte inferiore
       della card sotto la successiva. Lo spazio extra evita che il testo
       finisca tagliato sotto la card che segue. */
    .hm-mobile-card-inner {
        padding: 4px 22px 28px 22px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* Gruppo (header + items) */
    .hm-mobile-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hm-mobile-group-header {
        font-family: 'PP Editorial New', Georgia, serif;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
        color: #3F2237;
        margin: 0;
    }

    .hm-mobile-group-header-link {
        text-decoration: none;
        display: block;
        padding: 4px 0;
    }

    .hm-mobile-group-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hm-mobile-leaf {
        display: block;
        font-size: 0.85rem;
        color: #3F2237;
        text-decoration: none;
        padding: 4px 0;
        transition: opacity var(--hm-dur-fast) var(--hm-ease-out);
    }

    .hm-mobile-leaf:hover {
        opacity: 0.7;
    }

    .hm-mobile-leaf.hm-current-page,
    .hm-mobile-group-header-link.hm-current-page {
        font-weight: 700;
    }

    /* Override del pannello su mobile: niente padding (le card vanno edge-to-edge,
       in linea con i bordi della nav-main). */
    .hm-submenu-panel.hm-visible {
        padding: 0;
    }

    /* Nascondo il vecchio layout submenu su mobile */
    .hm-submenu-content {
        display: none !important;
    }
}

/* ==========================================================================
   POSIZIONE TOP
   ========================================================================== */
.hm-floating-nav.hm-position-top { bottom: auto; top: 15px; }
.hm-floating-nav.hm-position-top .hm-submenu-panel {
    border-bottom: none;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: 8px;
    margin-bottom: 0;
    animation: hm-fade-in-down var(--hm-dur-slow) var(--hm-ease-out);
}
@keyframes hm-fade-in-down {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   ACCESSIBILITÀ
   ========================================================================== */
/* Focus visibile per navigazione tastiera - sottile */
*:focus-visible {
    outline: 1px solid #007aff;
    outline-offset: 1px;
}

/* Focus più evidente solo per elementi piccoli */
.hm-hamburger:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
}

/* Skip link per screen reader */
.hm-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007aff;
    color: white;
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 8px 0;
    transition: top var(--hm-dur) var(--hm-ease);
}

.hm-skip-link:focus {
    top: 0;
}

/* Stato attivo per link corrente */
.hm-current-page {
    font-weight: 600;
    position: relative;
}

.hm-column-items a.hm-current-page,
.hm-direct-link.hm-current-page {
    background: rgba(0, 122, 255, 0.08);
}

/* Rispetta preferenze movimento ridotto */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Contrasto per link hover/focus */
.hm-nav-menu > li > a:focus,
.hm-nav-menu > li > button:focus {
    background: rgba(0, 122, 255, 0.08);
}

.hm-column-items a:focus,
.hm-nav-quaternary a:focus {
    background: rgba(0, 0, 0, 0.04);
}