/* ═══════════════════════════════════════════════════
   ARTCORE WEBSYSTEMS – NAVIGATION (Right Rail)
   ═══════════════════════════════════════════════════ */

.rail{
  position:fixed;
  right:0;top:0;
  height:100vh;
  width:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  z-index:1000;
}
.rail.is-open{width:300px}

.rail-btn{
  width:90px;height:90px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  transition:all .3s ease;
}

/* Submenu (flies out left of rail) */
.submenu{
  position:fixed;
  right:120px;top:50%;
  transform:translateY(-50%) translateX(30px);
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.rail.is-open .submenu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}

.submenu-item{
  padding:16px 36px;
  font-family:'Rajdhani',sans-serif;
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.2em;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  text-align:center;
}
.submenu-item:hover{color:var(--text-heading)}

/* ─── Responsive ─── */
@media(max-width:900px){
  .rail{width:70px}
  .rail-btn{width:60px;height:60px;font-size:.6rem;border-radius:14px}
  .submenu{right:80px}
}


/* Button text: black, no underline */
.rail-btn span{
  color:#000;
  text-decoration:none;
  text-shadow:
    -1px -1px 0px rgba(255,255,255,.3),
    1px 1px 0px rgba(255,255,255,.1),
    0 0 10px rgba(0,0,0,.2);
}
a.rail-btn{text-decoration:none}

[data-theme="dark"] .rail-btn span{
  color:#a0a0c0;
  text-shadow:
    -1px -1px 0px rgba(100,100,160,.2),
    1px 1px 0px rgba(0,0,0,.4),
    0 0 10px rgba(0,0,0,.3);
}