/* The slide-out side menu, and nothing else.

   Deliberately its own file rather than part of theme.css. Only 29 of this
   site's 58 pages load theme.css, and theme.css is a whole theme -- a global
   reset, body typography, and `html { background: #000 }`. Adding it to the
   pages that never had it in order to reach the menu rules would have
   repainted those pages black, which is a far worse bug than the one being
   fixed. This file styles menu selectors only, so it is safe to add anywhere.
*/
/* Slide-out side menu */
#menu-burger {
  margin: 0 0 0 1rem;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu-burger .menu-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }

#menu-burger .menu-btn__burger { width: 22px; height: 2px; background: var(--text-main); border-radius: 2px; }

#menu-burger .menu-btn__burger::before,
#menu-burger .menu-btn__burger::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
}

#menu-burger .menu-btn__burger::before { transform: translateY(-7px); }
#menu-burger .menu-btn__burger::after { transform: translateY(7px); }

#menu-burger:hover .menu-btn__burger,
#menu-burger:hover .menu-btn__burger::before,
#menu-burger:hover .menu-btn__burger::after {
  background: var(--accent-blue);
}

/* Colors matched to dashboard.site's own sidenav light theme
   (css/style.css, :root[data-theme="light"]) so the slide-out menu
   looks the same across both products. */
/* Step 619: back to the RIGHT, on the owner's explicit instruction. Step
   595 had moved it to the left to keep it off the same edge as the
   account menu on the product side's own pages -- that reasoning stands
   for the product side, but the owner asked for every page's menu to
   open from the right regardless. */
#side-menu {
  display: block;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 1rem;
  transition: width 0.25s ease;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

#side-menu.open {
  width: min(280px, 85vw);
  border-left: 1px solid #d7dbe3;
}

#side-menu ul { list-style: none; margin: 0; padding: 0 0 2rem; display: flex; flex-direction: column; }

#side-menu a {
  font: inherit;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  color: #14171c;
  display: block;
  width: 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#side-menu a:hover { color: #2f5fd1; background: rgba(91, 141, 239, 0.08); }

/* js/site-menu.js's renderAuthMenu() writes these two directly into the
   "Signed in as..." <li> when a visitor is signed in -- a bare <span> and a
   second <a> that need their own rules, since #side-menu a above only
   covers a real <a> and this <span> matched nothing at all, sitting flush
   against the menu's left edge with zero padding. A handful of pages
   already carry their own copy of this exact fix in a hand-written inline
   <style> block; most others load only this shared file and never got it. */
.side-menu-account {
  font: inherit;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  color: #5a6170;
  display: block;
  text-transform: none;
  letter-spacing: normal;
}

.side-menu-tier-upsell {
  font: inherit;
  display: block;
  padding: 0 1.25rem 0.65rem;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
  color: #2f5fd1 !important;
  font-weight: 700 !important;
}


/* Step 747: mobile sizing for the drawer itself. The burger is the only way
   to navigate on a phone (the header nav and the secondary bar are both
   hidden below 980px by rules further up), so the drawer has to be usable at
   that width rather than merely present: full-height, scrollable when the
   list is longer than the screen, and with touch-sized rows. */
@media (max-width: 700px) {
  #side-menu.open { width: min(320px, 88vw); }
  #side-menu ul { padding-bottom: 3rem; }
  #side-menu a { padding: 0.9rem 1.25rem; font-size: 1rem; }
}

/* Never let the drawer scroll the page behind it while it is open. */
body.menu-open { overflow: hidden; }

/* Step 747: the burger on a page that has no header of its own. Pinned so it
   is reachable from anywhere on the page rather than sitting below the fold
   at the end of the document, which is where appending to <body> puts it. */
#menu-burger.menu-burger-floating {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1100;
  margin: 0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Step 747: the row the burger shares with the logo. Only applied to a
   container this script actually put a burger into, so no page's own header
   layout is changed unless it needed one. */
.menu-burger-host {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.menu-burger-host #menu-burger { margin-left: auto; }