/* Left-side flyout nav: hamburger toggle button */
.hamburger-btn{
  position:fixed; top:12px; left:12px; z-index:10001;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background-color:#333; color:#fff; border:none; border-radius:4px;
  font-size:22px; line-height:1; cursor:pointer;
}
.hamburger-btn:hover{ background-color:#111; }

/* Overlay backdrop (also serves as the click-outside-to-close target) */
.left-nav-overlay{
  position:fixed; inset:0; z-index:9999;
  background-color:rgba(0,0,0,0.35);
  display:none;
}
.left-nav-overlay.visible{ display:block; }

/* Off-canvas panel */
.left-nav{
  position:fixed; top:0; left:-280px; bottom:0; width:260px; z-index:10000;
  background-color:#333; color:#fff; overflow-y:auto;
  padding-top:56px; box-shadow:2px 0 8px rgba(0,0,0,0.35);
  transition:left .25s ease;
}
.left-nav.open{ left:0; }

.left-nav-close{
  position:absolute; top:8px; right:8px; background:none; border:none;
  color:#fff; font-size:24px; line-height:1; cursor:pointer;
}

.left-nav-list{ list-style:none; margin:0; padding:0; }
.left-nav-list > li > a,
.nav-group-toggle{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  background:none; border:none; color:#fff; font-size:15px;
  padding:14px 16px; text-decoration:none; cursor:pointer;
}
.left-nav-list > li > a:hover,
.nav-group-toggle:hover{ background-color:#111; }

.nav-caret{ float:right; transition:transform .2s ease; }
.nav-group.expanded .nav-caret{ transform:rotate(180deg); }

.nav-submenu{
  list-style:none; margin:0; padding:0; max-height:0; overflow:hidden;
  background-color:#292929; transition:max-height .25s ease;
}
.nav-group.expanded > .nav-submenu{ max-height:480px; }
.nav-submenu li a{
  display:block; color:#fff; text-decoration:none;
  padding:12px 16px 12px 28px;
}
.nav-submenu li a:hover{ background-color:#575757; }

@media (max-width:480px){
  .left-nav{ width:80vw; max-width:280px; left:-85vw; }
}