/* ==========================================================================
   ESPERIMENTO "NAV V2" - barra di navigazione in basso (mobile/tablet) - parte 3/3: stile.
   Tutto e' sotto html.nav-v2 e dentro la stessa media query dell'hamburger (<= 1199.98px):
   senza la classe (versione 1, default) questo file non cambia nulla.
   Per rimuovere / rendere permanente: vedi il commento in Views/Shared/_NavV2.cshtml.
   ========================================================================== */

/* nascosto sempre, salvo v2 attiva */
.nv2-bar,
.nv2-backdrop,
.nv2-sheet { display: none; }

@media (max-width: 1199.98px) {

    html.nav-v2 {
        --nv2-h: 58px;                                   /* altezza della barra */
        --nv2-safe: env(safe-area-inset-bottom, 0px);    /* safe area iOS */
        --nv2-ink: var(--heading);
    }

    /* header piu' snello: niente hamburger ne' pulsante (c'e' la barra) */
    html.nav-v2 .btn-burger,
    html.nav-v2 .header-actions { display: none; }
    html.nav-v2 .tf-header .container { min-height: 56px; }
    html.nav-v2 .site-logo-img { height: 34px; }

    /* la barra non deve mai coprire contenuto/footer */
    html.nav-v2 body { padding-bottom: calc(var(--nv2-h) + var(--nv2-safe)); }

    html.nav-v2.nv2-lock,
    html.nav-v2.nv2-lock body { overflow: hidden; }

    /* ------------------------------------------------------------ barra -- */

    html.nav-v2 .nv2-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 75;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: end;
        padding: 0 env(safe-area-inset-right, 0px) var(--nv2-safe) env(safe-area-inset-left, 0px);
        background: #fff;
        border-top: 1px solid var(--nv2-ink);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
    }

    /* nascondi-allo-scroll (classe messa da nav-v2.js) */
    html.nav-v2.nv2-bar-hidden .nv2-bar { transform: translateY(calc(100% + 16px)); }

    html.nav-v2 .nv2-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 44px;
        min-height: var(--nv2-h);
        padding: 6px 2px;
        border: 0;
        background: none;
        color: var(--nv2-ink);
        font-family: var(--font-body);
        font-size: .72rem;
        line-height: 1;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html.nav-v2 .nv2-item svg,
    html.nav-v2 .nv2-close svg,
    html.nav-v2 .nv2-contact svg {
        flex: none;
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: square;
        stroke-linejoin: miter;
    }

    html.nav-v2 .nv2-item:active { background: var(--primary-light); }

    /* pagina corrente: colore + filetto sopra la barra */
    html.nav-v2 .nv2-item[aria-current="page"] { color: var(--primary); }

    html.nav-v2 .nv2-item[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 22%;
        right: 22%;
        height: 3px;
        background: var(--primary);
    }

    html.nav-v2 .nv2-item:focus-visible,
    html.nav-v2 .nv2-sheet a:focus-visible,
    html.nav-v2 .nv2-close:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -4px;
    }


    /* ------------------------------------------- altri elementi fissi ---- */

    /* "torna su" sopra la barra (e segue la barra quando si nasconde) */
    html.nav-v2 #goTop { bottom: calc(var(--nv2-h) + var(--nv2-safe) + 16px); }
    html.nav-v2.nv2-bar-hidden #goTop.show { transform: translateY(calc(var(--nv2-h) + var(--nv2-safe))); }

    /* --------------------------------------------------- bottom sheet ---- */

    html.nav-v2 .nv2-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(13, 20, 36, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    html.nav-v2 .nv2-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        max-height: 88vh;
        max-height: 88dvh;
        background: #fff;
        border-top: 1px solid var(--nv2-ink);
        border-radius: 14px 14px 0 0;
        padding-bottom: var(--nv2-safe);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s;
        outline: none;
    }

    html.nav-v2.nv2-open .nv2-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
    html.nav-v2.nv2-open .nv2-sheet { transform: none; visibility: visible; transition-delay: 0s; }

    /* maniglia + titolo: area di trascinamento (swipe giu' per chiudere) */
    html.nav-v2 .nv2-grab { flex: none; touch-action: none; cursor: grab; }

    html.nav-v2 .nv2-handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 10px auto 2px;
        border-radius: 2px;
        background: var(--nv2-ink);
        opacity: .35;
    }

    html.nav-v2 .nv2-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px 0 20px;
        border-bottom: 1px solid var(--line-6);
    }

    html.nav-v2 .nv2-sheet-head h2 {
        margin: 0;
        font-family: var(--font-body);
        font-size: .88rem;
        font-weight: 400;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--nv2-ink);
    }

    html.nav-v2 .nv2-close {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 0;
        background: none;
        color: var(--nv2-ink);
        cursor: pointer;
    }

    html.nav-v2 .nv2-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 12px; }

    html.nav-v2 .nv2-links,
    html.nav-v2 .nv2-cats { margin: 0; padding: 0; list-style: none; }

    html.nav-v2 .nv2-sheet li a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        border-bottom: 1px solid var(--line-6);
        color: var(--nv2-ink);
        font-family: var(--font-head);
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none;
    }

    html.nav-v2 .nv2-sheet li a[aria-current="page"] { color: var(--primary); }

    html.nav-v2 .nv2-cap {
        margin: 22px 0 2px;
        font-family: var(--font-body);
        font-size: .8rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-2);
    }

    html.nav-v2 .nv2-cats li a { min-height: 44px; font-weight: 500; font-size: .95rem; }

    /* contatti fissi in fondo alla sheet */
    html.nav-v2 .nv2-foot {
        flex: none;
        display: grid;
        gap: 2px;
        padding: 10px 20px 14px;
        border-top: 1px solid var(--nv2-ink);
        background: var(--bg-8);
    }

    html.nav-v2 .nv2-contact {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--nv2-ink);
        text-decoration: none;
    }

    html.nav-v2 .nv2-contact svg { width: 20px; height: 20px; color: var(--primary); }
    html.nav-v2 .nv2-hours { margin: 2px 0 0; font-family: var(--font-body); font-size: .85rem; color: var(--text); }
}

/* telefono in orizzontale: barra piu' bassa */
@media (max-width: 1199.98px) and (max-height: 500px) and (orientation: landscape) {
    html.nav-v2 { --nv2-h: 52px; }
    html.nav-v2 .nv2-item { gap: 2px; font-size: .6rem; }
    html.nav-v2 .nv2-item svg { width: 22px; height: 22px; }
    html.nav-v2 .nv2-sheet { max-height: 94vh; max-height: 94dvh; }
}

@media (prefers-reduced-motion: reduce) {
    html.nav-v2 .nv2-bar,
    html.nav-v2 .nv2-backdrop,
    html.nav-v2 .nv2-sheet { transition: none !important; }
}