/*
 * Computer header sidenav (off-canvas drawer) styles.
 * Extracted from module/computer/layout/headerSidenav.phtml during audit Step 6a.
 *
 * PHP-interpolated brand colours migrated to tokens:
 *   firstColor → var(--lb-brand)
 *   leftSidenavColor → var(--lb-sidenav-link)
 *   toggleLeftSidenavColor → var(--lb-toggle-icon)
 *   toggleLeftSidenavHoverColor → var(--lb-sidenav-hover)
 *
 * Commented-out colour overrides in the original (lines 25 and 34) were
 * dropped — they referenced leftSidenavColor for sidenav-top which is now
 * intentionally hardcoded white per the active rule.
 */

#leftSidenavWrapper,
#leftSidenavWrapper ul,
#leftSidenavWrapper ul li,
#leftSidenavWrapper ul li a{
    list-style: none;
    text-align: left;
}

#leftSidenavWrapper .sidenav-top{
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 19px 0 7px 0;
    color: #FFF !important;
}

#leftSidenavWrapper .sidenav-top:has(> a){
    color: #FFF;
}

#leftSidenavWrapper .sidenav-top:has(> a):hover{
    color: #FFF !important;
    transition: all 0.4s ease;
}

#leftSidenavWrapper .sidenav-top a{
    color: #FFF;
    text-decoration: none;
}

#leftSidenavWrapper .sidenav-top a:hover{
    color: #FFF !important;
    text-decoration: underline;
    transition: all 0.4s ease;
}

#leftSidenavWrapper .sidenav-sub{
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    margin-left: 30px !important;
}

#leftSidenavWrapper .sidenav-sub a{
    color: #FFF !important;
}

#leftSidenavWrapper .sidenav-sub a:hover{
    color: var(--lb-sidenav-link) !important;
    text-decoration: none;
    transition: all 0.4s ease;
}

#leftSidenavWrapper .sidenav-default{
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
}

#leftSidenavWrapper .sidenav-default a{
    color: #FFF !important;
}

#leftSidenavWrapper{
    position: absolute;
    z-index: 9999;
    width: 450px;
    bottom: 0;
    top: 0;
    left: -100%;
    right: 0;
    display: none;
    background: #282828;
}

/*
 * `.toggleLeftSidenav` (the hamburger in the header) — canonical rules
 * live in `header.css`. The duplicate rule that used to live here was
 * sneaking in via cascade order (this file loads after header.css) and
 * stomping the size with `2.6rem` (~41px under 16px rem base). Deleted.
 * Only the hover state stays as a sidenav-context override.
 */
.toggleLeftSidenav:hover{
    color: var(--lb-sidenav-hover) !important;
    transition: all 0.4s ease;
}

.closeLeftSidenav{
    color: #FFF;
    font-size: 22px;
    cursor: pointer;
}

.closeLeftSidenav:hover{
    color: var(--lb-sidenav-hover);
    transition: all 0.4s ease;
}

#headerSidenav ul li a{
    color: var(--lb-brand);
}

#headerSidenav .sidenavCollapse a,
#headerSidenav .sidenavCollapse span{
    cursor: pointer !important;
}

#headerSidenav .sidenavCollapse a:hover,
#headerSidenav .sidenavCollapse span:hover{
    text-decoration: underline !important;
}

#headerSidenavInfo div{
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
}

#headerSidenavInfo div a{
    color: #FFF;
    text-decoration: none;
}

#headerSidenavInfo div a:hover{
    text-decoration: underline;
}

.collapseArrow{
    cursor: pointer;
}