/* =========================================================
   LM IMPIANTI — MORPHING NAVBAR
   Transparent / Compact / Services / Mobile
   ========================================================= */


/* =========================================================
   01 — FOUNDATION
   ========================================================= */

.lmhn,
.lmhn * {
    box-sizing: border-box;
}

.lmhn {
    --lmhn-ink: #202424;
    --lmhn-white: #ffffff;
    --lmhn-accent: #c6e87c;

    --lmhn-ease: cubic-bezier(.22, 1, .36, 1);

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 9990;

    padding: 14px 22px 0;

    font-family: "Instrument Sans", Arial, sans-serif;

    color: var(--lmhn-white);

    pointer-events: none;
}


/* WordPress admin bar */

body.admin-bar .lmhn {
    top: 32px;
}

@media (max-width: 782px) {

    body.admin-bar .lmhn {
        top: 46px;
    }

}


/* =========================================================
   02 — NAVBAR TRANSPARENT
   ========================================================= */

.lmhn__shell {
    position: relative;

    width: min(1480px, 100%);
    height: 70px;

    margin-inline: auto;

    padding: 0 clamp(14px, 2.5vw, 38px);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    column-gap: 20px;

    background: transparent;

    color: var(--lmhn-white);

    border: 1px solid transparent;
    border-radius: 999px;

    box-shadow: none;

    pointer-events: auto;

    transition:
        width .6s var(--lmhn-ease),
        height .5s var(--lmhn-ease),
        padding .5s var(--lmhn-ease),
        border-radius .55s var(--lmhn-ease),
        background-color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        backdrop-filter .4s ease;
}


/* =========================================================
   03 — LINKS
   ========================================================= */

.lmhn a {
    color: inherit;

    text-decoration: none !important;
}

.lmhn button {
    font: inherit;

    color: inherit;

    cursor: pointer;
}

.lmhn__primary,
.lmhn__right {
    display: flex;
    align-items: center;

    gap: 4px;

    white-space: nowrap;
}

.lmhn__right {
    justify-self: end;
}

.lmhn__primary a,
.lmhn__primary button,
.lmhn__right .lmhn__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 12px;

    border: 0;
    background: transparent;

    font-size: 11px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .82;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.lmhn__primary a:hover,
.lmhn__primary button:hover,
.lmhn__right .lmhn__secondary:hover {
    opacity: 1;
}


/* =========================================================
   04 — SERVICES TRIGGER
   ========================================================= */

.lmhn__services-trigger {
    gap: 9px;
}

.lmhn__dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--lmhn-accent);

    box-shadow:
        0 0 0 4px rgba(198, 232, 124, .16);

    transition:
        transform .3s ease;
}

.lmhn__services-trigger:hover .lmhn__dot {
    transform: scale(1.5);
}


/* =========================================================
   05 — MORPH AREA
   ========================================================= */

.lmhn__morph {
    position: relative;

    justify-self: start;

    width: 310px;
    height: 50px;

    min-width: 0;

    transition:
        width .55s var(--lmhn-ease);
}

.lmhn__primary,
.lmhn__services {
    position: absolute;

    top: 0;
    left: 0;

    height: 50px;

    transition:
        opacity .3s ease,
        transform .5s var(--lmhn-ease),
        visibility .3s;
}


/* Main navigation */

.lmhn__primary {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}


/* Services navigation — hidden */

.lmhn__services {
    display: flex;
    align-items: center;

    width: 100%;

    gap: 0;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-15px)
        scale(.985);

    pointer-events: none;

    overflow-x: auto;
    scrollbar-width: none;
}

.lmhn__services::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   06 — SERVICES LINKS
   ========================================================= */

.lmhn__services a,
.lmhn__back {
    position: relative;

    flex: 1 1 0;

    min-width: 0;
    min-height: 50px;

    padding: 8px 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    text-align: center;
    white-space: normal;

    font-size: clamp(8px, .67vw, 10px);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: .025em;

    opacity: .72;

    transition:
        opacity .2s ease,
        background-color .2s ease;
}

.lmhn__services a:hover,
.lmhn__back:hover {
    opacity: 1;

    background: rgba(255, 255, 255, .08);
}

.lmhn__back {
    flex: 0 0 42px;

    font-size: 19px;
}


/* Animated underline */

.lmhn__services a::after {
    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: 5px;

    height: 1px;

    background: var(--lmhn-accent);

    transform: scaleX(0);

    transition:
        transform .35s var(--lmhn-ease);
}

.lmhn__services a:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   07 — CENTERED LOGO
   ========================================================= */

.lmhn__logo {
    position: relative;
    z-index: 1;

    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 155px;
    height: 52px;

    min-width: 0;

    transition:
        opacity .28s ease,
        transform .4s var(--lmhn-ease),
        width .4s ease;
}

.lmhn__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: brightness(0) invert(1);

    transition:
        filter .3s ease;
}

.lmhn__logo > span {
    font-size: 17px;
    font-weight: 800;

    letter-spacing: -.04em;

    white-space: nowrap;
}

.lmhn__logo-dot {
    color: var(--lmhn-accent);
}


/* =========================================================
   08 — PREVENTIVO CTA
   ========================================================= */

.lmhn__cta {
    position: relative;

    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 43px;

    margin-left: 6px;
    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, .65);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .07em;
    text-transform: uppercase;

    transition:
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.lmhn__cta::before {
    content: "";

    position: absolute;
    inset: -1px;

    z-index: -1;

    background: var(--lmhn-accent);

    transform:
        translateX(-102%)
        skewX(-12deg);

    transition:
        transform .5s var(--lmhn-ease);
}

.lmhn__cta:hover {
    color: var(--lmhn-ink) !important;

    border-color: var(--lmhn-accent);

    transform: translateY(-1px);
}

.lmhn__cta:hover::before {
    transform: translateX(0);
}


/* =========================================================
   09 — SCROLL: FLOATING CAPSULE
   ========================================================= */

.lmhn.is-compact {
    padding-top: 10px;
}

.lmhn.is-compact .lmhn__shell {
width: min(1050px, 100%);
    height: 62px;

    padding: 0 17px;

    column-gap: 10px;

    border-radius: 999px;

    background: rgba(32, 36, 36, .95);

    color: var(--lmhn-white);

    border-color: rgba(255, 255, 255, .13);

    box-shadow:
        0 12px 45px rgba(0, 0, 0, .20);

    -webkit-backdrop-filter:
        blur(18px) saturate(125%);

    backdrop-filter:
        blur(18px) saturate(125%);
}

.lmhn.is-compact .lmhn__logo {
    width: 118px;
}


.lmhn.is-compact .lmhn__morph {
    width: 255px;
}

.lmhn.is-compact .lmhn__cta {
    border-radius: 999px;
}


/* =========================================================
   10 — SERVICES: FULL NAVBAR MORPH
   ========================================================= */

.lmhn.is-open .lmhn__shell {
    width: min(1500px, 100%);
    height: 74px;

    grid-template-columns:
        minmax(0, 1fr);

    padding: 0 16px;

    border-radius: 999px;

    background: rgba(32, 36, 36, .97);

    color: var(--lmhn-white);

    border-color: rgba(255, 255, 255, .13);

    box-shadow:
        0 16px 48px rgba(0, 0, 0, .20);

    -webkit-backdrop-filter:
        blur(18px) saturate(125%);

    backdrop-filter:
        blur(18px) saturate(125%);
}

.lmhn.is-open .lmhn__morph {
    width: 100%;
    height: 70px;

    justify-self: stretch;
}

.lmhn.is-open .lmhn__primary {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(18px)
        scale(.98);
}

.lmhn.is-open .lmhn__services {
    height: 70px;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);
}

.lmhn.is-open .lmhn__services a,
.lmhn.is-open .lmhn__back {
    min-height: 66px;
}

.lmhn.is-open .lmhn__logo,
.lmhn.is-open .lmhn__right {
    position: absolute;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   11 — MOBILE DEFAULT
   ========================================================= */

.lmhn__mobile-toggle,
.lmhn__mobile-menu {
    display: none;
}


/* =========================================================
   12 — TABLET
   ========================================================= */

@media (max-width: 1180px) and (min-width: 861px) {

    .lmhn__shell {
        column-gap: 8px;

        padding-inline: 14px;
    }

    .lmhn__primary a,
    .lmhn__primary button,
    .lmhn__right .lmhn__secondary {
        padding-inline: 8px;

        font-size: 10px;
    }

    .lmhn__logo {
        width: 118px;
    }

    .lmhn__cta {
        min-width: 0;

        padding-inline: 12px;

        gap: 7px;
    }

    .lmhn__morph {
        width: 250px;
    }

    .lmhn.is-compact .lmhn__morph {
        width: 245px;
    }

    .lmhn.is-open .lmhn__services a {
        flex: 0 0 120px;
    }

}


/* =========================================================
   13 — MOBILE
   ========================================================= */

@media (max-width: 860px) {

    .lmhn {
        padding: 10px 14px 0;
    }

    .lmhn__shell,
    .lmhn.is-compact .lmhn__shell,
    .lmhn.is-open .lmhn__shell {
        width: 100%;
        height: 62px;

        padding: 0 17px;

        display: grid;

        grid-template-columns:
            1fr auto;

        background: rgba(32, 36, 36, .97);

        color: var(--lmhn-white);

        border-color: rgba(255, 255, 255, .12);
        border-radius: 12px;

        box-shadow:
            0 8px 35px rgba(0, 0, 0, .18);

        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    .lmhn__morph,
    .lmhn__right {
        display: none !important;
    }

    .lmhn__logo,
    .lmhn.is-compact .lmhn__logo {
        justify-self: start;

        width: 132px;
        height: 45px;
    }

    .lmhn__logo img {
        filter: brightness(0) invert(1);
    }


    /* Hamburger */

    .lmhn__mobile-toggle {
        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 7px;

        width: 42px;
        height: 42px;

        padding: 0;

        border: 0;
        background: transparent;
    }

    .lmhn__mobile-toggle span {
        width: 20px;
        height: 1.5px;

        background: currentColor;

        transition:
            transform .3s ease,
            opacity .3s ease;
    }

    .lmhn.is-mobile-open
    .lmhn__mobile-toggle span:first-child {
        transform:
            translateY(4.25px)
            rotate(45deg);
    }

    .lmhn.is-mobile-open
    .lmhn__mobile-toggle span:last-child {
        transform:
            translateY(-4.25px)
            rotate(-45deg);
    }


    /* Mobile menu */

    .lmhn__mobile-menu {
        display: flex;
        flex-direction: column;

        gap: 0;

        width: 100%;
        max-width: 1480px;
        max-height: 0;

        margin: 8px auto 0;
        padding: 0 20px;

        overflow: hidden;

        visibility: hidden;
        opacity: 0;

        pointer-events: none;

        background: rgba(32, 36, 36, .98);

        color: var(--lmhn-white);

        border: 1px solid rgba(255, 255, 255, .12);

        border-radius: 16px;

        box-shadow:
            0 15px 35px rgba(0, 0, 0, .20);

        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);

        transition:
            max-height .42s var(--lmhn-ease),
            opacity .25s ease,
            visibility .25s ease,
            padding .25s ease;
    }

    .lmhn.is-mobile-open .lmhn__mobile-menu {
        max-height: min(75svh, 720px);

        padding: 15px 20px;

        visibility: visible;
        opacity: 1;

        pointer-events: auto;

        overflow-y: auto;
    }


    /* Mobile links */

    .lmhn__mobile-menu > a,
    .lmhn__mobile-services-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 48px;

        padding: 13px 2px;

        border: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, .12);

        background: transparent;

        font-size: 13px;
        font-weight: 600;

        text-align: left;
        letter-spacing: .025em;
    }

    .lmhn__mobile-services {
        padding: 5px 0 10px 16px;
    }

    .lmhn__mobile-services[hidden] {
        display: none;
    }

    .lmhn__mobile-services a {
        display: block;

        padding: 10px 0;

        font-size: 12px;

        opacity: .8;
    }

    .lmhn__mobile-menu
    .lmhn__mobile-cta {
        justify-content: center;

        margin: 16px 0 0;

        border: 0;
        border-radius: 999px;

        background: var(--lmhn-accent);

        color: var(--lmhn-ink);

        font-weight: 700;
    }

}


/* =========================================================
   14 — ACCESSIBILITY
   ========================================================= */

.lmhn a:focus-visible,
.lmhn button:focus-visible {
    outline: 2px solid var(--lmhn-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .lmhn *,
    .lmhn *::before,
    .lmhn *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}


/* =========================================================
   LM IMPIANTI — SERVICES DROPDOWN V2
   Compact / Editorial / No navbar morphing
   ========================================================= */

@media (min-width: 861px) {

    /* Navigazione originale invariata */

    .lmhn__morph,
    .lmhn.is-compact .lmhn__morph {
        position: relative;
        width: 310px;
        height: 50px;
        overflow: visible;
    }

    .lmhn__primary {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 50px;
        opacity: 1;
        visibility: visible;
        transform: none;
        overflow: visible;
    }

    .lmhn__dropdown {
        position: relative;
        display: flex;
        align-items: center;
        height: 50px;
    }

    .lmhn__services-trigger {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
    }

    .lmhn__services-trigger[aria-expanded="true"] {
        opacity: 1;
    }

    /* Dropdown posizionato sotto la pill */

    .lmhn__dropdown-panel {
        position: absolute;
        top: calc(100% + 14px);
        left: -8px;
        z-index: 100;

        width: 335px;
        max-height: min(70vh, 590px);

        padding: 19px 18px 13px;

        overflow-y: auto;
        overscroll-behavior: contain;

        background: rgba(28, 32, 32, .98);
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 14px;

        color: #ffffff;

        box-shadow: 0 20px 55px rgba(0,0,0,.22);

        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);

        transform-origin: top left;
        animation: lmhnDropdownIn .22s ease both;
    }

    .lmhn__dropdown-panel[hidden] {
        display: none !important;
    }

    /* Piccolo ponte per mantenere l'hover */

    .lmhn__dropdown-panel::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        width: 100%;
        height: 14px;
    }

    /* Header tecnico */

    .lmhn__dropdown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;

        padding: 2px 4px 15px;
        border-bottom: 1px solid rgba(255,255,255,.18);

        font-family: "IBM Plex Mono", monospace;
        font-size: 9px;
        font-weight: 500;
        letter-spacing: .045em;
        color: rgba(255,255,255,.55);
    }

    /* Lista */

    .lmhn__dropdown-list {
        padding-block: 8px;
    }

    .lmhn__primary .lmhn__dropdown-link {
        display: grid;
        grid-template-columns: 24px minmax(0,1fr) 16px;
        align-items: center;
        justify-content: stretch;
        gap: 10px;

        width: 100%;
        min-height: 42px;
        height: auto;

        padding: 9px 5px;

        border-bottom: 1px solid rgba(255,255,255,.07);

        font-family: "Instrument Sans", sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;
        text-transform: none;
        white-space: normal;

        color: #ffffff;
        opacity: .83;

        transition:
            opacity .2s ease,
            color .2s ease,
            padding-left .25s ease;
    }

    .lmhn__primary .lmhn__dropdown-link:hover,
    .lmhn__primary .lmhn__dropdown-link:focus-visible {
        opacity: 1;
        color: #ffffff;
        padding-left: 10px;
        transform: none;
    }

    .lmhn__dropdown-number {
        font-family: "IBM Plex Mono", monospace;
        font-size: 9px;
        color: rgba(255,255,255,.4);
    }

    .lmhn__dropdown-name {
        min-width: 0;
    }

    .lmhn__dropdown-arrow {
        justify-self: end;
        font-size: 15px;
        color: var(--lmhn-accent);
        opacity: 0;
        transform: translate(-3px,3px);
        transition:
            opacity .2s ease,
            transform .2s ease;
    }

    .lmhn__dropdown-link:hover .lmhn__dropdown-arrow,
    .lmhn__dropdown-link:focus-visible .lmhn__dropdown-arrow {
        opacity: 1;
        transform: translate(0,0);
    }

    /* Link finale */

    .lmhn__primary .lmhn__dropdown-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        min-height: 44px;
        margin-top: 8px;
        padding: 12px 5px 2px;

        border: 0;
        background: transparent;

        font-family: "IBM Plex Mono", monospace;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .015em;
        text-align: left;
        line-height: 1.5;

        color: var(--lmhn-accent);
        opacity: 1;
    }

    .lmhn__primary .lmhn__dropdown-all:hover {
        opacity: .75;
        transform: none;
    }

    /* Disattivazione vecchio stato morph */

    .lmhn.is-open .lmhn__shell {
        width: min(1480px,100%);
        height: 70px;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    }

    .lmhn.is-open.is-compact .lmhn__shell {
        width: min(830px,100%);
        height: 62px;
    }

    .lmhn.is-open .lmhn__primary {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .lmhn.is-open .lmhn__logo,
    .lmhn.is-open .lmhn__right {
        position: relative;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@keyframes lmhnDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 861px) and (max-width: 1180px) {
    .lmhn__morph,
    .lmhn.is-compact .lmhn__morph {
        width: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lmhn__dropdown-panel {
        animation: none !important;
    }
}