/* =====================================================================
 * VIVI IN DUE — Nav 3-tab + header accents
 *
 * Bottom nav semplificata: Home / Mappa / Profilo.
 * "Esplora" diventa accessibile via search bar prominente in home.
 * "Preferiti" diventa accessibile via icona ❤︎ in header top-right
 * (mostrata solo su home/explore/favorites, nascosta in detail/ticket).
 *
 * Tutti i selettori senza !important: la regola sui nav-item base resta
 * in style.css/redesign.css. Qui solo i refinement.
 * ===================================================================== */

/* ---------- Bottom nav: refining 3-tab ----------
 * Quando ci sono 3 nav-item invece di 4, il flexbox li allarga
 * naturalmente. Il nav-indicator continua a essere calcolato da
 * updateNavIndicator(navEl) → no fix JS necessario.
 * Aggiungiamo solo un po' di breathing.
 */
#bottom-nav .nav-item {
    transition: color var(--vid-dur-base) var(--vid-ease);
}
#bottom-nav .nav-item:active {
    opacity: 0.7;
}

/* ---------- Header preferiti pill (icona + label) ---------- */
.header-fav-link {
    background: var(--vid-surface);
    border: 1px solid var(--vid-border);
    color: var(--vid-ink);
    height: 38px;
    padding: 0 14px 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--vid-radius-pill);
    cursor: pointer;
    font-family: var(--vid-font-sans);
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: var(--vid-shadow-xs);
    transition: background var(--vid-dur-quick) var(--vid-ease),
                color var(--vid-dur-quick) var(--vid-ease),
                box-shadow var(--vid-dur-quick) var(--vid-ease);
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
}
.header-fav-link i {
    font-size: 0.95rem;
    color: var(--vid-coral, #ef4444);
}
.header-fav-link__label {
    line-height: 1;
}
.header-fav-link:hover {
    box-shadow: var(--vid-shadow-sm);
}
.header-fav-link:active {
    opacity: 0.85;
}

/* Mostra heart-link solo nei contesti "lista", non in dettaglio/ticket */
body[data-view="detail"] .header-fav-link,
body[data-view="ticket"] .header-fav-link,
body[data-view="admin"] .header-fav-link {
    display: none;
}

/* Su home, l'header è nascosto (display:none/visibility:hidden via
 * redesign.css): nessun conflitto. L'heart serve da explore/favorites/
 * profile/map per swap rapido senza nav-tab dedicato.
 */

/* ---------- Home shortcuts (Preferiti / Mappa) ---------- */
.home-shortcuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vid-s-3);
    margin: 0 0 var(--vid-s-5) 0;
}
.home-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vid-s-2);
    padding: var(--vid-s-3) var(--vid-s-4);
    background: var(--vid-surface);
    border: 1px solid var(--vid-border);
    border-radius: var(--vid-radius-md);
    color: var(--vid-ink);
    font-family: var(--vid-font-sans);
    font-size: var(--vid-text-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--vid-shadow-xs);
    transition: box-shadow var(--vid-dur-quick) var(--vid-ease),
                border-color var(--vid-dur-quick) var(--vid-ease);
}
.home-shortcut:hover {
    box-shadow: var(--vid-shadow-sm);
    border-color: var(--vid-border-strong);
}
.home-shortcut:active {
    opacity: 0.85;
}
.home-shortcut i {
    font-size: 1rem;
    color: var(--vid-gold);
}
.home-shortcut--fav i {
    color: var(--vid-coral);
}