/* =============================================================================
   navitem.css — Componente NavItem
   Fonte design: Figma nodo 97:437

   Varianti:
     .navitem.primaria   — sfondo chiaro (navbar principale)
     .navitem.secondaria — sfondo scuro (subheader)

   Stati: Standard, Hover, :active (press), .attivo (pagina corrente — solo primaria)
   Il tag HTML è <a> per tipo link, <button> per pannello/dropdown.
   ============================================================================= */


/* ─── Base ───────────────────────────────────────────────────────────────────── */

.navitem {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 9px 14px;
    font-family: var(--font-titoli);
    font-size: 0.95rem;        /* ≈ 15.2px */
    font-weight: 500;
    /*
     * font-variation-settings controlla l'asse wght direttamente sul variable font.
     * Transition a 0s per evitare l'interpolazione del browser che causa lo "zoom"
     * visivo quando il peso cambia su hover.
     */
    font-variation-settings: 'wght' 500;
    letter-spacing: -0.01em;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.15s ease,
        font-variation-settings 0s;
    height: 100%;
}


/* ─── Variante Primaria (sfondo chiaro) ──────────────────────────────────────── */

.navitem.primaria {
    color: var(--blu-10);
    /* Bordi laterali trasparenti pre-riservati: nessun layout shift su hover */
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.navitem.primaria:hover,
.navitem.primaria[aria-expanded="true"] {
    background-color: var(--blu-00);
    border-left-color: var(--blu-02);
    border-right-color: var(--blu-02);
}

.navitem.primaria:active {
    background-color: var(--blu-01);
    border-left-color: var(--blu-02);
    border-right-color: var(--blu-02);
}

.navitem.primaria.attivo {
    font-variation-settings: 'wght' 600;
}

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


/* ─── Variante Secondaria (sfondo scuro) ─────────────────────────────────────── */

.navitem.secondaria {
    color: rgba(255, 255, 255, 0.7);
    /*
     * Bordo inferiore sempre pre-riservato: quando .attivo cambia solo il colore,
     * senza aggiungere o togliere spazio nel box model (fix #29).
     * padding-bottom ridotto di 2px per compensare il bordo visivo sul centro ottico.
     */
    border-bottom: 3px solid transparent;
    padding-bottom: 7px;
}

.navitem.secondaria:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    /* font-variation-settings invariato: nessun cambio di larghezza su hover (fix #29) */
}

.navitem.secondaria:active {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.navitem.secondaria.attivo {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.navitem.secondaria.attivo:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* ─── Chevron ────────────────────────────────────────────────────────────────── */

.navitem-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}