/* ==========================================================
   HEADER
========================================================== */

header{

    position:sticky;

    top:0;

    z-index:100;

    background:#fff;

    border-bottom:1px solid var(--border);

}

.top-bar{

    height:56px;

    display:flex;

    align-items:center;

    gap:var(--space-3);

    padding:0 var(--space-4);

}

.menu-btn{

    border:none;

    background:none;

    font-size:1.6rem;

    cursor:pointer;

    line-height:1;

    padding:0;

}

.brand{

    display:flex;

    align-items:center;

    gap:.45rem;

}

.brand-logo{

    font-size:1.3rem;

}

.brand-name{

    font-size:1.2rem;

    font-weight:700;

}

/* ==========================================================
   DRAWER
========================================================== */

.side-menu{

    position:fixed;

    top:0;

    left:0;

    width:270px;

    height:100vh;

    background:#fff;

    padding:var(--space-5);

    transform:translateX(-100%);

    transition:.25s;

    box-shadow:var(--shadow-lg);

    z-index:500;

}

.side-menu.open{

    transform:translateX(0);

}

.side-nav{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.side-item{

    display:flex;

    align-items:center;

    gap:.8rem;

    padding:.85rem 1rem;

    border-radius:var(--radius);

    transition:.2s;

}

.side-item:hover{

    background:#f3f4f6;

}

.side-item:active{

    transform:scale(.98);

}

.side-icon{

    width:26px;

    text-align:center;

}

.side-label{

    font-weight:600;

}

.side-separator{

    height:1px;

    background:var(--border);

    margin:var(--space-3) 0;

}

/* ==========================================================
   OVERLAY
========================================================== */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    pointer-events:none;

    transition:.25s;

    z-index:450;

}

.menu-overlay.open{

    opacity:1;

    pointer-events:auto;

}

/* ==========================================================
   MOBILE NAV
========================================================== */

.mobile-nav{

    position:fixed;

    bottom:0;

    left:0;

    right:0;

    height:66px;

    background:#fff;

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-top:1px solid var(--border);

    z-index:300;

}

.nav-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:var(--muted);

    gap:.2rem;

    flex:1;

    transition:.2s;

}

.nav-item span{

    font-size:1.35rem;

}

.nav-item small{

    font-size:.72rem;

}

.nav-item.active{

    color:var(--primary);

}

.nav-item:active{

    transform:scale(.94);

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    margin-top:3rem;

    padding:2rem 1.5rem;

    border-top:1px solid #ececec;

    text-align:center;

}

.footer-logo{

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:.3rem;

}

.footer-tagline{

    color:#6b7280;

    font-size:.9rem;

    margin-bottom:1.6rem;

}

.footer-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:.6rem 1.2rem;

    margin-bottom:1.8rem;

}

.footer-links a{

    color:#555;

    text-decoration:none;

    font-size:.9rem;

}

.footer-links a:hover{

    color:#ff6a00;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:1rem;

    margin-bottom:1.5rem;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f5f5f5;

    text-decoration:none;

    font-size:1.2rem;

    transition:.2s;

}

.footer-social a:hover{

    background:#ff6a00;

    color:white;

}

.footer-copy{

    color:#9ca3af;

    font-size:.8rem;

}