/* =============================================================================
   navbar.css — Navbar principale del sito Groppalli
   Fonte design: Figma (file ie73nsjC125XStzIdN33KZ, nodo 30:2)
   ============================================================================= */


/* ─── Variabili ──────────────────────────────────────────────────────────────── */

/* Altezza navbar: globale (non solo .navbar) perché serve anche fuori — es. lo
   sticky-top della copertina soluzione la usa come offset. Unica fonte di verità. */
:root {
    --nb-altezza: 70px;
}

.navbar {
    --nb-sfondo:         var(--blu-00);   /* Blu Groppalli/00 —  5% */
    --nb-bordo:          var(--blu-01);   /* Blu Groppalli/01 — 10% */
    --nb-bordo-medio:    var(--blu-01);   /* Blu Groppalli/01 — 10% (arrotondato da 15%) */
    --nb-bordo-tab:      var(--blu-02);   /* Blu Groppalli/02 — 20% */
    --nb-testo:          var(--blu-10);   /* Blu Groppalli/10 — testo principale */
    --nb-testo-chiaro:   var(--blu-05);   /* Blu Groppalli/05 — 50% (arrotondato da 55%) */
    --nb-attivo:         var(--blu-10);   /* Blu Groppalli/10 */
    --nb-pannello-top:   var(--blu-10);   /* Blu Groppalli/10 */
    --nb-pannello-fondo: var(--blu-10);  /* Blu Groppalli/10 — stesso blu dei menu desktop */
    --nb-accent:         var(--blu-03);   /* Blu Groppalli/03 */
    --nb-transition:     0.2s ease;
}


/* ─── Struttura base ─────────────────────────────────────────────────────────── */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: linear-gradient(0deg, var(--bianco-10) 0%, var(--bianco-10) 100%), var(--bianco-10);
    font-family: var(--font-titoli);
    border-bottom: 1px solid var(--blu-01, rgba(0, 77, 140, 0.10));
}

/* Con la admin bar di WordPress la navbar su desktop si ferma sotto di essa:
   32px perché sopra i 782px l'admin bar ha altezza 32px. */
@media (min-width: 783px) {
    .admin-bar .navbar {
        top: 32px;
    }
}


/* ─── Barra principale ───────────────────────────────────────────────────────── */

.navbar-barra {
    position: relative;
    transition: border-color var(--nb-transition);
}

.navbar.pannello-aperto .navbar-barra {
    border-bottom-color: transparent;
}

.navbar-contenitore {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: var(--nb-altezza);
    max-width: none;
    margin: 0;
    gap: 0;
    padding-block: 0;
    padding-left: max(var(--padding-contenitore), calc((100% - 1120px) / 2));
    padding-right: 0;
}


/* ─── Logo ───────────────────────────────────────────────────────────────────── */

.navbar-logo {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 176px;
    flex-shrink: 0;
    /* Gap minimo garantito tra il blocco logo e la navigazione: con
       .navbar-navigazione che usa margin-left:auto, restringendo il viewport
       lo spazio auto arriva a 0 e senza questo margine il logo collide con la
       prima voce. */
    margin-right: 20px;
    color: var(--nb-testo);
    transition: opacity var(--nb-transition);
}

.navbar-logo:hover {
    opacity: 0.8;
}

.navbar-logo svg {
    display: block;
    width: 208px;
    height: 35px;
}


/* ─── Navigazione desktop ────────────────────────────────────────────────────── */

.navbar-navigazione {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
}

/* L'ultimo navitem è visualmente adiacente a .navbar-lingue che ha border-left
   sempre visibile: sopprimiamo border-right su tutti gli stati attivi. */
.navbar-navigazione > .navitem.primaria:last-child:hover,
.navbar-navigazione > .navitem.primaria:last-child:active,
.navbar-navigazione > .navitem.primaria:last-child[aria-expanded="true"],
.navbar-navigazione > .navbar-dropdown-wrapper:last-child > .navitem.primaria:hover,
.navbar-navigazione > .navbar-dropdown-wrapper:last-child > .navitem.primaria:active,
.navbar-navigazione > .navbar-dropdown-wrapper:last-child > .navitem.primaria[aria-expanded="true"] {
    border-right-color: transparent;
}

/* Previene il raddoppio del bordo tra navitem adiacenti quando uno è attivo
   (aria-expanded) e l'altro è in hover.

   Caso A — navitem attivo seguito da navitem in hover: il secondo perde border-left. */
.navbar-navigazione .navitem.primaria[aria-expanded="true"] + .navitem.primaria:hover,
.navbar-navigazione .navitem.primaria[aria-expanded="true"] + .navbar-dropdown-wrapper > .navitem.primaria:hover,
.navbar-navigazione .navbar-dropdown-wrapper:has(> .navitem.primaria[aria-expanded="true"]) + .navitem.primaria:hover,
.navbar-navigazione .navbar-dropdown-wrapper:has(> .navitem.primaria[aria-expanded="true"]) + .navbar-dropdown-wrapper > .navitem.primaria:hover {
    border-left-color: transparent;
}

/* Caso B — navitem in hover preceduto da navitem attivo: il primo perde border-right. */
.navbar-navigazione .navitem.primaria:hover:has(+ .navitem.primaria[aria-expanded="true"]),
.navbar-navigazione .navitem.primaria:hover:has(+ .navbar-dropdown-wrapper > .navitem.primaria[aria-expanded="true"]) {
    border-right-color: transparent;
}

.navbar-navigazione .navbar-dropdown-wrapper:has(> .navitem.primaria:hover):has(+ .navitem.primaria[aria-expanded="true"]) > .navitem.primaria,
.navbar-navigazione .navbar-dropdown-wrapper:has(> .navitem.primaria:hover):has(+ .navbar-dropdown-wrapper > .navitem.primaria[aria-expanded="true"]) > .navitem.primaria {
    border-right-color: transparent;
}


/* ─── Dropdown compatto ──────────────────────────────────────────────────────── */

.navbar-dropdown-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    background-color: var(--bianco);
    border: 1px solid var(--blu-02);
    border-radius: var(--raggio);
    box-shadow: 0 8px 32px var(--blu-01);
    z-index: 110;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}

.navbar-dropdown[hidden] {
    display: block;
}

.navbar-dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar-dropdown-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 11px 15px;
    font-family: var(--font-titoli);
    font-size: 0.925rem;
    font-weight: 400;
    color: var(--blu-10);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.navbar-dropdown-voce:hover {
    background-color: var(--blu-00);
}


/* ─── Azioni navbar ──────────────────────────────────────────────────────────── */

.navbar-azioni {
    display: flex;
    align-items: stretch;
    height: 100%;
}


/* ─── Selettore lingua ───────────────────────────────────────────────────────── */

.navbar-lingue {
    position: relative;
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--nb-bordo);
}

.navbar-lingue-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 9px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--nb-testo);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--nb-transition);
}

.navbar-lingue-btn:hover {
    background-color: var(--nb-sfondo);
}


.navbar-lingue-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    padding: 0;
    background: var(--bianco);
    border: 1px solid var(--blu-02);
    border-radius: var(--raggio);
    box-shadow: 0 8px 32px var(--blu-01);
    min-width: 110px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 0.2s ease-out,
        transform 0.2s ease-out;
}

.navbar-lingue-menu[hidden] {
    display: block;
}

.navbar-lingue-menu:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar-lingua-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 11px 15px;
    font-family: var(--font-titoli);
    font-size: 0.925rem;
    font-weight: 400;
    color: var(--blu-10);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.navbar-lingua-voce:hover {
    background-color: var(--blu-00);
}


/* ─── Pulsante cerca ─────────────────────────────────────────────────────────── */

.navbar-cerca {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 12px 25px;
    background-color: var(--nb-sfondo);
    color: var(--nb-testo);
    border: none;
    border-left: 1px solid var(--nb-bordo);
    border-right: 1px solid var(--nb-bordo);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--nb-transition);
}

/* Solo con puntatore reale: su touch l'hover resterebbe "incagliato" dopo il tap. */
@media (hover: hover) {
    .navbar-cerca:hover {
        background-color: var(--blu-01);
    }
}



/* ─── CTA principale ─────────────────────────────────────────────────────────── */

.navbar-cta {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 24px;
    margin-bottom: -1px; /* copre il border-bottom della navbar */
    background-color: var(--blu-10);
    color: var(--bianco);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--nb-transition);
}

.navbar-cta:hover {
    background-color: var(--blu-10);
    color: var(--bianco);
    opacity: 0.85;
}



/* ─── Hamburger (mobile) ─────────────────────────────────────────────────────── */

.navbar-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    height: 100%;
    transition: background-color 0.15s ease;
}

.navbar-hamburger-linea {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--nb-testo);
    transform-origin: center;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-linea:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-linea:nth-child(2) {
    /* Su Safari mobile opacity:0 lascia uno sliver sub-pixel su questa riga da
       1.5px (i due monconi laterali). scaleX(0) la collassa in modo affidabile,
       riusando il transform che già funziona sulle altre due righe. */
    opacity: 0;
    transform: scaleX(0);
}

.navbar-hamburger[aria-expanded="true"] .navbar-hamburger-linea:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* ─── Segnaposto pannello ────────────────────────────────────────────────────── */

.navbar-pannello-placeholder {
    padding-block: 40px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bianco-03);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MEGA-PANNELLI DESKTOP
   ═══════════════════════════════════════════════════════════════════════════════ */

.navbar-pannello {
    position: absolute;
    left: 0;
    top: var(--nb-altezza);
    width: 100%;
    padding: 30px 87.5px;
    background: linear-gradient(90deg, var(--blu-02) 0%, var(--blu-02) 100%), var(--bianco);
    border-top: 1px solid var(--blu-02);
    border-bottom: 1px solid var(--blu-02);
    box-shadow: 0 10px 30px -10px var(--dark-blu-02);
    z-index: 90;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition:
        height 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 0.25s ease;
    pointer-events: none;
}

/* Pannello divisioni: sfondo --blu-01 (10% opacità), come da design Figma nodo 30:2 */
.navbar-pannello[data-pannello="divisioni"] {
    background: linear-gradient(90deg, var(--blu-01) 0%, var(--blu-01) 100%), var(--bianco);
    border-top-color: var(--blu-01);
    border-bottom-color: var(--blu-01);
}

/* Sovrascrive display:none di [hidden] per permettere la transition */
.navbar-pannello[hidden] {
    display: block;
}

.navbar-pannello:not([hidden]) {
    height: calc(100vh - var(--nb-altezza));
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
}

/* Con la admin bar di WordPress il pannello deve scalare di 32px */
.admin-bar .navbar-pannello:not([hidden]) {
    height: calc(100vh - var(--nb-altezza) - 32px);
}

.navbar-pannello-contenitore {
    padding-top: 0;
    padding-bottom: 0;
    max-width: 1280px;
}

/* Header del pannello */
.navbar-pannello-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--bianco-01);
    width: 100%;
}

.navbar-pannello-titolo {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.416px;
    color: var(--dark-blu-10);
    margin-bottom: 10px;
    max-width: none;
}

.navbar-pannello-desc {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--dark-blu-07);
    max-width: none;
}

.navbar-pannello-contatore {
    flex-shrink: 0;
    margin-left: 32px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blu-07);
}

/* Footer del pannello */
.navbar-pannello-footer {
    padding-top: 2px;
    border-top: 1px solid var(--bianco-01);
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.navbar-pannello-link-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blu-07);
    transition: color 0.15s ease;
}

.navbar-pannello-link-footer:hover {
    color: var(--blu-10);
}

.navbar-pannello-link-footer:hover svg {
    transform: translateX(3px);
}

.navbar-pannello-link-footer svg {
    transition: transform 0.2s ease;
}


/* ─── Pannello: Settori ──────────────────────────────────────────────────────── */

.navbar-griglia-settori {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.navbar-settori-col.bordo {
    padding-right: 48px;
    border-right: 1px solid var(--bianco-01);
    margin-right: 48px;
}

.navbar-settori-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bianco-07);
}

.navbar-settori-tratto {
    display: block;
    width: 12px;
    height: 1px;
    background-color: var(--bianco-03);
    flex-shrink: 0;
}

.navbar-settori-voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-inline: -12px;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--bianco-08);
    border-radius: var(--raggio);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-settori-voce:hover {
    background-color: var(--bianco-00);
    color: var(--bianco);
}

.navbar-settori-voce svg {
    flex-shrink: 0;
    opacity: 0;
    margin-left: 8px;
    transition: opacity 0.15s ease;
}

.navbar-settori-voce:hover svg {
    opacity: 1;
}


/* ─── Pannello: Divisioni ────────────────────────────────────────────────────── */

/* Nel pannello la card fotografica: altezza fissa così .card-wrapper (flex:1) copre
   l'intera area compresa la zona foto — padding-top sull'article escludeva quella zona
   dall'area cliccabile dell'<a>. Fix #23.

   Eccezione di altezza SOLO in questo posizionamento: dentro un menu la card
   deve stare più bassa che in pagina, così il pannello non scende troppo.
   Si accorcia la fascia fotografica (--card-area-foto 160→100), non il corpo:
   il testo resta con le sue spaziature. Effetto: 307px → ~247px, circa il 20%
   in meno. Il min-height segue in proporzione (260 → 208) e resta non
   vincolante. */
.navbar-pannello .card.fotografica {
    --card-area-foto: 100px;
    min-height: 208px;
}

.navbar-griglia-divisioni {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.navbar-card-divisione {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    background-color: var(--nb-pannello-fondo);
    transition: background-color 0.2s ease;
    min-height: 257px;
}

.navbar-card-divisione:hover {
    background-color: var(--bianco-00);
}

.navbar-card-divisione:hover .navbar-card-scopri {
    color: var(--bianco-07);
}

.navbar-card-divisione:hover .navbar-card-icona {
    border-color: var(--bianco-03);
    color: var(--bianco-08);
}


.navbar-card-divisione.fotografica {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.navbar-card-divisione.fotografica::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 10, 30, 0.85) 0%, rgba(0, 10, 30, 0.40) 55%, rgba(0, 10, 30, 0.15) 100%);
    pointer-events: none;
}

.navbar-card-divisione.fotografica > * {
    position: relative;
}

.navbar-card-divisione.fotografica:hover {
    background-color: transparent;
}


/* ─── Pannello: Profili ──────────────────────────────────────────────────────── */

.navbar-griglia-profili {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.navbar-card-profilo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    background-color: var(--nb-pannello-fondo);
    transition: background-color 0.2s ease;
}

.navbar-card-profilo:hover {
    background-color: var(--bianco-00);
}

.navbar-card-profilo:hover .navbar-card-scopri {
    color: var(--bianco-07);
}

.navbar-card-profilo:hover .navbar-card-esigenza {
    color: var(--bianco-05);
    border-color: var(--bianco-02);
}


.navbar-card-profilo-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.navbar-card-tag {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bianco-02);
    margin-top: 4px;
}

.navbar-card-esigenze {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    margin-bottom: 20px;
    list-style: none;
}

.navbar-card-esigenza {
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bianco-03);
    border: 1px solid var(--bianco-01);
    border-radius: var(--raggio);
    transition: color 0.2s ease, border-color 0.2s ease;
}


/* ─── Elementi card condivisi ────────────────────────────────────────────────── */

.navbar-card-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bianco-01);
    border-radius: var(--raggio);
    color: var(--bianco-05);
    margin-bottom: 20px;
    transition: border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.navbar-card-profilo-top .navbar-card-icona {
    margin-bottom: 0;
}

.navbar-card-nome {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bianco);
    margin-bottom: 10px;
    max-width: none;
}

.navbar-card-desc {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bianco-04);
    flex: 1;
    max-width: none;
}

.navbar-card-scopri {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bianco-03);
    transition: color 0.15s ease;
}

.navbar-card-scopri svg {
    transition: transform 0.2s ease;
}

.navbar-card-divisione:hover .navbar-card-scopri svg,
.navbar-card-profilo:hover .navbar-card-scopri svg {
    transform: translateX(3px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MENU MOBILE
   ═══════════════════════════════════════════════════════════════════════════════ */

.navbar-mobile {
    position: fixed;
    top: var(--nb-altezza);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: var(--bianco);   /* opaco: il drawer è un overlay, non deve trasparire */
    border-top: 1px solid var(--nb-bordo);
}

/* Sotto la barra resta visibile l'admin bar di WordPress: 46px su mobile,
   32px da 783px in su. */
.admin-bar .navbar-mobile {
    top: calc(var(--nb-altezza) + 46px);
}

@media (min-width: 783px) {
    .admin-bar .navbar-mobile {
        top: calc(var(--nb-altezza) + 32px);
    }
}

.navbar-mobile[hidden] {
    display: none;
}

/* Il drawer compare con una leggera discesa dall'alto. */
.navbar-mobile:not([hidden]) {
    animation: navbar-drawer-appear 0.3s ease;
}

@keyframes navbar-drawer-appear {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-mobile-sezione {
    border-bottom: 1px solid var(--nb-bordo);
}

.navbar-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark-blu-10);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.navbar-mobile-btn .navitem-chevron {
    transition: transform 0.3s ease;
}

.navbar-mobile-btn[aria-expanded="true"] .navitem-chevron {
    transform: rotate(180deg);
}

.navbar-mobile-contenuto {
    background-color: var(--nb-pannello-fondo);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

/* hidden non rimuove più l'elemento: resta nel layout per animare l'apertura
   (grid-template-rows 0fr → 1fr). L'interattività è gestita da visibility
   sull'inner. */
.navbar-mobile-contenuto[hidden] {
    display: grid;
}

/* Wrapper interno: clip per l'animazione di altezza + comparsa dall'alto. */
.navbar-mobile-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0.3s;
}

.navbar-mobile-contenuto:not([hidden]),
.navbar-mobile-sub-contenuto:not([hidden]) {
    grid-template-rows: 1fr;
}

.navbar-mobile-contenuto:not([hidden]) > .navbar-mobile-inner,
.navbar-mobile-sub-contenuto:not([hidden]) > .navbar-mobile-inner {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Sottomenu normali (dropdown, es. Azienda): fondo bianco e testo scuro,
   come il dropdown compatto su desktop. I mega-menu (Divisioni, Soluzioni)
   restano invece a fondo blu. */
.navbar-mobile-contenuto.dropdown {
    background-color: var(--bianco);
}

.navbar-mobile-contenuto.dropdown .navbar-mobile-voce {
    /* Full-bleed con padding interno: l'evidenziazione copre l'intera riga,
       come gli altri elementi del drawer (niente margini laterali). */
    padding: 14px 24px;
    color: var(--blu-10);
    border-bottom-color: var(--blu-01);
}

.navbar-mobile-settori-gruppo {
    padding: 20px 24px;
}

.navbar-mobile-settori-gruppo + .navbar-mobile-settori-gruppo {
    padding-top: 0;
}

.navbar-mobile-settori-heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blu-03);
    margin-bottom: 12px;
    max-width: none;
}

.navbar-mobile-voce {
    display: block;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--bianco);
    border-bottom: 1px solid var(--bianco-01);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-mobile-voce:last-child {
    border-bottom: none;
}

.navbar-mobile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    color: var(--bianco);
    border-top: 1px solid var(--bianco-01);
    transition: background-color 0.15s ease;
}

.navbar-mobile-card:first-child {
    border-top: none;
}

.navbar-mobile-card > span {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
}

.navbar-mobile-card > svg:last-child {
    flex-shrink: 0;
    color: var(--bianco-03);
}

.navbar-mobile-card-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--blu-03);
    flex-shrink: 0;
    color: var(--blu-03);
}

.navbar-mobile-card-icona img,
.navbar-mobile-card-icona svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.navbar-mobile-sezione.link {
    border-bottom: 1px solid var(--nb-bordo);
}

.navbar-mobile-link {
    display: block;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark-blu-10);
    text-decoration: none;
    transition: color var(--nb-transition);
}

.navbar-mobile-placeholder {
    padding: 16px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bianco-04);
    font-style: italic;
}


/* ─── Accordion di 2° livello (menu Soluzioni mobile) ────────────────────────── */

.navbar-mobile-sotto-sezione {
    border-top: 1px solid var(--bianco-01);
}

.navbar-mobile-sotto-sezione:first-child {
    border-top: none;
}

.navbar-mobile-sub-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bianco);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}


.navbar-mobile-sub-btn .navitem-chevron {
    color: var(--bianco-05);
    transition: transform 0.3s ease;
}

.navbar-mobile-sub-btn[aria-expanded="true"] .navitem-chevron {
    transform: rotate(180deg);
}

.navbar-mobile-sub-contenuto {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.navbar-mobile-sub-contenuto[hidden] {
    display: grid;
}

/* Contenuto delle tre schede Soluzioni: fondo chiaro (le schede primarie Per
   Settore/Divisione/Profilo restano blu), per separazione visiva e coerenza
   con lo stile desktop delle card. */
.navbar-mobile-sub-contenuto {
    background-color: var(--bianco);
}

/* Righe uniformi delle tre sezioni: stesso layout, stessa altezza e freccia
   per tutte (settori, divisioni, profili), anche senza icona. */
.navbar-mobile-sol-voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px 24px;
    color: var(--blu-10);
    text-decoration: none;
    border-top: 1px solid var(--blu-01);
    transition: background-color 0.15s ease;
}

.navbar-mobile-sol-voce:first-child {
    border-top: none;
}


.navbar-mobile-sol-nome {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--blu-10);
}

/* Freccia in box chiaro, come il pulsante freccia delle card desktop. */
.navbar-mobile-sol-freccia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: var(--blu-00);
    border: 1px solid var(--blu-01);
    color: var(--blu-10);
}


/* ─── Feedback tattile ─────────────────────────────────────────────────────────
   Inibiamo l'highlight nativo di WebKit. Il feedback è una variazione di sfondo
   chiarissima durante la PRESSIONE (:active): su touch compare al tocco e
   sparisce al rilascio, senza restare "incagliata". L'hover è riservato ai
   dispositivi con puntatore reale (@media hover: hover), così non resta attivo
   dopo il tap su mobile. */

.navbar a,
.navbar button {
    -webkit-tap-highlight-color: transparent;
}

/* Pressione — elementi a fondo chiaro → velo blu chiarissimo.
   .tocco è la classe applicata via JS su touchstart (fix iOS, vedi navbar.js);
   :active copre desktop e browser che lo gestiscono al tocco. */
.navbar-mobile-btn:active,
.navbar-mobile-btn.tocco,
.navbar-mobile-link:active,
.navbar-mobile-link.tocco,
.navbar-mobile-lingua-voce:active,
.navbar-mobile-lingua-voce.tocco,
.navbar-mobile-contenuto.dropdown .navbar-mobile-voce:active,
.navbar-mobile-contenuto.dropdown .navbar-mobile-voce.tocco,
.navbar-mobile-sol-voce:active,
.navbar-mobile-sol-voce.tocco,
.navbar-cerca:active,
.navbar-cerca.tocco {
    background-color: var(--blu-00);
}

/* Pulsanti che aprono un pannello: il velo resta fisso finché sono aperti
   (aria-expanded="true") e sparisce alla chiusura. */
.navbar-mobile-btn[aria-expanded="true"] {
    background-color: var(--blu-00);
}

.navbar-mobile-sub-btn[aria-expanded="true"] {
    background-color: var(--bianco-00);
}

/* Pressione — elementi a fondo blu → velo bianco chiarissimo */
.navbar-mobile-card:active,
.navbar-mobile-card.tocco,
.navbar-mobile-sub-btn:active,
.navbar-mobile-sub-btn.tocco {
    background-color: var(--bianco-00);
}

.navbar-mobile-cta:active,
.navbar-mobile-cta.tocco {
    opacity: 0.9;
}

/* Hover solo con puntatore reale (desktop) */
@media (hover: hover) {
    .navbar-mobile-btn:hover,
    .navbar-mobile-link:hover,
    .navbar-mobile-lingua-voce:hover,
    .navbar-mobile-contenuto.dropdown .navbar-mobile-voce:hover,
    .navbar-mobile-sol-voce:hover {
        background-color: var(--blu-00);
    }

    .navbar-mobile-card:hover,
    .navbar-mobile-sub-btn:hover {
        background-color: var(--bianco-00);
    }

    .navbar-mobile-cta:hover {
        opacity: 0.85;
    }
}

/* Rispetta chi preferisce ridurre le animazioni. */
@media (prefers-reduced-motion: reduce) {
    .navbar-mobile:not([hidden]) {
        animation: none;
    }

    .navbar-mobile-contenuto,
    .navbar-mobile-sub-contenuto,
    .navbar-mobile-inner {
        transition: none;
    }
}


/* ─── Azioni nel drawer: selettore lingua + CTA ──────────────────────────────── */

.navbar-mobile-azioni {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.navbar-mobile-lingue {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navbar-mobile-lingue-heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blu-03);
    max-width: none;
}

.navbar-mobile-lingue-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.navbar-mobile-lingua-voce {
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--blu-10);
    border: 1px solid var(--blu-02);
    border-radius: var(--raggio);
    transition: background-color 0.15s ease;
}

.navbar-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background-color: var(--blu-10);
    color: var(--bianco);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Switch a navigazione mobile: la navbar desktop estesa va in overflow a destra
   intorno ai ~1153px (CTA oltre il bordo), quindi passiamo all'hamburger già a
   1160px — uno step dedicato sopra i breakpoint 991/767/479 delle sezioni. */
@media (max-width: 1160px) {
    .navbar-navigazione {
        display: none;
    }

    /* I mega-pannelli desktop restano nel DOM ma non vanno mai mostrati su mobile:
       la navigazione passa interamente dal drawer. */
    .navbar-pannello {
        display: none !important;
    }

    /* Le azioni (cerca) sono spinte a destra; l'hamburger le sta accanto,
       senza il proprio margin-left:auto che lo allontanava al bordo. Cerca e
       hamburger condividono lo stesso padding orizzontale per spaziatura
       coerente. */
    .navbar-hamburger {
        display: flex;
        margin-left: 0;
    }

    .navbar-azioni {
        margin-left: auto;
    }

    .navbar-lingue,
    .navbar-cta {
        display: none;
    }

    .navbar-cerca {
        padding: 0 12px;
        border-left: none;
        border-right: none;
        background-color: transparent;
        align-self: auto;
    }

    .navbar-contenitore {
        padding-right: var(--padding-contenitore);
    }
}

@media (max-width: 767px) {
    .navbar-logo svg {
        width: 180px;
        height: auto;
    }

    .navbar-mobile-btn,
    .navbar-mobile-link {
        padding: 14px 20px;
        font-size: 1rem;
    }

    .navbar-mobile-voce {
        font-size: 0.95rem;
    }
}

@media (max-width: 479px) {
    .navbar-logo svg {
        width: 150px;
        height: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MENU SOLUZIONI (pannello a tre tab)
   ═══════════════════════════════════════════════════════════════════════════════ */

.menu-soluzioni {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}


/* ─── Pannello tab ───────────────────────────────────────────────────────────── */

.menu-soluzioni-pannello {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.menu-soluzioni-pannello[hidden] {
    display: none;
}


/* ─── Intestazione ───────────────────────────────────────────────────────────── */

.menu-soluzioni-intestazione {
    display: flex;
    flex-direction: column;
    /* La didascalia respira sotto il titolo invece di restargli attaccata. */
    gap: 20px;
    align-items: center;
    text-align: center;
    /* Somma al gap del pannello (30px) per staccare nettamente
       l'introduzione dalla griglia. Uguale in tutti e tre i tab. */
    margin-bottom: 30px;
}

.menu-soluzioni-titolo {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.416px;
    line-height: 1.35;
    color: var(--dark-blu-10);
    max-width: none;
}

.menu-soluzioni-sottotitolo {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--dark-blu-07);
    max-width: 455px;
}


/* ─── Griglie ────────────────────────────────────────────────────────────────── */

.menu-soluzioni-griglia {
    display: grid;
    gap: 10px;
    width: 100%;
}

.menu-soluzioni-griglia.settori {
    grid-template-columns: repeat(2, 1fr);
}

.menu-soluzioni-griglia.divisioni {
    grid-template-columns: repeat(2, 1fr);
}

.menu-soluzioni-griglia.profili {
    grid-template-columns: repeat(3, 1fr);
}


/* ─── Card base (elementi condivisi) ─────────────────────────────────────────── */

.menu-soluzioni-card {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.menu-soluzioni-card-nome {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--blu-10);
}

.menu-soluzioni-card-testo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.menu-soluzioni-card-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--blu-08);
}


/* ─── Card: settore ──────────────────────────────────────────────────────────── */

.menu-soluzioni-card.settore {
    justify-content: space-between;
    padding: 15px;
    background-color: var(--bianco-03);
    border: 1px solid var(--bianco-03);
}

/* Col chip icona: nome al centro che occupa lo spazio, freccia in coda */
.menu-soluzioni-card.settore .menu-soluzioni-card-nome {
    flex: 1;
}

.menu-soluzioni-card.settore:hover {
    background-color: var(--bianco-04);
}


/* ─── Card: divisione ────────────────────────────────────────────────────────── */

.menu-soluzioni-card.divisione {
    padding: 16px;
    background-color: var(--bianco-04);
    border: 1px solid var(--bianco-04);
}

.menu-soluzioni-card.divisione .menu-soluzioni-card-nome {
    font-size: 22px;
    letter-spacing: -0.416px;
}

.menu-soluzioni-card.divisione:hover {
    background-color: rgba(255, 255, 255, 0.55);
}

.menu-soluzioni-icona-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--blu-10);
    border-radius: var(--raggio);
    flex-shrink: 0;
    overflow: hidden;
}

.menu-soluzioni-icona-div svg,
.menu-soluzioni-icona-div img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ─── Card: profilo ──────────────────────────────────────────────────────────── */

.menu-soluzioni-card.profilo {
    padding: 16px;
    background-color: var(--bianco-04);
    border: 1px solid var(--bianco-04);
    /* Card alte (testi di più righe): icona e freccia in testa, sulla riga
       del titolo, non sospese a metà altezza. */
    align-items: flex-start;
}

.menu-soluzioni-card.profilo .menu-soluzioni-card-nome {
    font-size: 22px;
    letter-spacing: -0.416px;
}

.menu-soluzioni-card.profilo:hover {
    background-color: rgba(255, 255, 255, 0.55);
}


/* ─── Pulsante freccia 50×50 ─────────────────────────────────────────────────── */

.menu-soluzioni-btn-freccia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--blu-00);
    border: 1px solid var(--blu-01);
    flex-shrink: 0;
    color: var(--blu-10);
    transition: background-color 0.15s ease;
}

.menu-soluzioni-btn-freccia svg {
    width: 18px;
    height: 18px;
}

.menu-soluzioni-card:hover .menu-soluzioni-btn-freccia {
    background-color: var(--blu-01);
}


/* ─── Footer ─────────────────────────────────────────────────────────────────── */

.menu-soluzioni-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top: 1px;
    border-top: 1px solid var(--bianco-01);
}

.menu-soluzioni-link-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.8px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blu-07);
    text-decoration: none;
    transition: color 0.15s ease;
}

.menu-soluzioni-link-footer:hover {
    color: var(--blu-10);
}

.menu-soluzioni-link-footer svg {
    transition: transform 0.2s ease;
}

.menu-soluzioni-link-footer:hover svg {
    transform: translateX(3px);
}