/* ===== SHARED HEADER / NAV (single source of truth) ===== */

/* Sidebar Container */
.sidebar {
  width: 250px;
  background-color: #1A1A1D;
  color: rgb(230, 230, 230);
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  border-right: 2px solid #3c3c3f;

  /* Desktop: fixed, visible */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(0);
  transition: transform 0.3s ease;

  z-index: 8000;
}

/* LOGO */
.logo-container {
  display: flex;
  border-bottom: 1px solid #3c3c3f;
  height: 40px;
  padding: 12px 20px;
  margin-bottom: 5px;
  text-decoration: none;
  color: rgb(230, 230, 230);
  align-items: center;
}

.logo-container img {
  width: 45px;
  
}

.logo-container.sidebar-logo {
  border-bottom: 2px solid #3c3c3f;
  padding: 12px 10px;
}

.logo-text {
  text-decoration: none;
  color: rgb(230, 230, 230);
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: -10px;
}

/* Navigation Links */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 18px 25px;
  color: #ddd;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  font-size: 18px;
  cursor: pointer;
  margin-top: 5px;
  text-align: center;
}

.nav-item i {
  margin-right: 12px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
}

.nav-item:hover {
  background-color: rgba(122, 90, 248, 0.63);
  color: rgb(230, 230, 230);
}

.nav-item.active {
  background-color: rgba(122, 90, 248, 0.63);
  color: #979797;
}

/* Footer Separator */
.seperator {
  border-top: 1px solid #3c3c3f;
  padding: 10px;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 9060;
  background: none;
  border: none;
  color: rgb(230, 230, 230);
  font-size: 24px;
  cursor: pointer;
}

/* Site info bar */
.site-info {
  position: relative;
  z-index: 145;
}

.site-info-content {
  height: 71px;
  width: calc(100% - 240px);
  margin-left: 240px;
  background-color: #1A1A1D;
  border-bottom: 2px solid #3c3c3f;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: right;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 10000;
}

/* Header buttons */
.header-kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgb(255, 94, 91);
  text-decoration: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 94, 91, 0.3);
  box-shadow: 0 2px 8px rgba(255, 94, 91, 0.2);
  margin-right: 15px;
}

.header-kofi-btn:hover {
  background: #f75058;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 94, 91, 0.3);
}

.header-kofi-btn .kofi-text {
  color: #ffffff;
  font-weight: 500;
}

.header-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(122, 90, 248, 0.63);
  color: #ffffff;
  text-decoration: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  
  box-shadow: 0 2px 8px rgba(122, 90, 248, 0.3);
  margin-right: 15px;
}

.header-discord-btn:hover {
  background: rgba(122, 90, 248, 0.63) ;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.header-discord-btn i {
  font-size: 16px;
}

.header-discord-btn .discord-text {
  color: #ffffff;
  font-weight: 500;
}

/* Stars (used by header components) */
.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

/* Responsive Behavior */
@media (max-width: 1080px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .hamburger {
    display: block;
  }

  .site-info-content {
    margin-left: 0;
    width: 100%;
    left: 0;
    justify-content: left;
    border-bottom: 2px solid #3c3c3f;
    z-index: 400;
  }
}