/* FILE: /v2/include/css/04-navigation.css
   COSA FA:
   Gestione navigazione /v2.
   Include navbar pubblica e categorie (scroll orizzontale).
   Usa variabili template per supportare temi chiari/scuri.
*/

/* =========================
   NAVBAR PUBBLICA
========================= */

.cm-v2-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1030;
    background:color-mix(in srgb, var(--cm-card) 92%, transparent);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--cm-line);
    box-shadow:var(--cm-shadow-md);
}

.cm-v2-navbar-spacer{
    height:66px;
}

.cm-v2-navbar .navbar-brand{
    display:flex;
    align-items:center;
    font-weight:900;
    letter-spacing:.2px;
    min-width:0;
    flex:1 1 auto;
    margin-right:12px;
    color:var(--cm-text) !important;
}

.cm-v2-navbar .navbar-brand img{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    margin-right:8px;
    box-shadow:var(--cm-shadow-sm);
    flex:0 0 auto;
}

.cm-v2-navbar .navbar-brand-text{
    display:block;
    min-width:0;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.1;
}

.cm-v2-navbar-fallback-icon{
    margin-right:6px;
    color:var(--cm-primary);
}

.cm-v2-navbar .navbar-toggler{
    flex:0 0 auto;
    margin-left:auto;
    border-color:var(--cm-line);
}

.cm-v2-navbar .navbar-toggler-icon{
    filter:none;
}

.cm-v2-navbar .nav-link{
    font-weight:800;
    letter-spacing:.1px;
    display:flex;
    align-items:center;
    border-radius:999px;
    padding:.55rem .85rem !important;
    transition:all .18s ease;
    color:var(--cm-text) !important;
}

.cm-v2-navbar .nav-link .material-icons{
    vertical-align:middle;
    font-size:18px;
    margin-right:6px;
}

.cm-v2-navbar .nav-link:hover{
    background:color-mix(in srgb, var(--cm-primary) 9%, transparent);
    color:var(--cm-primary-dark) !important;
}

.cm-v2-navbar .nav-item.active .nav-link{
    background:color-mix(in srgb, var(--cm-primary) 14%, transparent);
    color:var(--cm-primary-dark) !important;
}

.cm-v2-navbar .cm-nav-divider{
    width:1px;
    height:28px;
    background:var(--cm-line);
    margin:0 .6rem;
    align-self:center;
}

/* =========================
   CATEGORY BAR (MENU)
========================= */

.catbar-wrap{
    position:sticky;
    top:62px;
    z-index:50;
    margin-top:10px;
    padding-top:10px;
    background:linear-gradient(
        to bottom,
        color-mix(in srgb, var(--cm-bg) 98%, transparent),
        color-mix(in srgb, var(--cm-bg) 82%, transparent)
    );
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.catbar{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:10px 6px 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

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

/* =========================
   CHIP (CATEGORIE)
========================= */

.chip{
    border:1px solid var(--cm-line);
    background:var(--cm-card);
    color:var(--cm-text);
    border-radius:999px;
    padding:10px 14px;
    font-weight:800;
    white-space:nowrap;
    box-shadow:var(--cm-shadow-sm);
    transition:.18s ease;
    cursor:pointer;
    user-select:none;
}

.chip:hover{
    border-color:color-mix(in srgb, var(--cm-primary) 25%, var(--cm-line));
}

.chip.active{
    border-color:transparent;
    color:#fff;
    background:linear-gradient(90deg,var(--cm-primary),var(--cm-secondary));
    box-shadow:0 10px 22px color-mix(in srgb, var(--cm-primary) 25%, transparent);
    transform:translateY(-1px);
}

/* =========================
   SEZIONI CATEGORIE
========================= */

.cat-section{
    scroll-margin-top:150px;
    margin-top:18px;
}

.cat-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:10px 2px 10px;
}

.cat-name{
    font-weight:950;
    letter-spacing:.2px;
    font-size:1.15rem;
    margin:0;
    color:var(--cm-text);
}

.cat-desc{
    margin:0;
    color:var(--cm-muted);
    font-size:.92rem;
}
.cm-v2-navbar .navbar-toggler-icon{
    filter:var(--cm-navbar-toggler-filter, none);
}