/* 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: var(--site-banner-height, 0px);
  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; }

/* Language switcher — sits in the sidebar header between the brand and
   the (mobile-only) close button. A plain native <select> rather than a
   custom dropdown: it needs no extra JS/CSS to be keyboard- and
   screen-reader-accessible, and a few extra bytes of native browser
   chrome here is a reasonable trade for that. */
.side-nav-lang-switch{
  background: var(--bg-850, #17171b);
  color: var(--text, #eee);
  border: 1px solid var(--border-soft, #2a2a30);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  padding: 4px 6px;
  cursor: pointer;
}
.side-nav-lang-switch:hover{ border-color: var(--accent, #FF5A36); }

.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; }

/* Subcategories (e.g. Streaming Tools / Streaming Games under
   Streaming) sit one level deeper than a normal category's own tool
   links — same collapse behavior, reusing .side-nav-caret, but
   indented further and toned down slightly so the hierarchy reads
   clearly at a glance. */
.side-nav-cat-links.has-subcategories{ padding-bottom: 4px; }
.side-nav-subcat-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-faint, #999);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 10px 16px 10px 28px;
  cursor: pointer;
}
.side-nav-subcat-toggle:hover{ color: var(--text-dim, #bbb); }
.side-nav-subcategory .side-nav-caret{ font-size: 10px; }
.side-nav-subcategory.open .side-nav-caret{ transform: rotate(90deg); }

.side-nav-subcat-links{ display: none; padding-bottom: 4px; }
.side-nav-subcategory.open .side-nav-subcat-links{ display: block; }
.side-nav-subcat-links .side-nav-link{ padding-left: 38px; }

.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: calc(14px + var(--site-banner-height, 0px));
    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; }
}

/* Site-wide announcement banner — injected by nav.js as the very
   first element in <body> when enabled, so it appears above
   everything on every page without any per-page HTML changes.
   Sits in normal document flow (pushes the rest of the page's own
   content down naturally) while the sidebar/toggle button, being
   fixed-position, are shifted down to match via the CSS variable
   nav.js sets once it knows this banner's actual rendered height. */
#siteAnnouncementBanner{
  background: var(--accent, #FF5A36);
  color: #1a0d08;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 44px 10px 16px;
  position: relative;
}
#siteAnnouncementBanner a{ color: #1a0d08; text-decoration: underline; }
#siteAnnouncementBannerClose{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #1a0d08;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.7;
}
#siteAnnouncementBannerClose:hover{ opacity: 1; }

/* 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; }
}

/* "Watch us on Twitch": a purple glowing card like the homepage banner; goes red with the viewer count while live */
.side-nav-link.side-nav-twitch{
  display: flex; align-items: center; gap: 10px;
  margin: 8px 12px; padding: 10px 12px;
  color: #fff; font-weight: 600; font-size: 13.5px;
  background: linear-gradient(135deg, rgba(145,70,255,0.42), rgba(70,30,140,0.35));
  border: 1px solid rgba(165,110,255,0.65); border-radius: 12px;
  box-shadow: 0 0 16px rgba(145,70,255,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.side-nav-link.side-nav-twitch:hover, .side-nav-link.side-nav-twitch:focus-visible{
  color: #fff; background: linear-gradient(135deg, rgba(160,95,255,0.55), rgba(90,45,170,0.45));
  box-shadow: 0 0 22px rgba(145,70,255,0.5); transform: translateY(-1px);
}
.side-nav-twitch .tw-ico{
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: linear-gradient(135deg, #a970ff, #6a35c9); box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.side-nav-twitch .tw-txt{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-nav-twitch .tw-sub{ font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.8); }
.side-nav-link.side-nav-twitch.is-live{
  background: linear-gradient(135deg, rgba(255,70,100,0.38), rgba(145,70,255,0.42));
  border-color: rgba(255,110,130,0.8); box-shadow: 0 0 18px rgba(255,70,100,0.38);
}
.side-nav-twitch.is-live .tw-ico{ animation: twPulse 1.8s ease-in-out infinite; }
@keyframes twPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,90,110,0.7); } 50%{ box-shadow: 0 0 0 7px rgba(255,90,110,0); } }
@media (prefers-reduced-motion: reduce){ .side-nav-twitch.is-live .tw-ico{ animation: none; } }