/* Reusable Phreaking sidebar component */
:root {
  --pc-sidebar-width: clamp(220px, 24vw, 360px);
  --pc-sidebar-gap: clamp(14px, 3vw, 32px);
  --pc-sidebar-collapsed-width: 69px;
  --pc-sidebar-pad: clamp(16px, 4vw, 36px);
  --pc-sidebar-logo-width: clamp(160px, 28vw, 320px);
  --pc-sidebar-border: var(--rule, #fff);
  --pc-sidebar-bg: var(--bg, #000);
  --pc-sidebar-ink: var(--ink, #fff);
  --pc-sidebar-muted: var(--muted, #cfcfcf);
   --pc-sidebar-logo-width-mobile: clamp(220px, 72vw, 420px);
  --pc-sidebar-pad-top-mobile: 0px;   /* was var(--pc-sidebar-pad) */
  --pc-sidebar-gap-mobile: 12px;  
  --btn-top: 14px;
  --btn-left: 14px;
}

/* default: no sidebar → no left margin */
.right { margin-left: 0; }

/* once the sidebar is injected, JS adds .has-sidebar to <html> */
.has-sidebar .right{
  margin-left: calc(var(--pc-sidebar-width) + var(--pc-sidebar-gap));
}
.has-sidebar.sidebar-collapsed .right{
  margin-left: calc(var(--pc-sidebar-collapsed-width) + var(--pc-sidebar-gap));
}
#sidebarToggle.hamburger{
  position: fixed;
  top: var(--btn-top);
  left: var(--btn-left);
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule, #fff);
  background: rgba(0,0,0,.25);
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* make sure no state moves it */
.sidebar-collapsed #sidebarToggle.hamburger{
  left: var(--btn-left) !important;
  top: var(--btn-top) !important;
}

[data-sidebar] {
  display: contents;
}

.pc-sidebar-toggle,
#sidebarToggle.hamburger {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100000;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pc-sidebar-border);
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  cursor: pointer;
}


.left.pc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--pc-sidebar-width);
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pc-sidebar-pad);
  background: var(--pc-sidebar-bg);
  border-right: 1px solid var(--pc-sidebar-border);
  z-index: 10;
  transition: width 0.25s ease, padding 0.25s ease;
}

.pc-sidebar .logoImg {
  display: block;
  width: var(--pc-sidebar-logo-width);
  max-width: 100%;
  height: auto;
  margin: 0 0 var(--pc-sidebar-gap) 0;
  object-fit: contain;
}

.pc-sidebar .index {
  margin: 8px 0 var(--pc-sidebar-gap);
}

.pc-sidebar .index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pc-sidebar .index a {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  color: var(--pc-sidebar-muted);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.pc-sidebar .index a::before {
  content: "↗";
  font-size: 0.9em;
  opacity: 0.7;
  transform: translateY(-1px);
}

.pc-sidebar .index a:hover {
  color: var(--pc-sidebar-ink);
}

.pc-sidebar .index a:hover::before {
  transform: translate(2px, -1px);
}

.pc-sidebar .index a[aria-current="page"],
.pc-sidebar .index a.active {
  color: var(--pc-sidebar-ink);
}

.pc-sidebar .kicker {
  margin: 6px 0 10px 0;
  font-weight: 700;
  font-size: 16px;
}

.pc-sidebar .intro {
  margin: 0;
  color: var(--pc-sidebar-muted);
  max-width: 44ch;
  font-size: 14px;
}

/* replace your existing .right and collapsed .right blocks with this */

.right{
  /* only offset by the rail width */
  margin-left: var(--pc-sidebar-width);

  /* equal gutters on both sides */
  padding-block: var(--pc-sidebar-pad);
  padding-inline: var(--pc-sidebar-gap);
  min-width: 0;
  transition: margin-left .25s ease;
}

/* collapsed: same idea, just the slim rail width */
.sidebar-collapsed .right{
  margin-left: var(--pc-sidebar-collapsed-width);
  padding-inline: var(--pc-sidebar-gap);
}


.sidebar-collapsed .left.pc-sidebar {
  width: var(--pc-sidebar-collapsed-width);
  padding: 14px 10px;
}


.sidebar-collapsed .logoImg {
  display: none;
}

.sidebar-collapsed .index,
.sidebar-collapsed .kicker,
.sidebar-collapsed .intro {
  display: none;
}

@media (max-width:640px){
  #sidebarToggle.hamburger{ display: none !important; }
}


/* ================================
   Mobile stacking
   ================================ */
@media (max-width:640px){
    /* smaller overall padding on the stacked rail */
  :root{
    --pc-sidebar-pad: 14px;     /* was larger; reduce the top whitespace */
  }

  .left{
    padding: var(--pc-sidebar-pad) var(--pc-sidebar-pad) 16px;
    border-bottom: 1px solid var(--pc-sidebar-border);
  }

  /* make the logo bigger and reduce top margin */
  .left .logoImg{
    width: min(88vw, 420px);    /* bigger on mobile */
    margin: 4px 0 14px;         /* less space above */
  }

  /* keep the hamburger hidden on phones, as you already do */
  #sidebarToggle.hamburger{ display:none !important; }
  /* Rail becomes part of the flow */
    .left.pc-sidebar{
    /* reduce top padding only; keep side/bottom padding from your token */
    padding: var(--pc-sidebar-pad-top-mobile) var(--pc-sidebar-pad) var(--pc-sidebar-pad);
  }
  .pc-sidebar .logoImg{
    width: var(--pc-sidebar-logo-width-mobile);
    margin: 0 0 var(--pc-sidebar-gap-mobile);
    display: block;
  }
  .left.pc-sidebar{
    position: static;
    width: auto; height: auto;
    border-right: none;
    border-bottom: 1px solid var(--pc-sidebar-border);
    padding: var(--pc-sidebar-pad);
  }
  .right{
    margin-left: 0;
    padding: var(--pc-sidebar-pad);
  }
  .site-footer{
    margin-left: 0;
    padding: 20px var(--pc-sidebar-pad) 36px;
  }

  /* Prevent “collapsed” class from forcing desktop layout on phones */
  :root.sidebar-collapsed .left.pc-sidebar{ width: auto !important; padding: var(--pc-sidebar-pad) !important; }
  :root.sidebar-collapsed .right{ margin-left: 0 !important; }

  /* Optional: don't show inline brand on tiny screens */
  .right-header{ display: none !important; }
}

/* ================================
   Nice thin scrollbar (desktop)
   ================================ */
@media (hover:hover){
  .left.pc-sidebar::-webkit-scrollbar{ width: 5px; }
  .left.pc-sidebar::-webkit-scrollbar-track{ background: #0a0a0a; }
  .left.pc-sidebar::-webkit-scrollbar-thumb{ background: #222; }
  .left.pc-sidebar::-webkit-scrollbar-thumb:hover{ background: #2d2d2d; }
}

/* nudge the button right next to the rail when collapsed */
.sidebar-collapsed #sidebarToggle.hamburger{
  left: calc(var(--pc-sidebar-collapsed-width) + 8px); /* adjust 8px to taste */
}

/* --- keep the button fixed, but reset the inner bars layout --- */
#sidebarToggle.hamburger{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 100000;
  width: 40px; height: 40px;
  border: 1px solid var(--rule, #fff);
  background: rgba(0,0,0,.25);
  display: grid; place-items: center;
  cursor: pointer;
}

/* RESET anything earlier (absolute centering, custom transforms) */
#sidebarToggle.hamburger span{
  position: static;              /* undo absolute */
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink, #fff);
  margin: 3px 0;                 /* stacks the 3 lines */
  transform: none;               /* clear previous transforms */
  opacity: 1;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}

/* === Your original “X” animation when collapsed === */
:root.sidebar-collapsed #sidebarToggle.hamburger span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
:root.sidebar-collapsed #sidebarToggle.hamburger span:nth-child(2){
  opacity: 0; width: 0;
}
:root.sidebar-collapsed #sidebarToggle.hamburger span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}