/* Shared site sidebar — linked from every page, alongside nav.js.
   Fixed position rather than an in-flow sidebar column: it doesn't
   require wrapping or restructuring each page's existing body content,
   just one margin-left rule to make room for it, since a fixed element
   isn't affected by its own parent's margin. */

#siteNav{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: var(--bg-900, #111114);
  border-right: 1px solid var(--border-soft, #2a2a30);
  overflow-y: auto;
  z-index: 200;
  font-family: 'Inter', sans-serif;
}

.side-nav-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-soft, #2a2a30);
}
.side-nav-brand{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .5px;
  text-decoration: none;
  color: var(--text, #eee);
}
.side-nav-brand span{ color: var(--accent, #FF5A36); }
.side-nav-close{ display: none; background: none; border: none; color: var(--text, #eee); font-size: 22px; cursor: pointer; padding: 4px; line-height: 1; }

.side-nav-home{
  display: block;
  padding: 14px 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft, #2a2a30);
}

.side-nav-categories{ padding: 6px 0 20px; }

.side-nav-category{ border-bottom: 1px solid rgba(255,255,255,0.04); }
.side-nav-cat-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-dim, #bbb);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 14px 16px;
  cursor: pointer;
}
.side-nav-cat-toggle:hover{ color: var(--text, #eee); }
.side-nav-caret{ transition: transform 0.15s ease; font-size: 11px; }
.side-nav-category.open .side-nav-caret{ transform: rotate(90deg); }

.side-nav-cat-links{ display: none; padding-bottom: 8px; }
.side-nav-category.open .side-nav-cat-links{ display: block; }

.side-nav-link{
  display: block;
  padding: 8px 16px 8px 26px;
  color: var(--text-faint, #999);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
}
.side-nav-link:hover, .side-nav-link:focus-visible{ color: var(--accent-2, #31D6BE); background: rgba(255,255,255,0.03); }
.side-nav-link.active{
  color: var(--accent-2, #31D6BE);
  font-weight: 600;
  background: rgba(49,214,190,0.08);
  cursor: default;
}

/* Desktop: the sidebar permanently occupies space, so page content
   shifts over to make room for it. */
@media (min-width: 861px){
  body{ margin-left: 260px; }
  .side-nav-close{ display: none !important; }
}

/* OBS embed views never get the sidebar's margin, regardless of
   viewport width — an OBS Browser Source typically runs at a desktop
   size well above the 861px breakpoint, so without this override every
   embed would sit shifted 260px off-center even with the sidebar
   itself correctly hidden. */
body.embed-mode{ margin-left: 0 !important; }

/* Mobile: hidden off-screen by default, slides in as an overlay when
   toggled — same interaction shape as the dropdown menu it replaces,
   just a full sidebar instead of a small dropdown panel. */
@media (max-width: 860px){
  #siteNav{
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  #siteNav.mobile-open{ transform: translateX(0); }
  .side-nav-close{ display: block; }
  body{ margin-left: 0; }
  #mobileMenuToggle{
    display: flex;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 190;
    background: var(--bg-900, #131316);
    border: 1px solid var(--border-soft, #232329);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--text, #F4F4F5);
    font-size: 18px;
    cursor: pointer;
  }
}
@media (min-width: 861px){
  #mobileMenuToggle{ display: none; }
}

/* Dims and blocks the rest of the page while the mobile sidebar is
   open — without this, the page's own content stayed fully visible
   and interactive underneath the open menu instead of reading as
   covered by it, which is what "the panel goes behind the menu"
   actually was: nothing was cutting off/dimming the page content, so
   it kept showing through alongside the sidebar. Created dynamically
   by nav.js rather than added to every page's own HTML. */
#siteNavBackdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 190;
}
#siteNavBackdrop.mobile-open{ display: block; }
@media (min-width: 861px){
  #siteNavBackdrop{ display: none !important; }
}