:root {
    --nav-height: 60px;
    --sidebar-width: 250px;
    --transition-speed: 0.3s;
    --color-bg-dark: #333;
    --color-bg-sidebar: #222;
    --color-hover: #111;
    --color-active: #04AA6D;
    --shadow-glow: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15));
}

/* ==========================================
   Header & Navigation
   ========================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--color-bg-dark);
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 1rem;
}

.navbar__list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================
   Toggle Button & Links
   ========================================== */
.toggle-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.navbar__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    text-decoration: none;
    color: #fff;
    transition: background-color var(--transition-speed);
}

.navbar__link:hover {
    background-color: var(--color-hover);
}

/* ==========================================
   Icons & States
   ========================================== */
.navbar__icon {
    display: block;
    height: 25px;
    width: 25px;
    object-fit: contain;
    transition: transform var(--transition-speed), filter var(--transition-speed);
}

.navbar__link:hover .navbar__icon {
    transform: translateY(-4px);
    filter: var(--shadow-glow);
}

.navbar__link--active .navbar__icon {
    background-color: var(--color-active);
    filter: var(--shadow-glow);
}

/* ==========================================
   Sidebar (Fixed Layout Bugs)
   ========================================== */
.sidebar {
    position: fixed;
    top: var(--nav-height);
    left: calc(-1 * var(--sidebar-width)); /* Dynamically stays off-screen */
    width: var(--sidebar-width);
    height: calc(100vh - var(--nav-height)); /* Spans to the bottom of viewport */
    background-color: var(--color-bg-sidebar);
    transition: left var(--transition-speed) ease;
    z-index: 999; /* Just beneath the top navbar */
}

/* Toggle State */
.sidebar.sidebar--open {
    left: 0;
}

/* ==========================================
   Responsive Layout (Tablet/Desktop)
   ========================================== */
@media (min-width: 768px) {
    /* If you want the page content to shift smoothly */
    .sidebar.sidebar--open ~ main {
        margin-left: var(--sidebar-width);
        transition: margin-left var(--transition-speed) ease;
    }
}