/* =========================================================
   AutoBul — Navbar / Offcanvas Extra Styles
   Main navbar styles live in site.css.
   This file handles the mobile offcanvas specifics.
   ========================================================= */

/* ── Offcanvas backdrop & container ─────────────────────── */
#lwOffcanvas {
    height: 100vh;
    max-height: 100vh;
    background: var(--primary-dark, #0f1d35);
    color: #fff;
    border-right: none;
}

#lwOffcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* ── Nav list ────────────────────────────────────────────── */
#lwOffcanvas .list-group {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent, #E63946) transparent;
}

#lwOffcanvas .list-group::-webkit-scrollbar {
    width: 4px;
}

#lwOffcanvas .list-group::-webkit-scrollbar-thumb {
    background-color: var(--accent, #E63946);
    border-radius: 4px;
}

#lwOffcanvas .list-group-item {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 14px 20px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: rgba(255,255,255,0.88);
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

#lwOffcanvas .list-group-item:last-child {
    border-bottom: none;
}

#lwOffcanvas .list-group-item.active {
    background: rgba(230,57,70,0.18);
    color: var(--cta, #F4A261);
    font-weight: 700;
}

#lwOffcanvas .list-group-item-action:hover,
#lwOffcanvas .list-group-item-action:focus {
    background: rgba(255,255,255,0.07);
    color: #fff;
    padding-left: 26px;
}

/* ── Brand text color inside offcanvas ───────────────────── */
.offcanvas-title .brand-auto {
    color: var(--cta, #F4A261);
}

/* ── Navbar scroll state (applied by JS) ────────────────── */
#mainNavbar.scrolled {
    background: rgba(27,42,74,0.99) !important;
    box-shadow: 0 4px 24px rgba(11,20,40,0.32);
}

/* ── Active link underline on desktop ───────────────────── */
.navbar .nav-link.active {
    position: relative;
    color: var(--cta, #F4A261) !important;
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--cta, #F4A261);
}

/* ── Brand car icon color ────────────────────────────────── */
.navbar .bi-car-front-fill {
    color: var(--cta, #F4A261);
}

.navbar .brand-auto {
    color: var(--cta, #F4A261);
}